不好意思，我不像其他微信官方账号那样急着发文章。每年这个时候，总会有一大波前端预测，技术框架预测等等。我写这篇文章是为了今年想踏入前端业务的人。无论你现在是徘徊在门口，还是已经半只脚踏入了这个未知的领域，都可以参考先行者的经验。
我们先来一个大致的预览:
工程
发展方向
职业环境
总结要掌握的框架/技能
前面总结:
2017的前端，规范多于残酷。前两年经过几个月的各种培训，出来随便开几万的价格，几万的新手就会被市场淘汰。
前端开发工具/编译工具逐渐成型，虽然还没有object-c、java、C+等顶级编程语言的IDE环境那么完善。工程模块化的理念已经深入人心。现在还在写原HTML CSS Javascript代码的，要么是小项目，要么是新手。
前端工作更具挑战性和多元化。
假设我今年要入WEB前端开发的坑。
这里强调web前端，是因为现在很多iOS和Android开发者都加入了大前端的名字。这主要是因为React同构的出现。他们中的许多人开始融合在一起。
先来回顾一下老同学印象中的前端:
古董:PS切图导出
新手:Adobe Dreamweaver编写代码
懒人:UltraEdit，notepad++ …
也许你可以在精通之后，随便找个能打字的东西就开始写代码，但是我遇到过一个有着多年丰富经验的前端老前辈，因为他懒的打开编辑器，写了一段代码不检查就直接提交了，然后不小心打错了字，导致整个项目几乎以烂收场。一个真正强大的人，任何时候都应该非常谨慎。请充分利用IDE的错误检查和纠正功能。
与以往不同的是，如果今年要开始web前端的开发，那么至少不用担心太多的浏览器兼容性问题，但也不是说完全不需要关心，只是因为各种编译器的出现，开发环境没有以前那么坑了。
前端面临的最严峻的国内挑战是:
向后浏览器版本迭代。我从国内某500强手机公司拿到了一部手机。当我看到它有自己的webkit内核时，它实际上是webkit在2003年的发布版本。我当时还挺震惊的，毕竟安卓内核也是4.x，我到现在都不知道他们是怎么设法把一个老浏览器内核插到一个更新的安卓系统里的，也不知道这意味着什么。当然，即使是高通soc基带，升级系统依然困难，难度更大。
安卓版微信截稿前大概是Chrome35的版本，持续了1年。据说是为了稳定。
UC，，，等。Shell浏览器比较流行，但是只调用系统的浏览器内核。不要跟我说什么优化加载速度。加载速度是由网络状态和系统硬件决定的，和你的外壳浏览器无关？所以我不知道他们用几十兆的容量写了什么，我很害怕。
总之，在桌面时代，我们面对的是癌症IE6、7、8，在移动时代，我们面对的是癌症Android。
推荐两个编辑器:
ATOM是目前最火的编辑器。
Subetext良心编辑器，虽然收费，但不强制，只是偶尔提醒一下。
vscode基础插件很完美，但是第三方插件更新很慢。
锋利的工具能做好工作。
前端框架的快速发展意味着各种插件不断快速迭代。所以Dreamweaver这种大型半封闭工具单方面是强大的，但是版本更新显然跟不上社区更新的步伐。即使我装了最新的2017版，体验了一下，我还是觉得它无法胜任这个时代。
避免无意义的错误报告。
说实话，虽然前端开发工程的概念终于普及了，这是好事，但实际上还处于初级阶段，对初学者并不友好。和xcode一样，你不能直接构建一个项目，然后配置，然后一站式写代码。虽然macOS平台在拥有CodeKit方面做得非常好，但是由于更新跟不上各种框架的发展，只能作为参考。
现在要写前端，至少要搭建本地运行环境之类的。这是一个非常非常基础的东西。请不要像以前一样双击HTML来预览你写的代码。有一个问题我在一些群里给新手回答过不下百遍:xxxxx是access-control-allow-origin不允许的，基本上99%都是直接双击HTML造成的。
既然要建立localhost，那么部署IIS，os服务器等等就很麻烦了。至少我认为是。还涉及一些付费软件之类的，成本上升很多。
得益于nodejs的开发，BrowserSync和Web Pack Dev Server可以快速部署一个项目目录，前提是你安装node。
前端不再直接写CSS，HTML，JS。
虽然这个字幕有点夸张，但这是一种趋势。浏览器运行铁三角:css html js，这些必备文件。如果现有浏览器不变，未来的工程师和奖项会越来越少直接写这些文件。而是会选择一种自己喜欢的新兴语言，通过编译工具来编写，然后编译成浏览器可以识别的铁三角。
文件，当然不排除以后浏览器可以直接运行less，scss，ts等文件，这都是有可能的。
最著名的例子就是jQuery的语法已经被ES2015甚至新时代的浏览器吸收，并且提供了内置原生支持。
CSS:
现在大部分都是通过less，scss，sass等编译成普通的css文件。，然后通过著名的postCSS插件完成各种浏览器前缀。例如:
在less文件中，我们这样写:
。foo { display:flex；justify-content:居中；伸缩方向:列；。bar { flex-grow:0；伸缩:0；弹性基础:自动；:hover { color:red；} }}
编译后的css如下所示:
。foo { display:-WebKit-box；显示:-WebKit-flex；显示器:-moz-box；显示器:-ms-flexbox；显示器:flex-webkit-box-pack:中心；-WebKit-justify-content:center；-moz-box-pack:居中；-ms-flex-pack:居中；justify-content:居中；-webkit-box-orient:垂直；-webkit-box-direction:正常；-WebKit-flex-direction:column；-moz-box-orient:垂直；-moz-box-direction:正常；-ms-flex-direction:列；伸缩方向:列；}.福。bar {-WebKit-box-flex:0；-WebKit-flex-grow:0；-moz-box-flex:0；-ms-flex阳性:0；灵活增长:0；-WebKit-flex-shrink:0；-ms-flex-negative:0；伸缩:0；-WebKit-flex-basis:auto；-ms-flex-preferred-size:auto；弹性基础:自动；}.福。酒吧:悬停{颜色:红色；}
这样的效率，这样的完成，你还要手写多久？也许它不见了。所以，无论你是对老板的工资负责，对父母的生活负责，还是对自己的健康负责，请用编译工具来编写你的css，html，js。
上面的例子是css，
有HTML的pug，HAML的js的typescript和coffeescript。但是这里我想特别说一下JS。ES6和ES7的新版本实际上是完美的，具有模块化语法和一切。然后通过著名的Babel编译器，可以编译成兼容流行浏览器的版本。虽然typescript对我来说挺好的，但我个人认为没必要增加团队学习的成本，除非你有个人爱好。
大型项目无法避开MV*项目。
从Ajax的兴起来看，requirejs新的思维模式并不是被一些特殊术语所强迫的。随着前端的发展和nodejs的成熟，前端和后端的分离势在必行，所以前端项目变得越来越复杂，一个健壮清晰的模块体系非常重要，否则你随时都会忽悠自己。
流行的MV*框架有
角度2
Vue.js 2.0
反应
反应-自然
注:MV*框架一般指MVC、MVP和MVVM。它们是什么意思？其实理解他们也没什么意义。
个人看好vue2，和它的全家桶。
这些框架不可避免地需要编译器、项目目录和节点。
Koa2，快递，我就不说了。有兴趣的会自己研究，不过以后也要学。
因此，现在就开始设计你的项目是势在必行的。不用麻烦了。当然，这里只指出方式，不做深入介绍。我们将在以后的另一篇文章中介绍如何开始设计您的项目。
前端总是有两个方向:
互动
数据方向
不黑不偏是一条很难走的路。也很稀缺。总之，选择一条自己喜欢的路，坚持走下去就好了。下面就来说说今年这两个方向的一些趋势。
16岁的东西无疑是VR。2013年左右，谷歌工程师推过一波webGL，但当时各种性能和渲染问题都没有完全解决。但不管怎样，webGL会火的。
目前来看，Three.js是能跟得上的。
还有Mozilla的A-frame。
尤其是aframe最近动作很大，都是和threejs合作开webVR。但是我建议你在这里玩webVR之前先学学webGL。
很多人不知道为什么没有启动webGL。确实一大堆3D矩阵算法刚开始会让人头晕，但是不要怕，试试blender这种开源的建模软件。threejs也有这个软件的导出插件。blen4web虽然收费，但也可以借鉴。
其他图书馆要么废弃，要么突然没了。
当然，有突出技能和财力的朋友可以试试unity3D。
提示:尽量在手机上尝试。现在的Retina桌面显示器……web GL真的不能携带，更别说web了。原生3D渲染在Retina显示屏上比较困难，但是可以设置参数为1倍渲染，只是有点难看。
对了，你觉得数据定向是交互的就不用学了？别天真了，该学的还是要学，所以我说路不好走。
毫无疑问，这是一条大家都认同的正统路线，也是一个发展得非常全面的方向。很多前辈都踏上了这条路。各种MV*框架，各种服务器端节点中间件，大前端一下子就吞掉了后端要做的大部分工作。前后开发分离势不可挡，大数据可视化还是很受欢迎的。如果一切顺利的话，这个方向的人会为了升职加薪而学习D3.js。
题外话:有个小程序叫微信。
东西，我们可以当作技能提升来研究。
Chrome PWA项目，其实有时间可以看一下，作为技能提升。
作者观点:做这么多事情还不如做添加到主屏的功能。有时候确实Chrome在中国真的不接地气。
现阶段就业环境其实很适合入门前端，扫清了微软三大毒瘤浏览器。即使移动webkit内核并不完美，你仍然可以写出很多你想要的web效果。反正老版本的内核根本不能给你带来任何收益，不如干脆放弃。因为只有最新的技术才能给你带来收益和成就感。
各种前端工具正逐渐给前端开发带来便利。虽然前期部署真的很麻烦，但是问我，你连这个耐心都没有。我真的看不出你的未来在哪里。
那么我们要面对的也是不可抗力因素。我不是在敦促你做任何事情。有的时候，一些学习资料被一些封锁给屏蔽掉了。请你自己不要放弃这一个。想办法突破封锁。我给你举个例子。假设您想用npm安装节点模块。那么我们面临的第一个问题就是一些不可抗力的封锁，运营商的QoS限制。有朋友给我推荐纱，我自己也试过，也是堵的一塌糊涂。
我认为在这里使用npm是可能的。非常感谢淘宝叉给了一份npm。它叫cnpm，他们的网站是npm.taobao.org。我自己就不说怎么用了。
但是，有时候这并不能满足我们的需求，比如命令行下的一些操作。
假设你有一个像SS一样的梯子。然后可以在命令行进行一些临时代理设置:MacOS终端:
导出http _ proxy = " http://127 . 0 . 0 . 1:1087 "导出https _ proxy = " http://127 . 0 . 0 . 1:1087 "
Windows命令行:
set http _ proxy = http://127 . 0 . 0 . 1:1080 set https _ proxy = http://127 . 0 . 0 . 1:1080
那你可以高高兴兴的$ npmxxxx …或者ATOM的升级包也可以。
题外话:如果ATOM升级包不顺利，用这个方法然后命令行
apm安装[软件包名称]
总结:掌握的框架/技能
将部署nodejs环境。
工具
巴别塔
吞咽
插件postCSS
CSS:Less，scss
HTML:pug，haml
Javascript: ES6，ES7
web组件
Vue.js / React
对，还有热修复，代表作品有:阿里热修复技术。据说，当你饿了，腾讯也出来了。我没有关注，但我个人认为这个苹果不会坐视不管。毕竟你随时可以在服务器端修改app来绕过审核。我觉得你可以学学这种异端的招数但是不要当真。
其他:
**Angular 2是你剪辑的？**Angular 3开发团队跟我说，你要像ng1到ng 2一样，重新从头学起。所以…你玩得开心就好。真的，我的项目连升级都不能顺利。我真的不能和你玩了。
JQuery快不行了？你会死的！？兄弟，坚持住。不会的，就算死了也会融入原生支援。
* *那约定好的互动方向呢？上面说的都是数据方向。**AE+bodymovin学习，
Svg是不可或缺的，
素描是一件艺术品，
WebGL众说纷纭，但是从2016年二三季度开始，各大科技巨头都在进行技术积累，你懂的。但是我真的不坚持。
然后我学习了数据。
无论你朝哪个方向走，请记住
永远不要忘记你为什么开始
