听说2017你想写前端？

转自：http://mp.weixin.qq.com/s/8vz1aIeVpRHmU2E2-7zzsQ

不好意思，没有像其他公众号一样赶着发文章，每年到这个时候总有一大波什么今年前端预测，技术框架预测什么的。我这次写这篇文针对的对象，是想在今年踏入前端这行的人们，不管你现在是徘徊在门口，还是已经半只脚踏入这片未知领域，都可以参考一下先行者的经验。

先来个大概预览：

• 项目工程化

• 发展方向

• 职业环境

• 总结要掌握的框架／技能

---

小结放在前：

• 2017的前端与其说更残酷，不如说更规范化，前两年各种培训了几个月就出来随口开价上万,几万的新手将被市场淘汰。

• 前端开发工具／编译工具 逐渐成型，虽然比不上object-c, java, C+ 等排名靠前编程语言有完善的IDE环境，但是。工程化模块化的概念开始深入人心，这年头还编写原始HTML CSS Javascript 代码的，要么就是小项目，要么就是新手。

• 前端的工作更具有挑战性，方向更多样化

---

假设我今年要入WEB前端开发的坑

这里强调web前端是因为，现在很多iOS，安卓开发加入大前端的这个称呼。主要是因为React同构的出现吧，很多开始混合在一起了。

首先我们来回顾一下我们老同学印象中的前端：

• 老古董： PS切图导出

• 新手小白:  Adobe Dreamweaver 写代码

• 懒人: UltraEdit, notepad++ …

或许你精通之后随便找个能敲字的东西就可以开始写代码，但是我遇到过一个有着多年丰富经验的前端老前辈，就是因为懒惰打开编辑器，手写了一段代码也没有检查，就直接提交，然后不小心敲错字符，导致整个项目差点烂尾的事情。真正厉害的人，任何时候都应该是非常谨慎的。 请善用IDE的查错纠错功能。

跟以往不同，如果你今年要开始web前端的开发（下面都简称前端），那么至少你是不用去折腾太多的浏览器兼容，但并不是完全不需要去关心，只是开发环境不像以前那么多坑，因为各种编译器的出现。

前端面对的国内最严峻的挑战是：

落后的浏览器版本迭代。
我拿到过国内某500强手机企业的手机，我一看自带webkit内核，居然是2003 的 Releases 版本 webkit. 我当时是比较震惊的，毕竟安卓内核也是 4.x, 我至今不知道他们是如何做到把一个那么旧的浏览器内核塞进一个比较新的安卓系统的，也不知道这么干是几个意思，当然即使是高通soc基带，要升级一下系统也是登天还难，更别说其它soc基带。

安卓版微信在截稿之前是大概Chrome35的版本（最新是Chrome55） 并且持续了1年不变，据说是为了稳定。

UC，百度，等套壳浏览器大行其道，但它们调用的只是系统的浏览器内核，你别跟我说优化了加载速度什么东西，加载速度是网络状态、系统硬件决定的，跟你一个套壳浏览器有半毛钱关系？所以我不知道它们几十兆容量到底写了什么东西，细思极恐。

总之，在桌面时代，我们面对的是IE6，7，8这个毒瘤， 在移动时代我们面对的是安卓这个毒瘤（限国内）

推荐两款编辑器:

• ATOM 目前最热门的编辑器

• Sublime text 良心编辑器，虽然是收费的，但不强制，偶尔提醒而已

• vscode 基础插件完善但第三方插件更新缓慢

工欲善其事，必先利其器。

前端框架的高速发展，意味着各种插件的不断快速迭代，那么Dreamweaver这种半封闭式的大型工具，虽然单方面很强大，但明显版本更新跟不上社区更新的脚步，即使我装了最新的2017版本体验了一下，我也觉得它无法胜任这个时代了

项目工程化

避免毫无意义的报错

老实说，虽然前端开发工程化的概念终于开始普及，是一件好事，但事实上还是属于初级阶段，对入门新手并不友好。还不能像xcode一样，直接建立一个工程，然后配置，然后就一条龙写代码搞定，虽然 macOS 平台有个CodeKit已经做得非常好了，但由于更新力度跟不上各种框架发展的速度，所以，也只是能参考。

现在写前端，你起码要建一个本地运行环境（localhost） 之类的。这是非常非常基础的东西，请不要 再像以前那样，双击HTML去预览你写的代码，有个问题我在一些群里回答新手不止上百次： XXXXX  is not allowed by Access-Control-Allow-Origin , 基本上99% 就是直接双击HTML导致的（剩下1%是http跨域之类的）

既然都要建立 localhost 了那么部署 IIS , os server, 之类的，都是非常麻烦的一件事至少我觉得是。 并且还涉及到一些付费软件之类的，成本上升不少。

得益于nodejs的发展，现在 Browsersync , webpack dev server都能快速的部署起一个工程目录，前提是你装了node。

前端不再直接编写CSS，HTML，JS

虽然这个小标题写得有点夸张，但是一个趋势。
浏览器运行铁三角：css html js，这些必须文件，如果现有浏览器保持不变的话，那么以后的工程师，奖越来越少直接编写这些文件， 转而通过 编译工具，选择一款自己喜爱的新兴语言去编写，然后编译成浏览器可以认识的铁三角文件，当然不排除以后浏览器可以直接运行 less、scss、ts 等文件，这都是有可能的。

最有名的例子就是 jQuery 的语法被ES2015 甚至被新时代的浏览器吸收并内置原生支持了（以前甚至传出浏览器要内置jQuery）

CSS：

现在大部分都是通过 less、scss、sass 等去编译成普通css文件
然后通过著名的postCSS插件，补全各种浏览器前缀。
举个例子：

在less文件我们这么写：

.foo {
    display: flex;
    justify-content: center;
    flex-direction: column;
    .bar {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        &:hover {
            color:red;
        }
    }
}

编译出来的css是这样：

.foo {
  display: -webkit-box;    
  display: -webkit-flex;    
  display: -moz-box;    
  display: -ms-flexbox;    
  display: flex;    
  -webkit-box-pack: center;    
  -webkit-justify-content: center;    
  -moz-box-pack: center;    
  -ms-flex-pack: center;    
  justify-content: center;    
  -webkit-box-orient: vertical;    
  -webkit-box-direction: normal;    
  -webkit-flex-direction: column;    
  -moz-box-orient: vertical;    
  -moz-box-direction: normal;    
  -ms-flex-direction: column;    
  flex-direction: column;
}

.foo .bar {    
  -webkit-box-flex: 0;    
  -webkit-flex-grow: 0;    
  -moz-box-flex: 0;    
  -ms-flex-positive: 0;    
  flex-grow: 0;    
  -webkit-flex-shrink: 0;    
  -ms-flex-negative: 0;    
  flex-shrink: 0;    
  -webkit-flex-basis: auto;    
  -ms-flex-preferred-size: auto;    
  flex-basis: auto;
}

.foo .bar:hover {    
  color: red;
}