Vue.js在饿了么的应用
2020-02-27 231浏览
- 1.Vue.js 在饿了了么的应⽤用 @ElemeFE
- 2.李李清伟 饿了了么单身前端⼯工程师 @QingWei-Li @清伟coder cinwell.li@gmail.com
- 3.基础⼯工具开发⼼心得 基于 Vue 的前端服务化尝试 Weex 的实践 PWA 的实践
- 4.
- 5.
- 6.
- 7.「易易⽤用」
- 8.UMD 多种编译版本 CommonJS Single Component CommonJS 容易易使⽤用／写 Demo／CDN 引⼊入 ⽀支持 webpack、Browserify 等⼯工具 满⾜足按需加载
- 9.可定制化
- 10.⾃自定义主题 提供命令⾏行行⼯工具 提供在线⽣生成主题⼯工具
- 11.国际化 内部实现 i18n 兼容 vue-i18n@5.x 提供接⼝口，兼容其他 i18n 插件
- 12.与⽣生态的兼容
- 13.国际化 vue-i18n DatePicker/Table/Pagination… 导航类组件 vue-router NavMenu/Breadcrumb SSR ⾃自⼰己配置／nuxt.js
- 14.更更多的⼯工作 单元测试 项⽬目模板 可运⾏行行代码的⽂文档 新特性和新组件 与社区的互动 ……
- 15.前端服务化
- 16.会场⻚页⾯面 模板⽣生成，不不够灵活 需要前端参与
- 17.banner 多种尺⼨寸 ⻛风格⼤大同⼩小异 需要耗费设计资源
- 18.设计师 配置 banner 模板 运营 前端 开发⻚页⾯面插件 通过可视化编辑器器编辑 下载 banner 发布⻚页⾯面
- 19.编辑器器 配置数据和样式 JSON 数据 渲染器器 image 组件属性和数据 Input Video 业务组件 最终⻚页⾯面 合并渲染器器和数据
- 20.
- 21.业务组件
- 22.业务组件信息 Property Schema 配置项 vue 动态渲染组件
- 23.
- 24.
- 25.动态渲染业务组件
- 26.设计师
- 27.模板⽣生成 编辑器器 设计师使⽤用 运营使⽤用 ⽣生成模板和配置项 配置数据 多尺⼨寸多主题 样式调整 ⽣生成图⽚片 canvas ⽣生成 渲染器器 image Text
- 28.
- 29.下⼀一步 抽象编辑器器和渲染器器逻辑 提供更更多的服务化⼯工具
- 30.
- 31.试验⻚页⾯面 交互少 访问量量⼤大 基于 Vue 开发
- 32.业务实现 报错和性能监控 降级⽅方案 基于 Vue 版本 前端和 App 端开发 App 端提供
- 33.开发⻔门槛低 性能表现优异 Vue 项⽬目迁移⽅方便便
- 34.三端⼀一致性不不完全, 特别是 HTML5 ⽀支持不不完善 CSS 和 Web 中存在差异 组件不不够丰富 没有 cookies 开发上没有热更更新机制
- 35.Android iOS
- 36.降级⽅方案
- 37.开关 OFF ON ⾼高 Web ⻚页⾯面 Weex ⻚页⾯面 最低兼容 版本 低 Legacies ⻚页⾯面
- 38.技术 HTML5 React Native 学习成本 低 中 弱交互性能 一般 好 强交互实现 版本间兼容性 能实现, 性能 好(大量 Polyfill 可用) 差 能实现, 性能 好 差(Breaking changes 多) 一般, 部分拖 Weex 低 好 动相关效果无 法实现 好
- 39.PWA Progressive Web App
- 40.试验⻚页⾯面 独⽴立⻚页⾯面 ⾸首屏渲染⻚页 请求资源较多，需要优化
- 41.业务改造 报错和性能监控 降级⽅方案 sw 缓存、preload、App Shell 为 sw 缓存定制 清除 sw 缓存
- 42.
- 43.
- 44.PWA 在饿了了么的实践经验 — 王亦斯 Upgrading ele.me to Progressive Web App — ⻩黄⽞玄
- 45.
- 46.总结
- 47.Q&A @QingWei-Li @清伟coder
