一個C++眼中的前端技術發展的規律

背景

因爲項目緣由，從一個Windows客戶端開發，跳進前端開發這個大坑。從一開始的茫然，到下定決心放空心態學習，到如今逐漸有了清晰的思路。我想，許多從客戶端（後臺）轉來學前端的，應該和我有相似的經歷。

1段：指令化編程

一開始學習的是基本的html，css，用簡單的javascript操做DOM。這是最迷惑的階段，拋去HTML/CSS的各類標準，各類瀏覽器的兼容等干擾信息。在頁面中的script標籤中，寫下操做DOM的代碼。
這個階段，像極了剛開始學習C語言，作做業的場景。一段代碼，完成一個任務。

2段：函數（庫）式編程

項目中遇到了稍微複雜的需求，好比msgbox，slider等，網上搜到的都是jQuery的擴展。因而乎發現了jQuery以及Zepto，好像終於發現了終極武器，今後信步於代碼江湖。原來這些都是YY，寫一些些簡單的頁面騙騙妹子能夠，真正的生產環境中，這纔是初級。
這個階段，像極了學習數據結構時，用C寫一些簡單的應用，好比一個簡易編輯器。會用到不少其餘人封裝好的經常使用操做，好比文件操做等。

3段：結構（模塊）化編程

隨着項目變多，不少東西能夠沉澱下來，在其它的項目中使用。這就須要把一個特定的功能的文件封裝起來，當有項目須要時，能夠引入進來。這裏要解決全局變量命名空間污染問題，做用域問題等。好比，AMD、UMD、CommonJS標準，再好比requirejs，seajs，nodejs等，都針對這個解決了問題。只有到了這個階段，工程化才能真正的起來。由於不用重複造輪子了。
這個階段，像極了用C語言開始工做後，使用公司及外界現有模塊開發。

4段：面向對象編程

手頭的模塊逐漸多起來，但仍是多不過變換無窮的需求。有些需求，用A模塊實現了，但下一個需求，和A相似，因而有人寫了B模塊。當你用的時候，會糾結於用A仍是B？那麼我看下載量吧，選了一個下載量大的，結果下載下來，仍是須要手動該一些代碼，才能適合本身的需求。如今npm，估計不少都是這種狀況吧。只有語言更深一步的抽象，更好的封裝，且在一個強大的基礎類庫下，纔是個好的解決方案。React，Backbone，ES6以及各類框架，也模擬了面向對象的一些特性。
這個階段，回想起Borland公司的Delphi和C++ Builder，在Windows客戶端開發時期的輝煌，就把這個玩到了極致。

5段：組件化編程

還原真實世界，工程無一不是由各類基本的元件搭建起來的。到了軟件工程世界，就是組件化編程。這是工程的最高效率階段，各類「快速開發工具」紛至沓來。市面上有各類酷炫的組件，並號稱「一行代碼就能讓你的項目也一樣的吸引眼球」。仍是Borland公司，把這個玩到極致，回想起爲了實現一個效果，第一反應不是如何從技術考慮，而是在網上找「控件」的破解版。一樣，遇到了bug，不多本身去修改（也很難改），而是再去搞一個控件來。目前，React正在這個階段發展，當各類Component積累成熟後，前端開發效率會進一步提高。
這個階段，對標的仍是Borland公司，還有微軟的COM技術。

6段：面向服務

面向組件的缺點是明顯的，爲了一個效果，引入一堆代碼（以及bug）。我只須要你的服務就行了。把組件功能封裝成服務，經過通訊協議（RPC，HTTP等）和本身的工程連接起來，就能完成需求。這個階段尚未明顯的對標，我想各類統計代碼從概念說應該是至關的，還有各類api接口。也就是說，前端技術中，極可能把面向服務形式，轉移到了後端中。

7段：分佈式/虛擬化

當網絡及虛擬化技術再也不是門檻，那麼經過分佈式及虛擬化技術，能將工程快速部署到各個平臺，各個互聯網角落。這個階段前端開發反而不用考慮了。由於分佈式自然的網絡環境能夠提供，而虛擬化由js引擎已經考慮到了。而面向技術的虛擬化已經慢慢開始，React-native，angular，都在慢慢開疆擴土。

附加：打包，部署

在傳統的客戶端開發中，這些都是IDE提供的，但前端開發卻百花齊放。r.js，webpack，browserify，grunt，gulp，duo等。其實沒必要亂和糾結，找到一個適合本身的就能夠了。

總結，至此，經歷了一個階段（半年了吧）的js採坑，才慢慢的思路清晰起來，技術的發展路線都是有規律的。前端的亂，其背後仍是有一條清晰的主線的。