Hybrid App 开发实践总结

引言

随着 Web 技术和移动设备的快速发展,Hybrid 技术已经成为一种最主流最常见的方案。一套好的 Hybrid架构方案 能让 App 既能拥有极致的体验和性能,同时也能拥有 Web技术 灵活的开发模式、跨平台能力以及热更新机制,想想是不是都鸡冻不已。。??。本系列文章是公司在这方面实践的一个总结!

Native App 开发模式

Native App,原生APP,使用原生(即Android或iOS)开发的APP。应用的性能好是无容置疑的,但是企业大都处于尝试和摸索期,企业需要在短时间内快速推出不同的功能、产品来适应市场的需求和变化。对于有专业开发团队的互联网公司而言推陈出新都是个难题,更不要说在企业中的应用。

其缺点有:

  1. 开发、更新、维护的周期太长
  2. 无法跨平台:Android和iOS都需要开发各自平台的版本——开发成本高;
  3. 升级麻烦:每次升级都要下载安装包,Android还好,反正不需要审核,下载就下载吧,但iOS就麻烦了,发布每个版本还得经过App Store的审核
  4. Android和iOS很难同步发布。

Web App 开发模式

HTML5技术的兴起给Web App注入了新的生机。可是Web App目前的本质是金玉其外败絮其中,功能不但无法和Native App媲美,用户体验更是众所周知的弊端。在当前iOS、Android系统主导的桌面入口的形态下,让用户打开浏览器,再访问某个网址,体验还不好,不人性化的体验与流程导致大量用户流失。

Hybrid App 开发模式

Hybrid App,俗称混合应用,即混合了 Native技术 与 Web技术 进行开发的移动应用。现在比较流行的混合方案主要有三种,主要是在UI渲染机制上的不同:

  1. 基于 WebView UI 的基础方案,市面上大部分主流 App 都有采用,例如微信JS-SDK、Cordova,通过 JSBridge 完成 H5 与 Native 的双向通讯,从而赋予H5一定程度的原生能力。
  2. 基于 Native UI 的方案,例如 React-Native、Weex。在赋予 H5 原生API能力的基础上,进一步通过 JSBridge 将js解析成的虚拟节点树(Virtual DOM)传递到 Native 并使用原生渲染。
  3. 另外还有近期比较流行的小程序方案,也是通过更加定制化的 JSBridge,并使用双 WebView 双线程的模式隔离了JS逻辑与UI渲染,形成了特殊的开发模式,加强了 H5 与 Native 混合程度,提高了页面性能及开发体验。

以上的三种方案,其实同样都是基于 JSBridge 完成的通讯层,第二三种方案,其实可以看做是在方案一的基础上,继续通过不同的新技术进一步提高了应用的混合程度。因此,JSBridge 也是整个混合应用最关键的部分!

技术选型

任何技术方案的选型,其实都应该基于使用场景和现有条件。基于公司现有情况的几点考虑,在方案一上进一步优化,更加适合我们的需求。

  1. 需求 Web技术 快速迭代、灵活开发的特点和线上热更新的机制。
  2. 产品的核心能力是强大的拍照、扫描二维码、图片上传等功能,因此单纯的 H5技术能做的事非常有限,不能满足需求,通过 Hybrid 技术来强化H5,便是一种必需。
  3. 公司业务上,并没有非常复杂的UI渲染需求,而且公司已经有一套完善的前端框架并且已经非常成熟,因此我们并不强需类似 RN 这样的方案。

结果:React Native 和 Cordova 针对跨平台应用有着不同的设计理念,也就迎合了不同的需求。Cordova 能够将已有的单页 Web 应用很方便的运行在不同设备上,代价是一些表现效果的损失。React Native 应用会更接近原生应用,但也会需要针对不同系统重新实现某些代码。由于我们有成熟的整套的前端开发框架,为了减少开发成本和额外的学习成本,我们采用了 cordova !

cordova架构示意图

  • Web App 层是开发人员编写代码的主要地方,应用程序以网页的形式呈现,在一个index.html的本地页面文件中引用所需要的各种Web资源,如CSS、JavaScript、图像、影音文件等。应用程序的配置保存在config.xml文件中。
  • WebView 层用来呈现用户界面,即web页面的展现。例如,在android平台是通过WebView控件实现web页面的呈现。
  • Plugins 主要用于在JavaScript代码中调用各平台native的功能。Cordova项目已经包含一些核心的plugin,如电池、摄像头、通讯录等。开发人员也可以开发自定义的plugin,来实现所需要的功能。其原理就是Native 获取 JavaScript环境上下文,并直接在上面挂载对象或者方法,使 js 可以直接调用,Android 与 IOS 分别拥有对应的挂载方式。

cordova 开发所用到的整体技术栈和开发环境

所用到的技术栈如下:

  • 系统环境 CentOS + Docker
  • 持续集成&持续交付 jenkins + git
  • nodeJs、npm、cordova、android环境、MySql数据库
  • 移动端热更新 code-push-cli + code-push-server 自己跑服务
  • 反向代理 Nginx

各个docker的职责划分

  • jenkins的docker负责编译cordova生成android的apk文件并将最新的静态资源上传至code-push-server
  • code-push-server的docker 负责资源更新
  • mysql数据库的docker 主要服务于code-push-server
  • git负责代码管理
  • nodeJs的docker负责提供下载jenkins编译后的的apk文件或者中间层代理(和java服务通信)或者服务于前端SSR首屏渲染

说明

如果将以上技术栈描述清楚需要不小的篇幅,所以我会将文章进行拆分:

1. Hybrid App 开发实践总结 ~ 开篇(本文)
2. cordova的环境配置和创建第一个android App
3. 服务器端docker的安装,nginx、jenkins、git服务的架设
4. 服务器端code-push-server、mysql服务的架设
5. 客户端code-push插件的引入及code-push-cli的使用
7. 如何使用纯shell编写一个快速搭建开发者环境的命令行工具和安卓端真机调试

原文地址:https://www.cnblogs.com/shuoer/p/9471144.html

时间: 2024-10-27 03:26:40

Hybrid App 开发实践总结的相关文章

Hybrid App开发git多分支代码版本管理实践

3.Setting Up and Configuring Backup and Recovery 这个单元讲述如何启动.与rman client如何互动,准备rman环境,实现备份和恢复策略 注意:尽管闪回数据库和安全还原点不是真的数据库备份,但是它们是数据保护策略一个重要部分.这些特性需要一些初始化设置,这些设置依赖于在备份策略中你怎么混合它们.Chapter 5-Data Protection with Restore Points andFlashback Database 提供了关于怎么

Hybrid App 开发模式

开发移动App主要有三种模式:Native. Hybrid 和 Web App. 需要注意的一点是在选择开发模式的时候,要根据你的项目类型(图片类?视频类?新闻类?等),产品业务和人员技术储备等做权衡. Hybrid开发模式就是既有Native开发也有Web app的开发.那我们怎么去确定App中某个功能模块使用Native还是Web开发?它们之间如果需要接口通信又该如何去实现呢?又该如何更好的去维护Hybrid App产品呢? 1.Native or Web开发模块 当我们选择用Hybrid模

【JavaScript】Hybrid App开发 四大主流移平台分析

转自http://dev.yesky.com/238/34657738.shtml Hybrid App在过去的两年中已经成为移动界的核心话题,但是作为一名Web开发者来说要如何站在移动互联网的浪潮之巅呢?是选择学习原生开发,研究Java.Object-C.C#等语言,还是选择继续使用网页开发,容忍HTML5功能的局限性?就在开发者左右为难的情况下Hybrid App作为一个折中的解决方案诞生了.那么究竟什么才是Hybrid App呢? Hybrid App概念 Hybrid App:Hybri

Hybrid App开发 四大主流移平台分析

Hybrid App在过去的两年中已经成为移动界的核心话题,但是作为一名Web开发者来说要如何站在移动互联网的浪潮之巅呢?是选择学习原生开发,研究Java.Object-C.C#等语言,还是选择继续使用网页开发,容忍HTML5功能的局限性?就在开发者左右为难的情况下Hybrid App作为一个折中的解决方案诞生了.那么究竟什么才是Hybrid App呢? Hybrid App概念 Hybrid App:Hybrid App is a mobile application that is code

hybrid app开发中用到的html5新特性localStorage、sessionStorage和websql database

最近在项目中进行hybrid app开发,项目中有大量的js代码运行在android设备上.使用到了很多HTML5的新特性,之前没有遇到过,不了解,这里记录下增加点前端的知识.混合式app开发中,经常需要使用缓存功能,比如你在页面表单控件上输入了数据,你希望下次退出app再次进来的时候还能看到这些数据:比如你的项目中有保存草稿的功能,只是先将数据临时存储在本地,以后再提及到服务器.这就需要我们将数据持久地存储在本地,这就需要用到HTML5中的本地化存储解决方案.本文主要介绍下sessionSto

hybrid app开发工具

hybrid app开发工具 1.AppCan AppCan是国内Hybrid App混合模式开发的倡导者,AppCan应用引擎支持Hybrid App的开发和运行.并且着重解决了基于HTML5的移动应用"不流畅"和"体验差"的问题.使用AppCan应用引擎提供的Native交互能力,可以让HTML5开发的移动应用基本接近Native App的体验. AppCan作为中国Hybrid混合应用开发.移动平台.移动云平台的倡导者和领导者,以"免费+开源+开放&

HybridApp解决方案_No1_混合模式(Hybrid)App开发概述

1.1.     APP三种开发模式 智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝.京东等).金融(各手机行业.P2P借贷等).医疗(智慧医疗).交通(滴滴.Uber等).教育(慕课网等).餐饮(饿了吗.美团等)……反正只要是个企业,无论规模大小,都已经订制或将要订制自己的APP.这么多APP无外乎就三种模式:Native App.Web App.Hybrid App. 1.1.1.     Native App Native App,原生APP,使用原生(即Android或iO

第一章:hybrid app开发之技术选型

伴随着移动互联网的兴起,越来越多的企业将部分资源投入其中,想在互联网+的大潮中分一杯羹,并期望着站在风口上,成为时代的弄潮儿. 现在不会做一个app都不好意思说是搞互联网的,那么开发一个app的方式有哪些呢?基于目前市面上比较流行的app都是基于android和ios的,所以我们只针对这两种平台谈app:虽然也有其他平台,但鉴于市场占有率,不纳入本系列的范围. 第一种方式:native app IOS:基于XCode开发工具,使用Swift或者OC开发语言,来进行原生态的IOS应用的开发. An

跨终端Web之Hybrid App开发对比

Native App(以下简称Native)和Mobile Web(以下简称Web)二者混合开发的产物被称为Hybrid App(以下简称Hybrid).Hybrid并不是什么新概念,最早可以追溯到Symbian时代,直到iOS和Android出现之后才充分展现出价值. 一.Hybrid简史 Hybrid既利用了Native App丰富的设备API(Device API),又能拥有Mobile Web的跨平台.高效开发.快速发布的能力,对于相当庞大的应用场景而言都是适用的. Hybrid优势在于