前端位于研发的应用层,永远对迭代速度要求很高,同时又跟随业务在不断发展变化,团队... 展开 >
雷志兴,英文名 Berg,百度智能小程序主任架构师,2007 年加入百度。早年负责过百度前端基础库和工程化建设,近些年主要关注跨端解决方案在超级 APP 中的应用。
前端位于研发的应用层,永远对迭代速度要求很高,同时又跟随业务在不断发展变化,团队也在快速发展和变化,工程化面临的挑战始终很大。
在这个超级 APP 割据,又有大量后继挑战者的移动互联网后半场,没有最好的工程化方案,只有适合的工程化方案。
本专题包括一系列经历实战考验的前线实践,通过这些可资借鉴的故事,希望能给大家带来一些思考。
前端从不缺好用的轮子, 问题是如何发现轮子并更好地使用它。本次分享围绕整个交付周期,通过分析美团金服前端工程化的演进方式,来回答如何多快好省地复用集团的基础设施或者开源方案,提高研发效率。目前美团金服大前端团队尝试云(Serverless)+ 端(Electron)两个方向来规范和标准化前端研发流程,让每一个前端项目的开发流程都能“纵享丝滑”。
云+端一体化就在眼前,我们相信一定会进一步降低团队内外的沟通成本,大大提升研发效率。
当我们的业务需要一个富文本编辑器的时候,我们不知道如何技术选型,感觉这东西很复杂,是基于开源项目还是自研。如果基于开源项目,担心不满足业务的定制需求,如果自研,担心研发成本太高。本次分享基于从零开始自研语雀文档编辑器的实践,将详细介绍富文本编辑器和多人实时协同的设计思路、遇到的各种挑战和相应的解决方案。
在“小程序”生态百花齐放的今天,多端小程序同构解决方案层出不穷,不同于 Taro、uni-app 等流行开发框架,苏宁选择通过转换器来将微信小程序代码转换为其他小程序,来破解这一难题。
大家可能有用过 echarts 这样的库来实现可视化报表,用过百度地图,高德地图的 SDK 实现业务中的地图功能。也可能用过 Canvas 或者 WebGL 来实现一些绘图的需求。
这次分享希望能够用一个星球生成工具 https://github.com/pissang/little-big-city 作为例子,分享下如何结合这些可视化的技术,前端渲染技术来做一个比较有意思的生成设计领域的小工具。
希望能带来一些启发,里面利用到的一些技术点也能够作为大家平时工作中能够拿来就用的趁手工具。
1. 生成设计介绍
2. 星球生成工具 Little Big City 的想法产生和实现
(1) 一些背景介绍以及其它类似的应用介绍;
(2) 建筑地理数据的获取,地图瓦片及 GeoJSON 的解析;
(3) 从二维的地理数据生成三维的模型;
(4) 细节的补充生成;
(5) 渲染优化;
(6) 模型的导出和二次利用,转换成 usdz 格式。
3. 生成设计与可视化
(1) 通过 Boids 和力引导布局两个算法来介绍可视化与生成设计的共通之处;
(2) 更多前端生成设计的场景。
1. 能够了解生成设计并且在产品中有所应用;
2. 对于可视化和实时渲染中应用的一些技术点能够带来一些启发。
说起 Web 平台新的演进,PWA (Progressive Web Applications)无疑是部重头戏,其作为新一代 Web 应用的标准正逐步为广大开发者所接受。但是,天然的,作为一种更高层级的应用形态,PWA 的能力总是落后于其相应平台原生应用的能力,从而给应用开发者在选型时带来各种各样的困扰。为此,Google 主导的 Fugu 于 2018 年终横空出世,旨在为 Web 平台带来一系列无限接近原生系统能力的 API,助力 PWA 更强大,更安全。
本次分享将介绍 Fugu 的前世今生,Fugu 的工作流程,详细介绍一系列重磅级 API 的用法,深入剖析其设计思路,并将着重讲解其中 Web 世界安全模型发生的新的变化,帮助 PWA 开发者了解 Fugu 的技术思路及发展动向,从而能够更深入的参与其中并最终成就自身的 PWA 开发。
传统前端业务会根据业务线集成在一个站点上,随着业务复杂度上升,包体积会迅速变的过大。为了适应这个变化往往需要更多的开发者、更细力度的团队组织。分组开发时大家的模块解耦到各自完成,上线时糅合在一起运行, 产生出层出不穷的分支合并、代码回滚,都会造成合作效率的骤降。这正是头条号平台在 2017 年时面临的问题。
过大的代码集合还会造成发布频繁,每个业务分支和功能点都有一定的更新频率,如果以传统的独石系统开发、验证和上线,每一个业务都会让项目所有一起升级、测试和上线,发布频率的总和会非常高、非常频繁。如果不解除原有的耦合会彻底失去响应能力。
更进一步来看以如此之高的上线频率、版本迭代速度,开发者极难追溯哪个版本对应哪个改动。
字节跳动微服务前端解决方案为应对以上挑战而生。经过几年发展已经成功支持了几十个对内和对外的系统。
本话题将以一线参与者的视角,讲述 360PC 小程序框架从开始到初步形成的开发中的选型和决策过程,包括对比一些已有的解决方案,从中的取舍过程,并且在此过程中展望今后 360PC 小程序发展。
1、后来者:360PC 小程序简介;
2、360PC 小程序技术选型:与网页、混合开发、App、PWA、扩展和微信小程序等已有成熟方案进行对比;
3、360PC 小程序架构设计思路:API、组件库、框架的修剪、工具链和端;
4、未来展望:持续集成、在线测试与打包、云端编译、云端开发。