NativeScript官方書籍：1.爲何選擇nativescript

1.爲何選擇nativescript

本章介紹

• 什麼是NativeScript
• nativescript對於移動開發世界意味着什麼
• NativeScript工做原理

在早期的移動應用程序（前iPhone）中，在一次編碼多平臺部署方法論上，沒有過多筆墨。開發人員只是想盡快將應用程序發佈到到蘋果或谷歌商店裏。若是這意味着他們的應用程序不支持這兩個平臺，也是一個合理的犧牲資源的理由。

及至今日：移動世界在不斷變化，使得跟上最新設備愈來愈困難。當開發人員建立應用程序時，他們須要接觸到儘量多的受衆：僅專一一個平臺就再也不是一種選擇。應用程序須要支持跨平臺和設備。爲了跟上不斷變化的環境，開發人員高度重視任何使他們可以簡化移動應用程序開發過程的技術。

今天，開發人員在編寫一套代碼面向多個平臺的應用程序方面，能夠有多個選擇。NativeScript是其中的一個選擇，但不是惟一的一個。你可能據說過其餘像PhoneGap，Xamarin，React Native。這些框架中的每個都能支持編寫一次代碼，同時部署到Android和iOS中，但咱們不是來討論一個框架相對於另外一個框架的優勢的。相反，咱們但願您學習到如何使用您可能已經擁有的技術棧，編寫專業跨平臺的移動應用程序。若是你是一個初學者，知道用HTML，JavaScript，和CSS構建簡單的web程序，或經驗豐富的專家，你就能夠用NativeScript寫一個手機應用程序。

當你讀這本書時，咱們會告訴你如何使用nativescript提供的架構化的方案，用單一的代碼庫，編寫跨平臺的應用程序。當你完成後，使用你選擇的技術：HTML, JavaScript和CSS 或者Angular, TypeScript和CSS，你會擁有建立本身的Android和iOS手機應用程序的技術能力。

　　注意：若是你不熟悉Angular或TypeScript，也OK。這本書的最後3章致力於教你它們是什麼，以及它們如何被用來建立移動應用程序。

 咱們已經與nativescript初學者一塊兒工做，許多人想直接跳到應用nativescript加Angular。若是這聽起來和你同樣，那就去作，可是要謹慎行事。若是你不熟悉Angular，同時學習NativeScript和Angular可能感到混淆，由於什麼是NativeScript，什麼是Angular之間的界限有些模糊。所以，咱們建議您先了解樸素的(plain-old-vanilla) nativescript。按照咱們在本書的前3部分的練習，而後跳到nativescript加Angular。

 

1.1 Nativescript介紹

Nativescript是一個爲iOS和Android構建跨平臺移動應用程序的開源框架，它由Telerik開發和維護。Nativescript在許多方面不一樣於其餘的移動框架，最大的不一樣是它是一個能夠用單一的代碼庫建立原生移動應用程序的跨平臺的框架，此外，Nativescript提供了不少功能，能夠很容易上手，而且利用你可能已經有了的技術棧：

• 利用你現有對HTML，JavaScript，CSS的瞭解（你不須要知道Objective C、Swift、或java）
• 你全部的代碼只編寫一次
• 訪問Android和iOS平臺的原生API
• 一個幫你建立應用程序架構的固定方式
• 與Angular原生集成（但不是必須的選擇）

有時學習一種新語言是進入新世界的障礙。當建立nativescript應用程序時，你會利用你現有的建立HTML應用程序的知識，來快速建立一個針對多個平臺（Android和iOS）的應用程序。由於你已經擁有了這些技能，你會發現建立nativescript應用程序能夠很快。甚至更好的是，你沒必要學習Objective C、Swift、或java。

1.1.1 Nativescript應用程序是如何被編寫的

Nativescript應用程序是用JavaScript、XML和CSS組合編寫的，如圖1.1顯示。

　　圖1.1 JavaScript，CSS和XML的組合建立Nativescript應用程序。

當你寫nativescript應用程序，你的代碼有3個部分：JavaScript，XML和CSS。JavaScript組件運行業務邏輯、訪問數據或控制應用程序的流程。XML部分定義了用戶界面（UI），CSS用於樣式化UI，很是相似於HTML應用程序。

Nativescript的應用程序結構和代碼相似於HTML應用程序，但僅止於此。Nativescript在跨平臺的移動應用程序的世界是獨特的，由於它容許你寫你的UI（XML）代碼一次。在運行時，UI代碼在應用程序中呈現原生UI元素。例如，在iOS UI元素呈現爲iOS原生按鈕、下拉菜單、列表等。一樣地，Android UI元素呈現爲原生Android組件。

圖2.1顯示的是渲染一個原生iOS按鈕，用nativescript編寫。

　　圖1.2用nativescript編寫的iOS應用程序的原生按鈕。

你會注意到，它看起來就像是一個iOS按鈕。這是由於它就是一個IOS按鈕。全部的nativescript UI元素都是原生的iOS和AndroidUI元素。

在其餘跨平臺框架中，您可能須要花時間爲特定平臺編寫特定的視圖層代碼。可是，只寫你的UI層代碼一次而且並把它渲染爲原生的UI組件的能力，是把nativescript和其餘框架區分開來的一個重要特色。

Nativescript的另外一個獨特的特色是，你能夠訪問原生API。

　　注意：前面提到的幾個框架也容許您訪問本機API。可是，正如你將在本書學習到的，nativescript運行和訪問原生Android和iOSAPI的機制是很是不一樣的。即便你用Javascript寫nativescript 代碼，你也能夠訪問每個你的應用程序運行設備上的Native API函數，特性，和硬件。

 

 1.2這本書你會學到什麼

此時，你開始意識到用那些技術來寫nativescript應用程序（HTML，JavaScript，CSS）。不是不少，對吧？若是你已經具有了這些技能，你可能想知道爲何你應該繼續閱讀。在這本書中，咱們將教你如何利用這些技能，並應用它們來建立專業化的移動應用程序。
咱們指的是專業化是什麼意思？專業化對不一樣的人意味着不一樣的東西。你可能認爲準時上班是很專業的，而你的朋友可能認爲專業化意味着穿西裝參加面試。

　　注意：對咱們來講，專業化意味着爲應用程序建立一個單一的、可維護的代碼庫，以便隨着時間的推移它可以繼續成長。

建立一個專業的應用程序，也意味着利用nativescript的特性，讓你的應用程序看起來和用起來都像是在它運行平臺上的原生應用程序。

當你學習創造專業的應用程序時，你會發現nativescript應用程序是如何構建的，以及如何訪問原生硬件組件，如相機、GPS和位置服務。

可是，在咱們直接跳到代碼部分以前，咱們看一下nativescript的透視圖是很重要的，這讓你瞭解它是如何工做的。

 

1.3對移動開發nativescript意味着什麼

回想起15年前（若是能夠），當你隨身攜帶一個Windows 6手機或淘到了三星最新的Blackjack

 

：這是在Android和iOS以前的。那時只有較少的平臺和設備。今天，每個月都有新設備問世。因爲這種增加速度和多樣性，開發社區已經開始尋找更有效的方法來編寫針對全部平臺的移動應用程序。

1.3.1 移動應用程序的不一樣類型

移動應用程序分爲四大類：原生的、混合的、交叉編譯的和即時編譯的（JIT）（表1.1）。

　　表1.1不一樣的移動應用程序類型及其流行框架

　　定義（JIT）即時編譯應用程序是在運行時編譯的應用程序，而不是在應用程序執行以前編譯的應用程序。例如，在即時應用程序中，您的源代碼直到最後一分鐘，或在執行每一個語句以前，都沒有編譯成本地機器代碼。

不包括原生應用程序，表1.1中的其餘三種應用程序的目標是相同的：編寫應用程序代碼一次，並將其部署到多個平臺（這是人們在跨平臺時說的意思）。
儘管上面列出的跨平臺框架取得了相似的結果，但它們以多種方式實現了這一目標。圖1.3顯示了不一樣類型的移動應用程序之間的差別以及它們在設備上運行的方式。

 

 　　 圖1.3不一樣類型的移動應用程序如何在設備上運行

 

在圖1.3中，您能夠看到每種類型的移動應用程序如何使用不一樣的機制在移動設備上運行。混合移動應用程序本質上是在Web瀏覽器中運行的網頁。交叉編譯的應用程序被編譯後，將它們轉換成本地應用程序。最後，JIT編譯的應用程序（如nativescript），在虛擬機內部運行。對於nativescript應用程序，你的代碼在一個JavaScript虛擬機內部運行。

 

　　 定義： JavaScript虛擬機是一個運行JavaScript代碼的軟件。

 

若是你是一個.NET或java開發人員，你已經熟悉了代碼運行在虛擬機中， 由於.net和java都用虛擬化的方式運行代碼。NativeScript的工做方式相似。

 

1.3.2 Nativescript爲何重要

在JIT編譯以外，nativescript與其餘移動應用程序框架相比，還有其它的多種差別。咱們認爲最顯著的區別是，您可以用一個代碼庫編寫真正的原生應用程序，並將其部署到Android和iOS中，而無需更改代碼。

在過去，咱們已經其餘的移動應用程序框架打過交道，在咱們看來，NativeScript是獨特的。在其餘的框架中，咱們不得不寫了不少墊片(shim)代碼。這個墊片(shim)代碼就像一塊木頭，用來在廚房裏墊高爐子或固定門框。以此類推，假設你正在安裝一個新的門和門框。大多數門都是按標準寬度、高度和深度建造的，並且幾乎正確。但在全部狀況下，你不得不在這裏加一個小墊片和在那加一個小墊片，以使它正好合適。這就是你在其餘框架中編寫代碼的樣子：在Android版本的應用程序中添加一點UI代碼，使其在Android版本中顯示正確；並再增長一些UI代碼，使其在iOS上看起來更合適。

　　注意： 等一下，咱們不想粉飾NativeScript是完美的，由於沒有什麼是完美的。可是，NativeScript是引人注目的，而在咱們看來，要求墊片(shim)數量最少。事實上，這些墊片(shim)是如此有限，在寫一個行業應用程序時，你可能永遠不會遇到這種需求。當你遇到了，還有大量的nativescript專家在https://nativescript.org準備好了而且願意幫你.

快速發佈到市場上

那麼，這都意味着：減小墊片(shim)代碼，編寫一次，處處部署，等等。不管你是一個企業，一個獨立的開發人員，仍是一個休閒愛好者，你都不想浪費你的時間。並且，這些東西（更少的墊片(shim)代碼，編寫一次，處處部署）意味着你會花更少的時間來開發你的應用程序，讓你有更多的時間來創新，和在更短的時間內發佈更多的功能。

1.3.3 什麼類型的應用程序能夠用NativeScript建立

如今關於NativeScript的工做原理，你知道的多一點了，咱們認爲您知道能夠用它來寫哪些移動應用程序的類型，也是很重要的。你還記得，nativescript應用程序直接運行在設備上，而且被應用程序內運行的JavaScript虛擬機解釋(interpreted)。這意味着nativescript程序不被限制訪問本地設備或硬件API，所以任何應用程序均可以寫成一個nativescript 應用程序。

　　警告： 你能作到並不意味着你應該這樣作。

讓咱們開始看看，哪些類型的程序，你不該該用NativeScript編寫。

圖形密集型遊戲(graphic-intensive)

讓咱們開始澄清：不要用NativeScript寫圖形密集型遊戲。
想象一下，你正在開發下一個大型手機遊戲：Floppy Bunny,而且Floppy Bunny須要大量的圖形和計算能力來渲染其強烈的3D圖形。這時候NativeScript就表現不佳了，爲建立高性能的3D遊戲，可能有更好的平臺。

畢竟，NativeScript應用程序運行在一個JavaScript虛擬機內，因此有一個額外的，儘管很小，你的應用程序和裸露的金屬(the bare metal)之間的抽象層。爲了從設備中榨出每一點性能，使Floppy Bunny得到巨大成功，您應該考慮編寫原生Android或iOS應用程序。

業務線應用程序(line-of-business)和消費者應用程序

若是你由於咱們破壞了你寫Floppy Bunny的但願而情緒低落，別擔憂。還有其餘類型的，NativeScript很是適合的應用程序！
不像咱們的遊戲的例子，若是你正在開發一個專業應用程序如新聞種子（news feed），一個網站的配套應用程序，社交媒體應用程序，甚至是一個用來控制家中全部的智能設備應用程序，nativescript是一個完美的選擇！事實上，有各類各樣的已經橫跨幾十個行業的用nativescript寫的應用程序。看看這些應用程序的展現：https://www.nativescript.org/showcases.

1.4 NativeScript工做原理

使用JavaScript、XML和CSS編寫原生移動應用程序並非您常常據說的。相反，你聽到的是用Objective C, Swift或java寫原生移動應用程序。用如下幾個組件，Nativescript使得它編寫的原生移動應用程序：nativescript運行時，核心模塊、JavaScript虛擬機，你的應用程序代碼，和nativescript命令行接口（CLI）。圖1.5顯示了這些組件是如何協同工做，來建立本地Android和iOS項目的，這些項目被內置到運行在移動設備上的本地應用程序中。

　　圖1.5 nativescript組件和應用程序代碼一塊兒編譯並運行原生iOS和Android應用程序

咱們知道圖1.5中有不少框和線，而且這時候觀察這些組件是如何工做的，彷佛是使人難以應對。沒必要擔憂，咱們將在本書後面詳細介紹每一項。如今，讓咱們在高維度上開始解釋它們是如何一塊兒工做的。

讓咱們從您已經學到的東西開始：您的應用程序代碼是用JavaScript、CSS和XML編寫的。在寫完你的代碼後，它與nativescript運行時和nativescript代碼模塊（API模塊，你會在本書中學到）相互做用。

最後，一個被稱爲nativescript CLI的工具，把你寫的代碼，nativescript運行時，和nativescript核心模塊打包爲原生應用程序，而且這個原生應用程序包含一個JavaScript虛擬機。而後這個原生應用程序運行在在Android和iOS上。

進一步深刻

就是這麼回事！你剛在在10000英尺高的水平上，學會了NativeScript應用程序的工做原理，可是讓咱們再深挖一點。

在使用XML建立用戶界面（UI）以後，您使用CSS來定製UI（相似於CSS用於樣式化HTML應用程序）。而後，你寫JavaScript來加強你的UI。您的JavaScript代碼將包含響應事件（如應用程序啓動事件）和交互（如按鈕按動或手指滑動）的業務邏輯。這三個部分（用XML編寫的UI、CSS和用JavaScript編寫的業務邏輯）結合起來，來建立你的應用程序代碼。
就其自己而言，你的應用程序代碼不都須要運行在移動設備上；你還須要三個額外的組件的幫助：nativescript運行時，核心模塊，和一個JavaScript虛擬機。咱們將在下面的章節中探討這些組件，可是如今，只要記住你的應用程序代碼和這三個組件構成你的nativescript App的核心。

當你寫完你的應用程序代碼，它將被提供給nativescript命令行接口（CLI）。CLI負責建立原生Android和iOS項目，而且合併nativescript App核心（NativeScript app core）到每一個項目中。當它運行時，CLI調用原生的Android或iOS軟件開發工具包（SDK）創建和編譯原生應用程序。編譯後的應用程序（由CLI）部署並運行在物理設備、模擬器（simulator）或仿真器（emulator）上。

你能夠看到，nativescript的美，在於它的廣泛性：你不須要花時間學習原生語言如Objective C, Swift和java，由於你可使用JavaScript。此外，由nativescript CLI提供的平臺無關命令，保證了你不須要學習Android和iOS 上的，原生工具和SDKs的工做原理。

 

1.5 總結

在本章中，你學到了:

• Nativescript應用程序是用JavaScript、XML、CSS編寫的，而且運行在一個JavaScript虛擬機中。
• 你的應用程序代碼與nativescript運行時，核心模塊（core modules），和一個JavaScript虛擬機一塊兒，構成了一個nativescript App的核心。
• Nativescript CLI抽象了原生工具和SDKs的複雜性，爲您提供一個平臺無關的指令集(platform-agnostic set of commands)來構建和部署你的應用程序。

　　注意，在繼續以前，您須要設置開發環境。請參考官方nativescript安裝說明http://docs.nativescript.org/start/quick-setup。
　　提示：若是您在安裝Android模擬器時遇到困難，請參見附錄A中的Android模擬器提示。

 

 

---

 

Alan Yang: 本章若是有任何翻譯錯誤，敬請指出。  若有疑問，還請參考英文原文。 謝謝您的關注。 9/20/2017

NativeScript-用你現有技術構建移動應用程序