我所经历的前端开发变化

         你们都在说，前端的变化太快了。每当前端有新的进展，同行都会调侃，别更新了，学不动了。变化太快，快在哪里，那些发生了变化，我从本身说短不长的三年前端开发，来反映这些年的变化。

        虽然只有刚刚三年开发经验，可是由于有外包的经验，历通过大大小小的项目。这些项目中既有使用最新的技术，也有四五年前一路维护下来的旧的技术。下面从几个方面来一一来探讨。

1 语言变化

首先HTML，其实我不太知道HTML5之前的版本是什么样的，由于从我进入这个领域，就是在H5最火热的时候，只知道HTML5会多一些新的标签，好比video、canvas，同时也有一些新的存储方案好比sessionstorge.如今的浏览器基本都支持这些变化。

其次是CSS，变化固然是CSS3,增长了一些新的动画属性如transition和布局属性如flex等，能够搭配HTML5作出一些炫酷的页面效果。我知道的变化仅仅如此，由于我没有经历过CSS2以及更老的时期。

对于HTML和CSS的这些变化，浏览器都有一个支持的过程，其中不得不提IE系列，入行的时候，项目还要求兼容IE7，因此我从网上找了一系列的IE hack语法，可是如今我都忘记怎么用了，就连IE都好长时间没有打开过了，最近打开微软的浏览器是试用换了Chrome内核的Edge。看看，三年之间，微软都变芯了。

最重要是是js的变化，2015年ES6发布了，那时候我还没入编程，还不知道有JavaScript这们子语言，到今天ES七、ES8都发布了。固然大部分浏览器还不能彻底支持这些新的语法，还要依赖babel来转译为ES5。

说到ES6，还要提一下coffeescript，在某个老项目接触到过，发现会有大量的语法，好比箭头函数，跟ES6很相似。在ES6发布前，coffeescript好像还挺火，因此技术选型选择了它。固然ES6发布之后，你们都切换到这个“正统”的标准上，coffeescrpt也落寞了。

js在服务器端版本的nodejs，这几年也在大量进入到实际的项目上，而不只仅做为前端的一些工具使用。就我所经历和了解的状况，nodejs会在大型公司如阿里和创业型公司落地较多。大公司都有主力后端语言，nodejs并无能力去撬动好比java、php等的地位，可是能够帮助前端拓展业务边界，好比做为BFF层，既能够解放后端，又能赋能前端。小的创业公司可能人员和技术都很灵活，更青睐于先后端语言的统一，这样nodejs就颇有自然的竞争力。

还要说下Typescript,可能当下很是火，我并无用过，可是据说许多前端都推荐项目上使用，而且好像越大的项目效果越好，好比vscode这个开源项目够大吧，都已经所有用Typescript开发了。

2. 代码组织结构的变化

代码组织结构实际上是跟项目大小相关的，比方说一个活动页，可能最传统的html、css、js就彻底能知足，若是非要加入webpack等反而画蛇添足。

同时也跟js模块化的发展而变化，ES6发布前，js并无原生提供模块化的。

传统的开发，就单纯的前端三剑客就足够了，只要在html页面引入css和js，同时要保证js的引入顺序，否则可能会报错。并且多人开发，常常会发生命名冲突的事情，因此就有了函数封装、对象封装、IIFE闭包这种基础的模块封装。

再后来，随着nodejs推出的commonjs模块规范，在浏览器端也有AMD和CMD这样的模块工具出来。同时npm包愈来愈流行，如今前端应该都会npm install 吧。

等到ES6，开始有原生支持的模块化语法。固然如今浏览器尚未彻底支持。

3. 框架（库）的变化

不能否认，Jquery的时代一去不复返。but 我所在的公司还有好老项目是在用jquery开发的，由于前面公司用的都是vue or react，用Jquery的时候很是至少，最多用到它的ajax方法。因此如今天天跟jquery还有zepote打交道，都不得不查文档，同时能深入体会到这种手动一个一个改变dom的麻烦 、乱，还有不可维护性。

Jquery以后，还有backbone(好像这么写）...以及Angular等一系列MVC框架的出现，大大提升前端的开发效率，固然我入行时候，他们都不怎么火了，好奇，我也没在项目上碰到他们。好吧，这里就短短一提，以表尊敬。

再而后 ,React出现了，靠着jsx以及virtual dom高性能的表现，迅速跻身框架一哥。去年在项目上开始用React，大概有一年了。

当我2016年开始接触前端，学的是最新的Vue，对我这种新手很是友好，接触到的也是官方一手文档。也是靠着Vue找打的工做。可是老实说，我跟喜欢React。

目前来讲，我今年作的项目中，既有Jquery（固然都是老项目），也有React，还有Vue。

4. 工具的变化

如今用的大概都是webpack，由于你若是用Vue或React，基本上就不得不用webpack。

之前多是grunt or gulp，他们都只是流程工具，可是webpack确实模块打包工具。

5. 开发方式的变化

无非开发-联调-测试-上线万年不变的流程。可是具体到开发-联调这个阶段，其实变化也发生很大变化了。由于做为前端，除了纯静态页面，基本上都要依赖后端。简单来讲，就是先后端分离的变化。下面作个比较。

先后端不分离时代，举其中一种例子：

前端项目是做为后端项目的一部分，好比一个java后端项目，开发初期，我须要单起一个分支，装好java环境，装上intelj IDEA,装上gradle，而后启动这个java项目，前端开发html 、css、js，跟后端商定接口格式，而后造一些假数据，来完成基本流程。等后端开发完成后，合并代码，在用真的接口返回的数据进行联调。上线也不用前端操做，直接随后端项目上线。

这种开发方式很是痛苦，由于你并不熟悉后端这一套工具，常常服务启动不了或报错，一搞搞半天。其实这还不算最痛苦的，曾经有个项目，后端是Php，前端要开发samrtPHP模块，还必须登陆开发机上，在linux环境下，用vim来写代码，是否是要了命了。

先后端分离时代：

如今基本上都是先后端分离，先后端只经过接口联系。这就很爽了，前端只须要前端这一套环境，nodejs、webpack等等，只要接口文档肯定了，想怎么开发怎么开发。

其中，更进一层，前端经过nodejs开创了BFF（backend for frontend）层，链接口都接管了，后端只须要提供基础的微服务。不再用发愁跟后端要求返回这个这个这个字段。

更进一步，如今前端开始经过nodejs，开始ssr（服务端渲染），来解决客户端渲染产生的白屏等问题。

变化是无时无刻的，总结这些变化，才能更好的把握当下和预测将来的趋势。