深入理解HTML5在移動(dòng)開發(fā)方面的發(fā)展現(xiàn)狀

2016-08-11    分類: 網(wǎng)站建設(shè)

下面創(chuàng)新互聯(lián)就為大家?guī)硪黄钊肜斫釮TML5在移動(dòng)開發(fā)方面的發(fā)展現(xiàn)狀。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
“我們正在用HTML5編寫我們下一套移動(dòng)產(chǎn)品?!薄笆前。@些天很多人在玩著Appcelerator,我也在玩著?!薄班牛@并不是我要說的那種HTML5產(chǎn)品?!?br />最近,我有很多類似的交流對(duì)話,可能因?yàn)槲艺陂_發(fā)一套HTML5的應(yīng)用吧。就像2005年的“AJAX”,“HTML5”這個(gè)術(shù)語(yǔ)現(xiàn)在還沒有被清晰地定義,在未確定這個(gè)新技術(shù)有什么優(yōu)勢(shì)前,它就已經(jīng)被四處套用,甚至投入運(yùn)營(yíng)。
如果你在一間被熱衷新技術(shù)的管理人掌控的公司里任職,如果你走運(yùn),那么漫畫人物呆伯特先生可能非常愿意坐在你隔壁的小房間。
兩種看法
當(dāng)人們討論移動(dòng)設(shè)備上的HTML5技術(shù)時(shí),他們通常只會(huì)有兩種不同的看法。
從感性的角度來看,HTML5技術(shù)的渲染過程主要是由瀏覽器、內(nèi)嵌HTML5解析器的應(yīng)用程序 (如PhoneGap)、支持書簽打開方式的應(yīng)用程序又或者是移動(dòng)手機(jī)產(chǎn)品(iPhone和iPad)進(jìn)行的。這種技術(shù)的好處就是能重用現(xiàn)有的網(wǎng)頁(yè)設(shè) 計(jì),Web開發(fā)人員也更容易上手,同時(shí)產(chǎn)品具備更高質(zhì)量,更適用于多平臺(tái)產(chǎn)品。也更易于調(diào)試和修正錯(cuò)誤,并且,版本更新會(huì)更快。此消彼長(zhǎng),優(yōu)勢(shì)是它的功 能,如果你像PhoneGap一樣使用內(nèi)嵌的架構(gòu),那么你會(huì)少很多麻煩事,劣勢(shì)就是它的表現(xiàn),這也是HTML5技術(shù)面臨的大難題。
從理性的角度來看,HTML5技術(shù)就是使用JavaScript引擎直接控制本地功能,改變移動(dòng)設(shè)備上的瀏覽器組件。而HTML5應(yīng)用上的表現(xiàn)問題 更多是由HTML/CSS渲染技術(shù)控制的,而不是由JavaScript解析生成的。如果使用正確,HTML5技術(shù)無(wú)疑可以給予你大量新增的表現(xiàn)效果。目 前使用HTML5技術(shù)的例子包括Appcelerator Titanium、Mobage/ngcore、Game Closure以及PhobosLabs。
Node.js工具包
以PhobosLabs的項(xiàng)目為例,當(dāng)這個(gè)項(xiàng)目是使用WebKit的JavaScriptCore組件完成,在設(shè)備端使用OpenGL渲染界面,而 在開發(fā)時(shí)使用HTML5的canvas組件的API開發(fā)。這就是說,開發(fā)人員可以在一個(gè)對(duì)canvas有良好支持的桌面瀏覽器內(nèi)開發(fā)和測(cè)試他的HTML5 游戲,并且當(dāng)他將這個(gè)游戲放到移動(dòng)設(shè)備的瀏覽器打開時(shí),也會(huì)出現(xiàn)同樣優(yōu)秀(甚至更優(yōu)秀)的表現(xiàn)效果。這種用HTML5開發(fā)的效果跟使用Node.js工具 包開發(fā)的效果很相像,使用Node.js時(shí),只需啟用JavaScript引擎,而你僅需把你需要使用的Node.js組件添加到你的應(yīng)用即可。
Appcelerator的Titanium詳述了HTML5技術(shù)的概念,給我們展現(xiàn)了一個(gè)完整的UI工具的抽象層,這使得它可以被應(yīng)用到生成其他 游戲產(chǎn)品。意即一個(gè)HTML5應(yīng)用開發(fā)人員可以通過Appcelerator的JavaScript UI庫(kù)創(chuàng)建按鈕,而Appcelerator的內(nèi)部邏輯會(huì)將這個(gè)按鈕轉(zhuǎn)換為iOS的原生界面按鈕。我們可以通過JavaScript控制界面上的原生按 鈕。理論上,開發(fā)人員可以不需要寫一句Objective-C代碼。
HTML5技術(shù)有它的優(yōu)勢(shì),當(dāng)你依然在使用JavaScript編寫代碼時(shí),你可以跟那些煩人的HTML/CSS布局邏輯和樣式聲明說再見。你還可 以跟那些優(yōu)秀的調(diào)試工具說再見。但這個(gè)技術(shù)也有蹩腳的一面,像HTML5的游戲API Mobage就存在一些小毛病,canvas組件可以在屏幕相對(duì)小一點(diǎn)的界面順利顯示,但如果屏幕稍微變大一點(diǎn),就好像Appcelerator的例子一 樣,在調(diào)試時(shí),你還需要考慮界面層額外的復(fù)雜性。在這里有很多Appcelerator的負(fù)面評(píng)論,如果你能把上面的幾點(diǎn)記在心里,那么那些負(fù)面評(píng)論其實(shí) 都可以被理解。
問題還在瀏覽器
開發(fā)一個(gè)完整的HTML5手機(jī)應(yīng)用的首要難題就是運(yùn)行速度過慢。而第二大難題就是非常愚蠢的工具束縛,許多組件或多或少在不同瀏覽器都存在一些漏 洞,如jQuery Mobile的導(dǎo)航組件、iOS的innerHTML組件的漏洞,所以你需要減少功能去避免出現(xiàn)漏洞,又或者你愿意花一些時(shí)間去修復(fù)這些漏洞。
你可以自己做個(gè)實(shí)驗(yàn),當(dāng)你在一個(gè)iOS應(yīng)用里僅使用一至兩個(gè)界面庫(kù)時(shí),再加上你自己寫的少量JavaScript代碼,沒有更多的 JavaScript庫(kù),你會(huì)發(fā)現(xiàn)這個(gè)HTML5應(yīng)用運(yùn)行得流暢而完整,但卻沒什么功能。PhoneGap的iOS項(xiàng)目?jī)H需要1至2秒的時(shí)間就可以在 iPhone 3GS上發(fā)布運(yùn)行。這個(gè)事實(shí)可以告訴你,最基本的HTML5應(yīng)用運(yùn)行起來真的非常流暢。所以,當(dāng)你發(fā)現(xiàn)你的HTML5應(yīng)用的某些操作花費(fèi)了10-15秒時(shí) 間時(shí),又或者花了15秒時(shí)間才加載完整個(gè)程序時(shí),這都是一些JavaScript界面庫(kù)給拖累的。
兩套有代表性的UI庫(kù)
一個(gè)HTML5手機(jī)應(yīng)用程序員需要的通常只有那么兩樣?xùn)|西:第一樣就是原生平臺(tái)和網(wǎng)頁(yè)界面的嫁接層;第二樣就是手機(jī)UI庫(kù)。
PhoneGap近年已逐漸成為默認(rèn)的嫁接層選擇,它允許HTML5應(yīng)用通過JavaScript調(diào)用移動(dòng)設(shè)備的照相機(jī)、訪問手機(jī)通訊錄和讀寫文件。而最受歡迎的手機(jī)UI庫(kù)就包括由jQuery Mobile和Sencha Touch。
jQuery Mobile是去年才創(chuàng)建的一個(gè)項(xiàng)目,所以它是非常新的,很顯然,它也不夠成熟。jQuery Mobile的導(dǎo)航欄組件就非常糟糕,翻頁(yè)時(shí)明顯比原生的翻頁(yè)功能要慢,如果你不刷新瀏覽器,你就沒有辦法遞增列表內(nèi)容。而在PC桌面平臺(tái)測(cè)試時(shí),它的 CPU耗用率也是非常高(版本是jQuery Mobile的alpha 4)。我的項(xiàng)目使用它,主要是考慮到相對(duì)簡(jiǎn)單(比較容易破解),因?yàn)檫@個(gè)庫(kù)是基于jQuery構(gòu)建的,所以任何一個(gè)資深的網(wǎng)頁(yè)程序員都很容易上手。
據(jù)說Sencha Touch比jQuery Mobile更成熟更快。但我一看到高復(fù)雜性的東西,我就不會(huì)不自覺地厭惡它們。因?yàn)闈撘庾R(shí)會(huì)告訴我,有很多功能我根本不會(huì)使用到,但卻強(qiáng)制加載這些額外 的東西到我應(yīng)用里,讓我應(yīng)用整體表現(xiàn)差了很多。盡管我可能是錯(cuò)的,PhoneGap應(yīng)用頁(yè)中最強(qiáng)大的手機(jī)應(yīng)用是IGN Dominate,它運(yùn)行得很流暢并且它就是基于Sencha Touch開發(fā)的,但我確定他們肯定花了很多時(shí)間去優(yōu)化這個(gè)產(chǎn)品。
調(diào)試和修改
在上面談到的開發(fā)HTML5應(yīng)用時(shí),許多人可能都忽略了一點(diǎn),其實(shí)調(diào)試或修改一個(gè)HTML5應(yīng)用是很簡(jiǎn)單的。任何一個(gè)曾參與過大型HTML5開發(fā)項(xiàng) 目的開發(fā)人員都可以告訴你,調(diào)試和維護(hù)幾乎占了整個(gè)項(xiàng)目生命周期的80%的時(shí)間,甚至更多。這就是說,當(dāng)你聽到一個(gè)開發(fā)工具宣稱可以在15分鐘內(nèi)開發(fā)一個(gè) 聊天應(yīng)用時(shí),那么它可能只是能讓你在15分鐘內(nèi)解決20%的工作,剩下的80%,你可能得耗上3倍以上的精力才能完成。
HTML5手機(jī)應(yīng)用在調(diào)試時(shí)存在觸碰問題,因?yàn)闊o(wú)法打印出控制臺(tái)的日志。所以,如果JavaScript代碼存在漏洞或者報(bào)錯(cuò),你需要 alert()報(bào)錯(cuò),否則你可能沒法發(fā)現(xiàn)。PhoneGap修正了這個(gè)問題,它可以通過XCode的控制臺(tái)打印控制臺(tái)的調(diào)式日志,但功能依然很有限。
目前最有效的解決方案就是weinre。盡管漏洞百出,但它就是能跑起來,有了它,你還能斷點(diǎn)調(diào)試你的手機(jī)應(yīng)用的UI,weinre是基于 WebKit的網(wǎng)頁(yè)檢查器的,它的調(diào)式工具后臺(tái)通過遠(yuǎn)程服務(wù)端獲取和替換調(diào)試代碼。兩至三周前,我曾對(duì)網(wǎng)頁(yè)檢查器的代碼做過一些研究,我發(fā)現(xiàn)把它轉(zhuǎn)換為一 個(gè)遠(yuǎn)程調(diào)試器真的不難。Weinre接下來幾個(gè)月的開發(fā)進(jìn)度將會(huì)更快,某些人可能還會(huì)開發(fā)出它的替代產(chǎn)品。我們拭目以待。
未來幾年,移動(dòng)應(yīng)用開發(fā)中的HTML5技術(shù)的調(diào)試工具無(wú)疑變得更加重要,它可以解決大部分開發(fā)人員80%的工作量。你想要用Objective-C 改變你的界面設(shè)計(jì)嗎?編輯,再編譯,運(yùn)行。重復(fù)這三個(gè)步驟直到你滿意為止。如果再編譯步驟很多,這可能會(huì)耗上一天的時(shí)間。用HTML5技術(shù)去實(shí)現(xiàn)?用 weinre編輯一些CSS屬性并測(cè)試,你甚至不用關(guān)閉應(yīng)用,你就可以繼續(xù)調(diào)試。一定程度上,你還可以在桌面瀏覽器調(diào)試你的HTML5手機(jī)應(yīng)用。但相信 我,你的應(yīng)用產(chǎn)品最終可能只會(huì)在移動(dòng)設(shè)備上爆發(fā)一大堆漏洞而已,所以你必須得使用weinre。
不幸的是,人們常贊美某個(gè)工具包或者某項(xiàng)功能,但你卻很少聽到有人夸贊某個(gè)調(diào)試工具非常棒。所以我猜測(cè)就算它是HTML5手機(jī)程序員最常用到的工具,我們也很少聽到它被討論到。
總結(jié):現(xiàn)在的狀況
盡管這篇文章真的有點(diǎn)長(zhǎng),但我還是得總結(jié)一下:
1.在移動(dòng)設(shè)備開發(fā)HTML5應(yīng)用只有兩種方法,要不就是全使用HTML5的語(yǔ)法,要不就是僅使用JavaScript引擎。
2.JavaScript引擎的構(gòu)建方法讓制作手機(jī)網(wǎng)頁(yè)游戲成為可能。由于界面層很復(fù)雜,我已預(yù)訂了一個(gè)UI工具包去使用。
3.純HTML5手機(jī)應(yīng)用運(yùn)行緩慢并錯(cuò)漏百出,但優(yōu)化后的效果會(huì)好轉(zhuǎn)。盡管不是很多人愿意去做這樣的優(yōu)化,但依然可以去嘗試。
4.HTML5手機(jī)應(yīng)用的大優(yōu)勢(shì)就是可以在網(wǎng)頁(yè)上直接調(diào)試和修改。原生應(yīng)用的開發(fā)人員可能需要花費(fèi)非常大的力氣才能達(dá)到HTML5的效果,不斷地重復(fù)編碼、調(diào)試和運(yùn)行,這是他們首先得解決的一個(gè)問題。
5.是的,HTML5的移植非常簡(jiǎn)單,但我假設(shè)每個(gè)人都會(huì)讓這變成一個(gè)自動(dòng)化操作。
以上這篇深入理解HTML5在移動(dòng)開發(fā)方面的發(fā)展現(xiàn)狀就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考。

當(dāng)前文章:深入理解HTML5在移動(dòng)開發(fā)方面的發(fā)展現(xiàn)狀
標(biāo)題來源:http://muchs.cn/news/45553.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)外貿(mào)建站、企業(yè)網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站、Google

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)