「必看干货」快应用开发体验与技术架构深度解

「必看干货」快应用开发体验与技术架构深度解

时间:2020-03-23 15:00 作者:admin 点击:
阅读模式

背景介绍

快应用是基于手机硬件平台的新型应用形态,它根植于ROM级别,具备传统APP完整的应用体验。第三方应用基于这种形态可以更为直接的触达用户,为用户带来高效愉快的体验。

快应用的目标是:

1. 即点即用:无需漫长的下载,无需安装等待;

2. 重视体验:用户使用流畅无阻,用完即走。

当然,要实现这样的美好目标,还需要和众多友商众志成城、齐心协力把新的分发形态做起来。所以,今(2018)3月20号,小米等国内众多主流手机厂商成立了快应用联盟,共同宣布快应用的诞生。同时在技术规范层面统一标准,实现资源共享,能力输出;最终把快应用框架的能力覆盖到国内主流厂商的手机硬件平台上。目前,快应用已在众多手机设备中上线与使用,且快应用已拥有非常多系统级流量入口:浏览器搜索,全局搜索,应用商店,小爱语音唤醒等。

那么快应用技术架构如何选型呢?

我们调研了当前移动端应用存在的两大形态:移动网页、原生应用。两者各有以下优缺点:移动网页无需安装,但用户体验较差,同时很多系统功能缺失。原生应用用户体验较好,但由于应用通常是一次性下发的,且体积很大。对用户而言,获取的成本比较高,等待时间过长,体验不好;也导致应用的孤岛现象十分严重,互联互通程度非常低,用户很难无缝跳转衔接到各个应用。对开发者而言,版本碎片化程度较高,增加了维护成本。

快应用在做技术架构的选型时,充分对比了现有生态在技术上的优势和足,采用了全新的技术架构,从根本上解决了现有生态在技术上的足。因此,快应用介于移动网页和原生应用之间,第三方应用以移动网页的形式进行开发,最终得到原生渲染的效果体验。

开发体验

听过deno项目的开发者,应该会了解下面的配图,这也从侧面反映了开发者对于新技术的担心与疲倦。所以,我们借助于国内庞大的前端开发者群体,用前端开发的形式,来提高开发效率。也就是说,快应用的开发从前端入手,作为解决方案的起点。

接下来,我们以前端最为著名的TodoMVC需求为例,展示对应的快应用实现;整个页面的源代码只有不到200行,可在GitHub(地址:https://github.com/quickappcn/todos)下载查看。

传统的H5页面开发,开发者先利用脚手架生成项目,然后经历如下的过程:

1. 根据设计稿,编写静态页面;

2. 为页面添加样式;

3. 编写JS,增加交互逻辑;

4. 利用mock数据渲染模板;

5. 自测无误后,与后端同学联调,调试代码;

最后多次迭代后完成项目的开发。

快应用的开发流程与H5非常相似,大概对比如下图:

案例分享

以TodoMVC为例,大概介绍快应用的开发流程:

首先,准备一个初始项目,这块可以使用脚手架工具直接生成项目。

仅需三大步:安装NodeJS;全局npm安装hap-toolkit;运行命令hap init、npm install以及npm run build,就可以构建出一个rpk文件;手机的快应用平台即可安装运行这个rpk文件,呈现为应用。

01

编写静态页面

快应用的静态页面与传统H5页面类似,由template模板、style样式和script脚本3个部分组成。

02

补充页面样式

快应用为开发者提供flex布局模型,也支持常用的CSS属性,如:width, color等,可以在 中使用简单与后代选择器快速定位到元素。

需要开发者注意的是:为了做到高效布局,快应用暂不支持其它的布局模型;同时并不像浏览器一样,支持全部的CSS属性,如:table布局。

03

系统能力

传统H5开发中,开发者通过AJAX请求向服务器获取数据。在快应用中,开发者可以通过ES6的import语法来引入一项系统能力,称为native接口,并调用接口方法完成功能实现,这里支持同步、异步、订阅三种类型的操作。

04

模板渲染

快应用的 中用于定义模板片段,可通过使用for、if、show等指令实现循环、条件等逻辑,也可以使用block、slot等占位节点实现更为灵活的模板复用。

05

事件响应

当页面需要响应用户操作(如:click)时,开发者可以在对应的元素上注册事件,并绑定监听函数。

为了方便开发者,快应用提供了MVVM形式的编程模式,做到数据驱动式的开发方式。

同时由于快应用涉及到页面之间数据传递,因此定义了数据访问权限的模型,如:public代表属性对外公开可被覆盖,protected代表仅应用内页面可覆盖,private代表不可覆盖。

06

生命周期

快应用中的每个页面都有创建、销毁、可见性等生命周期,方便资源的请求与释放,同时也提供一些手机按键的操作响应,如:返回。

07

组件化

当一个页面的业务逻辑变得复杂时,就需要将页面拆成多个模块,完成解耦。所以,快应用提供了自定义组件的能力,定义自定义组件与开发页面一致,开发者可以通过import标签引入自定义组件达到目的。

08

原生组件

为了更好的体验与性能,快应用提供了很多高阶组件,浏览器不会直接提供这些组件,如:list组件、tabs组件、refresh组件。相当于平台内置了一套成熟的UI组件库,开发者可通过合理使用这些组件,提高开发效率、优化用户体验。

09

引入动画

当然,开发者也可以使用动画来优化交互体验。

至此,我们就足以开发一款简单的快应用产品。

为了方便发现问题、解决问题,开发者可以使用devtools工具来调试代码,这块与浏览器调试很相似:

1. 通过Elements查看DOM结构;

2. 通过Style面板修改样式;

3. 通过Source调试JS代码;

4. 开发者也可以在console中查看日志输出。

开发者仅需上面的几个步骤就可以完成TodoMVC的开发,这些步骤是渐进式的,每一步都可以实时看到效果。

总结来说,开发者只需要有一些:前端基本概念、MVVM编程模式、组件化思维即可上手快应用的开发。

架构概述

那么面对上述的诸多功能,快应用团队是如何实现的呢?

整体上,我们将快应用实现划分为编译时、运行时两个方面;ux页面源码经过编译时得到JS,然后经过运行时得到界面UI;每一个页面由HTML+CSS+JS组成,编译运行后得到内存中的DOM树;多个页面组成一个项目,编译后得到rpk文件,最终运行时以应用形态呈现。

编译时,我们对外提供一个hap-toolkit工具,内部会包含多个模块: