前端之路总结。[转]

笔者从jQuery时代一路走来，经历了以BootStrap为表明的基于jQuery的插件式框架与CSS框架的兴起，到后面以Angular 1为表明的MVVM框架，以及到如今以React为表明的组件式框架的兴起。从最初的认为前端就是切页面，加上一些交互特效，到后面造成一个完整的webapp，整体的变革上，笔者觉得有如下几点：

• 移动优先与响应式开发

• 前端组件化与工程化的变革

• 从直接操做Dom节点转向以状态/数据流为中心

笔者在本文中的叙事方式是按照本身的认知过程，夹杂了大量我的主观的感觉，看看就好，不必定要当真，毕竟我菜。梳理来讲，有如下几条线：

• 交互角度的从PC端为中心到Mobile First

• 架构角度的从以DOM为中心到MVVM/MVP到以数据/状态为驱动。

• 工程角度的从随意化到模块化到组件化。

• 工具角度的从人工到Grunt/Gulp到Webpack/Browserify。

React 并无提供不少复杂的概念与繁琐的API，而是以最少化为目标，专一于提供清晰简洁而抽象的视图层解决方案，同时对于复杂的应用场景提供了灵活的扩展方案，典型的譬如根据不一样的应用需求引入MobX/Redux这样的状态管理工具。React在保证较好的扩展性、对于进阶研究学习所须要的基础知识完备度以及整个应用分层可测试性方面更胜一筹。不过不少人对React的意见在于其陡峭的学习曲线与较高的上手门槛，特别是JSX以及大量的ES6语法的引入使得不少的传统的习惯了jQuery语法的前端开发者感受学习成本可能会大于开发成本。

Vue则是典型的所谓渐进式库，便可以按需渐进地引入各类依赖，学习相关地语法知识。比较直观的感觉是咱们能够在项目初期直接从CDN中下载Vue库，使用熟悉的脚本方式插入到HTML中，而后直接在script标签中使用Vue来渲染数据。随着时间的推移与项目复杂度的增长，咱们能够逐步引入路由、状态管理、HTTP请求抽象以及能够在最后引入总体打包工具。这种渐进式的特色容许咱们能够根据项目的复杂度而自由搭配不一样的解决方案，譬如在典型的活动页中，使用Vue可以兼具开发速度与高性能的优点。不过这种自由也是有利有弊，所谓磨刀不误砍材工，React相对较严格的规范对团队内部的代码样式风格的统1、代码质量保障等会有很好的加成。

一言蔽之，笔者我的以为Vue会更容易被纯粹的前端开发者的接受，毕竟从直接以HTML布局与jQuery进行数据操做切换到指令式的支持双向数据绑定的Vue代价会更小一点，特别是对现有代码库的改造需求更少，重构代价更低。而React及其相对严格的规范可能会更容易被后端转来的开发者接受，可能在初学的时候会被一大堆概念弄混，可是熟练以后这种严谨的组件类与成员变量/方法的操做会更顺手一点。便如Dan Abramov所述，Facebook推出React的初衷是为了可以在他们数以百计的跨平台子产品持续的迭代中保证组件的一致性与可复用性。

先后端分离与全栈:技术与人

咱们常说的先后端分离会包含如下两个层面：

• 将本来由服务端负责的数据渲染工做交由前端进行，而且规定前端与服务端之间只能经过标准化协议进行通讯。

• 组织架构上的分离，由早期的服务端开发人员顺手去写个界面转变为完整的前端团队构建工程化的前端架构。

先后端分离本质上是前端与后端适用不一样的技术选型与项目架构，不过两者不少思想上也是能够融会贯通，譬如不管是响应式编程仍是函数式编程等等思想在先后端皆有体现。而全栈则不管从技术仍是组织架构的划分上彷佛又回到了按照需求分割的状态。不过呢，咱们必需要面对现实，很大程度的工程师并无能力作到全栈，这一点不在于具体的代码技术，而是对于先后端各自的理解，对于系统业务逻辑的理解。若是咱们分配给一个完整的业务块，同时，那么最终获得的是无数个碎片化相互独立的系统。

何谓工程化

所谓工程化，便是面向某个产品需求的技术架构与项目组织，工程化的根本目标便是以尽量快的速度实现可信赖的产品。尽量短的时间包括开发速度、部署速度与重构速度，而可信赖又在于产品的可测试性、可变性以及Bug的重现与定位。

• 开发速度：开发速度是最为直观、明显的工程化衡量指标，也是其余部门与程序员、程序员之间的核心矛盾。绝大部分优秀的工程化方案首要解决的就是开发速度，不过笔者一直也会强调一句话，磨刀不误砍材工，咱们在追寻局部速度最快的同时不能忽略总体最优，初期单纯的追求速度而带来的技术负债会为之后阶段形成不可弥补的损害。

• 部署速度：笔者在平常工做中，最长对测试或者产品经理说的一句话就是，我本地改好了，尚未推送到线上测试环境呢。在DevOps概念深刻人心，各类CI工具流行的今天，自动化编译与部署帮咱们省去了不少的麻烦。可是部署速度仍然是不可忽视的重要衡量指标，特别是以NPM为表明的难以捉摸的包管理工具与不知道何时会抽个风的服务器都会对咱们的编译部署过程形成很大的威胁，每每项目依赖数目的增多、结构划分的混乱也会加大部署速度的不可控性。

• 重构速度：听产品经理说咱们的需求又要变了，听技术Leader说最近又出了新的技术栈，甩如今的十万八千里。

• 可测试性：如今不少团队都会提倡测试驱动开发，这对于提高代码质量有很是重要的意义。而工程方案的选项也会对代码的可测试性形成很大的影响，可能没有没法测试的代码，可是咱们要尽可能减小代码的测试代价，鼓励程序员可以更加积极地主动地写测试代码。

• 可变性：程序员说：这个需求无法改啊！

• Bug的重现与定位：没有不出Bug的程序，特别是在初期需求不明确的状况下，Bug的出现是必然而没法避免的，优秀的工程化方案应该考虑如何能更快速地辅助程序员定位Bug。

当咱们探究工程化的具体实现方案时，在技术架构上，咱们会关注于：

• 功能的模块化与界面的组件化

• 统一的开发规范与代码样式风格，可以在遵循SRP单一职责原则的前提下以最少的代码实现所须要的功能，即保证合理的关注点分离。

• 代码的可测试性

• 方便共享的代码库与依赖管理工具

• 持续集成与部署

• 项目的线上质量保障

前端的工程化需求

当咱们落地到前端时，笔者在历年的实践中感觉到如下几个突出的问题：

• 先后端业务逻辑衔接：在先后端分离的状况下，先后端是各成体系与团队，那么先后端的沟通也就成了项目开发中的主要矛盾之一。前端在开发的时候每每是根据界面来划分模块，命名变量，然后端是习惯根据抽象的业务逻辑来划分模块，根据数据库定义来命名变量。最简单而是最多见的问题譬如两者可能对于赞成义的变量命名不一样，而且考虑到业务需求的常常变动，后台接口也会发生频繁变更。此时就须要前端可以创建专门的接口层对上屏蔽这种变化，保证界面层的稳定性。

• 多业务系统的组件复用：当咱们面临新的开发需求，或者具备多个业务系统时，咱们但愿可以尽可能复用已有代码，不只是为了提升开发效率，仍是为了可以保证公司内部应用风格的一致性。

• 多平台适配与代码复用：在移动化浪潮面前，咱们的应用不只须要考虑到PC端的支持，还须要考虑微信小程序、微信内H五、WAP、ReactNative、Weex、Cordova等等平台内的支持。这里咱们但愿可以尽可能的复用代码来保证开发速度与重构速度，这里须要强调的是，笔者以为移动端和PC端自己是不一样的设计风格，笔者不赞同过多的考虑所谓的响应式开发来复用界面组件，更多的应该是着眼于逻辑代码的复用，虽然这样不可避免的会影响效率。鱼与熊掌，不可兼得，这一点须要因地制宜，也是不能一律而论。

关于跨界、全栈、公司定岗

常规公司里，会配备好前端开发、iOS、Android、服务端开发这四种技术团队，实际作项目时，几支团队是分工合做，只在必要的地方经过接口配合。在PC时代，不考虑C/S结构软件，只存在前端和服务端。前端和服务端配合时，主要是经过前端提供模板，后端负责数据持久化和逻辑处理来合做的，双方惟一可能起争执的地方就是模板引擎由谁来套，这个模板引擎指的是服务端模板引擎，大部分公司里，这个模板是由服务端来套的。虽然也有AJAX请求，服务端吐JSON数据的地方，但整体来讲并非那么多这种接口，渲染也只是局部渲染，通常到不了使用JavaScript模板引擎的地步。应该说，这个时期先后分离的需求并不高，而SEO的需求又很重，因此先后端两支团队也算泾渭分明井水不犯河水。

 

关于前端的核心竞争力

若是说服务端同窗进击全栈是试试水，Native进击全栈是试试水，那前端里不少同窗进击全栈就是在拿生命在玩全栈了。

服务端玩玩Node，不喜欢就算了，玩玩Angular和Bootstrap也就在后台开开荤，前台各位视觉设计，UAT还原检查，各类动效，用Angular和Bootstrap能把本身玩死，然后台基本上一直是服务端的自留地，不少作前端开发的同窗甚至没开发事后台界面吧？Django甚至都自动给你生成了。后端的核心竞争力在哪儿？在添删改查，在数据库设计，在性能优化，在shell脚本，在分布式，在网络安全。玩玩票不影响本身的大本营。

一样能够一门语言先后台通吃的Android开发，你看看他们对全栈是否是像前端圈那样热情。从DNA来看，对Java语言可比JavaScript和Node更亲吧？再往远了说，看看C++客户端的同窗对服务端有没有那么大热情？

仍是那句话，好学是好的，前提是本身的大本营要守住，一专多长。你得先专注门，再想着横向扩展其余领域知识。前端开发的核心竞争力是什么？2016年年中，我在微博上说，前端的核心竞争力在于一些HTML标签、CSS，JavaScript的熟练度上。这些东西是前端本身领域的知识，好比Form2.0、Websocket、离线缓存、Webworker、Border-image、Canvas。一些同窗回复说“核心竞争力竟然只是些API，这有什么难度？”此言差矣。或许这样认为的，以跨界而来的“全栈”工程师居多。有些知识确实只是API，好比JSON.stringify和window.getComputedStyle之类，看了就会用，用起来也没有什么实践方面的坑。但并不全是，好比Form2.0但是有一系列新东西，新标签如output，新类型如number，新属性如pattern，新的CSS伪类如:valid，须要融合在一块儿考虑，造成一个Form2.0的解决方案。再好比Canvas2d，Canvas提供了像素级API，能够直接存取颜色，能够把像素导出成base64的字符串，提供了DOM没有能力，但同时也彻底没有了DOM的便利，好比Canvas上画的某个按钮该如何进行事件监听呢？好比不能使用CSS了，该如何实现:hover伪类，又如何让布局实现自适应性呢？什么样的状况下该使用Canvas，什么状况下该使用DOM，若是有某个功能必须依赖Canvas实现，好比在网页上作个美图秀秀，将产品的哪些元素放到Canvas上，哪些元素放到DOM上，二者又如何合做呢？换成纯Canvas解决方案会不会更适合呢？前端的知识不一样于服务端，大部分的工做量都在图形界面上，而图形界面是件很细的活，工做量和技术含量全在细节。我常常对非前端的同窗举一个例子——你知道垂直居中有几种方法，不一样方法的优缺点吗？有些跨界而来的同窗，以及部分前端圈的新同窗都不觉得然，嘲笑说这叫“回字的四种写法”。其实，前端在实战时，垂直居中有多种方法，基本上没有方法是无反作用的，要看状况，不一样的状况要选用不一样的方式才能实现最好的自适应性。感兴趣的同窗能够去搜搜看前端的垂直居中方法整理。看完以后，就能明白前端CSS的精彩和玄妙。

我批评不少同窗基础不扎实就开始乱折腾，不是说多学习很差，而是说大本营都未扎牢，如何实打实地高效完成平常工做？ES六、CoffeeScript、React、Webpack等，都解决不了你在实战时遇到的具体挑战。这全是些外围功夫，并不是核心。先把核心学好，外围功夫何时学均可以，又不难，你说对吧？

那么什么是核心呢？HTML、CSS和JavaScript。我指的是原生的这些东西，不用上来就跟我说React的JavaScriptx语法重定义了HTML，Sass改良了CSS，TypeScript给JavaScript带来了静态语言的语法，这些都是外围，今天是React，明天能够换成Angular，今天是Sass明天能够换成Less，今天是TypeScript明天能够是CoffeeScript，这些不重要。就像jQuery鼎盛时期，不少同窗不学原生JavaScript，上来直接就上手jQuery同样，走不远。要理解jQuery为何这么封装，其实在底层发生了什么，用原生会遇到什么问题，直接用原生能解决吗？把原生的技巧学熟了，这些外围的东西上手很快，并且什么状况下用什么，内心会很是有底。

过去，前端领域并不像现在这样浮躁，不少人都知道基础的重要性，也知道基础是什么。但当跨界的“全栈”进入前端圈之后，不少浅显的道理都被有意无心地搅昏了。速成、革命、淘汰、全栈成了主旋律和政治正确。但是，就像投资界里爱说的一句话同样：“风起来了，在风口上猪都会飞。但是等风停了，还在飞的是老鹰，而猪会 
摔死。”风会停吗？固然。该潜心修炼还得修炼，基本功不扎实之前，别糊里糊涂跟风浪费本身时间，缺什么要恶补。

今天说得很热闹的HTML5实际上是从HTML4增强而来，二者不是替换关系，而是“强化”，就像ES6之于ES3同样。不少新入行的同窗但愿能够速成，而后从哪儿热门往哪儿入手，这其实不对，最好的学习方法是从HTML4学起，尽管在实践时有不少HTML4时代的技巧，在HTML5时代有了更好的替换方案，但也有不少HTML4时代能够一直 
用过来的技巧。让我担忧的是，HTML4时代的好书，到了HTML5时代已经再也不出版了，而HTML5相关的书籍基本上只讲了HTML5相较于HTML4的增量部分。而HTML4时代的书和相关技巧就这么失传了。除了书，博客和所谓社区也是同样，如今已经再也不讨论之前的一些精华技巧了，有些技巧确实是淘汰掉了没有什么价值，好比IE6的hack技术，但也有些技术是很棒的CSS技巧，好比CSS滑动门依然适用。我推荐一下几本书和学习步骤，给有心弥补基本功的同窗：

• 《CSS网站布局实录》——国产CSS2入门书，有些技巧已经淘汰，但仍不失为最好的CSS入门教程。
• 《无懈可击的Web设计》——讲CSS应用技巧的书，国内外粉丝别多，说是开创了CSS技巧流派也不为过。
• 《DOM JavaScript编程艺术——JavaScript最好的入门书，没有之一，这本书是帮助你了解如何将DOM、CSS和JavaScript链接起来的一本书。严格来讲，后端Node根本不算JavaScript，JavaScript是基于ES语法的一门脱水语言，如何实现的胶水？这本书将带你入门。
• 《JavaScript高级程序设计》 ——JavaScript必读的一本精典，读完以后对JavaScript的理解和实 
  践会上升很是大的一个台阶。
• 《编写高质量代码——Web前端开发修炼之道》 —— 举贤不避亲，这本书是我写的。推荐的缘由是，这本书重点讲团队合做的注意事项。虽然一些具体的技巧，在今天已然过期，好比IE6的hack，但在团队合做方面的思考，直到今天我也没看到其余书在讲，这些思想没有其余书可替代。
• 《HTML5和CSS3权威指南》——目前为止，我读过的HTML5方面最好的一本原创书。配合实例进行API讲解，很是详细具体。连HTML5都提供了哪些底层的东西都不知道，又该如何去用好它呢？在我看来，是学习HTML5的必读书。
• 《响应式Web设计：HTML5和CSS3实战》——做者是《无懈可击的Web设计》忠实粉丝，因此很天然地，这也是本CSS技巧流派的书，侧重点在CSS3的实践技巧上，让人大开眼界。
• 《JavaScript设计模式》——JavaScript在实战时的高级技巧。

前端很棒的书有不少，这只是几本我以为最不应错过的书而已。从HTML4一路到HTML5和移动时代，一路上有了不少新技巧，也淘汰了一些旧技巧。当下的学习氛围虽然史无前例的强烈，但急功近利和盲目无头绪现象也很严重。在我看来，不少人不肯意作苦活累活扎扎实实打基本功，一句“那些都淘汰了”就拒绝了全部的优秀遗产，但愿花少许时间看看流行时髦的新工具新框架，而后就迅速挤身行业顶端，这想法既偷懒又幼稚。什么是外围功夫，什么是真核心技巧，什么是珍珠什么是盒子要分得清，自欺欺人并非什么明智的想法。你能够几天几个星期就掌握的东西，别人也能够，就算人家比你笨，多花一倍的时间也能跟上你吧？要真的拉开和其余人的距离，只有下苦功这一途。

这些话，恐怕没有几位前端老人愿意说。当我问他们，拼命强调新风向，而再也不提基本功，形成知识断层，形成这些同窗心高气傲但完成不了工做怎么办时，一些老人的回答是“他们本身不重视基本功，怪我喽”。若是你基本功很扎实了，想学什么外围功夫均可以，虽然多学总不是坏事，只是在决定投入使用时，还须要看团队状况再慎重决定，团队合做要考虑的事情有不少，要有责任感，别只顾着本身当Geek。

1：咱们可能在任何状况下都须要声明式的渲染功能，并但愿尽量避免手动操做，或者说是可变的命令式操做，但愿尽量地让DOM的更新操做是自动的，状态变化的时候它就应该自动更新到正确的状态；

2：咱们须要组件系统，将一个大型的界面切分红一个一个更小的可控单元；

3：客户端路由——这是针对单页应用而言，不作就不须要，若是须要作单页应用，那么就须要有一个URL对应到一个应用的状态，就须要有路由解决方案；

4：大规模的状态管理——当应用简单的时候，可能一个很基础的状态和界面映射能够解决问题，可是当应用变得很大，涉及多人协做的时候，就会涉及多个组件之间的共享、多个组件须要去改动同一份状态，以及如何使得这样大规模应用依然可以高效运行，这就涉及大规模状态管理的问题，固然也涉及到可维护性，

5：还有构建工具。如今，若是放眼前端的将来，当HTTP2普及后，可能会带来构建工具的一次革命。但就目前而言，尤为是在中国的网络环境下，打包和工程构建依然是很是重要且不可避免的一个环节。