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

2020-02-27 646浏览

  • 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.监控维度 - 服务端
  • 24.
  • 25.
  • 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携程技术峰会 更多技术干货，请关注“携程技术中心”微信公众号