專刊內文

當前位置:首頁>專刊分享>內文

瀏覽次數 : 3707



 

Ionic讓Hybrid的App翻身

訊光科技 / 蘇文瑞  

前言

市場上Native App(原生型)大戰Web App(網頁型),看誰是未來的武林盟主吵翻天。當然,市場上的主流來是以Native App為主,畢竟Web App不管在裝置的功能上與用戶體驗及效能上都無法與Native App相比;很多企業基於開發成本與門檻,採用Web App的方式,並且為了讓Web App可以延伸擁有Native功能,而採用了Hybrid App(混和型)的技術來達到,如知名的Cordova(早期命名為PhoneGap)就是最有名的Hybrid方案,也讓Web App多了一個有利的武器。

Hybird App擁有WebApp容易開發與低成本,也可以上架或發行App,更可以像Native做到取用裝置資源與設備。缺點就是仿真度與效能較差,用戶體驗經驗通常不大好。市場上出現了一個專門為Mobile所發展的Ionic UI框架(基於AugularJS框架),無論是UI的介面還是操作效能都非常接近Native App的水準,隨著網路有大量開發者投入Ionic與良好的正面評價,也許,Ionic會讓Hybrid App從此大翻身也不一定。



甚麼是AngularJS

AngularJS,簡稱Angular,是一款開源JavaScript函式庫,由Google維護,用來協助單一頁面應用程式運行。它的目標是透過MVC模式功能增強基於瀏覽器的應用,使開發和測試變得更加容易,是目前備受開發人員矚目的新技術。在此列舉部分特性如下:

●遵循軟體工程的MVC模式

純javascript+html的方式,有別於傳統asp、php前後端語言混雜或是 .NET Webform與伺服器控制項共存於同一頁的情況,而頁面中包含了Module與View,因此此種架構也被稱為MVVM( Module View ViewModule)。



●資料繫結

 

類似以往 .NET Webform的databinding,將某一個網頁元素標籤與資料模型的某一個欄位做繫結,因此Angular非常適合CRUD類型的應用,也對資料處理方式有一定規範。

單筆資料繫結範例



重複性資料繫結範例,類似以前 .Net Webform的repeater,定義要重複顯示範圍內的html當作樣板,Angular會自動將資料重複套用到樣板html中呈現,如下:





●適合單頁應用(Single Page Application)

 

不像傳統web應用,每一個動作就更新一次網頁,將表單內容送往web server後,再將整個html回傳到瀏覽器,重新下載網頁使用到的資源,重新繪製網頁。而是都在同一個頁面完成。由於頁面互動時,都只更新局部內容,或是回傳xml/json,因此反應速度會較快。舉個例子,Gmail就是一個絕佳的SPA應用。而angular.js的特性,也適合做SPA開發時採用的技術。


●範本開發方式

 

除了原頁面的html內容外,也可以動態載入外部的html檔案當作範本,將資料套用於範本檔,並即時反應,簡化了傳統web開發要寫程式自行套html的程序。 angular目前已經成為熱門的網頁前端技術之一,根據google趨勢的圖表,可以明顯感受到開發人員對它的興趣



甚麼是
Ionic

Ionic是一個為開發混合型行動應用(hybrid mobile app)而生的一個開放原始碼框架,其底層技術基於Javascript與Sass(Syntactically Awesome Stylesheets)。用途是提供各種仿原生的使用者介面,讓使用者操作時,彷彿在操作原生應用般親合與美觀。

Ionic提供的常用介面列舉如下:頁首(Header)、頁尾(Footer)、滾動效果、頁簽選卡(Tabs)、滑動選單(Slide Menu)、項目列表、導航列(Navigation)、彈開視窗(Popup)等等。



Ionic也提供各種行動裝置專用的手勢操作事件,例如單擊、雙擊、按住、放開、下拉、滑上、滑下、滑左、滑右等,讓設計人員可以開發更細膩的行動應用。

Ionic的知名案例如下,已經有越來越多的國際集團採用此方案來開發App。




為何要使用Ionic


Angular主要功能是底層架構與CRUD處理,卻沒有很多的UI功能,因此勢必得尋找搭配其他的UI框架,Ionic與Angular是目前公認最佳的App搭配方式,因此使用Angular來開發App,理所當然就會選擇Ionic為使用者介面的解決方案,此外還有一個更重要的原因是,比起其他js框架,Ionic為Hybrid UI framework,其APP的仿真程度、手勢操作等特性,更適合於【行動應用】開發。

EEP是快速產生各種表單的開發工具,例如訂單、客訴單、銷貨單、請假單、採購單、維護畫面、查詢報表等表單類型的企業內部應用,但是行動應用的使用對象、情境、用途,卻有無限多種可能性,若還是使用表單類型的操作畫面,能開發的應用範圍就會受到侷限,也因此納入Ionic等App的技術,讓開發者可以更接近Native App來設計各種不同的操作畫面,滿足更多類型的開發需求。



Ionic與JQuery Mobile的差異

行動應用的技術日新月異,新的功能推陳出新,使用者的習慣也在改變當中,因此能持續更新版本是很重要的。jquery Mobile 最新版本1.4.5的釋出日期為2014.10.31,而Ionic最新版本1.3釋出日期為2016.4.21,從此就可以瞭解這兩個社群的活絡度。

Ionic為了Hybird App而生,因此不適合在桌面環境上使用,JQueryMobile則可以在桌面環境、行動裝置瀏覽器、Hybrid APP使用。

Jquery Mobile基於Jquery,因此語法與函式庫類似,開發者過去累積的Jquery技術可以延續使用,Ionic則需要重新學習AngularJS的架構。此外,Ionic提供更多適合行動裝置的UI,手勢操作等功能,也是Jquery Mobile不及之處。

Ionic由其安裝指令($ npm install -g cordova ionic)可知,它基於Node.js、Cordova,也提供各種開發時的文字命令。而jquery mobile無需特別安裝,直接指向Google等CDN即可。


結語

UI的變化非常劇烈,基本上每2~3年就會有一個主流的UI框架產生,好不容易熟習,也許開始要面臨淘汰或更換,投資報酬率很低,也很難選擇那一種UI框架是主流的方向。這次EEP整合了Angular與Ionic也是面臨著市場與開發者逐漸的轉向App應用,光只是JQuery Mobile恐怕滿足不了用戶體驗與多變的需求。透過EEP的Ionic方案整合進來,除了讓開發者可以快速開發Hybrid App的應用外,更能以Ionic的親和UI來滿足越來越挑剔的使用者。