GMTC北京站本周日开幕,58个议题全部上线,点击查看 了解详情
写点什么

投身蓝海,拥抱生态:百度大牛带你玩转小程序

2020 年 12 月 01 日

投身蓝海,拥抱生态:百度大牛带你玩转小程序

新移动时代已经到来,人口红利消退,注意力红海,这些挑战让流量竞争越来越激烈。与此同时,伴随技术、应用场景的快速扩展,小程序成了非常珍贵的新流量地。在小程序生态中,平台的技术能力、技术理念与开发者的想象力,共同决定了小程序连接服务的边界。百度一直以开放包容的姿态打造智能小程序生态,以期更多地连接人与信息,人与服务。


截至 2020 年 9 月,百度智能小程序月活已超过 3.5 亿,有超过 42 万智能小程序入驻百度生态,月活过百万的智能小程序多达 240 个以上,百度智能小程序开源联盟的合作伙伴也扩展至 55 家,百度智能小程序的开放生态日益蓬勃。


2020 年 11 月 29 日,百度与 InfoQ 联合主办了主题为“智能小程序 开发全解析”的互联网圆桌派技术沙龙专场,邀请百度多位技术大咖带来一系列精彩主题分享和实践案例展示,帮助开发者深度了解百度智能小程序过去一年来的技术迭代、业务赋能与开发实践故事。

深度赋能开发者:百度智能小程序的生态建设工程


沙龙开场,百度智能小程序研发部主任架构师谢马林介绍了百度在智能小程序的生态建设道路上所做的诸多工作。

截至 2020 年底,百度智能小程序已发布超过 600 个 API 组件,为开发者提供了很多通用开发模板及多元化的组件库,覆盖图文、短视频和政务等诸多领域。百度还凭借自身的成熟 AI 技术,为智能语音、图片审核、智能推荐等小程序业务功能提供支持。在用户营销交互管道、互动直播能力、广告及支付能力等层面百度也做了很多努力。具体到开发者赋能方面,百度主要在四个方面投入了大量资源:


  1. 文档建设。百度在今年针对智能小程序开发文档做了大量优化和改进。

  2. 资源分发。百度提升了智能小程序的整体分发能力,提供了更多分发途径和分发卡片。

  3. 经营和运营。百度提供了自动化运营和用户分层等能力,并推出了运维侧的灰度发布机制。

  4. 开源通路。百度与 55 家合作厂商提供了预览分发能力,并成立了开源能力中心,帮助开发者验证开源生态中的分发实际效果。


百度主任架构师谢马林


百度还启动了智能小程序全链路性能优化专项,通过性能优化教程分享,骨架屏、prelink、oninit 等优化技术,以及全套性能诊断工具和评分制度来帮助开发者提升小程序性能。百度希望能通过这一系列赋能开发者的活动,进一步改善智能小程序开发体验,帮助开发者创作出更多优秀的小程序产品。

走入全新生态:智能小程序开发入门指南


对于习惯了传统应用的开发者来说,小程序是一个令人兴奋又让人感到陌生的全新技术领域。为了减少开发者入门智能小程序开发过程中的障碍,百度资深研发工程师闫斌在本次沙龙中带来了智能小程序开发入门指南分享。


百度资深研发工程师闫斌


智能小程序开发的生命周期包括接入、开发和提审、发布四个环节:


  1. 接入。百度为开发者提供了三种接入方式,包括原生开发、基于上层框架开发和 DSL 语法转换器。百度开发者工具为用户提供了简单的脚手架与 14 个高质量的页面模板,并针对微信小程序的搬家需求提供了 DSL 语法转换器,未来还会提供 Smart CLI 工具插件。

  2. 开发。百度开发者工具具备完整的编辑器功能,百度还为小程序总结了一份编码指南:



闫老师还解析了开发者需要特别注意的小程序登陆场景,并提到了百度为智能小程序封装的优质组件库——Smart UI,以及开发者工具内置的远程调试能力等。


  1. 提审与发布。当小程序开发完成需要上线之前,开发者需要设置基础库的最低版本,并使用开发工具自查潜在问题。小程序自查并提交后,通过审核即可上线。


针对小程序的工程实践,闫老师介绍了小程序发布 CI 工具——SWAN toolkit,以及百度内部成熟的企业级持续集成方案:AGILE 流水线。


基于这些方法,小程序开发团队可以按照每周两次发版的节奏来持续开发。团队遇到开发效率的提升瓶颈时,都可以参考百度自身的最佳实践来管理开发流程、突破开发困境。

基于智能小程序客户端架构设计的小程序开发优化指南


在小程序开发过程中,很多开发者会在优化阶段遇到挑战。为此,百度资深研发工程师陈都带领与会者从客户端架构角度分析了小程序开发的优化流程。陈老师的分享主要分为三大环节:运行基础、协同提升和新基建。


百度资深研发工程师陈都


运行基础,百度智能小程序架构


小程序开发全流程分为生产环节、审核/上架环节和运行环节。百度智能小程序的一大优势就是可以在多宿主应用上构建生态。为了实现这一目标,避免小程序进程影响宿主进程,百度开发了小程序多进程运行架构。相比传统 H5 应用,小程序使用的是逻辑层和渲染层双线程模型,以满足端侧用户信任需求。


协同提升,百度小程序性能优化实践


在优化小程序性能的过程中,首要工作是建立小程序性能指标。百度总结了小程序启动流程的关键路径:


陈老师认为,性能优化工作并没有银弹,但存在有效的方法论,总结来说就是小步快跑、不断试错、持续优化和循环迭代。具体到小程序而言,优化工作分为百度提供的框架优化,和开发者配合采取的小程序优化措施。优化过程应善用加减法和常见的最佳实践,从而获得令人满意的结果。


新基建:秒开之路上的性能优化挑战


百度一直以来追求的目标就是实现智能小程序的秒开能力。为此,百度主要从小程序资源预取、小程序云端缓存加速和编译产物优化几个方面下手,通过全链路优化措施提升智能小程序的加载速度与用户感知体验。其中很多优化工作都是开发者无感知的,无需开发者主动参与。 

智能小程序性能及体验优化


陈老师的分享结束后,百度资深研发工程师詹方在下一环节为大家送上了小程序性能与体验优化的秘籍。


百度资深研发工程师詹方


性能优化的意义


百度智能小程序可以在多种宿主应用上运行,因此也会间接影响宿主应用,所以小程序性能会显著影响流量、转化率和用户体验。由于智能小程序采用双线程模型,因此性能优化时主要关注逻辑层数据处理速度和渲染层渲染速度。智能小程序的性能指标有加载总时长和上屏时长两大类,细分为很多渲染、逻辑和网络层指标,优化时需要根据具体场景进行针对处理。


性能优化的原理和手段


智能小程序的性能优化工作主要分为两大部分,首先是启动流程优化:

这一环节包括两大要点,分别是:


  • 使用分包/预下载和 App.onLaunch 优化加速 initData 生成;

  • 使用 onInit、prelink 和数据前置获取/持久化等方法提前请求主数据。


小程序启动完成后,直接影响用户交互体验的环节就是页面渲染。为了提升页面渲染效率,开发者可以使用自定义组件、高性能 view/text 组件和图片优化、按需渲染等方法优化渲染速度。其中,高性能 view/text 组件的使用是这一环节需要重点关注的内容。


性能检测工具


性能检测工具是小程序优化流程中的必备要素。百度已经发布了全新的客户端性能分析工具,具备加载流程分析、网络性能分析、图片性能分析、端能力性能分析和 setData 性能分析五大模块,可以大大提升开发者的性能优化工作效率。该工具获取途径见下图:


智能小程序海量数据技术运营最佳实践


本场沙龙的最后,百度资深研发工程师赵发凯为开发者解析了小程序技术运营的最佳实践。


百度资深研发工程师赵发凯


百度智能小程序数据架构简介


上图是百度智能小程序的数据架构总览。在这一架构内部,还有实时日志收集、数据指标加工与分发和管理监控几个子系统。整套系统具备高性能、高可扩展和强稳定性几大优势。开发者还可以通过可视化开发和统一的开发标准来申请数据利用权限,充分挖掘数据价值。


海量数据业务实践


基于智能小程序的数据架构,百度在开发者平台提供了运维中心,帮助开发者利用海量运维数据来提升业务能力。


运维中心提供的数据主要分为性能数据和异常数据。其中,性能数据包括到达率、上屏时间、白屏率和请求耗时几大指标。错误数据主要分为 HTTP 错误和 JS Error 两类,前者只抓取 404、502 请求,后者则会汇总小程序线上报错的 JSError 错误码,并给出对应的小程序版本信息。此外,运维中心还提供了灰度测试能力,使开发者可以在基本不影响用户线上体验的情况下测试新版本、新功能。


赵老师建议,小程序上线后,开发者应随时关注运维中心数据指标,根据各项指标综合寻找瓶颈进行优化,之后通过灰度上线进行优化效果评估,形成持续的优化循环。未来,运维中心还将提供更细粒度的数据拆分,并计划引入自定义打点、实时监控、页面级用户行为分析和开源互通等功能。

携手同行,互利共赢:百度智能小程序生态已入佳境


几位技术大咖的精彩分享结束后,沙龙现场的参会者还在问答环节向老师提出了很多技术问题,并得到了细致认真的解答。


时至今日,百度智能小程序已经在国内小程序行业中走出了一条独特的成功之路。百度开源共建的产业策略与跨宿主应用互联互通的技术特性,使开发者可以在更多场景和平台中通过小程序与终端消费者互动,发挥小程序便捷灵活优势,从而取得更大的业务收益。随着百度智能小程序的市场影响力提升、开发体验不断进化,可以预期会有越来越多的企业和开发团队走进这一生态,与百度携手同行,共同见证智能小程序的精彩未来。

点击下方链接,回顾沙龙完整视频内容


https://live.infoq.cn/room/575


2020 年 12 月 01 日 20:16473

评论

发布
暂无评论
发现更多内容

产品经理课程-第三周

novaln🍉

第三周小结:产品思维和产品意识收尾+解决方案

小匚

深度思考 个人成长 产品经理 学习笔记 产品经理训练营

闭关修炼21天,“啃完”283页pdf,我终于4面拿下字节跳动offer

周老师

Java 编程 程序员 架构 面试

解决方案的设计

让我思考一会儿

Week3作业

Geek_6a8931

Spring 事务、异步和循环依赖有什么关系?

程序员小航

Java spring 源码 事务 循环依赖

产品训练营--第三期作业(2)

曦语

产品训练营

Spring 事务、异步和循环依赖有什么关系?

互联网架构师小马

你的网站上还在用图片验证码来刁难用户么?一招教你彻底去除图片验证码!

香芋味的猫丶

短信验证码 短信防轰炸 短信防火墙 图片验证码 风控防火墙

三高(高并发,高可用,高性能)解决方案

for

英特尔高管解读赢得2亿用户信赖的秘诀——永远领先两步

新闻科技资讯

产品训练营-第三周-作业

邹小胖

产品经理训练营

【并发编程的艺术】Java内存模型总结

程序员架构进阶

架构 Java内存模型 七日更 28天写作 2月春节不断更

阿里面试败北后,苦刷Java天梯图28天,成功斩获滴滴50W年薪offer

Java架构师迁哥

清华大学团队:人脸识别爆出巨大丑闻,15分钟解锁19款手机

香芋味的猫丶

网络安全 信息安全 人脸识别 刷脸支付 支付安全

webpack | 进阶用法3:如果将代码打包成一个通用JS库。

梁龙先森

前端工程 webpack 28天写作 2月春节不断更

区块链企业发展面临的挑战及建议

CECBC区块链专委会

区块链

产品0期 - 第三周作业

曾烧麦

产品训练营

一应俱全,阿里新产P5到P8Java全栈成长宝典限时开源(2021最新)

程序员小毕

Java 程序员 架构 面试 分布式

是的,奈学教育一周年了!

古月木易

奈学教育

第三周作业

岛乾坤

是的,奈学教育一周年了!

奈学教育

奈学教育

SpringCloud 从入门到精通16---Sentinel流控

Felix

第三周总结

岛乾坤

产品经理训练营 Week03

柚子君~

产品经理训练营

AI进商超:智能视觉秤减轻操作员负担,果蔬称重不再排队

百度大脑

最高法规范区块链证据,司法链将走向全国统一

CECBC区块链专委会

区块链

阿里云发布CDN产品最佳实践图 全面解析行业应用

阿里云Edge Plus

CDN 边缘节点

构建高并发高可用的电商平台架构实践

for

作业-第三周

eva

Stakeholder requests (order by priority)

顾远山

需求 排序 分析 利益相关者

投身蓝海,拥抱生态:百度大牛带你玩转小程序-InfoQ