《微信小程式開發入門精要》——第1章，第1.2節原生熱佈局

本節書摘來自非同步社群《微信小程式開發入門精要》一書中的第1章，第1.2節原生熱佈局，作者 李寧，更多章節內容可以訪問雲棲社群“非同步社群”公眾號檢視

1.2　原生熱佈局
儘管本書的主題是微信小程式，但這裡還要提一下原生熱佈局的概念。由於目前移動平臺主要有Android和iOS，但這兩個平臺使用的開發技術完全不同（前者主要使用Java，後者主要使用OC或Swift），所以就需要有一種可以同時開發兩種平臺的技術，這樣理論上可以節省一半的開發成本。

以前比較流行的技術是混合開發（Hybird），這種技術很簡單，就是HTML5+CSS+JavaScript的結合。和木桶原理一樣，木桶裝多少水，是由最短那個木板決定的，而在這三者組合中，HTML5就成為那個短板，降低了Hybird的整體效能。

對於Hybird技術，我們只需要其中的兩個優勢：跨平臺和熱更新。跨平臺很好理解，各個平臺都會有Web瀏覽器，而熱更新主要是邏輯程式碼和UI佈局的熱更新。在邏輯程式碼方面，熱更新用JavaScript，這裡主要討論UI佈局的熱更新。在Hybird時代，使用的是HTML5和CSS，它們進行熱更新沒問題，但效能有問題。如果把HTML5元件和原生的元件放到同一個視窗，就可以感覺到它們的不同。所以現在的主要焦點在於UI佈局可以實現熱更新，效能達到或接近原生元件。HTML5達到了前者的要求，但沒有達到後者的要求。我們知道，Android佈局使用了Layout，iOS佈局使用了storyboard，不管是哪種技術，都不支援熱更新，都是固化到apk和ipa檔案中的。不過這兩種技術都支援動態建立元件，所以React Native率先推出了利用JSX描述元件的位置、尺寸以及其他屬性，然後再根據這些屬性動態建立本地元件的技術。JSX會生成一種中間狀態，我們可以稱為虛擬DOM（Virtual DOM），其實就是一種中間元件而已，然後系統會根據執行平臺的不同（Android或iOS），將其動態生成不同平臺的原生元件，這樣很容易實現熱更新。因為JSX就是個普通的文字檔案，可以很容易地從網路上下載，這一點和HTML5相同。由於元件都是動態建立原生的，所以和在Layout、storyboard中定義的靜態原生元件的效能相同，因此，很容易解決前面描述的問題。我們也可以把這種利用XML或其他格式描述UI佈局，並實現動態生成原生元件的技術稱為原生熱佈局。

微信小程式借鑑了React Native的原理。不同的是，React Native是通用的，而且可以隨意擴充套件。而微信小程式必須執行在微信提供的架構上，是一種寄生的原生熱佈局。

除了React Native和微信小程式，還有阿里巴巴的Weex，這是阿里巴巴前端團隊釋出的一個開源框架，有興趣的讀者可以到http://alibaba.github.io/weex這個地址研究這些框架。也是用了類似Virtual DOM的技術，可以三位一體（Android/iOS/HTML5），React Native對應的React.js可以生產HTML5，微信小程式理論上也可以。希望以後能推出類似的技術，在開發微信小程式的同時，也可以同時開發基於HTML5的微信公眾號（目前騰訊推出的最新小程式IDE已經支援類似的功能了，不過功能不算太強）。

通過原生熱佈局的應用，App的效能完全可以和原生App（其實就是動態生成的原生元件）相媲美，目前已經有很多類似的框架問世，以後可能會更多。相信這些原生熱佈局的方式會在今後很長一段時間內成為跨平臺開發的主流，因為它的“顏值”實在太高了！