前端开发的十个任务

如果你身处互联网行业，那你很可能听说过前端，接触过前端开发，或者说你就是一个前端工程师，由于浏览器的普及以及浏览器技术的发展，网站的前端开发正在变得越来越重要。在这里我想谈谈我总结出来的前端开发需要负责的十个任务。

我从2011年开始接触前端，2012年毕业后在百度工作了三年，最近几年专注于React生态系统，也涉猎了一些后端和运维的东西。通过一系列项目和工具的实践，我把前端开发涉及到的工作归结为以下十点：

一、定义目录结构及开发和部署流程

目录结构，主要涉及源文件、打包后文件、样式文件、测试文件、工具文件、公用文件的位置，以及模块的组织方式，比如一个模块的样式文件是应该跟该模块的其他文件放在一起还是跟其他模块的样式放在一起。还有一些细节比如文件夹的命名方式，是所有都按复数命名，components, assets, views，还是都按单数命名。对于开发和部署流程，目前主要的工具是webpack，开发流程主要是指如何启动本地服务器实时看到开发中的页面效果，目前主要是基于webpack-dev-server。部署流程主要是将文件打包，准备好上线。如果你或你的团队已经有一些经验，可以按照自己的经验和习惯来定义目录结构及开发和部署流程，如果没有，可以参考github上一些例子，也可以使用一些工具，比如creat-react-app和vue-cli，它们会根据你的选择给出webpack配置并自动创建出符合最佳实践的目录结构，同时提供开发和部署命令。

二、配置路由

通过浏览器地址的变化来控制页面内容的切换是网站与用户交互的基础，它的主要作用是让网站的各部分内容可以独立地被访问，让用户可以在我们的网站中使用浏览器的前进后退按钮，并保证用户刷新页面时仍会停留在当前内容。对于路由的配置和使用目前的主流方式仍然是传统的静态定义方式，也就是在上层统一定义路径和相应的模块，当然，对于多层次的嵌套路由就需要树形的配置。最新的第四版React-router颠覆了传统，它是一个完全动态的路由配置方式，路由的定义被完全组件化了，刚开始我觉得很不适应，但逐渐发现这种方式十分灵活有效，从某种程度上让整个路由思想更加得合理。

三、开发视图层

基础的视图层就是html，单页面应用还需要把数据融合进去，也就是用模板。模板的形式从传统的php, python等开始并没有发生太大变化，vue的模板形式也是一样，React的Jsx从某种程度上打破了传统，模板和js合为一体，让数据的融入变得更加灵活。

四、管理样式

html和css是分不开的，有了页面结构，我们还得用css让它按照设计的样子呈现出来。样式管理涉及到的东西不少，对于css，传统的方式是统一写样式类控制全局，首先涉及到预处理器，也就是less/sass；其次需要确定类的命名规则，比如BEM, SMACSS等；剩下的工作还有公共类的复用，处理响应式布局，规划栅格系统，管理Icon和图片等等。与传统方式不同，新的样式思想比如css in js、css module和css scope，它们主要是想解决样式的作用域问题，不知道大家觉得这些新的方式是否已经成熟。

五、管理组件

我们这里说的组件主要是指公共组件，比如按钮和弹窗等，业界有很多第三方组件库和样式库，比如Bootstrap, Kendo UI, Material UI等等，Bootstrap前些年很火最近逐渐降温，我理解也是跟React等库的出现让前端组件的开发变得更加简单有关。个人认为，引入第三方组件或样式库意味着学习成本和维护成本，对于一个长期的项目来说这显得并不明智，从头建立自己的样式和组件系统并不难，而自己建立的系统维护起来会容易得多。但如果你只是想快速开发成型，而库的样式风格正符合你的需求，那第三方组件库也许会是比较好的选择。

六、绑定用户输入

用户的输入是前端复杂性的根源，正是用户的操作引起了反向数据流动以及相应的页面变化。对于初步的输入响应，传统的方式是找到节点并绑定事件，现在的方法基本上都是在视图层的模板上声明事件以及相应的处理方法，这里涉及到一些bind和传递参数的问题，但总体来说并不复杂。

七、与服务器通信

单页面系统的前端与服务器的通信主要是指使用XMLHttpRequest的Ajax技术，业界可用的工具很多，比如新的浏览器原生标准Fetch API，可以通过polyfill支持IE，还有axios, SuperAgent, request等，总体来说主要是语法上的区别。当然，关于通信还有很多细节，比如解决跨域，熟悉http状态码等等。除了Ajax技术，我们还经常需要处理js/css/html文件的缓存，传递jwt(json web token)让服务器验证用户身份，甚至还涉及到第三方授权方案的选择。还有最近开始流行的GraphQL，它对于数据的获取方式给出了一些新的规则。另外，有时候为了便于前后端分离开发，我们会需要在本地对API请求进行Mock。除了http，我们还可能用到web socket来与一些服务进行双向通信，常见的工具有Socket.IO和html5的WebSocket，语法都是广播和收听的形式。

八、管理事件和数据

这是近些年前端技术发展的重点，也是前端技术的难点，经过Backbone, Angular.js, Knockout等对前端MVC的不断探索，我们终于有了React的Redux和Mobx, Vue的Vuex和Angular的Rxjs等，目前基本达成了共识，也就是数据统一管理，事件单向流动的模式。个人认为前端框架花了很长时间才进化到当前状态的主要原因是一直没有很好地解决跨模块的数据管理问题，我们一直在模块内部做文章，MVC和MVVM也主要是针对同一个模块来说的。后来，React定义了component state, jsx, component life cycle和component system，这些几乎完美地解决了模块内部的问题，再后来，把React内部数据单向流动的模型应用在整个系统上，就有了当前的架构。目前很多人对于Redux还有质疑，个人认为主要是因为没有复杂实际项目的经验很难认识到Redux的Action和Immutable等规则的重要性。

九、处理模块间通信

传统的模块间通信可以通过一些publish/subscribe方式来实现，对于当前的前端技术，模块之间的通信基本用上面的事件和公共数据管理方式就可以解决了，但还是有一些技术可以辅助使用。比如react的context以及父子模块之间通过属性的事件和数据传递，但个人认为只有在不影响整体数据管理并且使用方便的情况下才应该使用这些技术。

十、测试

前端页面的测试对于一个系统的成熟和稳定十分重要，但是由于前端的繁琐和变化多端，很多项目常常不能很好地做好前端的测试覆盖。对于前端测试有两个极端，一种认为它事倍功半，干脆直接荒废掉，另一种则认为它至关重要，要求所有细节全部覆盖。个人认为做前端测试需要先问自己想要保证什么功能不出问题，然后再根据成本决定测试的程度。常见的前端测试有两种，一是单元测试，针对模块或者是工具方法、功能点的测试，这个相对简单，用库的测试辅助工具和assert工具就可以做起来，二是整体自动化测试，也就是模拟用户使用对系统整体的测试，这个据我所知大都是基于selenium的，我比较熟悉的是webdriver.io，用js写代码，语法也比较清晰，整体自动化测试的问题在于需要让模拟工具找到页面上的节点，如果系统还在频繁开发阶段，这种自动化测试会经常因为页面的改变而需要被调整。

总结这十个方面主要是提供一个看待前端的角度，他们可以用来检查自己对于前端技术掌握得是否全面，也可以通过观察在各个方面的工作难度来对比不同前端解决方案的优劣。这十个方面主要是针对单页面系统的前端开发，如果是传统的展示型网站，前面几点的工作会更多一些，对第7/8/9点涉及得会比较少。作为一个前端开发者，为了完成好这十个任务，还需要首先具备两方面基础知识：html/css/js基础知识以及浏览器基础知识，这些可以后续单独展开来介绍。这些内容是我目前的一些理解，权且抛砖引玉，希望大家多多批评指正。

React和Vue是目前前端比较流行的库，后续我想分别用这两种技术开发同一个应用，从上述十个方面出发，用具体代码对React+Redux和Vue+Vuex及其周边解决方案进行对比，希望通过这些对比让大家更细致和全面地了解到两种技术的区别。已经发布了一个chat活动，地址如下，https://gitbook.cn/gitchat/activity/5b62342ba120e74da6654cbf，希望大家多多支持。