Hybrid App開發(fā)上架的原理解析

Hybrid App(混合 App)已經(jīng)成為大家接觸最為廣泛的 App 形式隙咸,不管是我們用到的微信、支付寶還是淘寶、京東等大大小小的應(yīng)用都非常熱衷于Hybrid App 帶來的研發(fā)效率提升和靈活性。

但我們正式進(jìn)入到 hybrid App 的討論前啄骇,有必要先說下原生開發(fā)的一些基本情況幌缝,原因很簡單褪测,因?yàn)槲覀內(nèi)粘=佑|到的 hybrid App 就是在 Native App 原生應(yīng)用基礎(chǔ)上所衍生出來的砌溺。

原生開發(fā)的流程

Native App 帶給用戶使用體驗(yàn)非常好红竭,整體的感受非常順滑尤勋,但是作為一個(gè)開發(fā)人員,我們談到原生開發(fā)的時(shí)候確很頭痛茵宪,因?yàn)橐馕吨枰冻龈哳~的開發(fā)成本和發(fā)布周期最冰。特別是對(duì)于需要頻繁迭代業(yè)務(wù)內(nèi)容的企業(yè)來說,無論是更新功能模塊還是修復(fù)有缺陷的版本稀火,都需要重新測試暖哨、重新發(fā)版、重新提交第三方應(yīng)用商店審核上架凰狞,還要用戶配合篇裁,安裝新的版本,才能把舊版本覆蓋赡若。

如果只用文字可能大家會(huì)比較難以有直觀的感受达布,我們通過下面這張圖來看看:

原生應(yīng)用上架流程

可以看到原生開發(fā)有一個(gè)比較大的弊端,就是不管是新開發(fā)還是應(yīng)用的更新發(fā)版都需要經(jīng)過比較繁瑣編譯逾冬、上架黍聂、安裝等過程躺苦,每一個(gè)過程都代表需要研發(fā)的重復(fù)投入。

這也是為什么 Hybrid App 會(huì)成為大多團(tuán)隊(duì)和開發(fā)者的第一選擇产还,原生雖好但是著實(shí)很費(fèi)力費(fèi)時(shí)匹厘。

Hybrid App的開發(fā)流程

Hybrid App 在一定程度上可以解決原生應(yīng)用在流程上復(fù)雜的問題,從架構(gòu)上來講「原生+HTML5」是比較多的技術(shù)模式脐区,但隨著這兩年小程序的發(fā)展愈诚,「原生+小程序」也成為了混合應(yīng)用的一種新選擇,例如微信坡椒、支付寶等國民應(yīng)用就是這樣的路線扰路,當(dāng)然在自己的 App 引入已有的小程序整體的效果會(huì)比 H5 好很多,至少從用戶體驗(yàn)上來講倔叼,小程序有著接近原生的體驗(yàn)避免了 H5 經(jīng)常出現(xiàn)的白屏和卡頓問題汗唱。

雖然 App 運(yùn)行小程序的技術(shù)會(huì)比H5難度高很多,但是目前也有 FinClip 等小程序容器技術(shù)可以直接上手使用丈攒,也算是比較便捷哩罪。

再來看 Hybrid App 的開發(fā)和上架流程,我們先用圖片流程看下:


混合應(yīng)用上架流程

Hybrid App 中對(duì)于經(jīng)常變更巡验、有業(yè)務(wù)運(yùn)營屬性的內(nèi)容际插,基本以 HTML5 或小程序的方式實(shí)現(xiàn),融合在原生App中显设。

通常的做法是在原生 App 里預(yù)先基于界面設(shè)計(jì)挖好一些洞框弛,然后利用 WebView 在這些洞里面渲染由標(biāo)簽語言描述的內(nèi)容,無縫呈現(xiàn)在 App 里捕捂。

這些內(nèi)容從哪里來呢瑟枫?它們通常預(yù)埋在 App 代碼包,并且通過互聯(lián)網(wǎng)從服務(wù)器端獲得更新指攒。

Hybrid App 的核心價(jià)值

我們最前面也講了為了追求效率及靈活性慷妙,大家會(huì)越來越多的選擇 Hybrid App 開發(fā)模式,其背后的原因還為了更加高效實(shí)現(xiàn)更新上架允悦,因?yàn)槠鋷в械臒岣履芰κ窃陂_發(fā)環(huán)節(jié)極為重要的膝擂。

熱更新的原理大概是這樣的,通常應(yīng)用內(nèi)的服務(wù)器端會(huì)監(jiān)測這些內(nèi)容的更新隙弛,繼而發(fā)送內(nèi)容更新的通知并通過網(wǎng)絡(luò)向客戶端同步一些頁面內(nèi)容的碎片架馋,并且把這些下載的內(nèi)容,通常是 HTML 和 JavaScript 全闷,注入到之前挖好的這些洞洞里绩蜻。

另外需要說明的一點(diǎn),上面我們講到的網(wǎng)絡(luò)同步技術(shù)方案可供選擇的會(huì)比較多室埋,例如通過雙向的 Web-Socket办绝、HTTPlongpolling伊约、SSE、PushtoPull 或者 CMS孕蝉。一般來講設(shè)備端通常通過 HMR 熱模塊替換和代碼注入等方式讓更新的代碼在本地生效展示屡律,也能夠避免我們應(yīng)用的重啟。


熱更新的原理

以上就是關(guān)于 Hybrid App 開發(fā)上架的原理降淮,如果你認(rèn)為有用的話超埋,也歡迎各為小伙伴在這里交流和討論,另外也歡迎點(diǎn)贊佳鳖。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末霍殴,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子系吩,更是在濱河造成了極大的恐慌来庭,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,104評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件穿挨,死亡現(xiàn)場離奇詭異月弛,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)科盛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門帽衙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人贞绵,你說我怎么就攤上這事厉萝。” “怎么了榨崩?”我有些...
    開封第一講書人閱讀 168,697評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵冀泻,是天一觀的道長。 經(jīng)常有香客問我蜡饵,道長,這世上最難降的妖魔是什么胳施? 我笑而不...
    開封第一講書人閱讀 59,836評(píng)論 1 298
  • 正文 為了忘掉前任溯祸,我火速辦了婚禮,結(jié)果婚禮上舞肆,老公的妹妹穿的比我還像新娘焦辅。我一直安慰自己,他們只是感情好椿胯,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,851評(píng)論 6 397
  • 文/花漫 我一把揭開白布筷登。 她就那樣靜靜地躺著,像睡著了一般哩盲。 火紅的嫁衣襯著肌膚如雪前方。 梳的紋絲不亂的頭發(fā)上狈醉,一...
    開封第一講書人閱讀 52,441評(píng)論 1 310
  • 那天,我揣著相機(jī)與錄音惠险,去河邊找鬼苗傅。 笑死,一個(gè)胖子當(dāng)著我的面吹牛班巩,可吹牛的內(nèi)容都是我干的渣慕。 我是一名探鬼主播,決...
    沈念sama閱讀 40,992評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼抱慌,長吁一口氣:“原來是場噩夢啊……” “哼逊桦!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起抑进,我...
    開封第一講書人閱讀 39,899評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤强经,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后单匣,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體夕凝,經(jīng)...
    沈念sama閱讀 46,457評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,529評(píng)論 3 341
  • 正文 我和宋清朗相戀三年户秤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了码秉。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,664評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡鸡号,死狀恐怖转砖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情鲸伴,我是刑警寧澤府蔗,帶...
    沈念sama閱讀 36,346評(píng)論 5 350
  • 正文 年R本政府宣布,位于F島的核電站汞窗,受9級(jí)特大地震影響姓赤,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜仲吏,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,025評(píng)論 3 334
  • 文/蒙蒙 一不铆、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧裹唆,春花似錦誓斥、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至成畦,卻和暖如春距芬,著一層夾襖步出監(jiān)牢的瞬間涝开,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評(píng)論 1 272
  • 我被黑心中介騙來泰國打工蔑穴, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留忠寻,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,081評(píng)論 3 377
  • 正文 我出身青樓存和,卻偏偏與公主長得像奕剃,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子捐腿,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,675評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容