携程大前端框架NFES 携程魏晓军

FF91

2019/03/15 发布于 技术 分类

文字内容
1. 携程大前端框架 - NFES 魏晓军
2. 目录 CONTENTS 1 现有问题 2 设计思路 3 框架细节 4 技术收益 5 未来探索
3. 业界现状 图片来源于2018.stateofjs.com
4. 业界现状 图片来源于2018.stateofjs.com
5. 业界现状 • TWA(Techless Web Application) 图片来源于蚂蚁金服体验科技
6. 内部面临问题 • JS技术栈陈旧: Backbone.js+Require.js • SSR方案分散:imvc/knr/igt 用户 /SEM • SEO架构: .Net+V8 • SPA模式首屏性能问题 SEO SLB • 原Hybrid容器性能问题 /webap C# APP /html5 C# V8 SEO Service 原 H5/SEO 架构 /restapi Gateway
7. 可借鉴的解决方案 • Uber-Fusion.js、 Alipay-umi.js、 Alibaba-beidou、 Nuxt-Nuxt.js … • Zeit-Next.js (Github Star 31.7k) A framework for static and server-rendered applications • Koajs-koa、Alibaba-egg • Expressjs-Expressjs (Github Star 41.2k) the fast, unopinionated, minimalist web framework for node
8. 新框架设计目标 • 提供统一的Web开发框架 • 提供统一的SSR解决方案 • 与现有无线研发支撑平台打通 • 方便应对技术出海场景 NFES(Next Front-End Solution)
9. NFES设计思路 • 新MVC设计,基于React/iMVC • 新UI和Business组件 • 支持SSR+CSR混合场景 • 新Hybrid容器 • 插件化架构,支持按需使用 • 工具和平台,提供研发生命周期支持
10. 实现前端工程化 应用部署 服务端配置化 资源集成发布 开发 运维
11. 开发阶段
12. 架构图 框架 WEB BUSINESS-LOGIC 非首屏 工具 ARES NFES-UBT NFES-MVC NFES-LOGIC NFES-PAGE NFES-UI SHARED BUSINESS -LOGIC 首屏 平台 NFESDEVTOOLS MCD NFES-CLI UBT NFES-CORE SERVER CTRIP-UTIL NFES-NEXT NODEJS CAT
13. 完善Next.js功能 • 封装Require的context • 添加服务端容错机制 • 完善埋点信息 • 提供Stream的返回方式 //抛出模块之外的变量 let dirtyData = null; export default class IndexPage extends Page { async getInitialState (ctx) { if(!dirtyData){ //跟访问相关的数据 dirtyData = ctx.req && ctx.req.query('dirtyData'); } …… return { dirtyData } } } 全局变量污染
14. 优化后 最佳实践 • State的正确使用姿势 • 首屏、非首屏逻辑分离 优化后 • 样式组件化 优化前 优化前后对比
15. Hybrid架构 WEBVIEW 接收/发送 消息 页面样式 NATIVE 消息中心 预创建WEBVIEW /JSCORE 实例 JSCORE 接收/发送 消息 部分UI 部分UI 创建节点 LOGIC REACT 事件绑定 DOM-Adapter Window事件
16. Hybrid运行流程 App启动 增量更新 初始化 JavaScriptCore /V8 Pool 初始化WKWebview Pool 初始化 CLIB Bridge /Message Channel 初始化 CLIB Message Channel 载入 Base Core 载入 Base Render 初始化 Native Info 载入 Engine Render 载入 Engine Core
17. Hybrid效果展示 VS 优化前后对比
18. 开发工具 - 开发 • 环境搭建 • 项目生成 编辑 区域 • 模板生成 新建 模板
19. 开发工具 - 调试 • WEB调试 • Node.js调试 • 埋点数据调试 • 性能查看 Size 统计 UBT Web 调试 Node 调试 Size 统计
20. 开发工具 - 发布 • 静态资源多环境发布 • Node.js应用发布 发布 记录 • 版本管理 • 真机调试 日志 调试
21. 运维阶段
22. 监控维度 - Web • NFES.AjaxReady、NFES.AjaxMessageSize • NFES.DomReady、NFES.Onload • NFES.TemplateRender • NFES.GeoRequest • NFES.firstMeaningfulPaint
23. 监控维度 - 服务端
26. 运维 - 代码示例
27. 运维 - 调用栈
28. 运维 - 视窗
29. 收益 - 多端适配 r H5 Hybrid PC
30. 性能优化 - 渲染与响应速度 • 平均耗时50ms • 耗时标准差250ms
31. 性能优化 - 首屏渲染速度 • 在 WIFI/4G 环境下,由原先 3s 降低到 1s以内 • 在 3G 环境下,由 8s 降低到 2.2s
32. 收益 - 提升开发效率 • 新技术栈提升30%的开发效率,10人团队7人 • 新工具链减少沟通,开发周期可以降低20% • React + Node.js 新技术栈利于人员招聘
33. 未来探索 • Node 10 Worker Threads 渲染新模型 • SSR应用云端托管 • 海外Web资源域名分区
34. 本PPT来自2018携程技术峰会 更多技术干货,请关注“携程技术中心”微信公众号