app開發(fā)之原生開發(fā)、H5開發(fā)和混合開發(fā)的區(qū)別
APP開發(fā)模式
目前市場上主流的APP分為三種：
- 原生APP
- Web APP（即HTML5）
- 混合APP 當(dāng)然，還有flutter等
APP開發(fā)模式對比
1. 原生開發(fā)
原生開發(fā)（Native App開發(fā)），是在Android、IOS等移動(dòng)平臺(tái)上利用官方提供的開發(fā)語言、開發(fā)類庫、開發(fā)工具進(jìn)行App開發(fā)。比如Android是利用Java、Eclipse、Android studio；IOS是利用Objective-C 和Xcode進(jìn)行開發(fā)。
優(yōu)點(diǎn)：
- 可訪問手機(jī)所有功能（如GPS、攝像頭等）、可實(shí)現(xiàn)功能最齊全；
- 運(yùn)行速度快、性能高，絕佳的用戶體驗(yàn)；
- 支持大量圖形和動(dòng)畫，不卡頓，反應(yīng)快；
- 兼容性高，每個(gè)代碼都經(jīng)過程序員精心設(shè)計(jì)，一般不會(huì)出現(xiàn)閃退的情況，還能防止病毒和漏洞的出現(xiàn)；
- 比較快捷地使用設(shè)備端提供的接口，處理速度上有優(yōu)勢。
缺點(diǎn)：
- 開發(fā)時(shí)間長，快則3個(gè)月左右完成，慢則五個(gè)月左右；
- 制作費(fèi)用高昂，成本較高；
- 可移植性比較差，一款原生的App，Android和IOS都要各自開發(fā)，同樣的邏輯、界面要寫兩套；
- 內(nèi)容限制（App Store限制）；
- 必須等下載完畢用戶才可以打開，獲得新版本時(shí)需重新下載應(yīng)用更新。
- 新需求迭代，上線慢。
2. web APP (h5開發(fā))
HTML5應(yīng)用開發(fā)，是利用Web技術(shù)進(jìn)行的App開發(fā)，可以在手機(jī)端瀏覽器里面打開的網(wǎng)站就稱之為webapp。Web技術(shù)本身需要瀏覽器的支持才能進(jìn)行展示和用戶交互，因此主要用到的技術(shù)是HTML、CSS、Javascript以及jQuery、Vue、React等JS框架。
優(yōu)點(diǎn)：
- 支持設(shè)備范圍廣，可以跨平臺(tái)，編寫的代碼可以同時(shí)在Android、IOS、Windows上運(yùn)行；
- 開發(fā)成本低、周期短；
- 無內(nèi)容限制；
- 適合展示有大段文字（如新聞、攻略等），且格式比較豐富（如加粗，字體多樣）的頁面；
- 用戶可以直接使用最新版本（自動(dòng)更新，不需用戶手動(dòng)更新）。
缺點(diǎn)：
- 由于Web技術(shù)本身的限制，H5移動(dòng)應(yīng)用不能直接訪問設(shè)備硬件和離線存儲(chǔ)，所以在體驗(yàn)和性能上有很大的局限性；
- 對聯(lián)網(wǎng)要求高，離線不能做任何操作；
- 功能有限；
- APP反應(yīng)速度慢，頁面切換流暢性較差；
- 圖片和動(dòng)畫支持性不高；
- 用戶體驗(yàn)感較差；
- 無法調(diào)用手機(jī)硬件（攝像頭、麥克風(fēng)等）。
混合（原生+H5）開發(fā) - Hybrid App開發(fā)
混合開發(fā)（Hybrid App開發(fā)），是指在開發(fā)一款A(yù)pp產(chǎn)品的時(shí)候，為了提高效率、節(jié)省成本而利用原生與H5的開發(fā)技術(shù)的混合應(yīng)用。通俗點(diǎn)來說，這就是網(wǎng)頁的模式，通常由“HTML5云網(wǎng)站+APP應(yīng)用客戶端”兩部份構(gòu)成。
混合開發(fā)是一種取長補(bǔ)短的開發(fā)模式，原生代碼部分利用WebView插件或者其它框架為H5提供容器，程序主要的業(yè)務(wù)實(shí)現(xiàn)、界面展示都是利用與H5相關(guān)的Web技術(shù)進(jìn)行實(shí)現(xiàn)的。比如京東、淘寶、今日頭條等APP都是利用混合開發(fā)模式而成的。
優(yōu)點(diǎn)：
- 開發(fā)效率高，節(jié)約時(shí)間。同一套代碼Android和IOS基本上都可使用；
- 更新和部署比較方便，每次升級(jí)版本只需要在服務(wù)器端升級(jí)即可，不再需要上傳到App Store進(jìn)行審核；
- 代碼維護(hù)方便、版本更新快，節(jié)省產(chǎn)品成本；
- 比web版實(shí)現(xiàn)功能多；
- 可離線運(yùn)行。
缺點(diǎn)：
- 功能/界面無法自定：所有內(nèi)容都是固定的，不能換界面或增加功能；
- 加載緩慢/網(wǎng)絡(luò)要求高：混合APP數(shù)據(jù)需要全部從服務(wù)器調(diào)取，每個(gè)頁面都需要重新下載，因此打開速度慢，網(wǎng)絡(luò)占用高，緩沖時(shí)間長，容易讓用戶反感；
- 安全性比較低：代碼都是以前的老代碼，不能很好地兼容最新手機(jī)系統(tǒng)，且安全性較低，網(wǎng)絡(luò)發(fā)展這么快，病毒這么多，如果不實(shí)時(shí)更新，定期檢查，容易產(chǎn)生漏洞，造成直接經(jīng)濟(jì)損失；
目前混合開發(fā)有兩種開發(fā)模式：
- 原生主導(dǎo)的開發(fā)模式：需要安卓和IOS原生開發(fā)人員，整個(gè)App既有原生開發(fā)的頁面，也有H5頁面，在需要H5頁面時(shí)由原生開發(fā)工程師實(shí)現(xiàn)內(nèi)嵌，筆者最近正在開發(fā)的項(xiàng)目就使用這種開發(fā)模式。
- H5主導(dǎo)的開發(fā)模式：只需要H5開發(fā)工程師，借助一些封裝好的工具實(shí)現(xiàn)應(yīng)用的打包與調(diào)用原生設(shè)備的功能，如HBuilder的云端打包功能。
混合開發(fā)APP中如何辨別原生和H5
上圖中是上半部分是原生，下半部分是H5
1. 看加載的方式 - (比較準(zhǔn)確)
如果在打開新頁面導(dǎo)航欄下面有一條加載的線的話，這個(gè)頁面就是H5頁面，如果沒有就是原生的。 微信里面打開我們的H5頁面常見的有個(gè)綠色的加載線條。
比如國美APP中打開是紅色的進(jìn)度條
2. 看app頂部 導(dǎo)航欄是否會(huì)有關(guān)閉的操作- (不太準(zhǔn)確)
如果APP頂部導(dǎo)航欄當(dāng)中出現(xiàn)了關(guān)閉按鈕或者有關(guān)閉的圖標(biāo)，那么當(dāng)前的頁面肯定的H5，原生的不會(huì)出現(xiàn)（除非設(shè)計(jì)開發(fā)者故意弄的）
美團(tuán)的、大眾點(diǎn)評(píng)的APP、微信APP當(dāng)加載h5過多的時(shí)候，左上角會(huì)出現(xiàn)關(guān)閉二字
3. 看布局邊界（只適用于安卓手機(jī)）
可以打開 開發(fā)者選項(xiàng)中的顯示布局邊界，頁面元素很多的情況下布局是一整塊的是h5的，布局密密麻麻的是原生控件。頁面有布局的是原生的否則為h5頁面。（僅針對安卓手機(jī)試用）
4. 看復(fù)制文章的提示，需要你通過對比才能得出結(jié)果。（不準(zhǔn)確）
比如是文章資訊頁面可以長按頁面試試，如果出現(xiàn)文字選擇、粘貼功能的是H5頁面，否則是native原生的頁面。
有些原生APP開放了復(fù)制粘貼功能或者關(guān)閉了。而H5的css屏蔽了復(fù)制選擇功能等等情況。需要通過對目標(biāo)測試APP進(jìn)行對比才可知。
5. 看斷網(wǎng)的情況
把手機(jī)的網(wǎng)絡(luò)斷掉。然后點(diǎn)開頁面。然后可以正常顯示的東西就是原生寫的。
顯示404或者錯(cuò)誤頁面的是html頁面。原生部分頁面是可以正常打開的，打不開的原生和H5的報(bào)錯(cuò)也是有區(qū)別的。
6. 判斷頁面 下拉刷新的時(shí)候（前提是要有下拉刷新的功能）
如果界面沒有明顯刷新現(xiàn)象的是原生的，如果有明顯刷新現(xiàn)象（比如閃一下）的是H5頁面（ios和android）。
比如淘寶的眾籌頁面。
7. 下拉頁面的時(shí)候顯示網(wǎng)址提供方的一定是H5
文章摘自：
https://segmentfault.com/a/1190000020146197?utm_source=tag-newest
總結(jié)
目前，多數(shù)混合開發(fā)的前端技術(shù)棧，選型vue, react的比較多，國外的話angular比較多，國內(nèi)較少，存在招人難的問題。
- 純H5的應(yīng)用，是體驗(yàn)最差的
- hybird應(yīng)用中，webview方式嵌入H5的方式目前大廠和中小企業(yè)用的較多。
- Flutter是一款移動(dòng)應(yīng)用程序SDK，一份代碼可以同時(shí)生成iOS和Android兩個(gè)高性能、高保真的應(yīng)用程序。目前，不少中小型企業(yè)已經(jīng)開始大量使用。
- weex目前沒有在項(xiàng)目中使用過，了解到使用它的產(chǎn)品不多
- rn 目前在京東有少量使用。
思考
- 我們的APP，如何選擇適合自己團(tuán)隊(duì)的技術(shù)框架，使我們的APP迭代更快，體驗(yàn)更好，這是我們一直在追求的。目前，國內(nèi)vue，react，從生態(tài)，組件庫，全家桶各個(gè)方面，都已經(jīng)非常成熟。如果你是一個(gè)比較喜歡嘗試新的東西，建議可以搞一下flutter。考慮項(xiàng)目的穩(wěn)定發(fā)展建議還是以vue，react為主。
- 據(jù)我了解，RN的開發(fā)投入，人力，幾乎接近于原生。目前我們團(tuán)隊(duì)不考慮
這篇文章就介紹到這了，需要的朋友可以參考一下。
相關(guān)文章
Java和C#都是一門面向?qū)ο蟮恼Z言，Java更多地借鑒了C++的優(yōu)點(diǎn)，而摒棄了它的一些不太容易被人掌握的知識(shí)點(diǎn)（有些不能說是缺點(diǎn)），并且增加了一些自己的特點(diǎn)，而C#則是更多地借鑒了Java的優(yōu)點(diǎn)，而增加了一些自己的特點(diǎn)2013-04-04
vant/vue實(shí)現(xiàn)小程序下拉刷新功能方法詳解
這篇文章主要介紹了vant/vue實(shí)現(xiàn)小程序下拉刷新功能方法詳解,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了YOLO v4常見的非線性激活函數(shù),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-05-05
Maven是一個(gè)項(xiàng)目管理工具，它包含了一個(gè)項(xiàng)目對象模型 (Project Object Model)，這篇文章主要介紹了maven命令大全,需要的朋友可以參考下2020-07-07
微服務(wù)的架構(gòu)出現(xiàn)已經(jīng)很久很久了，微服務(wù)架構(gòu)就是一種將單個(gè)應(yīng)用程序轉(zhuǎn)換為一組小服務(wù)的方法，每個(gè)小服務(wù)都在自己的進(jìn)程中運(yùn)行，并使用輕量級(jí)的交互方式（如HTTP）進(jìn)行通信2021-06-06
K8S二進(jìn)制部署的K8S(1.15)部署hpa功能
這篇文章主要介紹了K8S二進(jìn)制部署的K8S(1.15)部署hpa功能,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了TCP的三次握手與四次揮手詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2017-03-03
淺談架構(gòu)模式變遷之從分層架構(gòu)到微服務(wù)架構(gòu)
一般地，架構(gòu)模式大致可以分成兩類，單體架構(gòu)（monolithic architecture）和分布式架構(gòu)（distributed architecture）。2021-05-05
chrome開發(fā)者助手插件v2.10發(fā)布提升開發(fā)效率不再只是口號(hào)
這篇文章主要介紹了chrome開發(fā)者助手插件v2.10發(fā)布提升開發(fā)效率不再只是口號(hào),這個(gè)版本重點(diǎn)提升了常用工具的使用效率，需要的朋友可以參考下2021-03-03
vs 是我們平時(shí)編寫代碼時(shí)的首選工具，相信也是大多數(shù)小伙伴兒的首選調(diào)試工具，因?yàn)閷?shí)際操作起來太方便了，代碼編寫完，一個(gè) F5 就可以愉快的調(diào)試了。今天我想向大家推薦幾個(gè)非常值得了解 vs 調(diào)試技巧。2020-09-09