文章出處

Visual Studio 2015 和 Apache Cordova

在開始前，問一下自己下面這些問題：

熟練掌握web技術的開發者比例是多少？（占所有開發者的比例）
熟練掌握移動開發技術（并且使用跨平臺開發工具）的開發者比例是多少？
熟練掌握web技術和移動開發技術的開發者比例是多少？
在以上的開發者中，能夠勝任跨移動平臺開發的開發者比例又是多少？

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

跨平臺解決方案概述

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


Web	Cordova	Xamarin	Unity	Natif

一些發展歷史

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才可用：

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

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

1
document.addEventListener("deviceready", onDeviceReady, false);

2
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可以兼容很多的瀏覽器，但它的性能較低：

01
.slide.inactive {   

02
    transition: all 0.5s ease-out;   

03
    -webkit-transition: all 0.5s ease-out;   

04
    opacity: 0;   

05
    left: -100%;   

06
}   

07
.slide.active {   

08
    position: relative;   

09
    transition: all 0.5s ease-out;   

10
    -webkit-transition: all 0.5s ease-out;   

11
    opacity: 1;   

12
    left: 0;   

13
}

下面一個，相反，兼容性略差，但是性能更好，因為它不會引起reflow現象：

01
.slide.inactive {   

02
    transition: all 0.5s ease-out;   

03
    -webkit-transition: all 0.5s ease-out;   

04
    opacity: 0;   

05
    transform: translateX(-100%);   

06
    -webkit-transform: translateX(-100%);   

07
}   

08
.slide.active {   

09
    position: relative;   

10
    transition: all 0.5s ease-out;   

11
    -webkit-transition: all 0.5s ease-out;   

12
    opacity: 1;   

13
    transform: translateX(0);   

14
    -webkit-transform: translateX(0);   

15
}