作者：Jay（沪江开发工程师）本文为原创文章，转载请注明作者及出处。抱歉，我没有像其他公众号那样急于发文。每年这个时候总有一大波前端预测，技术框架预测什么。我写这篇文章的对象是今年想要踏入前端行业的人。无论你是在门口徘徊，还是已经半步踏入这个未知领域，都可以参考先行者的经验。先来个总体预习：项目工程发展方向的专业环境总结和首先要掌握的框架/技能总结：2017前端与其说残酷，不如说更加规范。前两年的各种培训，几个月后就出来了，开价几万、几万的新手都会被市场淘汰。前端开发工具/编译工具逐渐成型。它们虽然不如object-c、java、C+等顶级编程语言那么完备，但拥有完备的IDE环境。工程模块化的理念已经深入人心。写HTMLCSSJavascript原代码的，要么是小项目，要么是新手。前端工作更具挑战性，方向更多样化。假设我今年想入WEB前端开发的坑。主要是因为React同构的出现，很多开始混在一起。首先我们来回顾一下老同学印象中的前端：老古董：PS裁剪导出新手小白：AdobeDreamweaver懒惰写代码：UltraEdit、notepad++……也许等你熟练之后，随便找个东西会打字，开始写Code，但是遇到了一个有多年丰富经验的前端老手。他因为懒惰打开了编辑器，手写了一段代码，没有检查就直接提交了，然后不小心打错了字符，导致整个项目差点失败。真正厉害的人，任何时候都应该非常谨慎。请善用IDE的查错纠错功能。和以往不同的是，今年如果你想入手web前端开发（以下简称前端），那么至少你不需要折腾太多的浏览器兼容性问题，但是你不需要一点都不care，只是开发环境不如以前了。坑很多，因为各种编译器的出现。国内前端面临的最严峻的挑战是：浏览器版本的后向迭代。我从中国500强手机公司之一得到了一部手机。当我看到内置的webkit内核时，是2003年的Releases版webkit，当时还挺震惊的。毕竟Android内核也是4.x的。怎么把这么老的浏览器内核插入到比较新的Android系统中，不知道是什么意思。当然，就算是高通soc基带，升级系统也很难，更别说其他soc基带了。安卓版微信截止前大概是Chrome35（最新的是Chrome55），一年没变，据说是为了稳定。UC、百度等shell浏览器流行，但只调用系统的浏览器内核。不要告诉我什么是针对加载速度优化的。加载速度取决于网络状况和系统硬件。浏览器有半毛钱关系吗？所以不知道他们那几十兆写的是什么，想想就毛骨悚然。总之，在桌面时代，我们面对的是IE6、7、8的毒瘤。在移动时代，我们面临的是Android的毒瘤（仅限中国）。推荐三个编辑器：ATOM是目前最流行的编辑器Sublimetext良心编辑器虽然是收费的，但不是强制性的，只是偶尔提醒一下。VSCode基础插件完美但是第三方插件更新慢（@Jay,-. - 现在插件多了好吧~）干得好做事，必先利其器。前端框架的快速发展意味着各种插件不断快速迭代，所以Dreamweaver这个半封闭的大型工具一方面强大，但版本更新显然跟不上节奏社区更新，即使我安装了最新的我也试过2017版的2017版，我也觉得不适合这个时代。项目工程避免了无意义的错误。说实话，前端开发工程的概念虽然终于开始流行，是好事，但实际上还是初级阶段，对初学者并不友好。还是不能像xcode那样直接创建工程，然后配置，然后一口气写代码。虽然macOS平台上的CodeKit已经做得很好，但是由于更新跟不上各种框架的开发速度，所以，仅供参考。现在要写前端，至少要搭建一个本地运行环境（localhost）之类的。这是一件非常非常基本的事情。请不要像以前那样双击HTML来预览您编写的代码。有一个问题我在一些群里给新手回答了一百多遍：XXXXXisnotallowedbyAccess-Control-Allow-Origin，基本上99%是直接双击html导致的（剩下的1%是http交叉-域等）。由于必须建立localhost，部署IIS、osserver等非常麻烦，至少我是这么认为的。而且还涉及到一些付费软件之类的，成本增加了不少。得益于nodejs的发展，现在Browsersync和webpackdevserver可以快速部署一个项目目录，前提是你已经安装了node。前端不再直接写CSS、HTML、JS。这个副标题虽然有些夸张，但也是一种趋势。浏览器运行铁三角：csshtmljs，这些必备的文件，如果现有的浏览器都保持不变，那么以后的工程师直接写这些文件的收获会越来越少，转而使用编译工具去选一个喜欢的吧用新兴语言编写，然后编译成浏览器可以识别的铁三角文件。当然也有可能以后浏览器可以直接运行less，scss，ts等文件。最著名的例子就是jQuery的语法被ES2015乃至新时代的浏览器所吸收并内置了原生支持（之前甚至有报道称浏览器应该内置jQuery）CSS：现在大部分通过less、scss、sass等编译成一个普通的css文件，然后通过著名的postCSS插件完成各种浏览器前缀。举个例子：在less文件中我们这样写：.foo{display:flex;证明内容：居中；弹性方向：列；.bar{flex-grow:0;伸缩收缩：0；弹性基础：自动；&:hover{颜色：红色；}}}编译出来的css是这样的：.foo{display:-webkit-box;显示：-webkit-flex；显示：-moz-box；显示：-ms-flexbox；显示：弹性；-webkit-box-pack：中心；-webkit-justify-content：居中；-moz-box-pack：中心；-ms-flex-pack：中心；证明内容：居中；-webkit-box-orient：垂直；-webkit-box-方向：正常；-webkit-flex-方向：列；-moz-box-orient：垂直；-moz-box-方向：正常；-ms-flex-方向：列；flex-direction:column;}.foo.bar{-webkit-box-flex:0;-webkit-flex-grow:0;-moz-box-flex:0;-ms-flex-positive:0;弹性增长：0；-webkit-flex-收缩：0；-ms-flex-negative:0;伸缩收缩：0；-webkit-flex-基础：自动；-ms-flex-preferred-size:auto;flex-basis:auto;}.foo.bar:hover{color:red;}?这个效率，这个Completion，需要手写多长时间？也许它仍然不见了。所以，不管是因为你对老板的薪水负责，你的父母对你的生活负责，还是你对自己的身体负责，请使用编译工具编写你的css、html、js。上面以css为例，HTML用的是pug（以前叫jade），typescript用的是HAML，JS用的是coffeeScript，不过这里我想特别说一下js，ES6、ES7的新版本其实已经很完善了，syntaxmodule你可以转换一切，然后使用著名的Babel编译器将其编译成兼容流行浏览器的版本。虽然我觉得typescript挺好的，但是我个人觉得没必要增加团队的学习成本，除非你是个人爱好。大型项目无法避免从Ajax开始的MV*工程的兴起，以及requirejs的新兴思维模式。一些特殊条款不是强制性的。随着前端的发展和nodejs的成熟，前后端分离势在必行，前端项目也变得越来越复杂，一个健壮清晰的模块体系非常重要，否则你随时都会自欺欺人。流行的MV*框架包括Angular2Vue.js2.0ReactReact-Native。注：MV*框架泛指MVC、MVP、MVVM。个人看好vue2，它的框架如全家桶，都免不了需要编译器、项目目录、nodejs。Koa2、Express就不说了。有兴趣的可以自行研究，但也是后话，所以现在开始工程化工程势在必行。别担心。当然，这里只是指明了方向，并没有做深入的介绍。我将在以后的另一篇文章中介绍如何开始工程化您的项目。发展方向前端一直有两个方向：交互方向不黑不偏，交互方向是一条非常难走的路。也很欠缺。总之，选择自己喜欢的路并坚持下去。下面就来谈谈今年这两个方向的一些趋势。2016年最火爆的交互物无疑是VR。2013年前后，谷歌工程师推了一波webGL，但当时各种性能和渲染问题都没有完全解决。（其实我觉得还没有完结）不过webGL无论如何也一定会火的。目前可以继续跟进的是Three.js和Mozilla开发的A-frame。尤其是aframe最近做的比较多，都是配合threejs做起webVR。但我还是建议大家先学webGL再玩webVR。很多人不知道为什么还没有入手webGL。确实很多3D矩阵算法定点渲染一开始会让人头晕，但是不要怕，试试blender吧，开源的建模软件，threejs也有这个软件的导出插件。blen4web虽然是收费的，但也可以作为参考。其他图书馆要么被废弃，要么突然没有内容。当然，技术和财力出众的朋友可以试试unity3DTips:试试在手机上试试吧，现在的Retina桌面显示...webGL真的搞不定，更别说web了，原生3D渲染都难在Retina显示器上，但您可以将参数设置为1x渲染，但它很难看。对了，你是不是觉得如果交互了，就不需要学面向数据的东西了？别天真了，该学的还是要学的，所以我说路不好走。毫无疑问，这是大家认同的正统路线，也是发展得非常全面的一个方向。这条路已经被许多前辈铺好了。各种MV*框架，各种服务器端节点中间件，大前端一下子吞掉了后端应该做的大部分工作。前后端分离的发展势不可挡，大数据可视化依然大行其道。如果一切顺利的话，这个方向的人学习D3.js对升职加薪都有好处。题外话：有个东西叫微信小程序，可以作为技能提升研究一下。其实ChromePWA项目如果有空也可以作为技能提升。笔者个人意见：做这么多事不如把Addtohomescreen这个功能做好。有时候真的觉得Chrome在中国真的不接地气。专业环境现在的就业环境其实很适合入门前端，清掉微软三大毒瘤浏览器（淘宝率先不支持IE8，干的不错），即使webkit内核上移动端还不完善，你还是可以写出很多你想要的网页效果，反正老版本内核的clientobject部分根本不能给你带来任何收益，还是不如放弃吧。因为只有最新的技术才能给你带来收益和成就感。各种前端工具也逐渐为前端开发带来了便利。虽然前期部署真的很麻烦，但我问你，如果你连这个耐心都没有，我真的看不出你的未来在哪里。那么我们要面对的也是不可抗力因素。我不是在教唆你在这里做什么。有时一些学习资料会被误屏蔽。请不要就此放弃，想办法突破封锁。让我举个例子，假设你想使用npm安装节点模块。那么我们面临的第一个问题是运营商的某些不可抗力封锁和QoS限制。一些朋友向我推荐了yarn。自己试了一下，也是被堵的一塌糊涂。在这里我觉得npm可以曲线使用，非常感谢淘宝fork一份npm。它叫cnpm，他们的网址是npm.taobao.org怎么用我就不说了。但是，有时候这并不能满足我们的需求，比如命令行下的一些操作。假设你有一个像SS这样的梯子。然后可以在命令行做一些临时代理设置：MacOS终端（假设你的梯子端口是1087）：exporthttp_proxy="http://127.0.0.1:1087"exporthttps_proxy="http://127.0.0.1:1087"Windows命令行（再次假设你的端口如下）：sethttp_proxy=http://127.0.0.1:1080sethttps_proxy=http://127.0.0.1:1080然后愉快地$npmxxxxx...或者ATOM的升级包也可以这样做。题外话：如果ATOM的升级包不顺利，用这个方法再命令行apminstall[packagename]总结：掌握框架/技能一定能部署nodejs环境webpackbabelgulppostCSS插件CSS:Less,scssHTML:pug,haml(可选)Javascript:ES6,ES7WebComponents(可选)Vue.js/React(反正掌握一个MV*框架是必要的)对了，还有hotfix，即将流行起来。代表作品有：阿里热修复技术，据说饿了么，腾讯也Out了。没注意，不过个人觉得这个苹果不会坐视不管。毕竟你可以随时修改服务器端的APP来绕过审核。我觉得这种邪门邪术可以学但不能当真。其他：Angular2被小编吃掉了？Angular4开发团队告诉我，你必须重新从头开始学习，就像从ng1切换到ng2一样。所以……你玩得开心就好，真的，我的项目连升级都做不了，真的没法陪你玩。jQuery正在消亡？我就要死了！？兄弟，等一下。它不会死，即使死了，它也会被集成到原生支持中。如果你想从jQuery过渡到native，大叔推荐你学习，别怕：http://youmightnotneedjquery.comhttps://github.com/oneuijs/哟...约定好的交互方向呢？你上面说的都是面向数据的。AE+bodymovin(https://github.com/bodymovin/...)来学习，svg不可或缺，sketch是神器，webGL众说纷纭，但是从2016年二三季度开始，各大科技巨头纷纷从事技术积累，你懂的。但真的不要勉强。然后就是从数据中学习。iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当网发售。>>沪江Web前端上海团队招聘【Web前端架构师】，请将简历发送至：zhouyao@hujiang.com<
