Hixtrip FE Online

前端高级/架构师需求

请移步至v1 分支

准备

• fork 此仓库
• 根据如下要求实现相关代码
• 完成要求
  • 提交pull request
  • 提供页面截图

需求

当前已有初始化的monorepo仓库, 已经包含backend/auth-service, apps/auth-app, apps/manage-app项目。

• backend/auth-service项目已包含登陆接口、获取用户信息接口
  • 如何设计BFF层架构, 统一这两个接口，使得前端只需要调用一次登陆，返回登陆成功的token以及用户信息
• auth-app 采用React实现，manage-app 采用Vue实现
  • 需要使用auth-app 调用第一步实现的接口，并存储相关的token信息
  • manage-app 采用微前端方案内嵌 auth-app的功能 要求点：
• BFF 需要考虑微服务架构，对原有业务非侵入式
• 微前端 设计不仅仅是需要采用qiankun， 而是如何设计一套微前端的数据通讯方案

其他加分点：如何设计git flow规范, 设计vue, react, backend开发规范 etc. 或者请写出关于前端架构的思考，想法。

个人想法

1. Git Flow规范

• 主分支（master）：始终保持可部署状态。
• 开发分支（develop）：用作开发的主分支，包含下一个发布周期的所有功能。
• 功能分支（feature branches）：从develop分支创建，每个功能一个分支，完成后合并回develop。
• 发布分支（release branches）：当准备一个新版本时，从develop分支派生，允许最后的Bug修复和准备发布工作。
• 修复分支（hotfix branches）：用于快速修复生产分支的问题，并能够立即发布。
• 通过 husky + commit-msg + commitlint 配置校验我们的提交信息是否规范

2.前端开发规范

对于Vue和React这样的现代JavaScript框架，开发规范包括但不限于以下几个方面：

{0}. 项目结构：

• 组件化：确保每个组件都聚焦于一个功能。
• 逻辑复用：使用Hooks（React）或Composables（Vue3）来复用逻辑。
• 目录结构：合理组织文件和目录，使得相关功能模块易于查找。

{0}. 代码风格：

• 遵守ESLint和Prettier等工具的规范
• 通过配置.vscode文件实现不同开发人员的代码编辑器风格不统一
• 使用组件名和文件名的一致性，例如，Vue文件使用PascalCase，React通常使用PascalCase对组件命名。

{0}. 状态管理：

• 对于复杂状态管理，使用Vuex（Vue）或Redux/Context API（React）。
• 保持状态管理的逻辑简洁明了。

{0}. 性能优化：

1.最轻量化渲染

 **局部渲染**
 **滚动加载**
 **懒加载**
 **代码分割**

总的来说页面 所见即所得

2.最小化操作

 **使用useCallbakc等防止react中的过度重复渲染问题**
 **复用代码逻辑**
 **减少不必要的请求，数据所见所得**
 **防抖和节流**
 **对定时器和未使用的变量及时释放掉**

 **总的来说就是操作区域影响最小**

4. 后端开发规范

1. API 设计：
   • RESTful 或 GraphQL API 设计原则。
   • 使用适当的HTTP状态码和错误处理。
   • 数据所见即所得
2. 代码结构：
   • 分层架构，如控制器、服务、数据访问层等。
   • 适当使用设计模式如单例、工厂、策略等。
3. 安全性：
   • 使用身份验证和授权机制，如JWT、OAuth。
   • 保证数据传输和存储的安全，如使用HTTPS、加密敏感数据等。
4. 数据库:
   • 多种数据库灵活配合使用
   • 针对开发，测试，线上有独立的数据库环境
   • 数据表谨慎使用，防止出现大量数据表的情况，比如有些项目到后期数据表高达几千张，这种情况维护和迭代是相当困难的

5. 前端架构的思考

• 1. 组件化设计

  组件化是现代前端框架（如React、Vue、Angular）的核心思想。组件化设计允许开发者将UI拆分成独立、可复用的部件，每个组件负责渲染应用的一部分UI，并拥有独立的业务逻辑。这种方式的优势包括：

  • 高内聚低耦合：每个组件只关心自己的逻辑和样式，减少了组件间的依赖。
  • 复用性：相同的组件可以在不同的页面和项目中重复使用，提高开发效率。
  • 可维护性：更容易理解和维护小型、功能单一的组件。

  2. 状态管理

  随着应用复杂度的提升，组件间状态共享和管理变得越发困难。良好的状态管理策略是确保应用可维护性的关键。常见的状态管理解决方案包括Redux、Vuex、MobX等，它们提供了集中管理状态的能力。在设计状态管理时，重要的原则包括：

  • 单一数据源：所有状态都从一个地方管理和分发，易于追踪状态变化和调试。
  • 不可变性：状态的不可变性可以避免意外的副作用，保证UI和状态的一致性。
  • 分层状态：全局状态和局部状态应该清晰分离，避免过度依赖全局状态。

  3. 性能优化

  上面也提到了，总的来说也就是上面两点，围绕着最小化操作和最轻量化渲染来进行，充分利用好一些性能检测工具，如Lighthouse,Performance insights等

  4. 测试策略

  测试是保证前端应用质量的重要手段。前端测试可以包括以下几种类型：

  • 单元测试：测试单个组件或函数的行为。
  • 集成测试：测试多个组件或模块之间的交互。
  • 端到端测试：模拟用户操作，测试整个应用的流程。

  5. 构建与部署

  现代前端项目通常依赖于复杂的构建工具（如Webpack、Rollup、Vite等）来转译代码、压缩资源和优化输出。持续集成和持续部署（CI/CD）流程能够自动化测试和部署步骤，确保代码质量和快速迭代。

  6. 安全性考虑

  前端安全同样重要，比如：

  • 跨站脚本攻击（XSS）：确保渲染的数据被正确地消毒，避免执行恶意脚本。
  • 跨站请求伪造（CSRF）：采用合适的策略（如Token验证）防止CSRF攻击。
  • 依赖管理：定期更新依赖库，修复可能的安全漏洞。

  7. 代码与资源管理

  随着项目的增长，如何有效管理代码和资源成为关键：

  • 模块化：保持代码的模块化，使其易于管理和引用。
  • 代码复用：设计可复用的组件和库，减少代码重复。
  • 资产优化：对图片、字体和其他资源进行优化，以减少应用的总体大小。

  8.前端监控

  对于一个大型项目来说，不管是后端还是前端，异常错误的监控都是非常重要的，拥有一套成熟完整的监控体系，能让我们在生产环境上发生错误时，可以第一时间定位错误发生的位置与原因，从而能更快地解决问题并重新发布

  可以使用像Sentry这种开源支持私有化部署的平台

总的来说设计规范和架构需要根据具体项目的需求和团队状况灵活调整，不要过度设计！但基本原则是清晰、一致和高效。