Appearance
title: React 组合式开发实践：打造企业管理系统五大核心模块
简介
基于 React 的企业管理系统开发经验，带你学习如何抽象复杂业务逻辑，帮助团队实现效能提升
说明
小册介绍
经过了刀耕火种的以 jQuery 为代表的插件化时代，走过了曙光初现的以 Sea.js 为代表的模块化时代，前端终于迎来了以 React、Angular、Vue 为代表的组件化时代。站在 2018 年这个时间节点上，前端开发从未如此简单也从未如此复杂过。简单的是 JavaScript 逐渐接管了所有的 DOM 操作，前端工程师越来越少地需要与复杂难懂的 DOM API 直接打交道。复杂的是 JavaScript 本身发展出了越来越多的新特性，甚至是超集 TypeScript，这些变化都让习惯了单兵作战的前端开发开始需要一套庞大的工具链做支持，否则将无法适应多变的业务需求。
随着 MVVM 框架、组件库、构建工具等前端基础设施建设的逐渐成熟，前端开发开始同时向着多个细分领域全面发力。横跨多端的大前端、工业化量产的中后台系统、代表未来的数据可视化，每一个垂直领域都蕴含着巨大的机遇与挑战。
当我们回归初心，在前后端分离已成既定事实的今天，前端应用需要承担的责任也越来越重。布局、权限、菜单、通知、多语言（国际化）等等这些传统应用中由后端主导的模块已经悄悄深入了前端应用的内部，如何系统化地架构这些功能成为了每个前端工程师都必须补上的一课。
集中管理的配置项与方便灵活的代码究竟哪个更适合用来组织企业管理系统中的各个模块？正确地区分临时性的 UI 状态与持久化的应用数据对于理清复杂应用的数据流有着怎样重要的作用？在 MVVM 框架的帮助下如何摆脱传统前端应用中命令式的编码方式做到真正意义上的数据驱动视图？等等的这些问题我们都会在小册中结合具体业务场景逐一进行探讨。
另外，在这本小册中我们还将一起回顾前端开发一路走来的发展历程，并以企业管理系统这样一个困扰前端开发多年的历史问题为切入点，深入剖析页面布局、权限管理、菜单路由、消息通知、多语言支持等五个模块的最佳实践。
组件化开发作为前端工程师入门后的第一课，很大程度上解决了 UI 层面代码复用的问题。但一个完整的前端应用并不等于 UI 组件的简单拼凑，如何站在应用的高度去看待并解决前端应用在开发过程中的一系列问题帮助团队提升开发效率，将成为希望继续进阶的前端工程师的下一课。
最后，在传统的行业认知中，前端被认为是非常薄的一层，上不能影响后端数据，下不能改变产品设计。作为原始数据与终端用户之间的连接层，在一个完整的产品链路中能够完全由前端主导的部分似乎并不多。但随着业务需求的不断发展，越来越多的重型前端应用被开发了出来，在小册的最后让我们以「可视化页面搭建工具」为切入点，一起来看一下由前端主导的应用可以为业务方提供多大的便利又面临着怎样的挑战。
作者介绍
诚身 阿里巴巴旗下 Lazada Group 高级前端经理，曾任阿里巴巴集团数据技术及产品部资深前端工程师。知乎 pure render 专栏核心作者，JavaScript 深度学习框架 deeplearning-js 作者。现居新加坡，专注东南亚电商，帮助多家东南亚独角兽公司从零搭建前端团队，统一开发规范并制定开发流程。
名人推荐
你会学到什么
- 从插件化到模块化再到组件化前端下一次的进化方向是什么
- UI 组件越写越熟练项目的开发效率却并没有质的提升问题在哪里
- 如何使用组合式开发的思想拯救交互与体验都仍停留在上个世纪的企业管理系统
- 开发基于 React 16.0 & webpack 4.0 的前端项目脚手架
- 企业管理系统的通用页面布局方案
- 页面级别基于用户角色的前端权限系统
- 自动匹配当前路由的无限级菜单设计
- 系统消息与全局用户操作通知设计
- 搭建国际化的支持多语言切换的企业管理系统
- 从静态页面到动态可交互页面前端可视化页面搭建工具的前世今生
推荐大家在读小册的同时，再多花点时间将小册中提到的五个示例项目 clone 到本地跑一遍并阅读下相关的源码，相信会有更多的收获。
适宜人群
本小册适合于以下前端工程师学习参考：
- 1 ~ 3 年工作经验，希望深入学习前端应用架构
- 对 React 相关生态有一定了解，希望深入学习 React 高级用法
- 希望学习企业管理系统（中后台应用）开发方案，了解如何以抽象复杂业务需求的方式加快团队开发速度
- 对组件化开发有一定实践经验，希望了解组件化开发存在的问题及解决方案
更新记录
- 2018.09.05
修改标题：前端进阶：React 企业管理系统开发指南 ->
React 组合式开发实践：打造企业管理系统五大核心模块 - 2018.08.05
增加小册「总结」，总结小册内容及想传达给读者的核心思想，提供 React 学习路线图，回复读者反馈及致谢。 - 2018.08.01
更新「实践篇 03：页面布局方案」、「实战篇 05：菜单匹配逻辑」，增加对于该小节中涉及的知识点详解。 - 2018.07.31
更新「实践篇 03：页面布局方案」、「实战篇 04：权限管理机制」、「实战篇 05：菜单匹配逻辑」、「实战篇 06：消息通知设计」、「实战篇 07：多语言支持」，增加该小节与「组合式开发」之间的关系，并结合案例详解「组合式开发」中的核心概念。 - 2018.07.27
更新「实战篇 01：开发前准备」，增加简单框架选型介绍，小册建议学习方式及拓展学习资料。 - 2018.07.24
更新「继往开来：可视化页面搭建工具」，增加「动态路由」部分。 - 2018.07.23
更新「小册介绍」，增加对于「进阶」一词的详细解释及其他文字优化。
购买须知
- 本小册为图文形式内容服务，共计 11 节，上线时间为 2018 年 7 月 10 日；
- 购买用户可享有小册永久的阅读权限；
- 购买用户可进入小册微信群，与作者互动；
- 掘金小册为虚拟内容服务，一经购买成功概不退款；
- 掘金小册版权归北京北比信息技术有限公司所有，任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表，违者将依法追究责任；
- 在掘金小册阅读过程中，如有任何问题，请邮件联系 xiaoce@xitu.io