聲明：本文CSDN作者原創投稿文章，未經許可禁止任何形式的轉載。
　　編者：本文來自攜程框架研發部高級經理魏曉軍在第二期【攜程技術微分享】上的分享，以下為整理后的文字實錄。關注攜程技術中心微信公號ctriptech，可獲知更多微分享課程信息。
　　責編：錢曙光，關注架構和算法領域，尋求報道或者投稿請發郵件qianshg@csdn.net，另有「CSDN 高級架構師群」，內有諸多知名互聯網公司的大牛架構師，歡迎架構師加微信qshuguang2008申請入群，備注姓名+公司+職位。
　　因為支持用java開發原生應用，React Native一推出就受到不少公司熱捧，各家都躍躍欲試。但有一個痛點是， 在移動端，我們是否有必要開發多套程序：iOS、Android和H5？本次將通過對Moles框架的分享，介紹攜程在React Native方面的實戰干貨，希望給大家一些靈感和啟發。
　　本次分享的內容包括三個方面：
　　Moles框架在React Native和我們主App的集成中起到了什么作用？Moles框架是如何打通Android、iOS、H5、SEO，讓我們一套代碼跑在多個平臺上Moles框架的組成以及原理是怎樣的？
　　這些內容將通過以下幾個部分的講解來一一給大家進行解答：
　　React Native的現狀Moles 框架的出現Moles 框架的組成Moles 框架的功能Moles 框架的原理簡析Moles 框架的使用Moles 框架的案例開源計劃。
　　一、React Native的現狀
　　React Native是2015年3月份Facebook開源的一個Native上的一個框架。那么為什么它現在會這么火呢。
　　我們先來看看它有什么優點：
　　首先，對于做前端的我來說，最吸引的就是可以用java來開發Native應用了。之前java只可以開發瀏覽器上的一些功能，隨著Node.js的出現，又讓java走向了服務端，現在React Native的出現又讓java走向了Native端。如果要用現在一個時髦的詞來形容java的話，我覺得“全?！闭娴牟粸檫^。
　　其次，React Native是Facebook將ReactJS的思想移植到Native端。所以React Native就擁有了RectJS的很多特性，如：組件化思想、Virtual Dom技術以及JSX與Flexbox組合完成的布局等等，同時React Native又引入了熱更新機制、CssLayout機制，讓開發人員尤其是Native開發人員眼前一亮。
　　有優點也有缺點，我們再來看看它的不足：
　　我們知道React Native先出了iOS版本，然后出了Android版本。兩個版本之間存在很多的差異性，甚至有好多組件都會帶有平臺的后綴，這使得開發人員必須要為這兩個平臺寫不同的代碼。
　　此外，對于公司來說，在移動上的投入，不僅有Native還會有H5，而在H5上React Native并沒有考慮。從MVC框架的角度來看，React Native只做了View這一層，那么Controller、Model、Router還需要做。從App的完整性來看，只學會React Native并不能開發一個健全的App。它的更新策略、Hybrid API的提供，配套的UI組件、監控機制等等這些都沒有。
　　二、Moles 框架的出現
　　伴隨著React Native項目的開發，逐漸的Moles框架就形成了。
　　mole ［m??l］ 小鼴鼠，是種鑿洞能力非常強的嚙齒類動物。把框架稱為之為Moles，也是寄希望我們的框架能像mole一樣，能夠打洞，能夠打通Android、iOS、H5、SEO這幾個平臺。當然一個mole的能力是有限的，所以我們取其復數形式Moles。
　　如果說 當前移動端的三大痛點是：性能、動態性、多端適配的話。那么我認為React Native解決了性能、動態性，而我們Moles則解決了多端適配的問題。
　　Moles的目標是要盡可能的做到在H5端開發的內容可以直接運行在Native上，在Native端開發的內容也可以直接運行在H5上。
　　三、Moles 框架的組成
　　該框架主要由三部分組成：
　　- moles-web
　　該部分主要是為H5服務，是將React Native在Android、iOS中沒有差異化的Components、APIs提取出來，單獨封裝成一個Library供H5端來使用。這樣做的好處是，這個Library只在H5上會是使用到，在Native是不需要的，以減少框架在Native的體積。
　　- moles-cui
　　該部分主要是是將React Native在Android、iOS中有差異化的Components、APIs提取出來，并且添加一些公司定制化的組件進去，包括：UI組件、監控組件、采集組件、路由組件等等。moles-cui可以說是Moles框架的核心部分，它不但Native開發需要使用，在H5上的開發也需要使用。
　　- moles-cli
　　該部分主要包括Moles項目的初始化、編譯、打包等功能。
　　

普通下載普通下載

相關電子資料下載