Native | Hybrid | Web App选型及演进方案

时间  2019-11-09
标签 native hybrid web app 选型 演进 方案 栏目 Hybrid 繁體版
原文   原文链接

Native | Hybrid | Web App选型及演进方案

目录

  • App形态javascript

    • Web Appphp

    • Native Apphtml

    • Hybrid App前端

  • Web App模型方案和应用 (待完成)html5

    • SPA (Single Page Application) 单页应用java

    • PWA (Progressive Web App) 渐进加强Web应用react

    • 模块化单页应用android

  • Hybrid App模型和实现原理ios

    • 现有的Hybrid形态git

    • Hybrid的实现原理

    • Codova实践方案

    • React Native 实践方案

  • Native App (待完成)

    • Native组件化&容器化

    • Native的粒度、切面和Business层的抽取

  • App的选型方案和演进路线

    • 各类不一样类型App选型方案

    • 升级：ABTesting (待完成)

    • 升级：用户事件收集 - 无埋点 vs 埋点方案 (待完成)

  • EJU Router方案(待完成)

App形态

Web App

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进行开发，使用浏览器进行渲染的应用程序。

其特色体如今几个方面

  1. update and maintain web applications without distributing and installing software 升级和维护不须要分发和安装

  2. 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个问题

  1. 移动网络根本无力承担这种变革

  2. 如何使webapp让Apple盈利

  3. webapp运行的体验很是糟糕

而基于此的讨论和考虑才逐步衍生出后来的Native App和`App Store

Chromium OS vs Firefox OS

颇有意思的一件事情是，不少年以后。有两家公司实现了Jobs当年没有实现的梦想，分别推出了基于浏览器操做系统的PC和手机。

基于Chromium OS的Google Chrome Book 官网 视频

ChromeBook的推出，才逐渐让市场上开始产生真正的Web App。至今咱们可以看到的不少出色产品，都是以此为开端或者以此为契机，其中很著名的有：trello | slack

基于FireFox OS移动端手机，不过很不幸2015年Q3开始，Mozilla宣布中止对Firefox OS的开发，就如不少方兴未艾的手机系统同样，它还没怎么被认识，就寿终正寝了。视频

CASE STUDY 案例

Native App

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

基于手机操做系统的应用程序，使用其原生程序进行构建

其特色体如今几个方面

  1. operated by the owner of the mobile operating system 在对应操做系统平台进行应用程序的开发

  2. available through application distribution platforms 须要分发应用(下载)的市场 — 卖钱

CASE STUDY 案例

HYBRID APP

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

其特色体如今几个方面

  • runs inside of a native container 运行在原生的容器内

  • Device specific functionalities are exposed through a JavaScript API 经过JS API暴露底层的功能接口

优缺点

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开发者的专用属性，开发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让用户界面和游戏开发更加生动。

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需用从新编译和分发才能完成更新

  • HTML5 in mobile devices H5在Web容器里的兼容性问题

CASE STUDY 案例

选择

WEB APP, HYBRID APP & NATIVE APP 选择哪一种形态？

codeWEB APP/code, codeHYBRID APP/code & codeNATIVE APP/code 选择哪一种形态？

决定哪一种模式以前须要问本身这些问题：

  1. App的体验和开发周期何者为先？

  2. APP的更新周期是否频繁？

  3. 开发资源

  4. 应用平台

Hybrid App模型和实现原理

现有的Hybrid形态

在Native与Web之间构建一层Bridge, 将底层的接口映射到JS API上

  1. View的渲染依赖于浏览器自身的渲染引擎，即便游戏也不须要去写openGL

  2. Bridge在不一样的平台经过不一样的native层实现，在各自平台下完成编译

  3. Business能够实如今Web也能够实如今Native

  4. Plugin构成了Bridge的扩展

现有平台

案例

使用JS编写通用的业务逻辑，使用Nodejs编译不一样平台的Native app 视频

  1. View经过Ti.UI进行调用Native实现，在不一样的操做系统中调用不一样的Native UI实现。Ti.UI能够定义部分Native UI

  2. Business经过JS编写最后编译成Native代码

  3. Bridge和Build工具进行了整合，理论上能够跨全部平台

现有平台

  • Titanium

  • 在我写这篇文章第一稿的时候，Facebook发布了React Native，从Coding的思想上RN不同

案例

Hybrid App实现原理

Titanium严格来讲不属于Hybrid，由于其最终产生的仍然是Native App，过于牛B，不在本文知识范围内。本文限于讨论相似Cordova的Hybrid实现。

Native调用JS

  1. native经过string调用js

  2. webview调用js解释器的eval方法将string转化为js方法

  3. webview调用js方法

JS调用Native

  1. javascript改变url，经过url传递调用的方法和参数

  2. webview监听到了URL变化，而且探测到url中定义的方法和参数

  3. 寻找对应的映射表，找到native对应接口api进行调用

  4. 执行javascript调用方法时传入的回调string并添加数据

  5. webview解析string转化为javascript进行调用

URL Schemes

为了区别普通的http访问的url与hybrid调用native的url，参考openurl的标准apple提出了url schema的方法

系统自定义了能够被识别的协议和url，例如

  • mailto:frank@wwdcdemo.example.com

  • tel:1-408-555-5555

  • sms:1-408-555-1212

app自身能够自定义url schema，而且把自定义的url注册在调度中心， 例如

  • ctrip://wireless 打开携程App

  • weixin:// 打开微信

阅读

早期的Android采用了JavascriptInterface，可是这种方案存在注入的安全隐患，因此在Android 4.0以上的版本开始就支持了URL Schema方案。

阅读

阅读

Hybrid URL Schema在实现中的问题

  1. 存在短期内高并发的问题，例如：一次定位没有完成期间，反复调用定位

  2. 执行http的url访问尚未返回就调用了新url schema，致使了前一次行为没有生效

  3. 在ios中native调用js是实时的，在Android中native调用js是异步的，在异步调用中出现alert这种阻塞进程的会直接crash app

关于这里的实践，须要读Cordova的JS Bridge

Cordova实践方案

Cordova诞生于PhoneGap，早起的PhoneGap是一个开源平台，全部的代码、编译均可以使用PhoneGap平台完成。在被Adobe收购Nitobi，同时把PhoneGap其中的核心层代码进行了开源，新版本后的PhoneGap进入商业化。因此如今在PhoneGap平台上若是是用它的编译，须要付费。

但有了Cordova，咱们就能够造一个新的PhoneGap～～不是吗，因此有了Ionic

Cordova架构：

就如咱们前面说的，Cordova的方案就是放一个WebView全部的UI都是经过WebView进行呈现，经过JS Bridge调取Native方法。Cordova将JS Bridge作成了一种插件式的方式，便于扩展。

全部采用Cordova方案或者相似以WebView做为呈现的Hybrid方案，在Android上遇到一个最大的问题，就是不一样ROM中WebView的兼容性问题

以前华为系统的webview内核有问题，只要有js交互，占用内存无限上升；某次测试达到恐怖的380M，简直吓尿；因为是webkit内核问题，无能为力；咱们只能检测到是华为系统的这个特定版本的时候谈个Toast，告诉用户不要在页面逗留太长时间。。（如今这个bug已经修复了，当时系统版本：NXT-TL00C 01B1 29SP02）— 知乎用户

怎么办？！ Crosswalk。这段视频须要看一下视频

下一个问题：若是用Crosswalk包太大怎么破？用Crosswalk Lite或者只用Arm的包

React Native 实践方案

就如前面的Titanium，RN里面Javascript是用来写业务的，UI是交给Native的，全部若是有不少的自定义View的话，其实开发量也不小～

React-Native系列Android——自定义View组件开发

我说RN和Titanium不同，为何？由于CodePush，CodePush是Microsoft推出的React Native的热部署方案。简单来讲就是业务层都使用JS来写，把JS打包成Bundle，而后把Bundle文件下发下去。那么不一样在什么地方？

Titanium是须要彻底编译的，最终是否是把JS代码都转成了Java或者C的代码不了解，可是有很大可能。像C和Java须要完整的编译，在Runtime的时候打开去注入，实际上是很难的。可是RN把业务层抽到Bundle，这是一种Meta Programming的思想，这就意味着，随着发展将来你只要推js代码上去，RN就能够完成更新。

苹果向热更新下达最后通牒，是什么致使了此次事件？

App的选型方案和演进路线

各类不一样类型App选型方案

两个问题：

  • Native | Hybrid | Web 他们之间是否是非此即彼的关系？

  • 若是一个App初期选择一个Native | Hybrid | Web中的一个，是否是意味着只能一条路走到黑？若是中间想加或者想转其余的形态须要多大的努力？

因此要回答这个问题，我先来讲一个我过去作的案例

最先咱们在作丰趣海淘的时候，咱们大量的人力和时间都投入在PC站点、移动站点和后台的搭建中，咱们还在尝试其余的商业模型，因此没有人力投入在App的开发中。有一天下午，我和咱们大前端的负责人讨论了一下以后，决定出一个App，放App Store和Google Play，而后大概2天左右时间，我把当时作的移动端站点扔进去，发布了当时咱们第一个版本～～

上线以后，发现了一个让人惊喜的数据：周复购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

EJU Router方案

router-android

router-iOS

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程