關於網路那些事...

網路行銷,SEO,網路趨勢,創業文章,網頁設計,生活時事

開發跨平台(iOS/Android/Windows)的APP - 談 Visual Studio 2015 整合 Apache Cordova 的原因

| Comments

經由本篇文章,將可以了解Apache Cordova 是甚麼?以及為什麼他會被整合到Visual Studio 2015。


圖片來源: visualstudio

在開始前,我們先來聊聊幾個問題:
- 網頁技術領域中,專業開發者佔有的比例為何?
- 原生APP開發者佔有的比例為何?(跨平台工具使用者除外)
- 擁有網頁及原生APP開發能力的人有多少?
- 在這些人當中,能開發跨平台APP的比例有多少?

這些問題,如果單純從工程師的角度出發,可以發現,具有全方位開發能力的工程師比例很低,而其中主要的原因就在於時間成本及技術門檻過高。

如果從職場招募的情況來觀察,則發現有業界也很少招募這些全方位人才。因為這些人在職場中的新水很高,並且並不能在同時間執行多個專案。因此,在業界的顧問當中,專業領域比例也與這些假設相符合。

對於上面提到的困境,目前可以透過類似Cordova的跨平台開發工具來解決,!

跨平台解決方案一覽

如果想同時開發網頁應用程式及原生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


如果你喜歡我們的文章內容,請在這裡按個讚



討論

comments powered by Disqus