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

App形態(tài)

Web App

Native App

Hybrid App

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

SPA (Single Page Application) 單頁(yè)應(yīng)用

PWA (Progressive Web App) 漸進(jìn)增強(qiáng)Web應(yīng)用

模塊化單頁(yè)應(yīng)用

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

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

Hybrid的實(shí)現(xiàn)原理

Codova實(shí)踐方案

React Native 實(shí)踐方案

Native App (待完成)

Native組件化&容器化

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

App的選型方案和演進(jìn)路線

各種不同類型App選型方案

升級(jí)：ABTesting (待完成)

升級(jí)：用戶事件收集 - 無(wú)埋點(diǎn) vs 埋點(diǎn)方案 (待完成)

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

在瀏覽器端構(gòu)建的基于HTML/CSS/JS進(jìn)行開(kāi)發(fā)，使用瀏覽器進(jìn)行渲染的應(yīng)用程序。

其特點(diǎn)體現(xiàn)在幾個(gè)方面

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

the inherent support for cross-platform compatibility 良好的跨平臺(tái)性

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其實(shí)是最早的web app的倡導(dǎo)者之一，在當(dāng)時(shí)的構(gòu)想中是沒(méi)有native app這種形式的，所有的app都是以web的形式存在的，但是當(dāng)時(shí)的Jobs需要面對(duì)3個(gè)問(wèn)題

移動(dòng)網(wǎng)絡(luò)根本無(wú)力承擔(dān)這種變革

如何使webapp讓Apple盈利

webapp運(yùn)行的體驗(yàn)非常糟糕

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

Chromium OS vs Firefox OS

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

基于Chromium OS的Google Chrome Book 官網(wǎng) 視頻

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

基于FireFox OS移動(dòng)端手機(jī)，不過(guò)很不幸2015年Q3開(kāi)始，Mozilla宣布停止對(duì)Firefox OS的開(kāi)發(fā)，就如很多方興未艾的手機(jī)系統(tǒng)一樣，它還沒(méi)怎么被認(rèn)識(shí)，就壽終正寢了。視頻

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

基于手機(jī)操作系統(tǒng)的應(yīng)用程序，使用其原生程序進(jìn)行構(gòu)建

其特點(diǎn)體現(xiàn)在幾個(gè)方面

operated by the owner of the mobile operating system 在對(duì)應(yīng)操作系統(tǒng)平臺(tái)進(jìn)行應(yīng)用程序的開(kāi)發(fā)

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

CASE STUDY 案例

微信

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

閱讀：HTML5史上最慘重的失?。篎acebook放棄HTML5轉(zhuǎn)投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

其特點(diǎn)體現(xiàn)在幾個(gè)方面

runs inside of a native container 運(yùn)行在原生的容器內(nèi)

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

優(yōu)缺點(diǎn)

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. 跨平臺(tái)的代碼復(fù)用 - 在不同的平臺(tái)使用相同的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開(kāi)發(fā)者的專用屬性，開(kāi)發(fā)hybrid mobile的學(xué)習(xí)曲線更簡(jiǎn)單。

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和邏輯都可以在瀏覽器中構(gòu)建和debug，減少在目標(biāo)平臺(tái)上的花費(fèi)。

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

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層的功能都需要通過(guò)plugin的方式進(jìn)行調(diào)用。

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. 相對(duì)于web app來(lái)說(shuō)，hybird需用重新編譯和分發(fā)才能完成更新

HTML5 in mobile devices H5在Web容器里的兼容性問(wèn)題

CASE STUDY 案例

街旁國(guó)內(nèi)最早的Hybrid模式的倡導(dǎo)者

應(yīng)用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詳細(xì)的功能和性能對(duì)比

決定哪種模式之前需要問(wèn)自己這些問(wèn)題：

App的體驗(yàn)和開(kāi)發(fā)周期何者為先？

APP的更新周期是否頻繁？

開(kāi)發(fā)資源

應(yīng)用平臺(tái)

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

Anatomy of a Hybrid Mobile GIS Application

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

Bridge在不同的平臺(tái)通過(guò)不同的native層實(shí)現(xiàn)，在各自平臺(tái)下完成編譯

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

Plugin構(gòu)成了Bridge的擴(kuò)展

現(xiàn)有平臺(tái)

Cordova

Ionic

Phonegap

sencha

apicloud

appcan

案例

ionic weather

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

Appcelerator Titanium Tutorial - Hello World With Titanium

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

Business通過(guò)JS編寫最后編譯成Native代碼

Bridge和Build工具進(jìn)行了整合，理論上可以跨所有平臺(tái)

Creating a basic layout in Titanium

現(xiàn)有平臺(tái)

Titanium

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

案例

Sample.Todo

Titanium嚴(yán)格來(lái)說(shuō)不屬于Hybrid，因?yàn)槠渥罱K產(chǎn)生的仍然是Native App，過(guò)于牛B，不在本文知識(shí)范圍內(nèi)。本文限于討論類似Cordova的Hybrid實(shí)現(xiàn)。

Native調(diào)用JS

native通過(guò)string調(diào)用js

webview調(diào)用js解釋器的eval方法將string轉(zhuǎn)化為js方法

webview調(diào)用js方法

JS調(diào)用Native

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

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

尋找對(duì)應(yīng)的映射表，找到native對(duì)應(yīng)接口api進(jìn)行調(diào)用

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

webview解析string轉(zhuǎn)化為javascript進(jìn)行調(diào)用

URL Schemes

為了區(qū)別普通的http訪問(wèn)的url與hybrid調(diào)用native的url，參考openurl的標(biāo)準(zhǔn)apple提出了url schema的方法

About Apple URL Schemes

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

mailto:frank@wwdcdemo.example.com

tel:1-408-555-5555

sms:1-408-555-1212

app自身可以自定義url schema，并且把自定義的url注冊(cè)在調(diào)度中心， 例如

ctrip://wireless 打開(kāi)攜程App

weixin:// 打開(kāi)微信

閱讀

URL Scheme 統(tǒng)計(jì)

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

閱讀

閱讀

Hybrid URL Schema在實(shí)現(xiàn)中的問(wèn)題

存在短時(shí)間內(nèi)高并發(fā)的問(wèn)題，例如：一次定位沒(méi)有完成期間，反復(fù)調(diào)用定位

執(zhí)行http的url訪問(wèn)還沒(méi)有返回就調(diào)用了新url schema，導(dǎo)致了前一次行為沒(méi)有生效

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

關(guān)于這里的實(shí)踐，需要讀Cordova的JS Bridge

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

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

Cordova架構(gòu)：

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

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

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

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

下一個(gè)問(wèn)題：如果用Crosswalk包太大怎么破？用Crosswalk Lite或者只用Arm的包

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

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

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

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

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

兩個(gè)問(wèn)題：

Native | Hybrid | Web 他們之間是不是非此即彼的關(guān)系？

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

所以要回答這個(gè)問(wèn)題，我先來(lái)說(shuō)一個(gè)我過(guò)去做的案例

最早我們?cè)谧鲐S趣海淘的時(shí)候，我們大量的人力和時(shí)間都投入在PC站點(diǎn)、移動(dòng)站點(diǎn)和后臺(tái)的搭建中，我們還在嘗試其他的商業(yè)模型，所以沒(méi)有人力投入在App的開(kāi)發(fā)中。有一天下午，我和我們大前端的負(fù)責(zé)人討論了一下之后，決定出一個(gè)App，放App Store和Google Play，然后大概2天左右時(shí)間，我把當(dāng)時(shí)做的移動(dòng)端站點(diǎn)扔進(jìn)去，發(fā)布了當(dāng)時(shí)我們第一個(gè)版本～～

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

所以我們當(dāng)時(shí)初期的架構(gòu)就是純粹的Web，然后我們就開(kāi)始了演進(jìn)。這個(gè)要說(shuō)到我們當(dāng)時(shí)的前端架構(gòu)，我們用了CanJS，但是沒(méi)有做純粹的單頁(yè)應(yīng)用。我們做了模塊化的單頁(yè)應(yīng)用，簡(jiǎn)單的說(shuō)，首頁(yè)我認(rèn)為它是一個(gè)模塊，我為他多帶帶做一個(gè)單頁(yè)應(yīng)用。所有單頁(yè)應(yīng)用有個(gè)切面層，做服務(wù)端的簽名、csrftoken的處理等等。

然后我們開(kāi)始做原生化，為什么要做原生化，因?yàn)橐層脩趔w驗(yàn)有大的提供、因?yàn)橐鲇脩粜闹?/p>

所以基于一個(gè)個(gè)模塊，開(kāi)始做，我們?cè)瓌t是：

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

產(chǎn)品化比較好的模塊先原生化

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

Hybrid最開(kāi)始我們采用了Cordova的架構(gòu)，但是后來(lái)放棄了，Cordova太重了，沒(méi)必要，我們自己寫了JS Bridge通過(guò)URL Scheme的方式進(jìn)行調(diào)用，封裝了調(diào)用堆棧，同時(shí)引入了Crosswalk解決華為機(jī)的兼容性問(wèn)題。

所以我們總結(jié)一些一般的演進(jìn)流程：

按照不同的App分類，做個(gè)簡(jiǎn)單的建議

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

工具類：80% Native + 20% Hybrid

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

游戲類：95% Native + 5% Web

router-android

router-iOS