用HTML5開發App真的好嘛？

12-27

一直信仰「每門語言最好用在其專長領域」的玄學。
最近被極力推薦用HTML5開發App，還在啃Swift和Java的我看到人家用前端框架幾小時做出了我拿Xcode/Android Studio一整天才能做出的界面效果（我剛開始學做App，用時長的話求輕噴），備受打擊?﹏?難道HTML5可以在大多數情況下代替原生App了嗎？
另外，HTML5的性能怎麼樣？一直認為它做出來的App只是一個全屏的、內嵌網頁的瀏覽器，但有人說並非如此，HTML5做的App還要被IDE進行一系列處理才能轉換為App，是這樣嗎？

不知道題主說的是 H5 做的 Web App 還是偽裝成 Native 的App.
如果是 Web App 的話：
你能做到 Flipboard 那樣拿的確可以說體驗與 Native App 有一拼。
或者說能研究明白 FB 新出的 ReactJs 沒準也可以。

但關鍵問題有兩個：

大多數人都沒有 Flipboard 團隊的水平；也不一定能用好 ReactJs.
你能不能保證全部交互以及使用都是在自己的框架內的？一旦有一個點擊結果不是自己的 H5 應用給設計好了的，或者說是外鏈，那直接全部體驗崩潰一窺啊。參見 FB 的 Paper，Native 都很難保證這點，更何況 H5 App？

對了，你在微信里打開過那種惡俗的還自帶背景音樂的 H5 網頁沒有啊？恩，體驗不錯吧（逃

在UI方面，HTML5是以申明方式使用較為高層次的組件來拼UI的，你拿 Xcode 的 Interface Builder 畫其實也很快的。其實 CSS / Javascript 想要學好也不容易的。但是 iOS 和 Android 的系統直接提供匠API層次都比較低，而js世界連直接操起jQuery折騰DOM都覺得過時了，在同等熟度的情況下，web app出活快還是可能的。不過 web app 受運行環境限制比較大，環境沒提供的特性，要實現就會很麻煩，而需要直接訪問硬體就麻煩大了。

說HTML5 App就個瀏覽器也沒錯，只是要讓javascript能訪問系統能力肯定要做些擴展的。

在我看來H5是未來，但未來始終是戈多，大家都在等待。
目前的H5框架都存在一個問題，API不夠多，當硬體、系統版本問題出現時，那麼混合開發不可避免，那麼這個時候解決問題的難度比以往任何時候都麻煩，必須存在一個Android、iOS、H5都比較熟悉甚至精通的。
總而言之，快速成型H5可能會很快，但是APP做大做得更多制定內容時，維護、二次開發的成本不一定會低

重用戶體驗，面向大眾市場，規格基本確定，就做app，不要動H5.
面向小眾市場，就先做H5, 不要考慮優化，規格確定了想優化的時候就做app去。

不好

唯一的好處，多平台下節約開發成本。
最大的缺點，體驗完全不如本地語言。

2016-08-15更新，感謝大家的贊，之前回答的比較匆忙，在這裡再稍微補充下吧
其實在我們團隊內部一直存在一個經久不衰的話題就是，如何區分一款產品或項目更適合走Hybrid路線還是Native路線。無論是搞技術的同事還是業務的同事都會在這個話題上產生分歧。
從我個人的角度分析的話，在採取哪種路線時，首先要清楚以下幾點：
1.團隊參與開發產品/項目的是哪些人
擁有豐富開發經驗的開發人員是一個產品/項目的保障，他們往往能夠快速定位問題，解決問題。
以及對於一些為付諸實踐的想法進行評估，以及針對App的短板環節進行優化
P.S:Hybrid和Native兩個路線優化都是高級話題，比如Native中的ListView性能，以及Hybrid中的
transition動畫等
2.項目/產品的開發周期是多久，成本又是多少
這個話題往往不是作為開發者的我們需要擔心的，因為這是PM需要擔心的，但是資深的開發者都會慢慢走上PM的道路
3.項目/產品上線後的維護成本又是多少
這裡的成本指的更多時人力資源，比如項目開發的時候是6個人，項目上線後，是否可以只留1到2個人在這個項目上全職進行維護，其他人抽調到其他緊急項目上進行開發
是不是有種無良黑心領導的感覺？（笑）
4.當項目/產品重新迭代或者進行增量開發的時候，當時所採取的這種路線是否可行
這個問題是對上線後如果繼續開發的一個成本評估，比如某團隊一直採用Native進行開發，在開發某小型試水產品時為了節約成本採取了Hybrid路線，結果產品令人意外的成功，這時如果繼續進行增量開發可能會面臨技術積累不夠，一些新需求開發不了的情況，是重現用Native再開發還是硬著頭皮繼續增量開發，所以這也是個問題

其實我們所探討的話題就像是在問開車好還是騎自行車好，我覺的要把這個話題限定在一個前提條件里才可以~
----------------------------------------------------華麗的分割線--------------------------------------------------------
作為一名使用ionic+cordova開發Hybrid App，同時也是Native Android App的開發人員，說說自己的心得體會吧
一.先說一下Hybrid App
Hybrid App目前主流就是兩種，Cordova平台的和React Native平台的。
1.Cordova平台一般會使用樣式組件庫，比如Framework7，比如ionic或者OnsenUI等，使用樣式組件庫的好處就是避免重複的造輪子，可以在樣式庫提供給我們的基礎上進行改造，改成我們想要的效果
2.Cordova平台一般都是Js+HTML+CSS的形式進行開發（我們團隊用的是AngularJS+SCSS+HTML）
3.Cordova本身就是一個Webview，安裝了一個HybridApp就相當於安裝了一個瀏覽器然後在這個瀏覽器上跑本地的Html+Js
4.React Native平台目前是0.31版本（截止到16年8月8日），React Native雖然也是所謂的用Web技術來開發App，但是JSX語法和對於ReactJS所需要的了解也導致了這種上手難度和學習成本大於Cordova平台那種，而且在React Native平台Android和iOS的組件是分開的，現有組件滿足不了項目需求的情況也是常事，這時我們還要單獨開發組件
5.性能方面ReactNative平台優於Cordova平台
開發效率方面ReactNative平台要比Cordova平台差
二.聊聊Native App（以Native Android為例）和Hybrid App（Hybrid App由於不區分平台也不存在拿誰舉例了）
1.由於Hybrid App在開發時所見即所得，Js和Html不需要編譯，直接跑在瀏覽器上，所見即所得，遇到界面的bug直接打開Chrome開發模式改代碼就可以
2.開發Native Android App，當我在用XML畫界面時，會覺得和HTML+CSS3這種模式相似，但卻不像HTML+CSS這麼靈活
3.Native App中的Activity生命周期，Activity間通信，廣播等概念在Hybrid App的開發中也是有的，只不過變成了angular的路由，以及具體的服務等
4.以實現一個列表為例，Native Android中要用帶有泛型的ArrayList配合ListView實現，也很有可能要根據具體類型來寫自己的類，並且在重寫Adapter的getView方法中要把優化ListView滑動的代碼一同寫入;Hybrid中的列表直接通過一個Object類型的數組實現，並在html上配合ng-repeat指令就可以做到，在這個基礎上如果加上ng-show,ng-class,ng-if等指令甚至可以完成更複雜的功能、
5.Hybrid雖然開發效率高，但是存在性能瓶頸（性能優化是個令人頭疼的課題，要求對Html和JS以及瀏覽器的Webcore和Js引擎工作原理有一定的了解），很有可能PC瀏覽器上很流暢很酷炫的效果到了手機上就打折扣（無GPU加速的劣勢體現出來了，這個時候就要優化，要考慮是否某些屬性變化導致Webcore重新排版等）

總結：說了這些，主要想把自己的想法總結分享給大家，Native開發模式也好，Hybrid開發模式也好，目前都是不存在誰取代誰的情況的，讓最合適的團隊，用最合適的技術開發最合適的項目，我想這是我最大的感觸了。
再舉個栗子~
目前來講如果一個團隊不計較成本，想做好一款產品，而且團隊積累比較足的時候，往往都會選擇用Native來開發，但這樣就要維護兩個團隊，兩套代碼，這種對於產品經理在設計每個功能，以及項目經理對項目進行把控的要求都比較高
如果開發的是試水的產品，不確定未來可能性的這種，或者乙方公司為甲方公司實施App項目時，一般都會採取Hybrid路線來開發，一方面是保障成本，另一方面是面臨需求變更可以以更快的速度響應並且迭代
最後再說一句心裡話，最終實現效果的好壞往往不在於我們使用了什麼技術，而是使用這套技術的團隊。

Html5一直在更成熟的路上努力，跟隨他的框架比如WeX5也都在快速的版本更新中，目前性能問題已經邁進了很大的一步，採用單頁載入模式，可以運行暢快無阻！相信html5會稱霸前端的，IOS安卓慢慢會演變成後端語言了

難道HTML5可以在大多數情況下代替原生App了嗎？

這個看你要做什麼了。

我最近把我們團隊的 BeautyTeam（開發中的團隊管理工具，類似 Teambition）AngularJS 版本做了 Ionic（Ionic: Advanced HTML5 Hybrid Mobile App Framework）的兼容。這個是開源的，可以在 GitHub - Obisoft2017/BeautyTeamAngularJS at exp 查看，我把它標註成了試驗性的 branch；不過試試，至少在我這裡還沒有問題。

從這次移植的經驗來看如果你的 target 是不需要強大性能（譬如複雜 UI）的，包含 Apache Cordova 的 Ionic 完全可以勝任。但是對於計算來講目前的渲染引擎還稍顯遜色。

另外，HTML5的性能怎麼樣？

不是很了解——不是專職的前端；remote 的內容受制於網速一般體驗很差；本地的東西還是很可觀的。

HTML5做的App還要被IDE進行一系列處理才能轉換為App，是這樣嗎？

IDE 可以完成 debug 與打包部署發布的過程（Xcode 便是）。Ionic CLI 已經可以完成除了發布之外的大多數工作。
至於運行的話：基於 Cordova 的 Hybrid App 確實是塞到了一個巨型的 WebView 裡面——你可以自己看一看導出的工程（*.xcodeproj）。React Native / Weex 則是基於 runtime / 反射機制繪製原生組件。

用HTML5開發App真的好嘛？

對於一個實際開發中缺乏 iOS / Android native 開發的團隊來講，這是一個不錯的選擇；如今的首選還是 native 開發。

其實有的時候混合在一起才是最好的。簡單一點的混合，比如資訊類的，可以用HTML通過js重新排版，做出來很好看的東西。在比較要求高的東西，比如listview，拖拽，上傳，下載，用原生會有很好的體驗，因為你可以掌控所有的一切。例如一個listview，你可以告訴手機什麼時候啟動線程去請求圖片，什麼時候釋放資源，什麼時候創建本地緩存。這些我相信用html也可以做，但是做的並不享受，而且結果也不會很好。用js去控制線程，文件流之類貼近機器的操作，不是用js做他最不擅長的事嗎？

把native的方式學精，達到你用native分分鐘搞定的事，需要html5搞半天的程度。

開發hybrid app要比純native費時，而且開發成本相對比較高。

懂hybrid技術的開發人員質量相對較高，項目中投入這樣的人員去開發項目，一來是人力成本高，二來是開發周期長。

如題主所說，「每門語言最好用在其專長領域」，html5在app也有它專長的地方。比如一些非常複雜的布局，使用native開發會變得非常困難，html5就能夠輕鬆勝任。

如淘寶京東等商城首頁，都是webview。

因此是否用hybrid還是要看具體需求，不過開發成本如此高，不是非常必要時，稍微懂得算的人都不會採用這種方式~

一般App都會採用Hybrid混合開發，Native+HTML5；
比如在一些展示性強的頁面、需要保持更新的活動運營頁面，嵌入一個HTML5頁面是普遍採用的方法。可以做到及時更新，不再受制於應用商店的審核，快速上線活動。亦有利於保持iOS跟Android平台的一致性。
單獨的HTML5應用在目前還不足以撐起用戶體驗，特別是在Android不同版本下的webview表現令人捉急。

更新:講真，小團隊的話哪個方便哪個來，趕項目的時候看人手（手動doge…

關於APP開發者對於HTML5應用於移動設備開發的一些優勢描述 webos還是不錯的，希望HP能給他帶來活力。
對於IPad各種新特性及APPLE在促進AR(Augmented Reality)技術革新上失敗的積極討論已使它成為本周媒體的新寵,當然還有今早的開發者基金髮布。從消費者的角度來看多平台很讓人興奮。但應用程序開發者會在IPHONE,Android,黑莓直至現在的IPad之間移植他們的app。當大量消費者轉移至其他品牌,通過APPLE審批進程鎖定更多開發者在IOS平台的意願可能會是開發者的煉獄,結果只有一個:無人受益。
Palm開發者關係經理Dion Almaer , 在給出(在移動設備)沒有現在流行的"一次編寫,到處運行"APP開發方案告誡的同時,打賭基於WEB的APP和HTML5將會解決一些我們所關注的問題。
Almaer 說:通過WEB我們可以分享更多。拿GMail來說,它並不是一個專門為IPhone編寫的應用。諸如此類使用本地數據的豐富HTML5應用非常棒。用戶體驗略微被削弱了。但是對我來說App和商店的概念被限制了並且可能是錯誤的。我希望我們能繞過這種可以預見其未來發展的APPStore模式。
有許多原因讓開發者Kevin Systrom選擇用HTML5來編寫他的隱形程序。除了可以在多種平台的設備上運行,事實上HTML5還可以提供在無APPSTORE的情況下即時發布程序。Kevin 力挺HTML5說:HTML/JS開發者社區輕而易舉地達到10倍於APPSTORE的規模並且沒有下載消耗(時間)。你只需簡單地告訴人們一個URL(統一地址),然後鏈接就可以了--程序已經被安裝好了。APP在線直接安裝而不是從APPSTORE下載意味著減少了開發者進行病毒式營銷(指互聯網用戶自發轉送廣告的行為)的障礙。至於其他方面,雖然有許多方法可以讓你加速APP,當涉及到響應等等情況,寫一個原生程序總是會有其優點。然而,我們不應該忘記在桌面市場曾經發生過這樣的情況,到適當時機,隨著技術發展,當消費者和開發商認識到瀏覽器內建程序的優點,他們可能會全部轉移到WEB應用上來。
GOOGLE開發者關係經理Patrick Chanezon 列舉了大量使用HTML5開發移動設備的優點,亦即你可以在所有支持HTML5的電話上部署同樣的代碼並且不會被蘋果的審批程序減速發布。然而HTML5 APIS 還沒有完全標準化,同時還有很多電話不支持HTML5。不管怎樣當更多設備將WEB開發環境作為他們的選擇,Chanezon相信HTML5會保持其發展勢頭。
HTML5並不是完美的,它可能只是你消減設備開發成本和周期的步驟之一。
文章來源： APP外包商:HLML5非常適於移動APP開發
軟捷科技：http://www.ruanjiekeji.com

簡單ui的app.都可以
複雜的幾乎所有跨跨平台方案都傻眼
react native見UITABLEVIEW也跪

正在開發基於 ionic 的混合式app，幾個簡單的經驗：
1、在體驗上，和普通的 app 還是可以一拼。但和優秀的app，比如微博，微信，知乎等，差距很大。
2、缺乏成熟的混合式app開發套路。關於請求管理，數據池設計，場景許可權管理等等的介紹，還是相對較少。
3、debug 和調試相對困難，特別是涉及到原生能力調用的測試。

結論是：不好。但做混合 app 的過程，對前端是一個非常好的一個經歷。

凡事易學者，必難精。

體驗不如native，特別是和用戶的交互，卡頓，延遲，閃屏，屏幕適配都是問題

看看京東金融，噁心死了，還白條時刷不出頁面，狗東還說砸了多少錢搞金融，沒錢請android開發？

別聽H5的吹了，去下個H5的APP就知道了。最後你會發現優化的時間都超過原生開發的時間的幾倍了。