##引言

工作大概9年了，就算不算上在学校里的写网页的经历，其实从事与Web前端有关的开发已经8年。这8年我自己也随着Web开发技术的革新，也在不停地更新这方面的知识体系。最近在想，是时候对目前所掌握的Web开发技术进行一个小结了。于是就有了这个系列的开始，这个系列开篇会概览性地说一下Web开发几个重要的工具或技术，后面则会在以demo示例的方式讲一讲在真实项目中是如何实践它们的。

很多年前，那个时候写前端页面真的很简单，基本上抓起一个编辑器就可以开始写html了，当时页面真的很简单，就是一堆html标签，有个别事件处理，动画效果，几行javascript代码就搞定了。但事实上随着现在Web端开发技术的发展，Web前端页面变得越来越复杂了，甚至还有人十分推崇One Page Application，即在一个页面搞定所有的用户界面交互。后端服务则变得越来越简单了，服务端渲染技术用的人越来越少了，后端基本上就成了提供restful api的server了。

编译工具链

面对Web前端越来越复杂的页面逻辑，以前在页面里随意写javascript代码的方式必须更新了，javascript代码必须被更合理地管理，于是产生了不少前端代码模块依赖系统，比较出名的是cmd, amd, umd。javascript代码被合理地拆分后，面临一个问题，文件过多，而用户浏览网页时不可能等待下载如此多的脚本文件下载，所以必须将拆分后的脚本文件进行合并，合并之后最好还能不影响调试，如果是生产环境最好还能对脚本文件去重、压缩等一系统优化。经过几个项目的实践，我最终还是选择了插件众多，功能强大的webpack作为Web前端代码的编译工具。

界面库

很多年前，我做Web开发也谈不上界面库，一度认为html标准的那些标签就是界面库，抓起来就用。后来发现有时候一些html标签及其附带的javascript代码、css代码频繁重复，于是就想起是应该封装部分组件了，当时Web开发社区里也出现了不少jquery插件，基本上很多功能很复杂的组件都可以封装到一个jquery插件里去，同时也出现了像extjs那样很成体系的前端框架。后来又出现了bootstrap这种前端css框架，写样式更简单了。但一直觉得前端的技术不成体系，一个项目做下来，前端无非是jquery+n个jquery插件+bootstrap样式框架+其它杂七杂八的业务js代码。多个项目做下来，最大的收获就是积累了不少jquery插件的用法，还有了解了不少浏览器的避坑方案。直到发现了React，才发现界面库可以如此简单高效，而且不像extjs那样有超高的约束性。

前端分层框架

我是从java Web开发过来的，很早就知道架构分层的概念，后端很早就有了Controller + Service + Model分层的概念，但前端分层却是从“One Page Application”开始流行才开始，渐渐地MVVM成了前端分层的标配。这方面我倒不是特关心，当然目前与React配合最好的还是redux了。

与后端通讯的技术

最常用的当时是直接发GET, POST请求，稍高级一点采用AJAX方式发GET, POST请求，但如果你能用起来websocket的话，我建议还是可以大量地采用websocket，实时双工是很大的优势。