聽說2017你想寫前端？

先來個大概預覽：

• 小結放在前：

• 2017的前端與其說更殘酷，不如說更規範化，前兩年各種培訓了幾個月就出來隨口開價上萬,幾萬的新手將被市場淘汰。

• 前端開發工具／編譯工具 逐漸成型，雖然比不上object-c, java, C+ 等排名靠前程式語言有完善的IDE環境，但是。工程化模組化的概念開始深入人心，這年頭還編寫原始HTML CSS Javascript 程式碼的，要嘛就是小項目，要嘛就是新手。

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

---

假設我今年要入WEB前端開發的坑

這裡強調web前端是因為，現在很多iOS，安卓加入大前端開發的坑

• 這裡強調web前端是因為，現在很多iOS，安卓加入大前端的這個稱呼。主要是因為React同構的出現吧，很多開始混合在一起了。

首先我們來回顧我們舊同學印像中的前端：
• 老古董

  ： PS切圖導出

---

新手小白

:  

新手小白

:  
• Dream 寫代碼

• 懶人: UltraEdit, notepad++ …

或許你精通之後隨便找個能敲字的東西就可以開始寫程式碼，但是我遇到過一個有多年豐富經驗的前端老前輩，就是因為懶惰打開編輯器，手寫了一段程式碼也沒有檢查，就直接提交，然後不小心敲錯字符，導致整個專案差點爛尾的事情。 真正厲害的人，任何時候都應該是非常謹慎的。 請善用IDE的查錯糾錯功能。

跟以往不同，如果你今年要開始web前端的開發（下面都簡稱前端），那麼至少你是不用去折騰太多的瀏覽器兼容，但並不是完全不需要去關心，只是開發環境不像以前那麼多坑，因為各種編譯器的出現。

前端面對的國內最嚴峻的挑戰是：

落後的瀏覽器版本迭代。
我拿到過國內某500強手機企業的手機，我一看自帶webkit內核，居然是2003 的Releases 版本webkit. 我當時是比較震驚的，畢竟安卓內核也是4.x, 我至今不知道他們是如何做到把一個那麼舊的瀏覽器核心塞進一個比較新的安卓系統的，也不知道這麼幹是幾個意思，當然即使是高通soc基帶，要升級一下系統也是登天還難，更別說其它soc基帶。

安卓版微信在截止之前是大概Chrome35的版本（最新是Chrome55） 並且持續了1年不變，據說是為了穩定。

UC，百度，等套殼瀏覽器大行其道，但它們調用的只是系統的瀏覽器內核，你別跟我說優化了加載速度什麼東西，加載速度是網絡狀態、系統硬體決定的，跟你一個套殼瀏覽器有半毛錢關係？所以我不知道它們幾十兆容量到底寫了什麼東西，細思極恐。

總之，在桌面時代，我們面對的是IE6，7，8這個毒瘤， 在移動時代我們面對的是安卓這個毒瘤（限國內）

推薦兩款編輯器:

• ATOM 目前最熱門的編輯器

• Sublime text 良心編輯器，雖然是收費的，但不強制

  基礎插件完善但第三方插件更新緩慢

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

前端框架的高速發展，意味著各種插件的不斷快速迭代，那麼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;
}

---

 這效率，這補全，你手寫要寫多久？ 搞不好還寫漏。 所以，無論是出於對老闆給你的薪水負責， 你父母給你生命負責，還是你自己對你的身體負責，都請採用編譯工具去書寫你的css，html，js。

上面是用css做例子，

還有針對HTML 的 pug (以前叫jade)， HAML
針對JS的typescript， coffeeScript
不過這裡js我要特別說一下，新版的ES6，ES7，其實已經非常完美了，
語法模組化什麼的應有盡有， 然後透過著名的Babel 編譯器，編譯成現在流行瀏覽器相容的版本即可，雖然typescript我覺得蠻不錯的，但個人覺得這個就沒必要增加團隊學習成本了，除非你個人嗜好。

大型專案無法避免MV* 工程

從Ajax 的興起， requirejs 的新興思維模式一些專用術語就不逼逼了
隨著前端的發展，nodejs 的成熟，前後端分離勢在必行，那麼前端專案越來越複雜，一個健壯清晰的模組體系非常重要，不然隨時會把自己做蒙。

現在流行的MV* 框架有

• Angular 2

• Vue.js MV* 框架一般指MVC、MVP 、MVVM 這些，具體什麼意思，其實懂了也沒啥意義。

• 我個人看好 vue2，還有它的全家桶
  這些框架，無法避免需要編譯器，需要工程目錄，需要nodejs。

• Koa2, Express 我就不說了，有興趣的人自己去研究但也是後期要學的

所以現在入門，工程化你的項目，勢在必行，別嫌麻煩。當然這裡只指出路子，並不進行深入介紹，會在以後單獨一篇介紹如何開始工程化你的專案。

發展方向

前端一直有2個方向：

• 交互向

• 數據向

不黑不偏，交互向是非常難走的一條路。也是非常缺的。
總之，選擇一條你喜歡的路，並堅持走下去就對了。這裡說說這兩個方向今年的一些趨勢。

交互向

16年大熱的東西，無疑就是VR，大概在 2013年的時候，Google的工程師熱推過一波webGL，但是各種性能跟渲染問題那時候沒有完全搞定。 （其實我覺得現在也沒搞定）
但無論如何 webGL 必將大熱。

就目前來說比較能繼續跟下去的就是
Three.js還有Mozilla 搞的A-frame,
特別aframe最近動作很大，都配合threejs 搞起webVR
但是我在這裡還是在這裡建議大家先學webGL再玩webVR.

很多人不知道怎麼沒開始webGL，確實一大堆三維矩陣演算法定點渲染一開始就能把人看暈，但是別怕，試試看blender 這款開源建模軟體， threejs 也是有針對這款軟體的導出插件。 blen4web 雖然收費，但也是可以參考。

其它的庫要么就棄，要么就突然沒下文了。

當然技能與財力突出的朋友可以去嘗試unity3D

小提示：盡量在手機上嘗試， 現在的Retina 桌面顯示器…webGL真心帶不動，別說web了，原生的3D渲染在Retina顯示器上都很難，不過可以設定參數1倍渲染，只是醜了點。

順帶說一句，你以為交互向的，就不用學數據向的東西？ 不要天真，該學的還是要去學，所以我說路不好走。

資料向

毫無疑問，這是應該算是大家都認同的正統路線，也是發展得非常全面的一個方向，路已經有很多前輩踏平了。各種 MV* 框架， 各種服務端node中間件，大前端一下子吞併了本來後端要幹的大部分工作。
前後端分離開發勢不可擋，大數據視覺化依舊是非常熱門
如果一切順利的話，這個方向的人學一下D3.js會利好升職加薪。

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

Chrome PWA 專案其實大家有時間也可以當作技能提升去看看。

作者個人觀點：搞那麼多事，不如做好 Add to homescreen 的功能。有時候真感概Chrome在國內真不接地氣。

職業環境

現階段就業環境其實非常合適入門前端，掃清了微軟三大毒瘤瀏覽器（淘寶率先不支持IE8 ，幹得漂亮）， 即使在移動端webkit內核不是很完美的情況下，你依舊可以書寫很多你要的web效果，反正老版本的核心的那部分客戶對象，根本不能給你帶來任何利潤，不如直接放棄。因為只有最新技術才能帶給你利益，成就感。

前端各種工具也漸漸為前端開發帶來便利，雖然前期部署起來確實麻煩，但試問一下，你連這點耐心都沒有，我實在看不到你的未來在哪。

然後我們要面對的，也是一個不可抗力因素，我這裡不是慫恿你們幹什麼事，有時候一些封鎖，錯誤的封掉了一些學習資料。這個請自己務必不要放棄，找方法突破封鎖，我就舉個例子，假設你要用 npm 安裝 node 模組。那麼首要面對的問題就是某些不可抗力的封鎖，還有運營商的QoS限制，有些朋友向我推薦 yarn， 我親身試過，也是被封得一塌糊塗。

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

然而有時候這並不能滿足我們的需求，例如命令列下的一些操作。

假设你有 SS 这种梯子。
那么你可以在命令行下做一些临时的 proxy 设置：
MacOS 终端（假设你梯子的端口是1087）：

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

Windows 命令行（同样假设你的端口如下）：

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

然后就可以愉快地 $ npm xxxxx… 或者 ATOM 的升级 package 也能这么干。

题外话：ATOM升级package不顺利的话，用这个方法然后命令行

apm install [packagename]

总结:掌握的框架 / 技能

• 要会部署nodejs环境

• webpack

• babel

• gulp

• postCSS的插件

• CSS:Less, scss

• HTML:pug, haml (可选)

• Javascript: ES6, ES7

• WebComponents (可选)

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

对了还有即将大热的 hotfix， 代表作有：阿里热修复技术，据说饿了么，腾讯也出了。没去关注，但我个人觉得这个 apple 不会坐视不理的，毕竟你可以随时服务端修改APP绕过审核，这种外道招数我觉得可以学学但不要认真。

其它：

Angular 2 被小编你吃了？
Angular 3 开发组告诉我，你又得像 ng1 转 ng 2 一样， 从头学一次。 so…你们玩得开心就好，真的，我的项目连平滑升级都做不到，我真心没办法陪你们玩。

jQuery 要死了？ 要死了啊！ ？
哥，穩住。不會死，即使死了，也是融入原生支持，如果你要從jQuery過度到原生，叔叔推薦網址你去學，別怕：

• http://youmightnotneedjquery.com

• https://github.com/oneuijs/You-Dont-Need-jQuery

說好的交互向呢？你上面說的都是數據向。 AE + bodymovin（

https://github.com/bodymovin/bodymovin

） 去學，

svg不可少， 

sketch 是神器，

各大科技巨頭公司都在技術積累，你懂的。但真心不強求。

然後就是把數據向的也學了。

🎜