Visual Studio 2015 和 Apache Cordova

英文原版：http://www.codeproject.com/Articles/860150/Visual-Studio-and-Apache-Cordova

在開始前，問一下本身下面這些問題：

• 熟練掌握web技術的開發者比例是多少？（佔全部開發者的比例）

• 熟練掌握移動開發技術（而且使用跨平臺開發工具）的開發者比例是多少？

• 熟練掌握web技術和移動開發技術的開發者比例是多少？

• 在以上的開發者中，可以勝任跨移動平臺開發的開發者比例又是多少？

因爲學習時間和職業範圍限制，最後一個問題中符合條件的開發者，少之又少。事實上，在就業市場不多有公司招聘那些多面手（掌握不少技術的人），由於他們要的薪水很高可是又不能一次執行多個任務。隨着專業知識不斷增加，一名顧問提出的理論也相應增多。相似 Apache Cordova（一套跨平臺的移動設備API）的跨平臺工具每每理智地增長最後一個數字。

跨平臺解決方案概述

在web瀏覽器和手機操做系統上開發應用時，咱們可使用3個主要的開發工具。Unity（一個專業遊戲引擎、多平臺遊戲開發工具），被認爲在視頻遊戲中最接近原生性能的開發工具。它有高性能的優勢，可是它也有一個相對困難的學習過程。Xamarin（一個跨平臺開發框架，旨在使移動開發變得簡單），一個基於Mono（Novell公司開發的跨平臺·NET運行環境）項目的開發工具，性價比較高，尤爲對於.NET開發者而言。它幫助把.NET框架的優點帶到微軟國外平臺上。最後一個是Cordova，它的學習成本幾乎爲0，使用相似面向移動應用的web開發技術實現移動和跨平臺應用。

一些發展歷史

Cordova 項目源於3年前Adobe公司貢獻出的PhoneGap項目（前者是從後者中抽出的核心代碼，是驅動後者的核心引擎），Adobe公司以它在多媒體處理方面的套裝軟件聞名於世：PhotoShop，Illustrator（一個矢量圖像編輯軟件），Premiere（一個非線性視頻編輯軟件），等等。Cordova 是 Adobe 公司在2011年貢獻給Apache後的開源項目，它於2012年10月從Apache孵化器畢業，正式成爲Apache的頂級項目。

回到2014年4月，微軟發佈了Visual Studio 2013的第2個更新包，在此次更新中，出現了一個全新的擴展應用"Multi-Device Hybrid App（支持多設備應用）"。經過使用一個新的項目類型和一個依賴安裝工具，它可使Visual Studio更好地集成Apache Cordova。第1個更新包發佈後，在微軟社區反饋良好，以後第2個更新包便出現了這個功能，帶着新特性、更好的集成效果...

更近一些的時間，在2014年11月，Visual Studio 2015 預覽版發佈，Cordova擴展被改進並改名爲"Tools for Apache Cordova"。如今能夠經過Visual Studio安裝包的一個選項直接安裝Cordova。若是相關選項被選中，會觸發另外一個安裝步驟，它容許你自定義想要安裝的工具：Ant，Android，Java，NodeJS，等等。

Cordova 實現了什麼？

對於一個典型的網站而言，經過（過去那種附加功能）只有短信和郵件的標準手機來獲取用戶是不可能的事情。Cordova爲web開發者提供了一個新的視野：可運行應用的設備的多樣性，這在以前幾乎是不可實現的。消息提醒、地理定位、振動、攝像頭、存儲...全部這些功能，超出了移動開發的範圍，但它們又是必要的，（Cordova）以一種很是高效的方式幫助你實現產品的這些功能。

爲了在本地環境使用web開發技術，Cordova在編譯時會生成一個應用程序，它主要處理兩件事：

• 集成WebView組件和瀏覽器

• 打包包含web應用程序文件的一系列資源

在一個web頁面中調用Cordova API，只需添加很是少的代碼：引入一個虛擬的js文件，編譯後js纔可用：

<script src="cordova.js"></script>

最後，你能夠添加一個具體的事件觸發器來監測API是否可用、設備是否可用：

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() { /* INIT */ }

Visual Studio有什麼新特性？

爲了提升Cordova跨平臺開發的效率，Visual Studio在Javascript和Typescript目錄下添加了一個新的項目類型。

此外，Visual Studio使用一個基礎文件樹來初始化開發環境，它也添加了兩個新的模擬器。

Android 模擬器

第一個（模擬器）是全新的功能，它是Android SDK 模擬器的翻版：這就是Visual Studio的Android 模擬器。如今咱們能夠直接經過Visual Studio在一臺Android設備上運行和debug應用程序，而不用安裝Android SDK模擬器。在全部的優化中，咱們發現一點：Android 模擬器啓動時間比Android SDK模擬器快不少。固然，Android模擬器也能夠啓動模擬設備上的一些API，好比GPS加速度計。

Ripple 模擬器

第二個（模擬器）是 Ripple，也是Apache的一個產品。Ripple最初是Chrome的一個擴展應用，用來快速測試和啓用Cordova API。（後來）Ripple單獨放在Chrome一個窗口中，Visual Studio並未止步於此。一旦啓動了模擬器，編輯應用程序的源代碼後，讓模擬器自動更新應用程序以減小一般重置debug環境耗費的時間，這種效果是有可能實現的。

Visual Studio應當會走得更遠：幫助你把應用程序部署到一臺物理移動設備上，容許你對它進行debug，就像debug模擬器上的應用同樣簡單。目前，在一臺激活的物理移動設備上保持debug模式仍然存在一個問題。可是應用程序確實已經發布到移動設備上，而且已啓動。這個bug已經公開，相信不久它就會被修復。Android，iOS和Windows Phone，任何級別的web開發人員都要考慮，且不只僅是這些。Cordova不只僅適用於移動應用，它也能夠用來建立Windows應用和Ubuntu應用，這一點很重要。

關注點

Cordova極大地幫助了web開發者的工做，它容許開發者首次進入移動開發環境而不用下降本身的忍耐度。順便提一點，開發者能夠保持本身的大部分工做習慣，尤爲是交互式設計方面，Cordova爲開發者提供了一個比"佈局"更靈活的技術來繪製每個所需的方案。

另外，動畫效果也是須要着重關注的，它通常用JavaScript實現，以兼容多數web瀏覽器。對於一個本地應用程序來講，不再必這麼作。你能夠指定一個具體的操做系統版原本肯定先決條件，可是不要指定可能使用IE6或者IE7的操做系統。另外一方面，對於移動設備而言，CPU性能和內存大小再也不像對於電腦那樣重要了。

咱們應該把"內置"的JavaScript實現的動畫替換爲CSS transition（Apache基金會的作法）。更進一步，爲了不"reflow"現象（重載或更新DOM樹致使頁面性能下降），最好使用CSS3的新特性來調用GPU。咱們能夠觀察到當一個DOM 元素大小變化時，因爲瀏覽器會計算這個元素大小變化對頁面其它元素的影響，此時瀏覽器會忽然變慢。使用CSS3過渡屬性裏的過渡效果（用translate定義），而不是top和left等座標屬性，頁面性能會提升不少。最後，在桌面端優化DOM樹時，通常不要使用JavaScript，這一點在移動設備上更重要。

例如，下面的CSS能夠兼容不少的瀏覽器，但它的性能較低：

.slide.inactive {   
    transition: all 0.5s ease-out;   
    -webkit-transition: all 0.5s ease-out;   
    opacity: 0;   
    left: -100%;   
}   
.slide.active {   
    position: relative;   
    transition: all 0.5s ease-out;   
    -webkit-transition: all 0.5s ease-out;   
    opacity: 1;   
    left: 0;   
}

下面一個，相反，兼容性略差，可是性能更好，由於它不會引發reflow現象：

.slide.inactive {   
    transition: all 0.5s ease-out;   
    -webkit-transition: all 0.5s ease-out;   
    opacity: 0;   
    transform: translateX(-100%);   
    -webkit-transform: translateX(-100%);   
}   
.slide.active {   
    position: relative;   
    transition: all 0.5s ease-out;   
    -webkit-transition: all 0.5s ease-out;   
    opacity: 1;   
    transform: translateX(0);   
    -webkit-transform: translateX(0);   
}

爲了走得更遠，咱們應當使用相似Iconic的前端框架進行測試。Iconic有一句自我介紹比較有意思：

追求性能    速度很重要。只有當你沒有這個東西的時候纔會發現它的重要性。Iconic在最新的移動設備上表現很是好。最少的DOM操做次數、徹底不使用jQuery、硬件加速轉換，有一件事很肯定：Iconic會給你留下深入的印象。

做爲結束語，介紹一個 Cordova實現的相似PowerPoint應用，它的源碼保存在 一個GitHub庫裏。