摘要：前端的工作更具有挑戰(zhàn)性，方向更多樣化假設(shè)我今年要入前端開發(fā)的坑這里強(qiáng)調(diào)前端是因?yàn)?，現(xiàn)在很多，安卓開發(fā)加入大前端的這個(gè)稱呼。安卓版微信在截稿之前是大概的版本最新是并且持續(xù)了年不變，據(jù)說(shuō)是為了穩(wěn)定。

作者：Jay（滬江開發(fā)工程師）
本文為原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明作者及出處

不好意思，沒(méi)有像其他公眾號(hào)一樣趕著發(fā)文章，每年到這個(gè)時(shí)候總有一大波什么今年前端預(yù)測(cè)，技術(shù)框架預(yù)測(cè)什么的。我這次寫這篇文針對(duì)的對(duì)象，是想在今年踏入前端這行的人們，不管你現(xiàn)在是徘徊在門口，還是已經(jīng)半只腳踏入這片未知領(lǐng)域，都可以參考一下先行者的經(jīng)驗(yàn)。

項(xiàng)目工程化

發(fā)展方向

職業(yè)環(huán)境

總結(jié)要掌握的框架／技能

2017的前端與其說(shuō)更殘酷，不如說(shuō)更規(guī)范化，前兩年各種培訓(xùn)了幾個(gè)月就出來(lái)隨口開價(jià)上萬(wàn),幾萬(wàn)的新手將被市場(chǎng)淘汰。

前端開發(fā)工具／編譯工具 逐漸成型，雖然比不上object-c, java, C+ 等排名靠前編程語(yǔ)言有完善的IDE環(huán)境，但是。工程化模塊化的概念開始深入人心，這年頭還編寫原始HTML CSS Javascript 代碼的，要么就是小項(xiàng)目，要么就是新手。

前端的工作更具有挑戰(zhàn)性，方向更多樣化

這里強(qiáng)調(diào)web前端是因?yàn)椋F(xiàn)在很多iOS，安卓開發(fā)加入大前端的這個(gè)稱呼。主要是因?yàn)镽eact同構(gòu)的出現(xiàn)吧，很多開始混合在一起了。

首先我們來(lái)回顧一下我們老同學(xué)印象中的前端：

老古董： PS切圖導(dǎo)出

新手小白: Adobe Dreamweaver 寫代碼

懶人: UltraEdit, notepad++ …

或許你精通之后隨便找個(gè)能敲字的東西就可以開始寫代碼，但是我遇到過(guò)一個(gè)有著多年豐富經(jīng)驗(yàn)的前端老前輩，就是因?yàn)閼卸璐蜷_編輯器，手寫了一段代碼也沒(méi)有檢查，就直接提交，然后不小心敲錯(cuò)字符，導(dǎo)致整個(gè)項(xiàng)目差點(diǎn)爛尾的事情。 真正厲害的人，任何時(shí)候都應(yīng)該是非常謹(jǐn)慎的。 請(qǐng)善用IDE的查錯(cuò)糾錯(cuò)功能。

跟以往不同，如果你今年要開始web前端的開發(fā)（下面都簡(jiǎn)稱前端），那么至少你是不用去折騰太多的瀏覽器兼容，但并不是完全不需要去關(guān)心，只是開發(fā)環(huán)境不像以前那么多坑，因?yàn)楦鞣N編譯器的出現(xiàn)。

落后的瀏覽器版本迭代。
我拿到過(guò)國(guó)內(nèi)某500強(qiáng)手機(jī)企業(yè)的手機(jī)，我一看自帶webkit內(nèi)核，居然是2003 的 Releases 版本 webkit. 我當(dāng)時(shí)是比較震驚的，畢竟安卓?jī)?nèi)核也是 4.x, 我至今不知道他們是如何做到把一個(gè)那么舊的瀏覽器內(nèi)核塞進(jìn)一個(gè)比較新的安卓系統(tǒng)的，也不知道這么干是幾個(gè)意思，當(dāng)然即使是高通soc基帶，要升級(jí)一下系統(tǒng)也是登天還難，更別說(shuō)其它soc基帶。

安卓版微信在截稿之前是大概Chrome35的版本（最新是Chrome55） 并且持續(xù)了1年不變，據(jù)說(shuō)是為了穩(wěn)定。

UC，百度，等套殼瀏覽器大行其道，但它們調(diào)用的只是系統(tǒng)的瀏覽器內(nèi)核，你別跟我說(shuō)優(yōu)化了加載速度什么東西，加載速度是網(wǎng)絡(luò)狀態(tài)、系統(tǒng)硬件決定的，跟你一個(gè)套殼瀏覽器有半毛錢關(guān)系？所以我不知道它們幾十兆容量到底寫了什么東西，細(xì)思極恐。

總之，在桌面時(shí)代，我們面對(duì)的是IE6，7，8這個(gè)毒瘤， 在移動(dòng)時(shí)代我們面對(duì)的是安卓這個(gè)毒瘤（限國(guó)內(nèi)）

ATOM 目前最熱門的編輯器

Sublime text 良心編輯器，雖然是收費(fèi)的，但不強(qiáng)制，偶爾提醒而已

VSCode 基礎(chǔ)插件完善但第三方插件更新緩慢（@Jay，－?！。‖F(xiàn)在很多插件了，好不好～）

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

前端框架的高速發(fā)展，意味著各種插件的不斷快速迭代，那么Dreamweaver這種半封閉式的大型工具，雖然單方面很強(qiáng)大，但明顯版本更新跟不上社區(qū)更新的腳步，即使我裝了最新的2017版本體驗(yàn)了一下，我也覺(jué)得它無(wú)法勝任這個(gè)時(shí)代了

老實(shí)說(shuō)，雖然前端開發(fā)工程化的概念終于開始普及，是一件好事，但事實(shí)上還是屬于初級(jí)階段，對(duì)入門新手并不友好。還不能像xcode一樣，直接建立一個(gè)工程，然后配置，然后就一條龍寫代碼搞定，雖然 macOS 平臺(tái)有個(gè)CodeKit已經(jīng)做得非常好了，但由于更新力度跟不上各種框架發(fā)展的速度，所以，也只是能參考。

現(xiàn)在寫前端，你起碼要建一個(gè)本地運(yùn)行環(huán)境（localhost） 之類的。這是非常非?；A(chǔ)的東西， 請(qǐng)不要再像以前那樣，雙擊HTML去預(yù)覽你寫的代碼，有個(gè)問(wèn)題我在一些群里回答新手不止上百次： XXXXX is not allowed by Access-Control-Allow-Origin, 基本上99% 就是直接雙擊HTML導(dǎo)致的（剩下1%是http跨域之類的）

既然都要建立 localhost 了那么部署 IIS , os server, 之類的，都是非常麻煩的一件事至少我覺(jué)得是。 并且還涉及到一些付費(fèi)軟件之類的，成本上升不少。

得益于nodejs的發(fā)展，現(xiàn)在 Browsersync , webpack dev server都能快速的部署起一個(gè)工程目錄，前提是你裝了node。

雖然這個(gè)小標(biāo)題寫得有點(diǎn)夸張，但是一個(gè)趨勢(shì)。
瀏覽器運(yùn)行鐵三角：css html js，這些必須文件，如果現(xiàn)有瀏覽器保持不變的話，那么以后的工程師，獎(jiǎng)越來(lái)越少直接編寫這些文件， 轉(zhuǎn)而通過(guò) 編譯工具，選擇一款自己喜愛(ài)的新興語(yǔ)言去編寫，然后編譯成瀏覽器可以認(rèn)識(shí)的鐵三角文件，當(dāng)然不排除以后瀏覽器可以直接運(yùn)行 less、scss、ts 等文件，這都是有可能的。

最有名的例子就是 jQuery 的語(yǔ)法被ES2015 甚至被新時(shí)代的瀏覽器吸收并內(nèi)置原生支持了（以前甚至傳出瀏覽器要內(nèi)置jQuery）

現(xiàn)在大部分都是通過(guò) less、scss、sass 等去編譯成普通css文件
然后通過(guò)著名的postCSS插件，補(bǔ)全各種瀏覽器前綴。
舉個(gè)例子：

在less文件我們這么寫：

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

編譯出來(lái)的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;
}

? 這效率，這補(bǔ)全，你手寫要寫多久？ 搞不好還寫漏。 所以，無(wú)論是出于對(duì)老板給你的工資負(fù)責(zé)， 你父母給你生命負(fù)責(zé)，還是你自己對(duì)你的身體負(fù)責(zé)，都請(qǐng)采用編譯工具去書寫你的css，html，js。

上面是用css做例子，

還有針對(duì) HTML 的 pug (以前叫jade)， HAML
針對(duì)JS的 typescript， coffeeScript
不過(guò)這里js我要特別說(shuō)一下， 新版本的ES6，ES7，其實(shí)已經(jīng)非常完美了，
語(yǔ)法模塊化什么的應(yīng)有盡有， 然后通過(guò)著名的 Babel 編譯器，編譯成現(xiàn)在流行瀏覽器兼容的版本即可，雖然typescript我覺(jué)得蠻不錯(cuò)的，但個(gè)人覺(jué)得這個(gè)就沒(méi)必要增加團(tuán)隊(duì)學(xué)習(xí)成本了，除非你個(gè)人愛(ài)好。

從 Ajax 的興起， requirejs 的新興思維模式一些專用術(shù)語(yǔ)就不逼逼了
隨著前端的發(fā)展，nodejs 的成熟，前后端分離勢(shì)在必行，那么前端項(xiàng)目越來(lái)越復(fù)雜，一個(gè)健壯清晰的模塊體系非常重要，不然隨時(shí)會(huì)把自己做蒙。

現(xiàn)在流行的 MV* 框架有

Angular 2

Vue.js 2.0

React

React-Native

注：MV* 框架一般指 MVC、MVP、MVVM 這些，具體什么意思，其實(shí)懂了也沒(méi)啥意義。

我個(gè)人看好 vue2，還有它的全家桶

這些框架，無(wú)法避免需要編譯器，需要工程目錄，需要nodejs。

Koa2, Express 我就不說(shuō)了，有興趣的人自己去研究但也是后期要學(xué)的

所以現(xiàn)在入門，工程化你的項(xiàng)目，勢(shì)在必行，別嫌麻煩。當(dāng)然這里只指出路子，并不進(jìn)行深入介紹，會(huì)在以后多帶帶一篇介紹如何開始工程化你的項(xiàng)目。

交互向

數(shù)據(jù)向

不黑不偏，交互向是非常難走的一條路。也是非常缺的。
總之，選擇一條你喜歡的路，并堅(jiān)持走下去就對(duì)了。這里說(shuō)說(shuō)這兩個(gè)方向今年的一些趨勢(shì)吧。

16年大熱的東西，無(wú)疑就是VR，大概在 2013年的時(shí)候，Google的工程師熱推過(guò)一波webGL，但是各種性能跟渲染問(wèn)題那時(shí)候沒(méi)有完全搞定。（其實(shí)我覺(jué)得現(xiàn)在也沒(méi)搞定）
但無(wú)論如何 webGL 必將大熱。

就目前來(lái)說(shuō)比較能繼續(xù)跟下去的就是
Three.js還有 Mozilla搞的A-frame,
特別aframe最近動(dòng)作很大，都配合 threejs 搞起webVR
但是我在這里還是建議大家先學(xué)webGL再玩webVR.

很多人不知道怎么沒(méi)開始webGL，確實(shí)一大堆三維矩陣算法定點(diǎn)渲染一開始就能把人看暈，但是別怕，試試看 blender 這款開源建模軟件， threejs 也是有針對(duì)這款軟件的導(dǎo)出插件。 blen4web 雖然收費(fèi)，但也是可以參考。

其它的庫(kù)要么就棄，要么就突然沒(méi)下文了。

當(dāng)然技能與財(cái)力突出的朋友可以去嘗試 unity3D

小提示：盡量在手機(jī)上嘗試， 現(xiàn)在的 Retina 桌面顯示器…webGL真心帶不動(dòng)，別說(shuō)web了，原生的3D渲染在Retina顯示器上都很難，不過(guò)可以設(shè)置參數(shù)1倍渲染，只是丑了點(diǎn)。

順帶說(shuō)一句，你以為交互向的，就不用學(xué)數(shù)據(jù)向的東西？ 不要天真，該學(xué)的還是要去學(xué)，所以我說(shuō)路不好走。

毫無(wú)疑問(wèn)，這是應(yīng)該算是大家都認(rèn)同的正統(tǒng)路線，也是發(fā)展得非常全面的一個(gè)方向，路已經(jīng)有很多前輩踏平了。各種 MV* 框架， 各種服務(wù)端node中間件，大前端一下子吞并了本來(lái)后端要干的大部分工作。
前后端分離開發(fā)勢(shì)不可擋，大數(shù)據(jù)可視化依舊是非常熱門
如果一切順利的話，這個(gè)方向的人學(xué)一下D3.js會(huì)利好升職加薪。

題外話：有個(gè)叫微信小程序的東西，大家可以作為技能提升去研究研究。

Chrome PWA 項(xiàng)目其實(shí)大家有時(shí)間也可以作為技能提升去看看。

作者個(gè)人觀點(diǎn)：搞那么多事，還不如做好 Add to homescreen 的功能。有時(shí)候真感概Chrome在國(guó)內(nèi)真不接地氣。

現(xiàn)階段就業(yè)環(huán)境其實(shí)非常合適入門前端，掃清了微軟三大毒瘤 瀏覽器（淘寶率先不支持IE8 ，干得漂亮）， 即使在移動(dòng)端webkit內(nèi)核不是很完美的情況下，你依舊可以書寫出很多你要的web效果，反正老版本的內(nèi)核的那部分客戶對(duì)象，根本不能給你帶來(lái)任何利潤(rùn)，不如直接放棄。因?yàn)橹挥凶钚录夹g(shù)才能給你帶來(lái)利益，成就感。

前端各種工具也漸漸給前端開發(fā)帶來(lái)便利，雖然前期部署起來(lái)確實(shí)麻煩，但試問(wèn)一下，你連這點(diǎn)耐心都沒(méi)有，我實(shí)在看不到你的未來(lái)在哪。

然后我們要面對(duì)的，也是一個(gè)不可抗力因素，我這里不是慫恿你們干什么事，有時(shí)候一些封鎖，錯(cuò)誤的封掉了一些學(xué)習(xí)資料。這個(gè)請(qǐng)自己務(wù)必不要放棄，找方法突破封鎖，我就舉個(gè)例子，假設(shè)你要用 npm 安裝 node 模塊。那么首要面對(duì)的問(wèn)題就是某些不可抗力的封鎖，還有運(yùn)營(yíng)商的QoS限制，有些朋友向我推薦 yarn， 我親身試過(guò)，也是被封得一塌糊涂。

這里我覺(jué)得可以曲線用npm, 非常感謝淘寶 fork 了一份 npm。 稱之為 cnpm， 他們的網(wǎng)址是 npm.taobao.org 具體使用方法我不多講自己看。

然而有時(shí)候這并不能滿足我們的需求，例如命令行下的一些操作。

假設(shè)你有 SS 這種梯子。
那么你可以在命令行下做一些臨時(shí)的 proxy 設(shè)置：
MacOS 終端（假設(shè)你梯子的端口是1087）：

export http_proxy="http://127.0.0.1:1087"
export https_proxy="http://127.0.0.1:1087"

Windows 命令行（同樣假設(shè)你的端口如下）：

set http_proxy=http://127.0.0.1:1080
set https_proxy=http://127.0.0.1:1080

然后就可以愉快地 $ npm xxxxx… 或者 ATOM 的升級(jí) package 也能這么干。

題外話：ATOM升級(jí)package不順利的話，用這個(gè)方法然后命令行

apm install [packagename]

要會(huì)部署nodejs環(huán)境

webpack

babel

gulp

postCSS的插件

CSS: Less, scss

HTML: pug, haml (可選)

Javascript: ES6, ES7

WebComponents (可選)

Vue.js / React (反正掌握一款MV* 框架是必要的)

對(duì)了還有即將大熱的 hotfix， 代表作有：阿里熱修復(fù)技術(shù)，據(jù)說(shuō)餓了么，騰訊也出了。沒(méi)去關(guān)注，但我個(gè)人覺(jué)得這個(gè) apple 不會(huì)坐視不理的，畢竟你可以隨時(shí)服務(wù)端修改APP繞過(guò)審核，這種外道招數(shù)我覺(jué)得可以學(xué)學(xué)但不要認(rèn)真。

Angular 2 被小編你吃了？
Angular 4 開發(fā)組告訴我，你又得像 ng1 轉(zhuǎn) ng 2 一樣， 從頭學(xué)一次。 so…你們玩得開心就好，真的，我的項(xiàng)目連平滑升級(jí)都做不到，我真心沒(méi)辦法陪你們玩。

jQuery 要死了？ 要死了?。。?/strong>
哥，穩(wěn)住。不會(huì)死，即使死了，也是融入到原生支持，如果你要從jQuery過(guò)度到原生，叔叔推薦網(wǎng)址你去學(xué)，別怕：

iKcamp原創(chuàng)新書《移動(dòng)Web前端高效開發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開售。
 >> 滬江Web前端上海團(tuán)隊(duì)招聘【W(wǎng)eb前端架構(gòu)師】，有意者簡(jiǎn)歷至：zhouyao@hujiang.com <<

iKcamp官網(wǎng)：http://www.ikcamp.com