Blog

Blog

PHODAL

如何创建你的应用脚手架

应用脚手架是一个项目的重中之重,决定了整个项目的基调。

最近,因为新项目的需要,我正在创建一个 React 的脚手架(GitHub:https://github.com/phodal/react-boilerplate )。

我已经很长一段时间没有写 React 了,上一次写 React 可能是在 2015 年,好在 2017 年,我还写过 React Native——主要工作内容是在迁移 Cordova 的原生部分到 React Native。所以,大抵我熟悉在部分只剩下 React 本身了。

于是乎,我开始着手准备新的脚手架,顺带的整理出相关的步骤:

  1. 选定框架
  2. 创建 hello, world
  3. 咨询最佳实践
  4. 完善工程实践
  5. 尝试项目实践
  6. 做下抉择
  7. 进一步深入
  8. 持续改进
  9. 代码生成(可选)

等我有了更充足的时间,我就可以把它做成一个 Checklist。

选择框架

嗯,对于多数的组织来说,最合适的创建应用的套路是:选择框架而非自己造一个。所以,选择你的框架,然后再进入到下一步吧。

创建 hello, world

打开浏览器,然后:

  • 使用官方提供的指南
  • 寻找社区的指南

对应的也会有:

  • 使用官方提供的 CLI
  • 使用社区提供的脚手架

既然我们选择了一个脚手架,我们也需要更新脚手架,所以并没有多大的影响。

咨询最佳实践

打开聊天工具,然后:

  • 寻求有经验的『专家』意见
  • 咨询『年轻』人
  • 阅读相关实践文章

注:

越是年轻的一代,对于新技术也就越有追求;一方面是技术热情,一方面则是新的机会。如我对于 React 的记忆,可能还在几年前的 Flux,而这个世界已经经历了 Redux,Dva 等。

完善工程实践

打开 GitHub,然后

  • 依靠过往经验
  • 阅读开源项目的 package.json
  • 阅读开源项目的配置文件
  • 学习官方的相关规范

注:

阅读开源项目的 package.json,真的是一个非常棒的 IDEA。诸如我从同事的项目里,了解到了 plop。除此,还有阅读开源项目的配置文件,只需要打开项目,从以及各种以点(.)开头的文件,诸如于 .npmignore,又或者是 *file,就可以了解到它们使用到了哪些神奇的东西。

尝试项目实践

打开 IDE,然后

  • 寻找 Todo App
  • 阅读流行的开源项目(如前端的组件库)
  • 参考组件库
  • 阅读一下 awesome-xxx

注:

对于一个框架来说,它们的 Todo APP 往往会有各种 fancy 的用法,比如 React Hooks 的 Todo,又或者是 Clean Architectrue 下的 TOdo。但是这些 Todo 往往有些时候,不是那么接地气。所以,需要找一些流行的开源项目。

做下抉择

拿上个骰子,然后:

  • A 还是 B。

注:

对于自由度的框架,如 React,你总会去纠结于 CSS in JS or CSS Modules,到底是 React Router DOM 还是 Reach?这个问题真的很难,特别是当你询问了一堆专家的意见之后,你会更加纠结。所以,这个时候,你会想着去做一个兼容方案。

等你决定完开发用的框架之后,你还要纠结测试框架呢?

进一步深入

抄起键盘,接着:

  • 表单及表单验证
  • 动画
  • HTTP 请求管理
  • 授权

注:

表单验证是最复杂的地方,于是要做的决策也就更多了。而诸如 Angular 有 Reactive Form 和普通的 Model Form,还得选择。而要是像 React 这样的框架,在设计上就会有更多的选择了——即可以自己设计,还可以选择框架。

代码生成(可选)

嗯,无论如何,你需要生成你的模板代码。如果你还没有,那么请考虑这部分的内容。

持续改进

剩下的话,我们就需要持续改进我们的脚手架了。

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签