P.S. 喷神请绕道，大神勿喷，不引战，不进击，不钻牛角尖。

大二时第一次打仗前端。许多同砚预计都想过要做一个网站，大部份又是从PHP最先的（谁让它是世界上最好的言语呢）。后端言语介入衬着HTML一向很主流，随着教程做，你会写一堆款式表，到厥后也许是须要在提交表单时举行客户端考证，你最先写一些JS。
想做个网站啥的（之前app没有那末多），必需要学会HTML、CSS、JS，HTML构造构造，CSS表现款式，JS决议行动。JS好像充溢奇技淫巧，能够做种种效果啊，飞雪花片啊，搞我们选课、评先生的网站啊。

厥后打仗了jQuery，用起来异常随手，迥殊是看完《DOM编程艺术》今后。那段时候忧郁JS掌握得不好，心想老是用jQuery今后不会写Native怎样办？也会关注“能够直接进修jQuery吗”如许一些题目。进修了Ajax后又做过瀑布流图片墙，以为异常高兴。不过熟悉也仅仅停留在异步加载部份更新DOM能够制造更好地用户体验。

练习时期，看到公司前端做雪碧图、切片、搞div、css规划，然后花许多时候在浏览器兼容的题目的调试上。尤其是运动页面，写HTML、CSS基本占到工程的80%，JS写起来很快。厥后Bootstrap逐渐盛行起来，后端同砚能够直接写背景，以至都不须要前端和射鸡师了。加点栅格，加几个类，轮播组件啥的样样有，再引入jQuery，前端便成为了顺带做的事了。

我打仗前端的历程没有系统性，充溢了探（瞎）索（搞），也缺少指点。不过细想一想，我邮只要前端的选修课啥的，课程也不是那末就业导向。就像论坛里的同砚，本身搞，本身提拔。

我们把上面这些点提取出来：HTML、CSS、JS、jQuery、Bootstrap，再刷刷题，看看基本知识，基本就能够列入校招了。

那些求入门、求练习、赶春招、赶秋招的同砚肯定来得及：不过泼一盆冷水，进入大公司只是最先，你的熟悉、习气、头脑体式格局最终会决议你奇迹也许专业的高度。

面临新手艺我以为相识它为什么发作，处置惩罚什么题目，会怎样生长，如安在现有的工程中举行实践，比议论它们的好坏更有意义：

起首 html5 不是一个新手艺，而是在当代浏览器中运用CSS 3等特征举行前端开辟的历程。之前我们更关注浏览器的差异性，而当代的浏览器对范例的支撑愈来愈一致。

回到jQuery，在web app中运用愈来愈少了，一方面这个库太“大”了（吃流量），从页面加载、翻开速率理论看，贤明的老大会把它砍掉。针对库大小的题目，Zepto.js是一个处置惩罚计划。这个库与jQuery API相对一致，摒弃了许多浏览器的兼容性的代码。

然则如今浏览器的querySelector要领，已很好地处置惩罚了jQuery中的“Query”，运用原生的fetch要领要求数据，返回Promise也能比jQuery.ajax()的完成更好、更清楚的处置惩罚题目。

对待jQuery，我以为应当更多看到它的汗青意义。jQuery，肯定水平上成为了产业范例，影响了JS言语的生长和其他JS库的构建。犹如coffeescript对ES2015的影响。至于实践，愈来愈多的web已不依靠jQuery举行开辟了。

前端这几年进步太快了，我尝试根据差别方向议论一下这些手艺栈。

脱离浏览器的JavaScript

Node.js

我们议论的JavaScript更多是以浏览器为宿主的ECMAScript，同源的ActionScript以Adobe的Flash作为宿主的。

浏览器中的JavaScript供应了大批与浏览器相干的API。脱离这些特定API看JavaScript，异步是它迥殊重要的一个特征。Google的V8引擎，让JavaScript的运转时机能大大提拔，是Node.js的发作另一个必要的前提。

Jser倏忽能够全栈了，面临新的手艺，不乏传教师。国内第一本Node.js书本是BYVoid写的，当时哄传这个同砚拿到了我司的60w的offer，一片沸沸扬扬；人人能够向他进修，在一个手艺还未在故国大地盛行起来时，迅速写一本书。

最少现在，很少有大公司完整把JavaScript作为前后端通用的手艺栈。传统的后端言语和手艺并未没有被替代的风险。不能把Node.js简朴看作是JavaScript在效劳端的延展。

我以为，Node.js很大水平拓展了JavaScript的运用范围，转变了传统前端的事变流程（背面提）。迥殊是NPM的发作，意义异常之大，它让JavaScript成为了一个生态系统，CommonJs也在JavaScript模块化未成熟之前，供应了优异的模块化处置惩罚计划。

经由过程package.json，我们能够依靠已有的NPM项目构建本身的库。前段时候，某个同砚应为执法的题目，取消了宣布在NPM上的leftpad包，短短11行代码的包取消后，造成了React-Native、Babel等项目构建失利的灾害。

module.exports = leftpad;
function leftpad (str, len, ch) {
  str = String(str);
  var i = -1;
  if (!ch && ch !== 0) ch = ' ';
  len = len - str.length;
  while (++i < len) {
    str = ch + str;
  }
  return str;
}

许多人深思，为啥那末简朴的代码要依靠，不本身写？是不是是Jser忘记了怎样写代码了？我以为，自觉消除对其他库的依靠会落空NPM社区的初志，除非你想做超等轮子哥。NPM生态圈制订一下撤包的划定规矩，这类灾害也许今后就不会发作。自力更生的同砚们，假如lodash撤包了，也许是tj holowaychuk大神热情起来删了一切包，你们怎样办？

Node.js也让效劳端衬着成为能够（universal），代码段妙技在效劳端运转也能够在客户端运转（universal）。从这点看，代码更轻易保护和编写了，部剖析耦了前端和效劳端。关于SEO这个使人头大的贸易题目，效劳端衬着能够较好地处置惩罚。感兴致的同砚，能够去相识一下搜索引擎的爬虫是怎样干活的。

总结一下，Node.js的发作完美了JavaScript生态圈，让人人看到了JavaScript的潜力，让构建越发巨大的JavaScript项目成为能够，同时前端能够运用越发工程化的流程和东西举行开辟。

引荐人人肯定去相识和运用Node.js，运用NPM构建本身的项目。

JSON

JSON变成了事实上Web数据的传输范例，这个是JavaScript另一大孝敬。

对终端的开辟，运用JSON数据后使得效劳端的开辟越发专注和一致。

 data.each do |key, value|
   puts "Key #{key.inspect} has value #{value.inspect}"
 end

这类代码展现了效劳端衬着的才能。然则关于关于iOS、Android等原生运用，除了在WebView中，没法消耗这些衬着好的HTML。

JSON和App的盛行，让后端言语在衬着方面逐渐让道，向地道的Service生长。比方beta版本的 Rails 5 大大增强了 Rails 作为 API Service的才能。

从Ruby 也许 PHP转换到JSON须要相应的映照函数，Node.js来得越发直接，因为JSON就是一个一般的JavaScript对象。

人人能够去进修成熟的JSON作风指南。同时经由过程实践逐渐加强对JSON的熟悉，设想越发范例的JSON（这个会森森影响到Mongo的存储，查询效力，React的机能）。

二进制处置惩罚后的JSON，是MongoDB存储的内容，这个基于文档的数据库被愈来愈多的公司运用，使得编写嵌套数据，存储流数据越发轻易。传统的关联数据库，将查询效果示意为JSON，须要经由查询、封装、Transform等多个步骤，而MongoDB的查询效果就是JSON，直接查询直接运用。固然我们看到，在处置惩罚事务型题目上，关联型数据库照样首选，比方电商。我们去褒贬关联型数据库是不是落伍没有意义——运用场景差别。

假如人人有兴致，能够去尝试MongoDB，感受一下打击。

前端工程化

接下来提一下前端工程化。剧本言语并不肯定须要编译再实行。传统的工程中，经由过程<script>标签引入依靠的JavaScript库、款式表后直接开辟，写款式表。

当工程范围增大后，传统实践保护本钱直线上升——因而模块化开辟成为工程上的最好实践。我们能够运用特定的手艺对JavaScript、CSS举行紧缩，同时兼并JS与CSS处置惩罚剧本间的依靠题目，以此削减线上环境中HTTP要求的数目。

Sass Less Stylus

CSS在前端范畴，进步最慢。声明式的款式表缺少逻辑性，层层嵌套，保护本钱高且不容易团队合作，款式掩盖这个题目也相称恼人。

Sass等手艺，输出编译后的CSS款式表，把开辟历程和现实款式表脱离。.scss文件构造清楚，经由过程变量定义、mixin等的运用让款式表的开辟越发正规化。

Less与Sass相似，Stylus是TJ大神的作品，着实异常简约笼统，个人感觉不容易保护。最新的Bootstrap 4运用Sass，摒弃了Bootstrap 3中运用的Less。

个人以为，这些手艺深切掌握一门就能够了。现实开辟还要看公司的手艺栈。

CoffeeScript 与 TypeScript

与Sass等手艺头脑相似，Coffee 与 TypeScript 也是一个编译手艺——把.coffee、.ts文件编译成javascript。编译这个头脑在前端范畴很重要：不转变现有的言语环境（JS、CSS）同时举行最好的工程实践。

运用过一段TypeScript，至心以为是神器，在无范例言语中写范例不是倒退吗？请摒弃这些激进头脑（世界上最好的言语第7代不是也支撑范例了吗），尝试在项目中运用TypeScript，你就会感知到它的神器的地方。起首，多人合作越发轻易了，连系IntelliSense，IDE越发智能，开辟快感直线提拔。

TypeScript是微软的开源项目，Angular 2 摒弃 Dart完整拥抱了TypeScript，TypeScript与Angular 2 强强合作，加入了许多构建 Angular 2的新特征。

我们整顿一下这些工程化的实践：预编译、兼并、紧缩、打包，引入下一个观点Package东西：

Webpack Gulp Grunt Browerify

Package东西，是使命驱动型的工程化东西。经由过程打包构建，线上代码越发精简，轮回援用等题目水到渠成。

上述这些东西变化极快，Webpack 2快靠近稳固了，JSPM这个新的东西也得到了运用：然则没有最好的，只要最合适的东西。都说Grunt已过期，jQuery等库还一度运用Grunt举行构建。关于新的东西，我们能够相识它们的头脑，不要被它们压得喘不过气：比方Gulp更像是一个PipeLine，对代码流一步步经由过程Loader举行加工。

在淘宝无线时，有些H5前端用Grunt构建工程，运用Less写款式表（另有些人什么都不必，直接在JsBin内里写款式、写JS）。

使命东西连系CommonJS后，能够只援用须要的模块、款式表。如许打包后，文件更小：固然假如连系sourcemap，调试和定位题目会越发轻易。

JavaScript Libraries

工程化、模块化处置惩罚了code怎样临盆，模块、构造怎样构造等题目。人人也在不停思索在前端与数据的关联。传统前端开辟并非数据导向的，多半页面由效劳端衬着，前端的重心不在数据而是聚焦在用户行动的相应上，这时候前端仅仅是产物的视觉末梢。

单页运用开辟手艺愈来愈多地被实践后，前端逐渐变得越发数据导向（JSON API），由末梢变成大脑——营业逻辑前移；对浏览器汗青的治理也是也是单页运用的别的一个中心，前端也逐渐变得越发汗青导向。

为了越发数据，JavaScript 库自创了许多效劳端的头脑比方MVC。MVC将数据笼统为模子，在模子中定义操纵数据的基本要领；在掌握器中定义贸易逻辑，并掌握模子的衬着。

这个阶段的代表是Backbone.js。Backbone有一个能够自定义的依靠于jQuery的前端模版引擎，是MVC情势在前端开辟中的实践。同时Backbone.js 依靠于同一个作者建立的 Underscore 库，以函数式编程头脑操纵数据也许鸠合（这个Jser制造了CoffeScript、Backbone、UnderScore，Lodash是从Underscore项目派生出来的，人人能够敬拜大神Jeremy Ashkenas）。Backbone影响深远。比方facebook的 parse（中国克隆版叫LeanCloud）这类无后端效劳就从Backbone自创了许多。

Angular.js的发作是跨时期的，这个大而全的框架让单页运用的开辟越发轻易。
最最先Jser们并非很顺应Angular，反倒Java顺序员能够很快的上手，因为Angular 借助了许多 Spring的头脑比方依靠注入。

Angular 依然深受 jQuery 的影响，内部完成了极简版本的挑选器。Angular举行双向绑定，这个牛逼的特征也偶然因为机能题目被诟病。

JavaScript 库也自创了许多客户端开辟的头脑，比方React、Vue。

个人以为，拿Angular、React、Vue这些库比较，论其好坏意义不大。他们发作的时期差别，处置惩罚的题目差别。React、Vue脱离Router和生态圈的其他组件也没法构建单页运用。

React.js

React并非一个大而全的框架，重要专注在UI层，React以Component的体式格局构造运用：一个Component包括这个组件的模版（款式）和行动逻辑。多个Component能够组合，发作兄弟、父子的Component构造关联。

以往开辟强调构造、款式、行动的星散。但从组件角度看来，一切这些都是构成组件不可分割的团体。JSX使得HTML与JS的混编越发轻易，同时React组件也能够运用内联体式格局来构造款式。

React默许单向绑定，在State发作变更后从新衬着DOM。从Component的生命周期中，我们能够看到客户端开辟的影子（迥殊有iOS开辟的履历的话）。比如componentWillMount、componentDidMount、componentWillReceiveProps、componentWillUnmount这些生命周期的钩子就是像客户端开辟进修的例子。一方面，生命周期的增添细化了开辟的粒度，另一方，也为前端的再一次拓展做了充分地预备。

父组件经由过程props向子组件传值，子组件挪用porps所通报的父组件的要领来实行营业逻辑。这点，异常相似iOS开辟中的托付代办情势，一样是向客户端开辟手艺进修的例子。

React挪用render要领对Component举行衬着，个中触及了Virtual DOM机制和只能的diff算法——只更新发作变化的DOM，以此进步衬着的效力。

React并没有供应完成的数据治理计划，Flux也仅仅是一个实践的发起。客岁，种种Flux处置惩罚计划百花齐放，Redux获得了最大的关注度。运用Redux是一个从入门到懵逼的历程，而且每每不知所以然，然后“这厮”有引入了Store、Action、这些观点。发起人人不要为了Flux而Flux，多做一些实践，相识函数式编程，相识Map、Reduce的观点，再深切Redux：

在这里分享些本身的熟悉：每一个组件都有本身的State，有条理关联的State配合构成一颗状况树来纪录全部运用的状况。当Aciton被触发后，State随之更新，React以此部份地更新运用的状况和视图（State —Action—> State’）。贴一个本身总结的白板图：

这里第一次提到Immultable这个观点：老是不转变本来的对象而天生新的对象。Immultable，让时间大法得以完成。我们假如把DOM看作是State在UI层的映照，难么从State’到State后，天然能把UI层复原到本来的状况：Redux黑魔法。

Angular 2

Angular 2 已到了Realease Candidate阶段，从alpha阶段最先，每一次release都有一大堆BREAKING CHANGES（MD API说变就变）。

不过幸亏基本每一个版本我都在跟进，照样做了些实践。

假如人人抱着进修的心态，肯定不要去看外洋也许知乎大神们对种种框架的褒贬，也不要去搜“我究竟是进修（运用）React、Angular 2、Ember照样Vue这类题目”，相识它们的头脑和处置惩罚题目的体式格局。

Angular 一向运用依靠注入的单例情势处置惩罚数据治理的题目。Angular 2运用zone.js完成了一个新的脏值搜检机制，并在浏览器端运用System.js治理code的依靠。

运用 TypeScript 举行开辟，意味着从临盆到上线历程必需经由编译和转换，迥殊装潢符的运用，让代码表意性更强，同时装潢符作为元数据，指点TypeScript的编译历程。

举个例子，我们看看Angular 2怎样处置惩罚表单的考证题目：
Angular 2将每一个表单项（比方 input、textArea、radio）笼统为一个Control，将全部表单笼统为一个ControlGroup。每一个Control都有本身的考证划定规矩，ControlGroup的合法性又由其包括的一切Control配合决议。这个实践使得考证逻辑与表单DOM完成了星散，越发清楚，同时底本操蛋的表单测试变得简朴易行，因为测试ControlGroup时并不须要依靠于DOM。

分享一篇我翻译的文章：Angular 2中心观点，浏览后能够对Angular 2 有一个大抵的相识。

Angular 2是对WebComponent的渐进，经由过程WebComponent，我们能够导入和运用种种成熟的组件，而不必体贴它的详细完成，就像黑盒一样举行运用：比方我们想嵌入一个百度舆图的WebComponent，能够这么写：

<BaiduMap [width]=300 [height]=300 [user-scalable]=false [latitude]=... [longitude]=... />

因而就I天生一个指定大小和位置的舆图组件（百度舆图没有这东西，我YY的，股沟有）。

Vue

这个框架我不是很相识，开辟者是尤雨溪大神，在github上stars凌驾10,000。
手机淘宝的勾股大神一向在传教、推行、实践。个人以为Vue的中心孝敬者太少了，拉上阿里巴巴是一个明智的挑选，毕竟许多前端大神能够配合完美它。

脱离浏览器的 JavaScript Libraries

再看Virtual DOM这个观点，就像是薛定谔的猫，在衬着前什么都是、什么都不是。Virtual DOM是一个笼统的观点，也构成了另一个笼统观点—— Component。（这个堪称是FB的野心，今后预计许多人被这个东西搞赋闲）。

一个视觉元素，一个用户事宜，能够做以下笼统：

/*****
          <div></div>
    /(html)
View
    \(iOS)
           UIView

          click
    /(html)
Click
    \(iOS)
          TouchUpInside

*****/

我们发明，假如在编译时View、Click才与运转环境相干，那末app、web app的开辟现实上是能够同享大部份代码的，这个时候JavaScript变成了中心言语。

这个主意早在cocos2d中就已完成，举行游戏开辟的同砚运用c++举行游戏开辟，编译后发作安卓和 iOS 的版本平台相干的游戏。

React-Native就是这个思绪的实践者，经由过程js绑定了OC也许安卓的运转环境，开辟出机能靠近于原生的原生运用。React-Native大法延展了JS的广度，也填补了iOS和安卓开辟间的手艺沟壑。

另一个黑魔法是热更新，以往大幅度更新App只能在App Store、安卓各大渠道宣布更新，然后从运用市肆提醒用户晋级，每一次提交都须要被考核，更何况并非每一个用户都晓得也许想去装置每一个更新版本（比方我妈）。经由过程React-Native能够直接下载新的bundle，完成热更新。

论坛里，有人议论React-Native热度骤减，你们去官网看看，人家才v0.25。许多公司用不好驾御不了React-Native缘由出在缺少既相识客户端开辟有相识前端开辟的顺序猿（媛）：不能否定，Reactive-Natvie的发作是大势所趋。

说道阿里在搞的Weex，也是在向这个方向探究，假如迥殊胜利而且运用普遍的话肯定会把Vue搞得更大：尤雨溪大神在这个题目上相称的明智的。

再回到Angular 2，DomRenderer.getNativeElementSync(elementRef)也不是在做一样的事变吗？相干项目详见：NativeScript 。

除了JavaScript，CSS 也在尝试成为与平台无关的款式言语。React-Native就完成了CSS 的部份子集与iOS、Android的绑定。

大前端

将来的前端是一个包括但不仅限于app和web，处置多端构建使命的顺序员工种。团队中单一妙技的职员会愈来愈少，客户端与web端的界线也会愈来愈隐约。

同时新的手艺大多会在差别范畴交叉点发作。收集提速，设别处置惩罚才能进步后，运用大小、机能能够退居第二，用户体验和开辟效力提拔到第一。

比方许多公司，因为忧郁js、css打包后过大，摒弃运用框架。这点我持保留意见，疾速迭代的产物必需有迅速的手艺栈和稳固的框架。

现在新版本的Chrome、Node.js对ES6范例的支撑已凌驾90%，Babel这一类东西的生命周期不会很长，TypeScript能够会越走越远。

给人人的发起

1. 道阻且长，冰冻三尺非一日之寒；

2. 普遍地进修，有前提和才能的同砚尽早地打仗客户端开辟，更多地相识效劳端开辟；

3. 前端大有可为，新手艺的发明者大多不是老东西，老东西履历足然则汗青包袱重；

4. 只在浏览器中思索必死无疑；

5. 像一名同砚提到的，打好基本，offer就有。学校里捣腾几年真的很难搞出什么大消息，面试官也不会锐意尴尬你；

6. 测试测试测试，前端测试值得进修掌握，比方e2e，这是一个时机：我能通知你许多公司的前端测试都瞎JB点吗？

7. 进修一些函数式编程的头脑，比方：lodash、Redux、RxJS；

8. 拿到offer只是最先不要嘚瑟。

番外篇——理性对待前端紧缺的征象

刚入职淘宝时，团队里有许多前端外包同砚，厥后很大一部份转正了，有履历的前端工程师一向稀缺。

2012年，PC购物照样主流，我们见证了无线成交额（GMV）逐渐赶超PC的时候：端的重心愈来愈向mobile（App）挪动。

Hybrid App很盛行，部份是因为Native开辟越发庞杂，同时考核、更新机制迟缓。每一次手淘release都要斟酌与老版本的兼容性，几百号人同时开辟二个（安卓、iOS）App想一想多庞杂。

H5在webview中运转，随时能够更新、疾速迭代，新产物也许是运动页面大多半会采纳H5的情势举行宣布；以至许多小公司因为财力和手艺储备有限，直接用App做壳，内里满是用H5来开辟：因而市场上发作了很大的H5顺序员的需求。

且慢，没有任何人说过H5比Native更好，也没有什么H5的春季，一切的一切都是因为Native 开辟、更新不够成熟。但也仅限在一个时候段内。

假如一切题目都不是题目了，干吗不全做Native？现在看来相似于React-Native、JsPatch如许的手艺逐渐会让许多前端赋闲或是是被动转岗到纯PC营业。

番外篇——引荐进修资本

1. You don’t know JS，clone下来今后用markdone浏览器浏览；

2. ES6 教程，阮一峰大神的ES6教程，纸质书能够在京东啥的买到；

3. LeanPub，自出书书本网站，每次更新都邑宣布新版本。支撑Visa付出；

4. Manning，迥殊是MEAP系列的图书，按章节更新，最新一手材料，支撑Visa、PayPal付出；

5. CodeSchool，在线进修网站，掩盖前端、iOS、Ruby等，能够先尝尝免费课程，支撑Visa、PayPal付出；

6. EggHead，在线进修网站，先尝尝免费课程，讲课人大神极多，基本涵盖了最新的前端手艺，支撑Visa付出，200刀一年略贵；

7. 如果以为贵，想一想火麒麟。

番外篇——F&Q

Q：楼主如今在干吗？
A：五道口，创业狗。担任公司的手艺和产物。

Q：另有什么想说的？
A：帖子还会更新保护。

Q：联系体式格局？
A：微信请加mumuzhenzhen，通知我你是谁。