如何基于 Modern.js 的工程方案实现研发提效

1. 如何基于 Modern.js 的工程方案实现研发提效字节跳动 - Web Infra - 徐超

2. Contents 一、Modern.js 简介二、MWA 工程方案实践三、Modern.js 三大工程方案四、总结

3. 一、Modern.js 简介

4. 前端框架关注度 2013 2013 2016 2014 2019 2020 图片来源：risingstars.js.org

5. 后端框架关注度 Node.js 框架 Static Sites 2016 2021 2017 2020 2020 2020 2019 图片来源：risingstars.js.org

6. 框架分类 Express Next Remix Nest Nuxt Blitz Fastify SvelteKit Redwood Koa、Egg ... 传统 Node.js 框架 Gatsby Astro Docusaurus Strapi 元(Meta)框架全栈框架低抽象程度垂直领域高

7. The Third Age of JavaScript One thing doing many things well instead of many things doing one thing well Author：Shawn Swyx Wang

8. Modern.js 解决的问题路由状态管理样式 API 调用客户端兼容性类型支持代码质量 SSR/SSG/ISR 构建底层技术移动⻚面网站中后台 API 服务工具库 UI 组件微前端小程序桌面应用开发调试测试部署业务场景

9. Modern.js

10. 案例场景：电商平台 PC 官网 App内 H5 Dashboard SEO、首屏渲染速度、SSR/SSG MPA、客户端兼容性 SPA、客户端路由、状态管理、BFF

11. 二、MWA（应用）工程方案实践

12. 传统开发模式

13. PC 官网

14. 端内 H5

15. 客户端兼容性手动档：自己引入 babel poly ll(core-js)

16. Dashboard

17. Dashboard 路由状态管理 BFF API React Router Redux、Mobx、 Recoil、React Query … Express/Koa/Egg

18. 代码仓库 e-commerce-website.git e-commerce-h5.git e-commerce-dashboard.git e-commerce-api.git 一个产品，四个仓库一个需求，四线作战

19. 还有更多样式方案 lint/prettier 单测/集测/E2E 调试代理 Mock 部署 TS 支持 ……

20. 使用 MWA 工程方案

21. 新建 MWA 项目 npx @modern-js/create <项目名> 演示视频

22. 微生成器微生成器：渐进式开启功能

23. 入口 pnpm new pnpm dev 演示视频

24. 开启 SSR 演示视频

25. 客户端兼容性演示视频

26. BFF 开启： pnpm new

27. SSR + BFF

28. 还有更多样式方案 lint/prettier 单测/集测/E2E 调试代理 Mock 部署 TS 支持 ……

29. 对比传统开发模式 MWA 工程方案仓库数 4 1 SSR、BFF、Router、 State Managment 手动引入单独的库、框架，功能之间割裂通过微生成器启用，一体化使用编译构建工具链需要手动修改 Webpack 配置开箱即用，支持通过简单配置修改更多开发体验支持无，靠手动集成内置大量 DX 支持

30. MWA 工程方案以「产品」为开发中心，以「一体化」为抽象理念，让前端开发人员更加专注、高效地进行业务开发。

31. 三、Modern.js 三大工程方案

32. 三大工程方案

33. 模块工程方案让开发者更加高效、专注地造轮子

34. Monorepo 工程方案多入口 Monorepo

35. 工程方案的扩展默认工程方案 MWA 自定义工程方案自定义纯前端自定义 Node.js 模块自定义文档站 Monorepo 自定义

36. 四、总结

37. 总结研发提效最佳实践灵活扩展

38. 更多资料 1. 迈向现代 Web 开发 2. Modern.js: Hello world!

39. Web Infra - Web Solutions 1. 高效能 Web 解决方案 2. 高性能 Web 解决方案 3. 工具链北京、上海、杭州、深圳

40. THANKS.