发发牢骚,谈谈我心目中的新一代架构

国庆后的这几天,是我至少近一年半来,心里最不踏实,最没有成就感的一段时间。项目进度始终不理想,虽然主要责任不在我们前端,后端的接口不断在变,总是在返工,心力憔悴。我虽然没有直接负责开发某个模块,但是经常在前后端之间游走,以及引导同事熟悉项目的开发。这段时间自己少有时间可以了解新技术,即使有时间,也因为脑子一团浆糊无法静下心来。难道是因为自己的不进步而感到焦虑么。国庆期间花了大把时间看的Webpack/React,某个文档只剩下一个尾巴,至今还未结束掉,状态甚是不好。白天上班时,几乎每天都是『在自己电脑前待不到几分钟就被叫走,各种奔波,开会』这样的状态。这样的工作状态会让人觉得非常空虚,没有安全感。觉得是时候应该调整下策略,使自己的工作变得更有价值了。

再说说我心目中的下一代前端架构吧。

在我看来,前端开发大致经历了这么几个阶段:

  1. 『原始社会』,一切都是用原生javascript开发
  2. PrototypeJS/Mootools/jQuery等类库封装DOM操作,用这些类库解决几乎所有前端问题,主页面后端渲染
  3. 基于简化DOM操作的类库,封装各种UI组件,主页面后端渲染
  4. 框架(如Angular,React)封装绝大部分DOM操作,并封装各类UI组件,主页面前端渲染,并诞生了前端路由,形成了SPA,甚至前后端同构应用
    虽然对Angular有了一定经验,对其高效率的开发赞叹不已,但对于大型应用Angular似乎还是难以驾驭。

当我知晓有React这个框架的时候,我正在学习Angular,当时并没有对它关注太多,随着业界多方对之的宣扬,逐渐增加了对它的了解,去阅读了官方文档,并试着敲下若干demo,别有一番体验。再之后,了解了FLUX思想,在此之前我甚至都没有『数据流向』这个概念,只知道双向数据绑定真的很棒,随着应用变的越来越复杂,双向数据绑定变得难以掌控。

随着近段时间对React + Flux的了解,心中逐渐有了一个模糊的轮廓:

  1. React:View渲染
  2. react-router:react的路由组件
  3. react-redux:react的Flux实现
  4. redux-devtools:redux配套的开发者工具,使调试更加容易
  5. react-hot-module-replacement:react配套的热模块替换,更新组件代码并保留state,提升开发体验与开发效率
  6. ES6:从未发现ES6如此美妙,解决了很多ES5的痛点,尤其是模块系统和对象/函数的语法糖,更是向未来标准看齐;通过babel转换为ES5
  7. CSS模块化:这个优先级靠后
  8. Eslint:用于代码规范检测,保证代码质量,统一代码风格
  9. 前端单元测试,UI测试,尝试TDD
  10. Webpack:
    a) 打包javascript,css,图片,各种loader编译(包括babel,css预处理/后处理,图片压缩/base64转换/多倍图)
    b) 与npm结合,实现一行命令切换dev,prod环境
    c) 合理输出sourceMapping
    d) 可持续构建生成最优html,javascript,css,并解决浏览器缓存问题(自动添加文件hash后缀)
    以上是我近段时间总结的一系列需要实现的需求,网上有一些案例,实现了小部分需求,很多细节还需要继续推敲。