Hybrid選型及設計原理

時間 2019-11-09

原文原文鏈接

Hybrid選型及設計原理

手機App方案

WEB APP

DEFINITION 定義javascript

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. --wikiphp

在瀏覽器端構建的基於HTML/CSS/JS進行開發，使用瀏覽器進行渲染的應用程序。html

其特色體如今幾個方面html5

update and maintain web applications without distributing and installing software 升級和維護不須要分發和安裝
the inherent support for cross-platform compatibility 良好的跨平臺性

STORY 小故事java

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 Jobsnode

Jobs實際上是最先的web app的倡導者之一，在當時的構想中是沒有native app這種形式的，全部的app都是以web的形式存在的，可是當時的Jobs須要面對兩個問題react

移動網絡根本無力承擔這種變革
如何讓webapp盈利
webapp運行的體驗很是糟糕

而基於此的討論和考慮才逐步衍生出後來的Native App和App Storeios

閱讀git

CASE STUDY 案例github

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

基於手機操做系統的應用程序，使用其原生程序進行構建

其特色體如今幾個方面

operated by the owner of the mobile operating system 在對應操做系統平臺進行應用程序的開發
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 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.
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.
The HTML5 application development with CSS3 gives the compelling structure to the interface of game app and this ensures pleasing user-interface.

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
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.
HTML5 in mobile devices

CASE STUDY 案例

街旁國內最先的Hybrid模式的倡導者
應用HTML5搭建街旁新版混合式iOS客戶端

選擇

WEB APP, HYBRID APP & NATIVE APP 選擇哪一種形態？

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的體驗和開發週期何者爲先？
APP的更新週期是否頻繁？
開發資源
應用平臺

Hybrid App模型

在`native`與`web`之間構建一層`bridge`, 將底層的接口映射到`JS API`上

Anatomy of a Hybrid Mobile GIS Application

View的渲染依賴於瀏覽器自身的渲染引擎，即便遊戲也不須要去寫openGL
Bridge在不一樣的平臺經過不一樣的native層實現，在各自平臺下完成編譯
Business能夠實如今Web也能夠實如今Native
Plugin構成了Bridge的擴展

現有平臺

案例

ionic weather

使用`js`編寫通用的業務邏輯，使用nodejs編譯不一樣平臺的`native app`

Appcelerator Titanium Tutorial - Hello World With Titanium

View經過Ti.UI進行調用Native實現，在不一樣的操做系統中調用不一樣的Native UI實現。Ti.UI能夠定義部分Native UI
Business經過JS編寫最後編譯成Native代碼
Bridge和Build工具進行了整合，理論上能夠跨全部平臺(meta programming?)