Vue.js 在饿了了么的应⽤用

@ElemeFE

李李清伟 @清伟coder饿了了么单身前端⼯工程师

@QingWei-Li

cinwell.li@gmail.com

基础⼯工具开发⼼心得 基于 Vue 的前端服务化尝试 Weex 的实践 PWA 的实践

「易易⽤用」

UMD

CommonJS

Single Component CommonJS

容易易使⽤用／写 Demo／CDN 引⼊入

⽀支持 webpack、Browserify 等⼯工具

满⾜足按需加载

多种编译版本

可定制化

⾃自定义主题 提供命令⾏行行⼯工具 提供在线⽣生成主题⼯工具

国际化内部实现 i18n 兼容 vue-i18n@5.x 提供接⼝口，兼容其他 i18n 插件

与⽣生态的兼容

国际化

导航类组件

vue-i18n

vue-router

DatePicker/Table/Pagination…

NavMenu/Breadcrumb

SSR ⾃自⼰己配置／nuxt.js

更更多的⼯工作

单元测试 项⽬目模板 可运⾏行行代码的⽂文档 新特性和新组件 与社区的互动 ……

前端服务化

会场⻚页⾯面

模板⽣生成，不不够灵活 需要前端参与

banner多种尺⼨寸 ⻛风格⼤大同⼩小异 需要耗费设计资源

设计师

前端

配置 banner 模板

开发⻚页⾯面插件

运营

通过可视化编辑器器编辑 下载 banner 发布⻚页⾯面

编辑器器 JSON 数据 最终⻚页⾯面渲染器器

image Input Video

业务组件

组件属性和数据配置数据和样式 合并渲染器器和数据

业务组件

业务组件信息Property Schema

vue 动态渲染组件配置项

动态渲染业务组件

设计师

模板⽣生成 编辑器器

⽣生成图⽚片

渲染器器

image Text

运营使⽤用 配置数据 样式调整

设计师使⽤用 ⽣生成模板和配置项

多尺⼨寸多主题

canvas ⽣生成

下⼀一步 抽象编辑器器和渲染器器逻辑 提供更更多的服务化⼯工具

试验⻚页⾯面交互少 访问量量⼤大 基于 Vue 开发

业务实现

报错和性能监控

降级⽅方案

基于 Vue 版本

前端和 App 端开发

App 端提供

开发⻔门槛低 性能表现优异 Vue 项⽬目迁移⽅方便便

三端⼀一致性不不完全, 特别是 HTML5 ⽀支持不不完善 CSS 和 Web 中存在差异 组件不不够丰富 没有 cookies 开发上没有热更更新机制

Android

iOS

降级⽅方案

Web ⻚页⾯面

开关

最低兼容版本

Legacies ⻚页⾯面Weex ⻚页⾯面

OFF

⾼高 低

ON

技术 学习成本 弱交互性能 强交互实现 版本间兼容性

HTML5 低 一般能实现, 性能

差

好(大量 Polyfill 可用)

React Native

中 好能实现, 性能

好

差(Breaking changes 多)

Weex 低 好一般, 部分拖

动相关效果无

法实现

好

PWAProgressive Web App

试验⻚页⾯面独⽴立⻚页⾯面 ⾸首屏渲染⻚页 请求资源较多，需要优化

业务改造

报错和性能监控

降级⽅方案

sw 缓存、preload、App Shell

为 sw 缓存定制

清除 sw 缓存

PWA 在饿了了么的实践经验 — 王亦斯

Upgrading ele.me to Progressive Web App — ⻩黄⽞玄

https://zhuanlan.zhihu.com/p/25800461http://ele.mehttps://medium.com/elemefe/upgrading-ele-me-to-progressive-web-app-2a446832e509

总结

Q&A

@清伟coder@QingWei-Li