我個人做前端開發是有過一個斷層的。

第一階段（切片階段）

在10年的時候，前端的工作，更多的是在切片的層面上，從IPO（input->process->output）的層面上講：

input：輸入的是PS產出的頁面圖片；

process：前端的工作是，拿到圖片，使用fireworks這一類的工具進行切片，那時候還要配合dreamweaver工具，主要是用於PHP、.NET以及JavaEE這類的技術棧上；

output：輸出自然就是可以用瀏覽器解析的HTML頁面，加上JS、CSS這些進行打包，給後臺進行標籤嵌入。

這個階段的前端更多的是苦力活兒，薪資水平也不高，但是很累，不過門檻很低。

第二階段（過渡階段）

大概是12-14年左右，我接觸了Bootstrap，自從Bootstrap這一類的工具流行起來以後，前端的開發處在了一個比較尷尬的地步，因為大多數的元件可以靠著一類的工具進行元件式的開發，柵格化的佈局，讓前端的切片工作，在進行小型網站開發時，處在了一個有點兒尷尬的地步，自此以後，我主要從事後臺服務開發，也很久沒有接觸過這類東西了。

第三階段（架構階段）

18年初，我已經做了兩三年的C++開發，突然有個專案組協調到我，說公司現在的業務需要開發web平臺的軟體，但是目前公司裡沒有此類的人員。問了很多人，才知道我之前有過幾年的前端開發經驗，所以直接協調我過來做前端架構師

拿到了需求後，發現有大量的非同步資料的傳輸需求，以及對web這個狀態機，有大量的持久化需求，我當時就有點兒懵，畢竟是要做架構，還要帶著一群人開發，所以在網上查了一下目前前端的主流技術，然後看到了一大堆不太懂的名詞：

react、VUE、AngularJS……

這些是什麼？我沒有任何頭緒。。

於是通過朋友，聯絡了一個baidu的前端工程師，詢問有關前端開發現在的技術，我們交流了20分鐘，沒有任何進展，後來我拉下臉直說了：為什麼沒有HTML了？為什麼不用打標籤了？

那邊的工程師恍然大悟：

哦，你說的是幾年前的開發模式啊，現在早就不用了。完全變了，你先好好學習吧。

我一臉懵逼，於是花了一個月的時間，學習了React整個框架，並且在接下來的開發週期內，逐步迭代升級了四個版本的架構。

如果你也像我一樣，處在這樣一個過渡階段，那麼這個系列的文章，對你將會特別有用。

以下是目錄：