NativeScript的開發體會

　　上個月開始，國內的主流技術網站開始在推薦NativeScrpit，"js+xml寫跨終端app"、"原生體驗擋不住"，不少網站都拿這個當作宣傳NativeScript的噱頭。最近比較清閒，沒禁得住誘惑，從早到晚看了快一週，簡單的搭了一個小應用的界面。可是在這個開發過程當中，總有些槽須要吐，不吐不快。下面說說從框架完整性、開發難度、實際開發過程幾個方面談談我對這個新框架的見解。（不會介紹NativeScript的具體用法，想了解的請先移步官網）。

　　

(NativeScript官網首頁 https://www.nativescript.org/)

 

1、框架完整性

　　NativeScript主推的是用javascript語言寫邏輯+XML寫佈局來實現跨終端App(即iOS、Android、WP)，可是目前只支持iOS、Android，github上看到說WP正在開發中，預計很快跟上。目前的NativeScript是beta嚐鮮版，可是裏面所提供的widget組件、layout方式讓不少前端開發者看了以後磨拳擦掌打算拿這個乾點兒大事兒。

　　實際上是圖樣圖森破。

　　1.與原生APP融合？No way

　　NativeScript和React不一樣，沒法與原生項目融合，即你只能純寫個NativeScript的應用，不可能把它抽離出來做爲某原生應用的一部分來出現。雖說它和React的出發點一致都是"用Web APP的開發速度打造Native App的體驗"，可是實際上，它算是雞肋吧，我以爲拿它來寫個展現App或者簡單的應用仍是不錯的。

　　2.組件支持不夠完善

　　其次，NativeScript中雖然已經支持了不少組件，好比說tabview、srcollview、button，可是提供的組件方法、屬性過少，整個框架還不是很豐滿。舉個例子，（前端開發出身，app開發目前只接觸過iOS），Button按鈕咱們確定會常常給它設定背景，即圖片按鈕。好比下面這個：

　　

　　原生應用裏，好比我接觸過的iOS裏用屬性確定能夠設置，前端用background-image也行。可是目前NativeScript裏面Button是沒辦法設置背景的，只能添加背景色。因此要想實現這個按鈕怎麼辦呢？我也是看了github上的demo才知道該怎麼作的。既然是圖片按鈕，那就純圖片好了，因此上面那個按鈕在NativeScript中XML佈局裏面的代碼是這樣的：

<GridLayout row="0" col="0" cssClass="crossBtn">
　　<Image url="~/app/images/cross-btn.png" stretch="fill" />
</GridLayout>

　　最外層封個Layout而後讓圖片填充，說是按鈕其實就是圖片。再舉幾個例子：statusBar怎麼取消顯示，我一直沒有找到；文字不能加粗、不能更改字體；Label組件周邊有一圈兒Margin始終幹不掉；Search組件外層有灰色底色等。並且組件對於系統調用也不是很好，找了半天文檔和博客也沒見到怎麼讀取通信錄，目前系統調用就支持照相機、文件、定位。

　　因此我以爲，NativeScript若是不能在屬性支持上作的更好，估計不會火過久。

　　3.XML解析引擎

　　第一天在寫一個官方文檔上的Dock佈局時，佈局出不來，跑起來模擬器以後頁面空空的。看樣是解析出問題了，回去看源碼，結果發現是XML源碼的問題。當時我直接從官網上粘貼下來的這段XML源碼（http://docs.nativescript.org/ApiReference/ui/layouts/dock-layout/HOW-TO.html）：

　　可能你們看出來了，最後幾個標籤由於空格根本就沒成對。我當時也把空格刪了，本身手動改的對齊，仍是不行。最後恰巧試出來了是標籤內style和=直接的空格，也得刪了，要否則解析爲空。問了一下身邊作安卓和WP的同窗，說他們那邊的XML解析不會出現這種問題。因此NativeScript的解析仍是應該優化一下，就這個樣子的話，框架內提供的XML解析引擎我也不敢用啊。

　　4.佈局方式

　　做爲一個忽悠前端寫App的框架，沒有好的佈局支持怎麼能忽悠住人呢。因此NativeScript在這方面作的仍是不錯的，支持了absolute、stack、grid、dock、wrap這幾種佈局方式，就體驗來說，自己作前端出身的，對幾種佈局都不太熟悉，上手開發以後grid用的最多，其中提供的*和auto解決了太多麻煩事兒。幾種Layout之間混合嵌套使用，感受不錯。可是感受XML嵌套層級太深了，好比寫個留言板的樣式，得內套4，5層標籤。

　　

（打算寫一個記念日應用 某頁面的佈局樣式）

　　可是佈局時候應該注意組件的大小聲明，若是採用的是grid佈局方式，*會幫助咱們自動把組件佔滿剩餘空間，並且支持2*：*這種比例模式。可是在Stack中須要設定元素的上下、水平對齊位置、有的控件還須要指明寬、高度。頁面跳轉使用的是frame模塊的navigator方法，直接跳轉到另外一個page（page在這個框架中是佈局的基礎）。

　　5.事件和手勢識別

　　做爲一個APP開發框架，事件支持和手勢識別少不了。事件綁定主要有兩種方法，一種在XML中經過屬性的方式寫（記得在js中export出對應的函數），另外一種是在JS代碼中先getView拿到控件再給其添加事件。手勢識別的話暫時支持tap、double、long tap、swipe、pan等幾種，能夠知足基本需求。

　　可是我在組合使用tap和long tap時發生了Bug。寫了一個通信錄的demo，在listview中的單一條目上綁定了單擊和長按兩種操做，本意是單擊打開編輯頁，長按彈出刪除提示。手勢混用以後每次長按以後就會報錯，不瞭解具體詳情，可是懷疑是否是手勢捕獲作的有點問題，兩個事件都被觸發了？求詳解。

　　6.項目編譯

　　官網上推薦兩種開發模式，一種是終端模式另外一種是Online的拖控件模式。第二種的話是用的國外網站，編輯沒有問題可是在線預覽的時候我這邊遲遲打不開，多是牆的問題吧。因此直接配了一套環境。環境配置仍是很快的。我在用的電腦是IMac，其中只須要經過npm安裝幾個包和nativescript就能夠了，官網文檔在這塊介紹的很清楚。

　　NativeScript的編譯運行過程大概是先讀取XML佈局文件、JS邏輯代碼（主要是事件綁定和一些組件建立），再經過Module模塊轉化成原生的組件，實現剛纔說的原生體驗。同時在編譯過程當中會根據以前在命令行中建立的平臺版本生成對應的完整項目文件，好比我添加了ios，那麼就會生成下面這個文件夾：

　　

　　在終端裏面建立一個項目的步驟爲1.create命令添加項目 2.add命令添加對應平臺 3.run命令在模擬器或真機測試。其中最後一步的時間，我這邊Mac平時最少一分鐘，最多兩分鐘多。整個步驟大概是先export又打包又啓動模擬器，啓動模擬器以後還有十幾秒的黑屏（這個是模擬器的問題？）。因此通常寫完以後一運行，好嘛，兩分鐘過去了。因此單純經過終端來編譯執行仍是挺痛苦的。

　　可是後來發現一個改進的辦法，速度提升了不少，就是經過直接打開生成的xcode項目來編碼。xcode項目目錄下會有完整的app文件夾和module模塊文件夾，因此不用擔憂缺東西的問題，並且在xcode中編碼還會有對應的調試輸出，打開模擬器的速度也快了不少，這幾天都這麼幹的。

　　項目調試的話這個框架沒有給咱們提供太好的方案，以後console.log控制檯輸出和自動報錯兩種。不過這裏面有個爭議點就是若是你在css文件裏聲明瞭該控件不支持的屬性，不如說font-weight的話，不會報錯，也不會顯示。我以爲應該報錯，給開發者明確的提示。內存管理的話，沒有太研究，官網裏提到說該框架都是「基於弱引用，因此請不要擔憂內存泄露的問題」。

 

　　總結來講，整個項目的完整性我以爲只完成了70%，如今應該仍是迭代開發狀態，不知道開發者們還在沒在接着弄，若是上面幾個問題得不到改善的話就真火不起來了。　

 

 

2、開發難度

　　不得不說官網的文檔寫的不錯，按照入門helloworld教程、佈局方式、組件使用和最後的API，總體寫的很清晰。可是部分組件的具體調用方式寫的很不詳細。好比說SearchBar，文檔裏面沒有給XML中如何聲明，只給了個js代碼new方法，害的我覺得搜索框只能經過這種方式來加入。結果後來偶然間嘗試成功了，XML標籤得寫成<Search-bar>。並且文檔裏面對於不支持屬性的解決辦法也沒有給，上面提到的按鈕背景圖片，很普通的技術點，不支持好歹給個解決辦法啊。最後還得去github下載demo。

　　語言上的話，主要使用XML、JS和CSS。CSS沒什麼說的，記得有些屬性自己是不支持的，別害的本身覺得本身是寫法錯誤。

　　JS的話，文檔裏面給出的API調用還算詳細。經過require的方式加載模塊，每一個組件都對應了一個原生控件；new命令實例化控件；export命令來模塊導出，所導出的函數、屬性、數值均可以在XML中被使用。總體編碼風格和node.js同樣，做爲前端寫起來很順手。Event事件模塊的話，兩種方式綁定。

　　畢竟剛開源剛受關注，國內資料暫時比較少，博客園裏面幾篇文章看了一下都是在教怎麼配環境。

　　

　　總結來講我以爲開發難度不大，仔細看看文檔，寫幾個demo，搞清佈局方式就沒啥了。

 

3、實際開發過程

　　說說我(一個web前端)在寫上面的那個記念日demo的流程。demo只是寫了寫界面和簡單交互，尚未網絡請求代碼。

　　1.明確佈局樣式，找好設計草圖

　　2.觀察佈局，劃分頁面區域，好比使用stack仍是grid，使用什麼組件

　　3.寫page.js和page-view.js，封裝實際函數，好比pageload事件、tap事件等

　　4.合併請求文件，寫清頁面跳轉邏輯

　　5.修改圖標和引導頁

　　大概就是這樣，上面那個頁面寫了不到一個小時，感受速度通常把。確定沒有我用autolayout+拉線的方法快，可是寫一次生成三個客戶端，知乎裏看趙望野的評價很好玩，「write once run every where的烏托邦夢想」。小應用的話這麼幹，我以爲值。

 

4、文末總結

　　NativeScript的學習過程仍是挺愉快的，算是接觸了一下黑科技（alert和dialog彈窗的調用真的很方便，後臺JS一個函數就搞定了）。體會的話，感受這東西仍是在發展當中吧，若是能有組件優化、性能優化、編譯速度提升、爭取像React同樣融合的改進的話，我以爲仍是有應用前景的。上面文章若有錯誤之處歡迎指正，若是哪位同窗有更好的看法或者作過Native Script的性能測試，歡迎討論，必定仔細學習。

　　最後說下我以爲可能適合的應用場景：

　　1.小李是大三狗，他選了一門移動應用開發的課，惋惜他每天去寫PHP，沒咋學會安卓開發。要交大做業了，怎麼辦？

　　2.小李是大三狗，他選了三門移動應用開發的課，分別是安卓、WP、iOS，要交大做業了，時間不夠怎麼辦？

　　3.小李是軟件學院X班的團支書，學院團委說要搞個團建，建立一個團建APP，這時候老師找到了小李

　　4.小王最近比較閒，忽然間據說有個東西叫NativeScript...

　

 

　　過幾天去看看React...天貓聽說已經用上了?!