思考当下前端技术栈

前端开发岗位的工作职责发展至今(2019)已和过去很不一样,不再单纯是根据UI图开发出静态页面而已,可以说无论是工作内容还是技术栈都有了很大的变化。

我觉得可以归纳为两个方面的变化,一是工作内容变“宽”了,除了根据UI设计图开发出静态页面,还需要完成数据绑定工作,也就是包含与后台交互的工作,原先这部分工作是由后端人员来做的。二是前端人员除了掌握HTML、CSS和JavaScript基本功之外,还需要掌握一些偏后端的知识,比如说编译、打包和发布等。

我们从一位前端开发现在完成一个项目的工作流说起,看看一个项目从无到有他需要做哪些工作,在这个过程中会用到哪些技术。

源起

前端人员最初是间接接触需求,由产品方发起,后端开发参与评审,项目经理排期。后端人员在输出技术方案和开发计划时,会找前端人员沟通页面部分的工作,同样也给出一个计划。这个过程中前端开发是被动参与进去的,可能说是哪里需要就往哪里搬,好似万金油。

不管怎么讲来了活总得干,下面开始进行技术选型工作。

技术路线

现在有两个大的开发方向选择,一是传统多页面,二是单页面应用。前者大家肯定不会陌生,每个页面处理一个功能,比如列表页面、新增页面和修改页面,这些页面是由完全独立的文件来渲染的。而后者是基于在单一文件上所做的类多页面渲染,也就是说整个项目前端部署只有一个HTML文件。

最近一、两年似乎单页面应用开发成为主流,确实大多数系统都可以很方便的转换成这种方式实现,不过我个人觉得这两种方式是互补的,不存在谁消灭谁的问题,各自有优势而已。

项目构建

其实不管哪种方式,都是可以使用构建工具的,是的你并没有听说,传统页面也是可以的。可能有人会觉得js代码并不需要编译浏览器就可以识别,为什么还需要编译呢?其实前端的构建工作包含的内容很多,所谓的构建是一个宽泛的概念。

  1. 多文件合并,比如css文件合并成一个大文件,多份js合并成一个大的js文件
  2. 图片合并,为了减少图片传输数量提高传输效率,而把非常多的小图片合并成一个大图片,在css中通过图片偏移来使用。
  3. 资源文件(css、js和图片)压缩
  4. 资源文件添加指纹,防止新版本发布时浏览器仍然使用之前的缓存文件
  5. 大文件拆分以实现按需要加载,就是用户没有浏览器的内容应该不需要加载,因为他不一定去访问,可以大概率提高网页渲染效率。
  6. 如果采用typescript来编写那么就需要编译成js,这个js才能被浏览器所理解。

以上这些其实在目前来看都是比较常见的,市面上也提供一了些工作来做这些工作。比如webpack、gulp、grunt和browserify,国产也有一些这样的工具。

开发

传统页面更多是基于jQuery来开发,相信这个大家都很熟悉了,当然用其它第三方库的也有。单页面这块主要是VUE、React、AngularJS、Angular、Ember、Knockout、Polymer和Riot等。

对于这些框架的介绍可以参考VUE官方所作的框架对比分析,对方是站在一个比较中肯的角度来分析彼此之间的优缺点。

单页面应用采用TypeScript语法的会比较多,尤其是React只能使用TS语法来开发。TypeScript是微软定义的一套类后端的面向对象语言,引入了类、接口这些概念。这同时带来了两个问题,一是对于前端开发人员的技术要求有提高,二是TS的文件肯定不能被浏览器支持,必须经过编译。其实这个编译就是翻译的过程,比如你在TS文件中写一个类,最终还是要翻译成function,否则浏览器根本不知道怎么来执行。

测试

大幅减少一遍又一遍的人肉测试强度,前端也可以和后端一样采用单元测试,黑盒测试是十分必要的,特别是对于关键逻辑路径。如果哪天需要进行功能迭代,但又要确保没有发动不相干的地方,单元测试用例可以帮你确认这一点。

主要有facebook开源的jestmocha等。测试的思路的相通的,即执行某一段代码,预期一个结果,然后和实际结果进行对比。

发布

代码开发完经由构建工具编译后,会在指定目录(比如dist)下生成一堆文件,这些文件可以被浏览器直接理解故可直接访问。

有两种主要的发布方式,一是由后端来控制路由,所有请求经由web服务程序,但不用后端程序进行动态解析。二是直接纯静态页面部署,然后调用后端接口进行通信,不过要注意处理跨域问题,这个可以交给后端来设置。

不管前端是否独立部署,都可以很容易的整合到自动发布工作流中去,大的团队通常都有一套CI/CD机制,可以更优雅的处理代码编译、发布过程。

小结

从上面可以看到如今前端开发工作和后端开发差不多的流程,相关理论也互通,这其实对前端开发人员提出了更高的要求。后端开发人员也要开始思考,如果不能全栈未来是否还有竞争力?