Upload
others
View
10
Download
0
Embed Size (px)
Citation preview
Vue.js 在饿了了么的应⽤用
@ElemeFE
李李清伟 @清伟coder饿了了么单身前端⼯工程师
@QingWei-Li
基础⼯工具开发⼼心得 基于 Vue 的前端服务化尝试 Weex 的实践 PWA 的实践
「易易⽤用」
UMD
CommonJS
Single Component CommonJS
容易易使⽤用/写 Demo/CDN 引⼊入
⽀支持 webpack、Browserify 等⼯工具
满⾜足按需加载
多种编译版本
可定制化
⾃自定义主题 提供命令⾏行行⼯工具 提供在线⽣生成主题⼯工具
国际化内部实现 i18n 兼容 [email protected] 提供接⼝口,兼容其他 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