React 在大型后台管理项目中的工程实践! 今日头条!

Size: px

Start display at page:

Download "React 在大型后台管理项目中的工程实践! 今日头条!"

天谷
4 years ago
Views:

1 React 在大型后台管理项目中的工程实践! 今日头条!

2 我介绍健至今今日头条效率工程和客户增长负责业务系统的前端开发和工程化构建搜狐新闻客户端研发部负责前端基础平台和 Hybird 混合型架构开发高德地图移动应用开发部负责 LBS 功能组件开发和活动运营研发东华软件重点客户事业部负责企业系统集成平台和通用解决方案研发

3 TOPIC 01 业务情况概述 02 前端工程化设计 03 Redux 项目结构改进 04 异步数据流优化 05 持续构建

4 Part1 业务情况概述

5 React 技术栈产品线业务复杂由于业务系统本身是为满足用户的工作需要, 系统往往基于复杂的数据流和业务逻辑协同开发大型业务系统的开发流程通常是将一个大功能点会拆解成多个小的业务模块, 再由多人协作, 同时开发多端并行伴随着移动设备的普及和移动办公的效率需求, 多数时候需要将大型业务中的高频功能同时拆解成 PC 模块和手机模块, 多端同时进行开发持续迭代大型业务系统的由于用户的特殊性, 对系统的持续迭代和功能响应都有着极高要求

6 诉求更高效地构建配置前后端环境可完全独立运行更高效的结构设计更稳健地资源发布简化项目中的配置文件更彻底的前后分离同时兼顾组件的分离和功能的紧凑更优雅地处理异步优化流程, 减少差异 Middleware +?

7 Part2 前端程化设计

8 具链 webpack: 工程中的资源依赖管理和分析编译工具 Middleware: 服务框架的中间件, 能非常方便的为我们的前端环境提供各种增强服务功能 webpack middleware Express/Koa: 基础 web 服务框架 Express/Koa node: 底层依赖开发环境,yarn/npm 作为资源管理工具,nvm 用于管理多个 node 版本 node+nvm+yarn

9 仅此已?

10 webpack 结构 WEBPAC K! cli initial MODULES WITH DEPENDENCIES! STATIC ASSETS!

11 重复配置

12 抽象配置 environments environments.config.js 存放在特定环境下的需要变化的配置参数和设置通常包含有 :publicpath devtools warnings uglify hash 等 project project.config.js 存放于项有关信息, 如 :server,output,loader,externals, plugin 等配置 ; 通过 overrides 实现对 environments 中的配置信息重载 webpack 抽象优于重复 webpack.config.js 主要是读取 project.config.js 中的配置, 再按标准的 webpack 字段填 project 中的配置信息, 原则上是该件中的信息只与构建具有关, 与具体的项程配置关, 可以做到跨项间复

13 配置重构 object (env) object.assign(override) project.conf

14 前后端分离

15 开发体验 100! well done. Coding! Experience! terrible sad! (m)! 0! 60! Environments Prepare Time!

16 开发诉求简化开发环境搭建能否只需掌握两个命令 :npm install 和 npm dev 就能进入开发状态? 前后端开发彻底分离开发诉求不用搭服务环境, 不用配 nginx 和 Charles, 只改配置文件, 就能和服务端联调? 代码体积和分片控制伴随着业务复杂度和文件大小的与日剧增, 如何能对所有的资源文进行更高效精细化的控制?

17 环境搭建依赖安装 npm install webpack-dev-middleware --dev npm install webpack-hot-middleware --dev npm install http-proxy-middleware --dev webpack Express Middleware Node Express 本地 server (webpack-dev-server) 利 express 搭建本地 server 环境, 同时借 webpack-dev-middleware 和 webpack-hot-middleware 为打包成的资源件提供 Web( 内存 ) 服务, 可将 webpack 和 express 集成到个 node 进程中 node-http-proxy 借 http-proxy-middleware 实现跨域通信, 本地的请求通过代理配置和 url 拦截, 都可以转到本地服务器中进请求转发

18 前后端通信 js css html fetch/xhr express middleware http-proxy server Frond-End Back-End

19 资源整合 middleware mock proxy { "dev": "node./bin/dev-server" }

20 代码分

21 JSX 的副作体积 All in JS?.js!.css!.png!.svg! 加载慢更新问题

22 all in js = all in one js

23 模块提取 Page A 6 PageA.chunk Page B 4 5 PageB.chunk 3 common.chunk App 1 2 manifest.chunk webpack.optimize.commonchunkplugin

24 动态加载 1.chunk SPA Dynamic Route 2.chunk 3.chunk require.ensure() -> Promise.all([import(...)]).then([modules])=>{}) // webpack 1 webpack2

25 代码分

26 Part3 Redux 项结构改进

27 Redux rootreducer reducer1 reducer2 reducern Previous State new State dispatch Store State combinereducers notify state change Action Action creator User Interactions Views views => action => reducer => store => react-redux => virtual dom => views

28 Rails 格 here! here! Just one module change! here! here!

29 解耦 & 紧凑 Ducks: Redux Reducer Bundles 特点概述 1 业务代码可集中归类 2 少冲突, 便多协作开发 3 易于业务功能的横向扩展 4 模块化, 可插拔式管理

30 modules Rails style container Store Ducks modular component Route Route constant container container action reducer component module reducer action component module reducer action store constant constant

31 业务组合

32 Part4 异步数据流优化

33 Data in Redux Sync: callback action state Button dispatch reducer view new dispatch Async: callback action action Button mid1 mid2 dispatch reducer

34 Redux thunk 副作 1 dispatch 使泛滥成灾 2 重复代码多, 处理流程抽象度低 3 多请求间的衔接处理规范 4 取消, 超时, 队列等复杂情况未考虑

35 Redux saga An alternative side effect model for Redux apps 优点概述 1 集中处理 redux 副作用问题 2 异步处理实现为 generator 3 类 redux-thunk 中间件 4 watch/worker( 监听 -> 执行 ) 的工作形式

36 Saga 请求事件队列

37 进步优化 Dynamic Route inject import saga/reducer connect Actvied module 按需注入

38 按需注按需注入

39 没有银弹名称特点地址 redux-thunk 原始案, 使简单 redux-saga 案完善, 颗粒级控制 redux-observable 观察者模式, 动响应 redux-promisemiddleare 保留 thunk,promise 优化 redux-loop 类 Elm 模式 redux-action-tools 抽象合理, 上简单

40 Part5 持续构建

41 格约束 npm install husky --save-dev package.json:! "scripts": {! "precommit": "npm lint",! "prepush": "npm lint",! "...": "..."! }! git commit m Keep calm and commit (githook) Husky can prevent bad commit, push and more woof! 将可预问题控制在提交前

42 组件优化 c1 SCU vdomeq 单组件优化 shouldcomponentupdate:purerender -> Immutable.js c2! SCU c3 SCU vdomeq 多组件优化 Reconciliation: key (use id instead index) c4! c5! c6 c7! c8! SCU vdomeq SCU SCU vdomeq Redux 优化 Store:Reselect Normalizr No Reconciliation needed Reconciliation needed SCU SCU vdomeq vdomeq ShouldComponentUpdate? Are virtual DOMS equivalent? react-addons-perf

43 构建优化 Tree shaking DllPlugin 速度优化体积优化 uglify parallel happy Pack

44 作流构建平台 noops tce 开发平台 git work flow git lab gerrit SCM( 构建集群 ) Jenkins 上线平台 docker nvm NPM(Sinopia) Virtualenv 代码仓库云端可控, 屏蔽差异

45 总结

46 总结构建配置工程环境 Redux 工程结构异步工作流资源发布抽象灵活紧凑中间件稳健

47 Q&A

ii Vue Bootstrap 4 ES 6 Vue Vue Bootstrap 4 ES 6 Vue 2 vue html vue html vue Vue HTML 5 CSS ES 6 HTML 5 CSS Visual Studio Code h

ii Vue Bootstrap 4 ES 6 Vue Vue Bootstrap 4 ES 6 Vue 2 vue010101.html vue010104.html vue0101 01 04 Vue HTML 5 CSS ES 6 HTML 5 CSS Visual Studio Code https://code.visualstudio.com/ Chrome XAMP Visual Studio