基于WebAssembly的AIoT应用框架实践

丰富的线上&线下活动,深入探索云世界

做任务,得社区积分和周边

最真实的开发者用云体验

让每位学生受益于普惠算力

让创作激发创新

资深技术专家手把手带教

遇见技术追梦人

技术交流,直击现场

海量开发者使用工具、手册,免费下载

极速、全面、稳定、安全的开源镜像

开发手册、白皮书、案例集等实战精华

为开发者定制的Chrome浏览器插件

Waft是一个专注于AIoT领域,面向原子化服务的应用开发框架,核心解决的是AIoT领域下用户和服务连接低效的问题。具备高性能、动态化、原子化、跨平台、支持多语言开发等特性:

2019年春季,天猫精灵发布了第一款带屏的智能音箱。相比传统音箱,不仅增加了一块更利于用户交互的屏幕,还支持了各种传感器设备,成为了一款真正的智能家庭助手设备。作为一款普惠AI的产品,为了让更多的用户能够体验到人工智能的便利性,智能音箱的硬件配置相对比较低,整体硬件配置与当前市面上的手机相差甚远,对应用软件的运行性能提出了巨大的挑战。除了这些自研产品外,天猫精灵还支持了很多生态硬件产品,如:手表、电视、中控面板等。这些AIoT设备具有以下特点:

我们一直在思考和探索下面两个问题的解决方案:

我们陆续尝试了多种应用开发方式和框架:

2018年6月,开始引入AndoridAPP的生态。陆续接入了优酷、芒果TV、BliBli、腾讯视频、爱奇艺、快手、抖音等30多个APP。但由于天猫精灵设备算力与存储的限制,无法安装太多应用,一个APP要几十M左右,导致软件生态受到限制。

2018年12月,我们尝试引入小程序技术来解决存储空间不足的问题。并于19年1月上线第一个小程序猫精版“蚂蚁森林”,之后陆续引入了:宝宝巴士、斗鱼直播、贝瓦儿歌、汽车之家等600多个小程序。但问题也很明显:

1)在1G内存设备上,小程序的性能较差体验不太理想,冷启动需要十多秒,热启动需6秒左右。

2)面向手机开发的小程序几乎都是竖屏版本,在天猫精灵的横屏设备上体验并不好,需要开发者做UI适配或者容器端做分屏显示处理。

2020年7月,开始在天猫精灵设备上尝试云应用,想彻底突破终端的性能问题。云应用可能是应用生态的终极解决方案之一。一切应用皆可上云,当前所有的应用生态都可囊括,且终端无性能压力。但当前成本太高,还无法大规模铺开。需要等待5G和云应用的大规模爆发,来降低服务器和带宽成本以及网络延迟。

经过近三年在天猫精灵应用开放上的尝试,逐步形成了我们对AIoT行业的一些理解:

这对我们的技术框架提出了非常高的要求:

经过近两年的尝试,发现在天猫精灵AIoT上,APK和小程序方案并不能很好的满足上述诉求,无法兼顾用户体验和应用生态,且云应用尚无法大规模铺开的情况下,我们从2020.08开始尝试探索一种新的解决方案——Waft。

Waft是一个面向AIoT原子化服务的应用开发框架,是一个适合AIoT应用开发的解决方案。

取名叫Waft,其实有两重含义在里面:

Waft的发展历程:

Waft的设计理念:原子化服务的快速直达和灵活的场景化组合。

化整为零:超级应用的核心内容短平快直达移动互联网时代,一个个App将互联网割裂成信息孤岛,使得用户获取信息和服务的成本越来越高,操作路径越来越长。在天猫精灵智能终端上,我们希望能通过原子化服务的方式来解决这个问题。原子化服务指的是应用中能满足某个特定用户意图的完整功能,比如快递提醒,了解疫情信息,收取蚂蚁森林能量。将核心功能从应用中抽取出来后,通过卡片、浮窗这类轻量交互方式,缩短触达用户的路径,降低用户使用的成本。

从开发者的角度看,可以把waft容器简单类比成一个轻量级的浏览器,专注于AIoT领域,尽可能抛弃历史包袱。

和传统浏览器的差异主要在于:

1)内核的差异:

2)开发方式的差异:

Waft的设计目标如下:

Waft是基于WebAssembly构建起来的一套应用开发框架:

WebAssembly是一种体积小且加载快的二进制格式,其目标就是充分发挥硬件能力以达到原生执行效率。是一种运行在现代网络浏览器(并不局限于)中的新型代码格式,并且提供新的性能特性和效果。它设计的目的不是为了手写代码,而是为将诸如AssemblyScript、Kotlin、Swift、C、C++、Rust、Golang等高级语言编译为一种执行效率更高的中间字节码(可简单类比为Web的汇编语言)。我们选择基于WebAssembly来搭建Waft的整套技术体系,主要原因如下:

终端容器的核心任务是,页面的快速响应和丰富的表现形式,给用户一个非常好的交互体验。

Waft容器的三个核心模块为Framework、Engine和NativeServices(基础服务):

说明如下:

在基于WebAssembly运行的基础上,为了更好的支持前端开发者生态,我们选用了AssemblyScript作为前端框架的逻辑开发语言,它是TypeScript的语法变种。在前端框架的设计上,主要包含了3个层面:

在开发者工具上,目前支持了4个部分:

当前市面上的跨端方案也比较多,Waft与其他方案相比,优势在于同时兼顾了动态化、高性能和跨端一致性;劣势在于因只支持CSS的子集,页面编写灵活性上不如H5/小程序:

除了这些特点外,Waft还具备一些其他方案少有的特性。

Waft有一个核心目标是云化:页面跳转逻辑和任务堆栈交由云端管理,终端只做页面渲染和交互的反馈。

借助于天猫精灵云端DM(DialogManager,对话管理)服务的能力,Waft应用的跳转逻辑和业务堆栈管理可交由云端管控。终端页面在点击某个跳转按钮时,只需给DM传递相应的意图参数,DM负责分发意图,调用对应的技能服务(应用),再由技能服务向终端推送新的页面,这里的意图和Android的Intent的作用非常相似。

借助于猫精的对话流编排平台,可将多个零散的原子化服务(页面),组合为一个复合场景,在平台上通过可视化编排的方式,构建多个页面间的跳转逻辑。

如下图“早上好场景”的对话流:

得益于WebAssembly的技术优势,Waft可实现AOT级别的动态化能力,整体逻辑上跟动态加载运行一个so比较类似,且因为WASM运行在Waft容器的沙箱环境中,相比动态化so更安全可控。

因WebAssembly(简称Wasm)只是一种二进制格式,理论上只要某种语言的工具链支持将源码编译为Wasm格式,就可以在Waft容器中运行。

可将原来在终端上完成的UI数据解析、绑定、测量等渲染前的耗时操作由终端转移到云端,云端仅下发绘制指令,由自研渲染引擎直接完成渲染。部分场景下可将UI渲染转移到云端,直接在云端生成UI图片后推送到终端进行显示。大致思路如下:

上图的补充说明:

注:云端渲染能力,还在预研阶段,待线上业务落地后,我们会再详细展开介绍这部分的实践经验

在应用开发上,我们遵循“前端友好,研发提效”的理念,在框架设计和开发工具建设上提供更完整的解决方案,降低前端和AIoT开发者的开发门槛。所以Waft开发的上手也主要分为两个部分,一个是前端框架的学习使用,包括开发语言、组件库、API等;另一个是开发工具的上手使用,包括源码CLI工具的流程命令以及Devtools的使用;另外,开发者也可以使用我们的低代码搭建平台来快速生产卡片应用。

前端UI框架支持两种DSL,支持类Web的单文件写法,以及阿里系的小程序写法。目前支持的逻辑脚本语言为AssemblyScript,AS是专门为WebAssembly设计的一种新语言,采用了类似TypeScript的变种语法,可以让熟悉TS的前端开发者更快地上手。此外,我们也正在支持Kotlin/Swift/Rust/C/C++等其他开发语言。为了让大家对Waft有一个直观了解,在此展示下简单的页面开发代码和运行效果:

Waft-CLI脚手架是辅助开发者源码开发的提效工具,封装了多阶段的不同功能:

调试工具(DevTools)可以帮助开发者更容易地定位与解决问题,目前功能支持了元素,日志,网络请求信息检查,如下方视频所示。

为了达到web的开发调试体验,Waft遵循了Chrome的调试协议(ChromeDebugProtocol),通过Chrome浏览器内置的调试工具,提供日志、元素审查、网络请求监控等功能。下图展示了调试器如何与设备进行通信,并获取调试信息的流程:

Waft作为“端云一体化”框架,不仅支持通过源码方式开发复杂的应用,同样支持通过低代码搭建平台,更高效、灵活的开发“轻服务”。轻服务,是连接用户意图与服务之间的直通桥梁,将原本藏在技能、应用的原子化服务释放出来,方便用户在天猫精灵端上直接触达某一个特定的完整功能,而无需提前打开技能、应用。在天猫精灵上创建一个轻服务的流程如下:

下面是低代码开发的演示视频:

Waft已支持多种业务表现形态,可根据设备形态和应用形态灵活使用。

特点:云端编排剧本,将多个页面组合为智能场景,交互逻辑由云端决策,终端做页面展示与用户操作反馈。

适用领域:适用于助手类业务,如:早上好、晚上好、回家/离家模式等。

特点:云端下发数据和模版,终端通过DataBinding实现信息的透出,重展示轻交互。

特点:兼顾核心信息展示与应用导流的作用,并通过声屏联动,在恰当时机内自动关闭轻服务弹窗

适用领域:适用于关键信息查询,且背后都有一个完整应用的领域,如:查快递、查课表等。

特点:不打扰当前页面交互,以简洁的方式和当前页面融合。

可做为Widget,嵌入到任意页面内,以信息流的方式,实现内容透出、分发和引流。

6.6多端适配可针对不同的设备不同场景,做差异化的适配,以提供更好的交互流程,提升用户交互体验。在保证基础交互一致性的基础上,充分利用设备硬件特点和优势。如我们在优酷TV大屏上天气展示:

Waft最核心的目标是高性能,能快速的响应用户的请求。以下是Waft在天猫精灵1G设备上的性能表现,截取其中三个线上业务的监控数据:

下面是猫精版的蚂蚁森林,在1G设备上,Waft和小程序方案的冷启动对比视频:

虽然当前的性能表现还不错,但性能是Waft立足之本,我们会进一步挑战冷启1.5s,热启1s的极致体验。从当前业务性能监控来看,启动耗时的瓶颈在于渲染,因此,渲染引擎的优化将是我们后续重点投入的方向。

提面提到过的原子化服务包含两重含义:

已上线原子化服务有:快递、课表、疫情、股市大盘、蚂蚁能量等,用户可快捷获取这些服务的核心信息。

2)也可以嵌入到其他页面内,提供分发效率。如在天猫精灵的“服务直达“页面内,嵌入了多个Waft的轻服务卡片。

Waft的核心模块都是使用C/C++开发的,可便于做多平台的移植。目前已经在Android端上线,并且在RTOS和Linux平台已跑通DEMO。因Waft是聚焦在AIoT领域,暂不考虑iOS设备:

除了技术框架的跨平台外,对于不同屏幕的UI自适应也是我们的一个重点方向:

得益于WebAssembly的技术优势,借助开源社区的力量,可支持多语言开发。当前已支持AssemblyScript,C/C++/Rust也经过可行性验证。我们还会陆续支持C/C++、Kotlin、Swift、Golang等开发语言。

THE END
1.8个用于绘制软件架构图的画图工具系统架构图用什么画软件架构工具可分为三类:建模工具、代码图表和画图工具。 画图工具最适合在交谈和实验想法时进行快速草图。 通过绘制软件架构图的方式,可以更有效地传达系统的复杂性,带来许多优势。清晰的系统设计可以帮助工程团队更好地理解架构,来规划未来的开发,同时也能够识别潜在的问题。 https://blog.csdn.net/u013643074/article/details/134054864
2.用什么工具画软件架构图最方便?5款高效软件推荐!可视化系统设计: 软件架构图将抽象的系统设计转化为可视化的形式,使人们更容易理解系统的复杂性和结构。风险管理: 通过分析架构图,可以更早地发现潜在的问题和风险,从而采取预防措施。指导开发: 架构图可以作为开发的指导,让开发者更清楚自己的工作内容以及与其他模块的关系。系统演化: 架构图为系统的演化提供了https://baijiahao.baidu.com/s?id=1777299687464926450&wfr=spider&for=pc
3.画图工具架构图画图工具介绍kcoufee的技术博客最近经常有小伙伴问文章中的图是用什么软件画的,下面就来梳理一下常用的画图工具: 常规画图: Excalidraw、draw.io、语雀 思维导图: Xmind 代码截图: Carbon 画图模板: ProcessOn Excalidraw Excalidraw 是一款轻量、开源的手绘风格电子白板和画图应用,可以快速画出漂亮的流程图、UML图甚至是图表。 https://blog.51cto.com/u_12995/9445265
4.系统功能模块图用什么软件画:探索最佳工具和技术本文旨在探讨用于绘制系统功能模块图的最佳软件工具。功能模块图是系统设计的关键部分,它帮助设计师和开发者可视化软件的结构和功能。文章将介绍几种流行的绘图软件,包括它们的特点、优势以及如何使用它们来创建清晰、有效的功能模块图。本文适合软件开发者、系统架构师以及对系统设计感兴趣的专业人士。 https://www.yingxiongyun.com/news/post/13919.html
5.住建部公布自主创新装配式建筑数字化设计软件经验做法BIM设计工具子平台包含了智能设计工具、管理工具和效率工具三大类、共计十二个子类的工具;交付子平台主要用于交付成果的质量和指标审查,比如规划报建的审查,施工图审查等;BIM资源子平台则覆盖了构件、模版、标准、做法四大种类资源库。 设计项目管理子系统能保证设计项目全流程高效有序实施,其中,合同管理模块连接了业务与http://www.ccpa.com.cn/site/content/8962.html
6.架构图用什么软件制作?这9款建议收藏!在当今数字化时代,架构图成为了理解、设计和沟通复杂系统架构的重要工具。无论是软件开发、网络设计、还是项目规划,都离不开清晰、准确的架构图来指导和支持。然而,选择合适的软件来制作架构图却是一项挑战。在市场上有许多不同类型的软件可供选择,它们各自拥有特定的功能和优势。因此,为了帮助读者更好地选择,本文将https://boardmix.cn/article/9-architecture-diagram-tools/
7.低功耗蓝牙工具APP开发实战获得LightBLE 思维导图、原型图、设计原稿 获得一套完整的、可运行的LightBLE代码 适合人群 想快速掌握BLE的小伙伴 需要开发BLE的程序员 想要获得快速BLE调试框架的爱好者 工具与语言 需求规整:XMind 原型设计:Mockplus UI设计:Sketch 硬件:智能手机(安卓4.3以上 或 iOS6.0以上) https://www.jianshu.com/p/3a8b80005261
8.2021届计算机科学方向毕业设计(论文)阶段性汇报我经过对工具链的对比与评估,确定了最终开发会以Vitis HLS工具为主,运用高层次综合设计方法加快开发进度。当前硬件实现已经完成了计算模块的开发,实现了用于加速稠密矩阵乘法的矩阵计算单元以及用于支持图计算操作的通用向量处理单元。现在正在开发的是用于指令解码以及调度各个模块的全局控制单元和用于加速支持图计算操作的https://zhiyuan.sjtu.edu.cn/html/zhiyuan/announcement_view.php?id=3943
9.一篇文章入门“求解器”开发(全篇)工业软件开发求解器开发二是解耦前处理器和求解器,方便测试,调试,集成和模块化; 三是可以方便与第三方工具交互(数值优化工具,CAD设计工具)。 这种结构从四五十年前软件设计之初一直沿用到现在,没有特殊原因无需改动。比如OpenFOAM中,每一种求解器都可以编译成单独的可以执行程序。 https://www.jishulink.com/post/1908094
10.经验分享:打造优秀工具型网站的3个大招!优设网如今工具型网站越来越多(58同城、云盘、产品首页等),在不断打磨细节的过程里,有童鞋总结了工具型网站的设计目标和3种设计框架,全篇的思路非常值得学习,同学们除了学习专业知识,也可以看看作者解决问题的逻辑,对职业发展会有帮助。 什么是工具型网站 我们先从wikipedia上了解三组概念: https://www.uisdc.com/tool-based-website-design/
11.产品经理认证知识体系指南第二版学习笔记良好的市场调研既为客户需求又为产品价值主张奠定了基础,也有助于定义清晰的概念说明和产品设计规格。在整个产品创新流程中,应持续开展市场调研,从而确保产品设计始终与价值主张保持一致。 产品组合分析。BCG的分类方式,包括: 产品路线图。公司内外的沟通工具,产品创新匹配公司经营的规划。需要持续制定。https://idarc.cn/index.php/archives/3707/
12.erp系统框架有哪些零代码企业数字化知识站企业资源规划(ERP)系统是帮助企业整合和管理其业务流程的重要工具。ERP系统的框架通常包括多个关键组件,旨在提高企业效率,优化资源配置。以下是一些主要的ERP系统框架组件: 模块化设计:现代ERP系统通常采用模块化设计,各个模块可以独立运行,也可以相互集成。常见的模块包括财务管理、供应链管理、生产管理、销售和客户关系管理https://www.jiandaoyun.com/blog/article/985848/
13.基于深度学习的实时识别硬件系统框架设计AET由于整个CNN网络模型中的每个计算模块是互不相关且独立的,充分体现出了其结构能够进行并行运算的特性,尤其是在进行卷积运算时,而FPGA本身的硬件电路结构,也使其具有进行并行运算的特点。因此在整体系统框架设计中均采用了并行化的实现方法,框架设计中为每个卷积层的卷积核进行了卷积核组的设定,根据特征图输入和运算后特http://www.chinaaet.com/article/3000091553
14.案例审计智能升级:基于RPAOCRChatbot实现员工报销内审自动在完成业务流程图及事务的定义后,团队则基于开发框架进行流程框架图的设计,并进行反复验证,从而保证此核心环节的准确。 4. 功能模块的设计及实现 按照模块化的开发思路,团队可根据内审所涉及的操作设计多种功能模块。根据开发人员的偏好,使用 Java, C#, Python等工具,再结合RPA工具提供的各种组件均可完成功能模块的实https://maimai.cn/article/detail?fid=1606465229&efid=qXWo2bC07C6z14AkbFOy1w
15.中小学幼儿园教师培训课程指导标准(化学)4.知道初中化学各主题的关键评价要点,能基于双向细目进行评价设计,能从知识技能、思路方法、认识发展水平(即能力素养发展水平)等维度设计评价工具,能从知识技能、思路方法、认识发展水平等维度对评价结果进行分析,提升评价的设计、实施能力。 一、学科整体理解 http://www.cqtn.gov.cn/bm/qjw/zwgk_25192/zfxxgkml_bm/jczwgk/ywjyly/jsgl/jszyfz/202111/t20211128_10042966.html
16.浩辰3D「结构框架」设计,不用插件轻松搞定!浩辰3D在日常生活中,我们经常能看到各种结构框架设计,大到厂房钢结构、高压线路输电塔,小到操作台、自动化设备机台、空调外机安装架等。那么,在由浩辰CAD公司研发的浩辰3D软件中如何实现结构框呢?浩辰3D软件提供了专业的【框架】模块,点击菜单栏—【工具】—【框架】即可调出。下面小编将以3D钢结构工作台创意建模来展示浩https://www.gstarcad.com/support/1441/
17.从域名到运营:开办独立网站全流程十五、工具和资料 〇、前期工作 开设独立网站的前期工作主要包括需求调查与项目规划,如果是由第三方信息化服务承接,一般包括使用问卷或现场访谈开展客户调查,明确项目背景、目标,以及核心需求,并交付项目规划和设计文档。 需求调查与项目规划有利了掌握项目目标,以及如何实现目标。 http://www.thailycare.com/blog/network/762.html
18.什么是Cortex,怎样驱动着智能合约和区块链的功能Cortex 模型表示工具被设计为 ? 表征:将字符串映射为主流神经网络模型、概率图模型所支持的最细粒度的指令集 ? 组织:将指令集映射为主流神经网络框架的代码 ? 迁移:提供同构检测工具,使得不同机器学习/神经网络框架中相同模型可以互相迁移 4.存储层 https://m.elecfans.com/article/732683.html