聽說2017你想寫前端？_ZenDei技術網路在線

聽說2017你想寫前端？

-Advertisement-

不好意思，沒有像其他公眾號一樣趕著發文章，每年到這個時候總有一大波什麼今年前端預測，技術框架預測什麼的。我這次寫這篇文針對的對象，是想在今年踏入前端這行的人們，不管你現在是徘徊在門口，還是已經半隻腳踏入這片未知領域，都可以參考一下先行者的經驗。 ...

作者：Jay（滬江開發工程師）
本文為原創文章，轉載請註明作者及出處

不好意思，沒有像其他公眾號一樣趕著發文章，每年到這個時候總有一大波什麼今年前端預測，技術框架預測什麼的。我這次寫這篇文針對的對象，是想在今年踏入前端這行的人們，不管你現在是徘徊在門口，還是已經半隻腳踏入這片未知領域，都可以參考一下先行者的經驗。

先來個大概預覽：

項目工程化
發展方向
職業環境
總結要掌握的框架／技能

小結放在前：

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這個毒瘤，在移動時代我們面對的是安卓這個毒瘤（限國內）

項目工程化

避免毫無意義的報錯

老實說，雖然前端開發工程化的概念終於開始普及，是一件好事，但事實上還是屬於初級階段，對入門新手並不友好。還不能像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;
}

您的分享是我們最大的動力!