摘要：在被收購，同時把其中的核心層代碼進行了開源，新版本后的進入商業(yè)化。將做成了一種插件式的方式，便于擴展。到今天，以上的購買都從移動端來，歷時一年半。所以我們總結一些一般的演進流程按照不同的分類，做個簡單的建議電商類工具類社交類游戲類方案

App形態(tài)

Web App

Native App

Hybrid App

Web App模型方案和應用 (待完成)

SPA (Single Page Application) 單頁應用

PWA (Progressive Web App) 漸進增強Web應用

模塊化單頁應用

Hybrid App模型和實現(xiàn)原理

現(xiàn)有的Hybrid形態(tài)

Hybrid的實現(xiàn)原理

Codova實踐方案

React Native 實踐方案

Native App (待完成)

Native組件化&容器化

Native的粒度、切面和Business層的抽取

App的選型方案和演進路線

各種不同類型App選型方案

升級：ABTesting (待完成)

升級：用戶事件收集 - 無埋點 vs 埋點方案 (待完成)

EJU Router方案(待完成)

DEFINITION 定義

A web application or web app is any software that runs in a web browser. It is created in a browser-supported programming language (such as the combination of JavaScript, HTML and CSS) and relies on a web browser to render the application.
Web applications are popular due to the ubiquity of web browsers, and the convenience of using a web browser as a client, sometimes called a thin client. The ability to update and maintain web applications without distributing and installing software on potentially thousands of client computers is a key reason for their popularity, as is the inherent support for cross-platform compatibility. Common web applications include webmail, online retail sales, online auctions, wikis and many other functions. --wiki

在瀏覽器端構建的基于HTML/CSS/JS進行開發(fā)，使用瀏覽器進行渲染的應用程序。

其特點體現(xiàn)在幾個方面

update and maintain web applications without distributing and installing software 升級和維護不需要分發(fā)和安裝

the inherent support for cross-platform compatibility 良好的跨平臺性

STORY 小故事 閱讀 視頻

The full Safari engine is inside of iPhone. And so, you can write amazing Web 2.0 and Ajax apps that look exactly and behave exactly like apps on the iPhone. And these apps can integrate perfectly with iPhone services. They can make a call, they can send an email, they can look up a location on Google Maps. And guess what? There’s no SDK that you need! You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today. So developers, we think we’ve got a very sweet story for you. You can begin building your iPhone apps today. --Steve Jobs

Jobs其實是最早的web app的倡導者之一，在當時的構想中是沒有native app這種形式的，所有的app都是以web的形式存在的，但是當時的Jobs需要面對3個問題

移動網絡根本無力承擔這種變革

如何使webapp讓Apple盈利

webapp運行的體驗非常糟糕

而基于此的討論和考慮才逐步衍生出后來的Native App和`App Store

Chromium OS vs Firefox OS

很有意思的一件事情是，很多年之后。有兩家公司實現(xiàn)了Jobs當年沒有實現(xiàn)的夢想，分別推出了基于瀏覽器操作系統(tǒng)的PC和手機。

基于Chromium OS的Google Chrome Book 官網 視頻

ChromeBook的推出，才逐漸讓市場上開始產生真正的Web App。至今我們能夠看到的很多出色產品，都是以此為開端或者以此為契機，其中很著名的有：trello | slack

基于FireFox OS移動端手機，不過很不幸2015年Q3開始，Mozilla宣布停止對Firefox OS的開發(fā)，就如很多方興未艾的手機系統(tǒng)一樣，它還沒怎么被認識，就壽終正寢了。視頻

CASE STUDY 案例

Financial Times

Trello

DIFINITION 定義

Apps are usually available through application distribution platforms, which began appearing in 2008 and are typically operated by the owner of the mobile operating system, such as the Apple App Store, Google Play, Windows Phone Store, and BlackBerry App World. Some apps are free, while others must be bought. Usually, they are downloaded from the platform to a target device, such as an iPhone, BlackBerry, Android phone or Windows Phone, but sometimes they can be downloaded to laptops or desktop computers. For apps with a price, generally a percentage, 20-30%, goes to the distribution provider (such as iTunes), and the rest goes to the producer of the app.[1] The same app can therefore cost the average Smartphone user a different price depending on whether they use iPhone, Android, or BlackBerry 10 devices. --wiki

基于手機操作系統(tǒng)的應用程序，使用其原生程序進行構建

其特點體現(xiàn)在幾個方面

operated by the owner of the mobile operating system 在對應操作系統(tǒng)平臺進行應用程序的開發(fā)

available through application distribution platforms 需要分發(fā)應用(下載)的市場 — 賣錢

CASE STUDY 案例

微信

部落戰(zhàn)爭 在游戲中大量采用OpenGL ES對于效果的開發(fā)非常有幫助，而WebGL的演進漫長

閱讀：HTML5史上最慘重的失?。篎acebook放棄HTML5轉投iOS Native

DEFINITION 定義

A hybrid mobile application (or hybrid mobile app) is a mobile application that runs inside of a native container and leverages the device’s web browser to display locally hosted HTML pages.[29] Hybrid mobile apps are composed mostly of HTML, JavaScript, and CSS. Device specific functionalities such as camera access, geolocation, and accelerometer readings are exposed through a JavaScript API. --wiki

其特點體現(xiàn)在幾個方面

runs inside of a native container 運行在原生的容器內

Device specific functionalities are exposed through a JavaScript API 通過JS API暴露底層的功能接口

優(yōu)缺點

Pros

Hybrid mobile apps allow code reuse across platforms. Let the library or framework you are using take care of the platform specific differences and use the same JavaScript code on both platforms. 跨平臺的代碼復用 - 在不同的平臺使用相同的Javascript代碼

JavaScript is something that many developers are already familiar with where something like the iOS development tools are more specialized. It can be argued that there is less of a learning curve when developing hybrid mobile apps compared to native apps. Javascript使用的通用性解決了iOS開發(fā)者的專用屬性，開發(fā)hybrid mobile的學習曲線更簡單。

The app"s interface and logic can be built and debugged in the web browser using an emulation framework. This could lower development costs depending on the tools required to develop native apps for the target platforms. app的ui和邏輯都可以在瀏覽器中構建和debug，減少在目標平臺上的花費。

The HTML5 application development with CSS3 gives the compelling structure to the interface of game app and this ensures pleasing user-interface. 使用CSS3讓用戶界面和游戲開發(fā)更加生動。

Cons

Hybrid mobile apps are more susceptible to user interface lag due to the extra layers of abstraction.[29]
Only a certain subset of native functionality is available which depends on the framework. All others native functions are accessible developing Plugins. 大部分native層的功能都需要通過plugin的方式進行調用。

As for native apps, the hybrid code base requires recompilation and resubmission to the distribution network where it is possible to instantly update a mobile web app’s codebase. 相對于web app來說，hybird需用重新編譯和分發(fā)才能完成更新

HTML5 in mobile devices H5在Web容器里的兼容性問題

CASE STUDY 案例

街旁國內最早的Hybrid模式的倡導者

應用HTML5搭建街旁新版混合式iOS客戶端

WEB APP, HYBRID APP & NATIVE APP 選擇哪種形態(tài)？

Steve Jobs and Bill Gates discuss native vs. web apps

What is a Hybrid Mobile App?

Native, HTML5, or Hybrid: Understanding Your Mobile Application Development Options詳細的功能和性能對比

決定哪種模式之前需要問自己這些問題：

App的體驗和開發(fā)周期何者為先？

APP的更新周期是否頻繁？

開發(fā)資源

應用平臺

在Native與Web之間構建一層Bridge, 將底層的接口映射到JS API上

Anatomy of a Hybrid Mobile GIS Application

View的渲染依賴于瀏覽器自身的渲染引擎，即使游戲也不需要去寫openGL

Bridge在不同的平臺通過不同的native層實現(xiàn)，在各自平臺下完成編譯

Business可以實現(xiàn)在Web也可以實現(xiàn)在Native

Plugin構成了Bridge的擴展

現(xiàn)有平臺

Cordova

Ionic

Phonegap

sencha

apicloud

appcan

案例

ionic weather

使用JS編寫通用的業(yè)務邏輯，使用Nodejs編譯不同平臺的Native app 視頻

Appcelerator Titanium Tutorial - Hello World With Titanium

View通過Ti.UI進行調用Native實現(xiàn)，在不同的操作系統(tǒng)中調用不同的Native UI實現(xiàn)。Ti.UI可以定義部分Native UI

Business通過JS編寫最后編譯成Native代碼

Bridge和Build工具進行了整合，理論上可以跨所有平臺

Creating a basic layout in Titanium

現(xiàn)有平臺

Titanium

在我寫這篇文章第一稿的時候，F(xiàn)acebook發(fā)布了React Native，從Coding的思想上RN不一樣

案例

Sample.Todo

Titanium嚴格來說不屬于Hybrid，因為其最終產生的仍然是Native App，過于牛B，不在本文知識范圍內。本文限于討論類似Cordova的Hybrid實現(xiàn)。

Native調用JS

native通過string調用js

webview調用js解釋器的eval方法將string轉化為js方法

webview調用js方法

JS調用Native

javascript改變url，通過url傳遞調用的方法和參數(shù)

webview監(jiān)聽到了URL變化，并且探測到url中定義的方法和參數(shù)

尋找對應的映射表，找到native對應接口api進行調用

執(zhí)行javascript調用方法時傳入的回調string并添加數(shù)據

webview解析string轉化為javascript進行調用

URL Schemes

為了區(qū)別普通的http訪問的url與hybrid調用native的url，參考openurl的標準apple提出了url schema的方法

About Apple URL Schemes

系統(tǒng)自定義了可以被識別的協(xié)議和url，例如

mailto:frank@wwdcdemo.example.com

tel:1-408-555-5555

sms:1-408-555-1212

app自身可以自定義url schema，并且把自定義的url注冊在調度中心， 例如

ctrip://wireless 打開攜程App

weixin:// 打開微信

閱讀

URL Scheme 統(tǒng)計

早期的Android采用了JavascriptInterface，但是這種方案存在注入的安全隱患，所以在Android 4.0以上的版本開始就支持了URL Schema方案。

閱讀

閱讀

Hybrid URL Schema在實現(xiàn)中的問題

存在短時間內高并發(fā)的問題，例如：一次定位沒有完成期間，反復調用定位

執(zhí)行http的url訪問還沒有返回就調用了新url schema，導致了前一次行為沒有生效

在ios中native調用js是實時的，在Android中native調用js是異步的，在異步調用中出現(xiàn)alert這種阻塞進程的會直接crash app

關于這里的實踐，需要讀Cordova的JS Bridge

Cordova誕生于PhoneGap，早起的PhoneGap是一個開源平臺，所有的代碼、編譯都可以使用PhoneGap平臺完成。在被Adobe收購Nitobi，同時把PhoneGap其中的核心層代碼進行了開源，新版本后的PhoneGap進入商業(yè)化。所以現(xiàn)在在PhoneGap平臺上如果是用它的編譯，需要付費。

但有了Cordova，我們就可以造一個新的PhoneGap～～不是嗎，所以有了Ionic

Cordova架構：

就如我們前面說的，Cordova的方案就是放一個WebView所有的UI都是通過WebView進行呈現(xiàn)，通過JS Bridge調取Native方法。Cordova將JS Bridge做成了一種插件式的方式，便于擴展。

所有采用Cordova方案或者類似以WebView作為呈現(xiàn)的Hybrid方案，在Android上遇到一個最大的問題，就是不同ROM中WebView的兼容性問題

之前華為系統(tǒng)的webview內核有問題，只要有js交互，占用內存無限上升；某次測試達到恐怖的380M，簡直嚇尿；由于是webkit內核問題，無能為力；我們只能檢測到是華為系統(tǒng)的這個特定版本的時候談個Toast，告訴用戶不要在頁面逗留太長時間。。（現(xiàn)在這個bug已經修復了，當時系統(tǒng)版本：NXT-TL00C 01B1 29SP02）— 知乎用戶

怎么辦？！ Crosswalk。這段視頻需要看一下視頻

下一個問題：如果用Crosswalk包太大怎么破？用Crosswalk Lite或者只用Arm的包

就如前面的Titanium，RN里面Javascript是用來寫業(yè)務的，UI是交給Native的，所有如果有很多的自定義View的話，其實開發(fā)量也不小～

React-Native系列Android——自定義View組件開發(fā)

我說RN和Titanium不一樣，為什么？因為CodePush，CodePush是Microsoft推出的React Native的熱部署方案。簡單來說就是業(yè)務層都使用JS來寫，把JS打包成Bundle，然后把Bundle文件下發(fā)下去。那么不同在什么地方？

Titanium是需要完全編譯的，最終是不是把JS代碼都轉成了Java或者C的代碼不了解，但是有很大可能。像C和Java需要完整的編譯，在Runtime的時候打開去注入，其實是很難的。但是RN把業(yè)務層抽到Bundle，這是一種Meta Programming的思想，這就意味著，隨著發(fā)展未來你只要推js代碼上去，RN就可以完成更新。

蘋果向熱更新下達最后通牒，是什么導致了這次事件？

兩個問題：

Native | Hybrid | Web 他們之間是不是非此即彼的關系？

如果一個App初期選擇一個Native | Hybrid | Web中的一個，是不是意味著只能一條路走到黑？如果中間想加或者想轉其他的形態(tài)需要多大的努力？

所以要回答這個問題，我先來說一個我過去做的案例

最早我們在做豐趣海淘的時候，我們大量的人力和時間都投入在PC站點、移動站點和后臺的搭建中，我們還在嘗試其他的商業(yè)模型，所以沒有人力投入在App的開發(fā)中。有一天下午，我和我們大前端的負責人討論了一下之后，決定出一個App，放App Store和Google Play，然后大概2天左右時間，我把當時做的移動端站點扔進去，發(fā)布了當時我們第一個版本～～

上線之后，發(fā)現(xiàn)了一個讓人驚喜的數(shù)據：周復購xx%～～當時老板大手一揮，做移動端。到今天，xx%以上的購買都從移動端來，歷時一年半。

所以我們當時初期的架構就是純粹的Web，然后我們就開始了演進。這個要說到我們當時的前端架構，我們用了CanJS，但是沒有做純粹的單頁應用。我們做了模塊化的單頁應用，簡單的說，首頁我認為它是一個模塊，我為他多帶帶做一個單頁應用。所有單頁應用有個切面層，做服務端的簽名、csrftoken的處理等等。

然后我們開始做原生化，為什么要做原生化，因為要讓用戶體驗有大的提供、因為要做用戶心智

所以基于一個個模塊，開始做，我們原則是：

下單主流程原生化，讓用戶最快速度的付錢

產品化比較好的模塊先原生化

經常變化并且變化非常大的模塊，不做原生化 - 用hybrid的方案走

Hybrid最開始我們采用了Cordova的架構，但是后來放棄了，Cordova太重了，沒必要，我們自己寫了JS Bridge通過URL Scheme的方式進行調用，封裝了調用堆棧，同時引入了Crosswalk解決華為機的兼容性問題。

所以我們總結一些一般的演進流程：

按照不同的App分類，做個簡單的建議

電商類：70% Native + 10% Web + 20% Hybrid

工具類：80% Native + 20% Hybrid

社交類：50% Native + 20% Web + 30% Hybrid

游戲類：95% Native + 5% Web

router-android

router-iOS