Visual Studio 2015 整合 Apache Cordova

admin

跨平台解決方案一覽如果想同時開發網頁應用程式及原生APP，目前有三種主要工具:
Unity，一個專業的遊戲開發引擎，並且開發效果最接近原生APP，能維持高性能。相對而言，也要付出較高的學習成本。
Xamarin，基於Mono專案的開發套件，並且在價格上特別實惠(尤其對.NET開發者而言)。可以直接透過微軟的 Visual Studio及C#開發各種跨平台App。
Cordova，能直接使用HTML/CSS/Javascript來開發跨平台APP，如果你是網頁工程師，則學習曲線則幾乎為0。

發展歷程Adobe是一個相當有名的公司，旗下軟體包含Photoshop, Illustrator, Premiere 及 After Effect等等。
在三年前，Adobe收購了Nitobi軟體(主導PhoneGap專案)，將PhoneGap原始碼捐獻給Apache，並重新命名為 Cordova 專案。
Cordova在2011年10月進入了Apache軟體基金會，並且在2012年10月正式成為Apache的頂級專案。

回到2014年5月，微軟的Visual Studio 2013釋放出2個更新，此次的項目中，出現了一個全新的拓展項目，命名為: 跨裝置整合應用程式(Multi-Device Hybrid App)。
這個獨立的更新項目，讓 Visual Studio 與 Apache Cordova 能更完美的結合。
當首次釋放就在微軟社群中獲得廣大的迴響後，微軟就接續在第二版提供了更多功能及更多的整合。

近期，在2014年11月，Visual Studio 2015 Preview的發布會當中，這個跨裝置整合應用程式被重整並且重新命名為"Tools for Apache Cordova"，讓Cordova可以在Visual Studio的選項中直接勾選並安裝。
除此之外，進一步還能允許使用者自行選擇想要裝的程式語言，如: Ant, Android, Java, NodeJS 等等。
Cordova帶來了甚麼?對一個傳統網站而言，僅能透過E-Mail及簡訊與手機用戶聯繫，並且，想要繞過這道標準渠道是不可能的。
Cordova則提供了網站開發的新思維: 當裝置安裝並執行應用程式後，就能夠直接取得手機訊息、地理資訊、搖晃、鏡頭、儲存資料...等，這些不可或缺的項目，已經超過了手持裝置開發的範圍。
讓產品能以非常有效率的方式來開發。
Cordova之所以能讓網頁技術在原生環境中執行，其中主要兩個關鍵點為:
    - 運用WebView元件，整合成瀏覽器環境
    - 將一系列的相關資源都包附在網站應用程式資料夾中

當環境建造完成之後，只需要寫少量的javascript程式，就能夠使用Cordova的API擴充套件:
<script src="cordova.js"></script>
最後，有時可能要執行特定的事件去偵測API，例如:
document.addEventListener("deviceready", onDeviceReady, false);function onDeviceReady() { /* INIT */ }
Visual Studio的新消息是什麼?為了藉由Cordova來促進跨平台開發，Visual Studio新增了一個專案，並且放置在Javascript及TypeScript分類中。


Andriod模擬器首先，第一個是全新的品項，和Cordova同時發行的小兄弟: 它就是Visual Studio的Android模擬器。也就是說，這代表可以直接在Visual Studio模擬器上運行應用程式及偵錯，不必再透過Android SDK的模擬器。並且，這些改進的過程中，模擬器的啟動速度變得很快，此外，也可以透過模擬器來進行加速器、方位、GPS等模擬。

Ripple模擬器第二，同樣是Apache基金會的開源項目-Ripple。Ripple 源自於Chrome的擴展項目，可以用來測試及執行Cordova的API。在Visual Studio中，可以直接透過選項來開啟Google Chrome視窗(聽到微軟採用別家瀏覽器，的確滿有趣)進行模擬，並且更進一步的是，可以直接在模擬器上除錯，節省除錯的時間。

Visual Studio預計將會再開發出更多的項目，讓你的應用程式可以在實際裝置中，並且可在同一個環境進行即時偵錯。目前，這項專案仍在開發階段，但微軟卻已經提前公開佈署及發布。雖然，在實際裝置中運行及偵錯時，仍會發生許多錯誤。但我們相信，這些錯誤將會很快的被修復。因為它們必須考慮的因素包含 Android, iOS 及 Windows Phone。對於Cordova而言，這些過程是相當重要的，因為它們不僅僅能開發手機應用程式，還能開發Windows市集應用程式或Ubuntu程式。
有趣的地方Cordova幫助了網頁開發人員踏出APP開發的一步，讓這些開發者可以維持大部分的工作習慣，特別是一些關於響應式設計及更加靈活布局的技術。其中，非常值得關注的就是動態效果，如果是透過Javascript來開發，就必須考慮兼容各種瀏覽器的問題(原生應用程式則不太會有這樣的問題)。除此之外，我們必須考慮到使用者可能會使用IE6或7的情況；並且，在移動裝置的 CPU及可用RAM不足並不如桌上型電腦好。因此，如果想保險一點，你可以選擇特定的OS版本，以確保客戶端先決條件充足才能安裝。
因此，應該將Javascript動態效果替換成CSS動畫效果，並且，最好使用CSS3最新的功能，讓CPU運作過程，可以避免一些"reflow"現象。當一個元素尺寸改變時，只要將這些動作放在背景執行，就能夠避免計算過程中造成瀏覽器暫時慢下來的情況。
舉例來說，使用漸變(transition)及變形(transform)效果的效能較好，應該避免去使用"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;   }  
底下這段CSS則相反，雖然兼容性不高，但是卻能避免觸發"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。有趣的是，它們的口號是說:

效能的迷戀速度就是一切，所以你唯一該留意的就是當它不見的時候。Ionic在最新的移動裝置中表現優異，用最少的代碼，零jQuery，以及硬體加速漸變過程。而在這當中，最能確定的一件事情就是，你一定會對它印象深刻。

最後，這裡有類似Powerpoint預覽應用程式(使用Visual Studio 2014 Preview的Tools for Apache Cordova)的原始碼，可前往 MobilePoint GitHub Repository下載。
參考來源:
http://www.visualstudio.com/en-us/explore/cordova-vs.aspx
http://channel9.msdn.com/events/Visual-Studio/Connect-event-2014/511
http://msopentech.com/blog/2014/09/25/apache-cordova-gains-windows-8-1-and-windows-phone-8-1-support-2-2/
http://msopentech.com/blog/2014/05/12/apache-cordova-integrated-visual-studio/
http://cordova.apache.org/#about
http://blogs.msdn.com/b/visualstudio/archive/2014/11/13/tools-for-apache-cordova-update-ios-debugging-amp-windows-8-1-support.aspx
http://www.tricedesigns.com/2013/03/11/performance-ux-considerations-for-successful-phonegap-apps/
http://ripple.incubator.apache.org
本文翻譯自The Code Project Open License (CPOL) ，作者 Hugo Carnicelli, Visual Studio 2015 and Apache Cordova