2018年，前端應該怎麼學？

面向2018年，我以爲前端有這麼三個方向能夠突破

1. 前端邏輯層（包括三大框架，webpack，前端數據管理）
2. 前端交互層（包括css3，canvas，svg，vr等，以及對應性能優化）
3. node服務器層 （即服務器領域，以及前端開發工具的開發）

固然還能夠說，有electron這樣開發桌面應用的，可是我以爲大部分人的規劃仍是在web領域範疇的。

1、前端邏輯層

前端邏輯層解決的問題：前端的渲染問題。

其實就是，從後端拿到的各類數據（數據庫的結構化數據，各類素材），如何組合成頁面元素。

前端的渲染，其實就是 模板+數據 = 頁面

在模板部分

① html 負責結構

② css 負責樣式

③ js 負責邏輯

只有模板沒有後端數據的頁面咱們能夠理解爲靜態頁面

而咱們目前主流的三大框架，則提供 模板與數據之間的映射關係。

在邏輯層的研究，主要就是學習並熟練三大框架： Vue, React, Angular

這一塊是咱們90%前端，平常工做的主要部分。也是不少公司面試會去重點考察的內容。

可是，目前的行情已經不是，你會個新框架就能夠任性拿OFFER的時期了。

前端的井噴的狀況下，僅僅會一些基礎知識是不夠的。你必須往下深挖。

能夠深挖的部分

①框架部分： 舉個例子，如 Vue+ Vuex+ Vue-router+axios的全家桶

（react和angular的也相似，有這麼一套全家桶。）

要想在前端競爭中取得優點，須要在這些框架的原理上深挖。

研究： 

a. 源碼和實現原理 （理論）

b. 常見的應用場景和常見問題的實現 （經驗）

c. 同類問題的橫向對比（好比用了vuex 須要瞭解一下 redux是怎麼實現的）

②構建部分： webpack + npm/yarn + 腳手架（如vue-cli） +sass

構建部分，實際上是一塊很容易出區分度的領域。你研究透一點，你就越能駕馭住項目的變化。

研究：

a. webpack的配置和對應應用場景

b. npm的命令使用，以及一些高級的用法（架設私有npm或者本身寫全局包等）

c. 腳手架快速搭建的過程，以及如何自定義更改

d. 如何配置eslint和單元測試等

③代碼規範部分： es6 + ts + css規範 等等等

代碼規範很少說，前端的js和css都是設計得很粗糙的語言。若是你想hold住更大型的項目，那麼規範是你不可忽視的地方。

邏輯層部分，是咱們一般意義上理解的前端本職。

2、前端交互層

所謂交互層，能夠理解爲咱們常說的 特效。

當前的趨勢下，移動端瀏覽器的性能逐步提高。

將來一個大的趨勢就是——前端開發的效果，正無限逼近原生效果

同時一些大廠也在紛紛提早佈局了，以前驚豔四方的天貓造物節 H5

http://www.jianshu.com/p/111ee1fde39f

若是咱們要在這波浪潮上取得先機，那麼就必須提早學習。也許再過三年，前端的開發特效的能力，也會成爲標配技能。

能夠分三塊來看

1.呈現效果學習：

不少同窗不是不會特效，而是不知道要實現成什麼樣子。

用前端的各類東西鼓搗了，終於出來了特效，可是效果卻很難看。

不不不，作特效，應該先把特效樣子調好了再去作。

建議學習Adobe Effects （AE），直觀地看動效是什麼樣子，而後再翻譯成前端的動效。

2.相關數學/視覺原理：

a.貝塞爾曲線原理 b.視差原理 c.阻尼公式

3.相關技術手段實現

前端目前實現動畫特效的八種方式

http://www.offcn.com/it/2017/0110/5881.html

①gif： 設計直接出GIF，前端直接用

②逐幀動畫： css3 step屬性 或 js製做逐幀動畫

③css3 ： transition/ transform/animation

④svg : svg 很適合移動端

⑤canvas: canvas適合一些比較大面積的動效

⑥flash 轉 canvas : 這個我不瞭解

⑦video: 用h5 video標籤

⑧js動畫： 能夠配合平臺提供的api（重力感應等）開發更復雜的動效

3、node 服務層

node在前端應該是無人不知了。在實際使用中node的使用場景應該有這幾個：

① 做爲前端構建輔助工具： 如各類腳手架中，常常有node的參與

② 做爲服務端作渲染層： 實現接口合併和模板渲染

③ 做爲完整服務器： 通常是創業公司中，能夠一人搭建起所有web功能。如微信公衆號項目等

那麼若是要學習的話，要從哪裏入手呢？

學習一個新技術，我我的的方式都是

先把原生的文檔，快速過一遍，而後學框架。

不看原生的，很容易學一套框架，就是一次學習量。

學習原生知識，可讓你學框架速度提高。

框架裏面經常使用的：

①express ②koa ③基於以上二者衍生的框架 ④其他框架

我建議新手學習express 框架。理由很簡單，易學，使用多，教程多。

我我的想學習的node框架是阿里的egg.js 。

推薦理由是

①大廠開發，面向工程

②經受住了雙十一的考驗，質量有保障

總結

前端是端工程師，一切特性依賴於客戶端。

所以各位前端的同仁，除了上述的功能外，仍是要多留意瀏覽器以及移動端環境的變遷。

一些相似與 HTTP2協議，PWA，openGL等技術，都隨時有可能改變前端的工做方式。

我上面列了那麼多，其實我不少都沒有學過（手動狗頭）。可是除了技術能力，也許如下幾個綜合能力，對於前端er也是要注意的

①自我規劃能力：對於技術領域的趨勢的洞察，以及我的對應的學習計劃

②快速學習能力：搜索能力（利用網上的各類知識），知識遷移能力

③溝通能力和知識輸出能力： 面向產品，以及面向後端，面向社區同仁

前端要學的東西不少，各位同窗共勉~！