讲师: 涂金林 - 腾讯教育 Flutter 负责人
讲师先是介绍了 flutter, 接着讲了腾讯企鹅辅导上的实践, 包括了安卓, iOS 和 Pad 上的原生应用如何嵌入 flutter 以及原生页面与 flutter 页面混合切换的实践, 另外还讲了 flutter 的性能优化与 flutter for web 在生产环境的实践. 这里边的技术细节限于篇幅就不再赘述, 感兴趣的可以到公众号回复 tweb 领取 ppt.
为了更好的了解 flutter 在腾讯的落地情况, 大家可以看这个视频:
讲师: 郭林烁 - 腾讯 AlloyTeam 高级前端工程师
讲师所在的项目是腾讯文档, 是一个大型的团队, 一个页面就有很多人开发, 在遇到问题时, 得先指定人排查, 排查出问题, 再交接给相应的人解决, 比较低效, 这次分享讲了如何解决这个问题,主要分以下三个方面
讲师所在的团队, 通过脚本错误监控, 结合代码 sourceMap, 自动定位到出错文件的具体位置, 通过自动化脚本与 git blame 命令, 找出当前报错行的历史提交者, 通过内部工单系统, 自动提 bug 单给历史提交者, 因为工单有内部流程保证会被处理.
在开发阶段, 如果有脚本报错, 也会自动弹窗, 阻断开发.对报错量级进行了监控, 如果突然上涨, 也会有相应告警.
经过以上几个措施, 线上的报错量越来越少了.
经过上面的错误监控, 优化与持续跟进, 已经解决了脚本错误的问题, 但如果有些逻辑问题, 在大型项目里也是很难定位. 这个时候就要依靠日志了.
因为是个大型的项目, 前端也会产生很多日志, 通过前端上报不靠谱, 容易在上传时丢失. 我们来看看腾讯文档做了哪些内容解决日志问题
讲师: 张云龙 - 巧子科技创始人
分享中, 讲师着重介绍了 strapi
, 这是一个开源的 Node.js Headless CMS 框架. 该框架通过简单的几行 npm 命令, 即可生成一个 CMS 系统, 该系统通过界面操作, 可以生成数据库表, node 增删改查的代码和相关路由. 以下是 strapi
的视频介绍:
讲师: 张磊 - 知名开源框架 OMI 作者
该分享的 PPT 就有 80 多页, 现场分享更是一度超时, 这里就长话短说, 讲一些核心的内容
OMI 是一个跨框架的框架, 也就是 OMI 可以结合 react, vue, Web Component, Kbone, Preact, Three.js 等框架使用. 用 OMI 编写的组件, 也可以被 react, vue, preact 等框架直接使用, 反过来, react, vue, preact 等框架也可以使用 OMI 编写的组件.
另外比较有趣的是 OMI-THREE, 如果纯基于 three.js 编写游戏或 3D 场景, 我们需要创建很多实例, 比如 new 一个场景, new 一个立方体, 这里放一个光效, 这里加一个旋转, 这些都需要我们编写一些命令式的代码来处理. 但 OMI-THREE 可以让我们以声明式的写法完成以上内容, 来看个 demo:
实现以上效果的代码是声明式的, 很清晰:
关于 OMI 还有其他内容, 如 OMI + React, OMI + Vue, OMI + Kbone, OMIX, OMIM 以及 OMI 设计哲学, 感兴趣的可以在公众号回复 tweb 查看 PPT
讲师: 段隆贤 - Vue 语法编译引擎 aga 作者
不需要等待页面所有的接口返回, 页面头部接口响应即可响应页面, FP(首字渲染 first paint)和FCP(首次内容渲染: first contentful paint)更快
例如一个 v.qq.com 的请求, 利用分块传输, 可以先返回首屏内容, 后面的内容等数据拉取好后再返回, 注意这里是一个请求
在 Vue 编译时, 将 Vue 语法编译为字符串拼接, 通过自动化分块传输, 并做到了同构开发.
讲师: 水澜 - 阿里巴巴前端技术专家
要做 SSR 并不容易, 首先我们要保障 Node 服务的稳定性, 期间我们可能会遇到如下问题:
另外还要考虑如何让一套代码两端共用:
第一部分, 讲师的实践是将 node 服务落地到 serverless 中, 有如下好处
第二部分, 讲师使用阿里开源的 Rax 来解决一套代码两端共用的问题
Rax 是一套遵循 React 标准的跨端解决方案, 并且通过 Rax 的脚手架, 执行一条命令便可以部署到阿里的 serverless (fc) 或国外的 now serverless 提供商中
这里比较值得关注的是, 在 Rax 中, 请求的发起与路由的映射, 是可以做到前后端同构的, 限于篇幅, 感兴趣的同学可以查看 ppt 或 google: Rax
讲师: 蒋林源 - 腾讯IMWeb前端工程师
Serverless = Faas + Baas
如上图所示, 用户在腾讯云的 serverless 平台上, 上传云函数的代码(或直接用在线编辑器编写)
保存后, 我们可以设置触发器,
也就是上面的 Event Source, 可以是 api gateway, 也就是通过请求来触发, 其它触发器还有: 定时触发, COS 触发(COS 收到上传时触发, 比如上传了一张图片, 触发某个云函数进行压缩), 消息队列触发等等.
而后边在提供支持的 BaaS, 则提供了很多后端服务, 像 AI, 我们可以调用语音图像的识别接口, 还可以轻易地调用云 DB, 而云 DB 也不需要我们人工维护, 还有对象存储, 诸如图片, 视频上传, 回源到 CDN等, 简直太方便了.
目前我体验到腾讯云的冷启动做得还不错, 只要在一定时间阈值内有访问, 就不存在冷启动慢的问题, 但如果云函数长期都没人访问, 此后的第一次访问, 就会慢一些, 但还可以接受.
讲师提到了两个完全使用腾讯云 serverless 的业务, 如下
企鹅背单词
腾讯课堂 - 新人专属礼包
腾讯教育在内部的实践中, devOps 也很完善了, 整个流程如下:
开发完 push 代码到 git, 自动触发代码的构建 (yarn && yarn build 等), 自动触发云函数的部署, 此外, 预发布和发布环境也能通过内部的交付系统流畅地部署
讲师: 潕量 - 阿里前端技术专家
以上即为控制台系统
一句话概括该分享: 通过内部物料系统(可以理解为 npm 的公共 UI 组件库积累), 阿里自研了一套 Fusion 系统, 可以方便设计师配置设计稿, 该系统的配置粒度几乎满足设计师的所有需求, 配置的每一个参数都会记录下来, 设计师在提交设计稿时, 会根据配置内容, 发布到 npm, 前端开发更新 npm 包, 即可拿到设计师的成果, 该成果是基于物料系统的, 也就是代码生成后, 基于 react 可读(阿里统一使用 react), 此后便可在这个基础上增加业务逻辑, 与设计师沟通扯皮的问题被解决得很彻底.