文字内容
1. 多端适配框架NFES在携程的实践 魏晓军 携程高级研发经理
2. 个人介绍
3. 个人介绍
4. 个人介绍 携程高级研发经理 就职于携程平台研发部-前端框架团队,2011年加入携程,主要负责前端框架和基础设 施的研发工作,目前重点关注Node.js和前端新技术的落地,以及前端性能优化。 前端框架团队的使命:基于业务需求,提高应用体验,提高开发效率
5. 目录 • NFES框架产生的背景 • 框架设计思路 • 框架核心功能的实现 • 开发体验优化 • 对未来功能的探索
6. NFES框架产生的背景
7. 前端框架的发展 2013 2016 2018 LIZARD CRN-WEB NFES - AMD - CMD - CMD - SPA + MPA - SPA + SSR - SPA + MPA + SSR - Tech stack - Tech stack - Tech stack Backbone、ES5 React、Redux React、Next.js Underscore ES5+ Redux、Style in JS Zepto、Require TS/ES6+、Express
8. 当下面临的问题 • 技术栈陈旧 • 首屏性能问题 • 在开发模式不变的情况下,Hybrid 性能存在瓶颈 • BU 开始尝试前后端分离 • 业务团队开始实行敏捷开发
9. 新框架的要求 • 与当下新技术栈接轨 • 代码同构并解决首屏渲染问题 • 设计新的 Hybrid 容器 • 配套的工程化工具 • 保持一套代码,多端运行 开发效率 首屏速度 页面体积
10. 框架设计思路
11. 整体设计
12. Node端设计
13. 渲染层+客户端设计
14. Hybrid端设计
15. 框架核心功能的实现
16. Hybrid实现
17. 页面生命周期
18. VFS实现-压缩
19. VFS实现-使用
20. 基于SW实现Webp
21. 在线构建
22. 动态Polyfill实现
23. Hybrid 真机调试实现
24. 其他 • 支持自定义文件夹(默认为pages) • 提供renderToStream • 集成服务端、客户端性能埋点 • 添加服务端渲染容错机制 • 使用nextTick处理服务端多并发 • 与配置中心配合,实现动态控制静态资源访问路径 • 支持服务端中间件机制
25. 开发体验优化
26. 开发阶段
27. 发布阶段
28. 全链路数据监控
29. 生产调试
30. 对未来功能的探索
31. • 开发环境Docker化 • 应用Severless化 • Code Remote Development