大家都在说，前端的变化太快了。每当前端有新的进展，同行都会调侃，别更新了，学不动了。变化太快，快在哪里，那些发生了变化，我从自己说短不长的三年前端开发，来反映这些年的变化。
虽然只有刚刚三年开发经验，但是因为有外包的经验，历经过大大小小的项目。这些项目中既有使用最新的技术，也有四五年前一路维护下来的旧的技术。下面从几个方面来一一来探讨。

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这们子语言，到今天ES7、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（服务端渲染），来解决客户端渲染产生的白屏以及业务依赖SEO等问题。

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

2019年写的一篇博客，备份到此