寫給想作前端的你

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 二、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，告訴我你是誰。