托孙总的福,有了这次参会机会。
今天主要听了几场前端技术的分享,对我来说信息量颇大,收益匪浅。
新知识(only 4 me)
落地的前端工程化
可实施的前端工程开发流程
- 本地开发(developing)
- 静态代码检查(linting)JSLint/ESLint
- 单元测试(testing)Mocha
- 合并进入主干(merging)
- 自动构建(building)
- 自动发布(publishing)
前端开源框架&工具
- React Facebook出品的最流行的前端框架
- Ant Design 蚂蚁金服前端框架,基于 React 框架,开发和服务于企业级后台产品
- JSLint JavaScript 代码检测工具
- webpack 前端资源加载/打包工具
- Gulp 基于流的自动化构建工具
- Vue.js
- Element 饿了么前端框架,基于Vue.js, 适用于后台管理系统
主题分享
搜狗前端工程化探索之路(段振兴)
网上介绍前后分离和前端工程化的资料很多,搜狗的前端工程化探索之路,把重要的里程碑按照“痛点->改进->总结”进行讲解,技术点讲得很细,并且结合了自身的业务场景,是一个不错的学习素材。
石器时代的痛点
- 本地调试不支持
- 静态资源文件无组织
- 复用性、可维护性差
- 工具化工具无
第一次改进
- 本地可调试 SpringMVC + Velocity模板
- 目录规范+模块化开发 JS模块化 CSS模块化(@import SASS)
- 自动化构建+一键发布 构建工具前后对比(构建峰值 & 工具代码量)
- web安全加固
第二次改进
- Webpack + Gulp
- React + Vue.js + ES7/8
总结
- React、Vue.js、ES6/7/8、模块化、组件化、基础库
- 实时开发辅助工具:wenke-dev
- 前端监控(性能、异常等)
经验
- 尽可能建设比较完备的前端基础设施
- 善用提升效率的工具和方法
- 与时俱进,稳步推进团队技术升级
微信小程序云端解决方案探索(刘家鸣)
看这个架势,微信小程序以后真要一统江湖了
在业务驱动的公司内推动技术变革——途牛前端nodejs推进实践(禹立彬)
禹立彬分享了他带前端团队的心得。首先,技术得为市场服务,推动技术变革,必须得有实打实的效果出来;
然后就是上node.js的实践分享了,主要是求稳,版本就用4.2, web framework就用express;
最后是一些他的思考:人效大于性能;三个重要问题(是啥来着?);风险控制;耐心
等ppt
更了不起的 Node.js(桑世龙)
i5ting讲得内容很多,npm,异步流程控制(promise + aysnc),然后Koa 2.x,前后端分离等。
node.js 6没接触过,以后有时间看看。
Dva: React 应用框架在蚂蚁金服的实践(陈成)
https://github.com/dvajs/dva-knowledgemap
令人印象深刻的项目生态: 内核(项目自身)、工具和插件、文档及培训,以及围绕Dva的整体前端技术栈。
基于 Vue 2.0 的 Element 组件库实践心得(曾海平)
找到这么个链接:饿了么基于Vue 2.0的通用组件库开发之路 ,感觉和会上讲得差不多,看完做了个笔记。
目标
Element是一套为开发后台系统所写的支撑框架,提升了后台系统界面的可用性和一致性。
套用此框架,即使没有设计师参与,也能让产品或开发设计出一套好用的后台系统。
设计阶段
- 方向: 因为业务变化太快,调整方向为基础组件
- 过程: 确定组件的功能和交互后,然后进行视觉封装(包括制定颜色、字体等各类规范),并搭建主体网站
- 二次迭代: 根据初版评审意见进行调整
开发目的
- 后台系统缺乏一套完整的基础组件库
- Vue 在公司内部是一个比较年轻的技术栈,希望做一些基础设施的建设
- 提升公司在技术社区的影响力
开发流程
如何与设计师进行配合
如何管理多组件项目
如何解决自定义主题
采用BEM方式管理类名,同时尽可能将属性值用变量代替,维护一份变量文件便于直接修改变量就能定制一套主题
提供命令行工具指导用户快速自定义一套主题
如何提供一份直观的文档
如何在文档里运行组件示例?
webpack loader: 将 Markdown 转成 Vue 文件
多语言官网如何配置和管理
最终技术栈
- 用 ES2015 和 CSS4 作开发语言
- Lerna 负责管理组件
- 用 Karma 搭配 Mocha 和 Chai 等工具在 Travis CI 里做持续集成测试
- 用 Markdown 结合 Vue 写文档
问题分析
分享在开发的过程中遇到的问题及解决方法
如何应对父子组件间事件派发机制的改变
是否需要为用户代理自定义组件上的原生事件
最后我们决定从易用性的角度出发,让用户在使用 Button 组件时可以监听原生 click 事件,因为对于桌面端来说,Button 在绝大部分场景下都是需要监听点击事件的
版本迭代的过程中,若 API 发生变化,如何友好地提示用户
如何跟踪问题
我们选择使用 Tower 来配合 GitHub 进行 issue 的追踪和处理
FAQ
有没有模板可以参考?
初学要做前端,应该先从哪开始入手学习?
freecodecamp 和 codecademy 都是很好的入门途径