前端最佳实践整理
2017-11-23 本文已影响79人
luax
这里整理了下个人认为的当下前端最佳实践,这也算是个人在前端领域的沉淀。
这些最佳实践会不定期整理,一些工具可能会被逐渐替换掉。
代码库:
- git: https://www.gitbook.com/book/bingohuang/progit2/details
毫无意外的打败了所有版本库控制工具,不愧是大师作品。 - git-flow: https://ihower.tw/blog/archives/5140
实践中git-flow流程已经融入血液,设计相当科学。
基础工具
- node.js: https://nodejs.org/zh-cn/
node.js让前端开发有了革命性改变。 - npm: https://www.npmjs.com/
npm暂时有不可替代的地位,但是目前比较大的问题是其解释性语法灵活性,有比较大的问题,因此有不少工具想替换他。个人认为,NPM可以单纯作为包管理工具,其他职责可以交给其他的工程化工具。网络上,可以使用taobao源解决(taobao确实在技术领域做了不少贡献)。 yarn: https://yarnpkg.com/en/
个人认为只是解决中国用户网络上的问题,设计上还算优雅,但是新的NPM 发布后,Yarn的优势也不是特别明显,有可能会在以后放弃使用。
工程化
- webpack: https://doc.webpack-china.org/
webpack已经快成为前端标配了,但是设计上也不是没有什么问题。插件语法过于封闭,插件之间职责交叉比较多,过多集成会引起混乱。工程化,个人认为,首先要区分状态,编译时,开发时,调试时,测试时,生产环境时,然后将这几个状态合理关联起来。在规范性上来讲,可以设计标准模板,提供标准接口,让所有开放框架安装规范集成。
目前开发中面临的比较大的问题是,编译时间过长,执行了过多重复的编译,导致开发效率变低。就拿Vue来说,一次构建差不多要消耗1分钟的时间,这个时长显然是个瓶颈。
前端框架:
- vue.js:https://cn.vuejs.org/index.html
- vuex:https://vuex.vuejs.org/
- vue-router:https://router.vuejs.org/zh-cn/
vue全家桶,设计上比reactjs简化了不少。但是设计上不算特别优雅,模板语法比较固化。vue2感觉被reactjs带到沟里了,vuex这些职责个人认为直接集成进vue即可,几乎没有哪个应用不需要全局状态。dispatch->commit逻辑明显过于繁琐,不必要的复杂度。
APP 混合架构
- cordova 无疑是目前 Android/iOS/Windows/OSX跨平台APP,开发最顺畅的。内置了浏览器内核,可以告别兼容性的痛苦。H5框架可以搭配上面的Vue。配合动态更新,可以让开发更快。React Native还是算了吧。
控件库
- element:http://element-cn.eleme.io/
还是花了点心思写了,但是还有很长的路要走。可以作为开发的辅助工具。
css框架
- less http://lesscss.org/
自从有了sass,less,写css有了革命性改变。但是个人认为,这本应该就是css职责,html/css发展到现在,一直把开发者当成敌人,不知道这场战争什么时候能结束。我相信基于dom解析的浏览器将很快被替代,届时富客户端开发将很简单,操作系统也将被弱化。
工具类
- moment: http://momentjs.com/docs/
日期时间处理,js的Date对象简直无法忍受,有了这个会轻松很多 - twix: http://isaaccambron.com/twix.js/docs.html
这个是对moment的补充 - lodash: https://lodash.com
js是世界上最优雅的语言,但是在基础api设计上偏弱,后期的演进过程中又被强类型语言带到了沟里。好在一直保持着优雅的特性,因此,有个好用的第三方类库,能很好弥补基础API上的设计缺陷。lodash设计上虽然不是最优秀的,但是好在都还算精炼,能解决80%的基础需求。
报表
- highcharts: https://www.highcharts.com/
相当棒,数据结构设计上比较合适,弹性比较大,方法API设计上不太够用。
mock
- facker.js https://github.com/marak/Faker.js/
设计上,非常优雅。本土化做的不太行,api接口设计上,有很严重的问题。