Get best of the week

可扩展前端项目的10条原则

Web应用程序自诞生以来已经走了很长一段路。我们知道JavaScript在网络中扮演什么重要角色，以及在选择框架和技术时我们拥有无限的可能性。每个框架都有其自身的优缺点，但是几乎所有框架都使用某种基本方法。诸如create-react-app，next.js，vue-cli之类的工具以及其他工具对于项目的初始形成及其结构确实很有用，但否则，您可以根据项目的偏好和要求自由地创建应用程序。

本文包含一些原则，这些原则在使用React和Vue创建Web应用程序时将非常有用。。他们将帮助您确定正确的方向并简化开发。这些原则中的大多数都适用于任何软件的创建，但是清单仍然是专门为Web应用程序设计的。

1.设计组件，而不是屏幕


  • 尝试封装组件的整个逻辑，以便可以轻松地将其显示在任何地方，例如，在不同的屏幕和不同的部分。
  • 所有CRUD操作均向控制器/供应商申请必要的数据。然后，此数据将传输到与其关联的组件。一种常见的方法是使用redux / vuex：数据存储在存储器中并认为是真实的，并且容器检索必要的信息。

2.将表示层与业务逻辑/管理分开


并非所有组件都需要连接到存储，服务器API或某些其他服务。当您使组件“对数据源无所谓”时，重用它们的可能性就会大大增加。

3.使用标准数据提取方法。


  • 该原理很好地说明了休息钩子，它鼓励创建一个简单易懂的API调用结构。
  • 对于某些项目，使用带有显式数据提取的调用就足够了。但是，如果您使用大量的源和关系，那么抽象服务器API将对您有所帮助。

4.使用通用的用户输入策略


  • 这些包括表格，标签选择，确认和确认，错误条件。
  • : antd.
  • UI-, .

5.



6. Storybook


故事书是与设计师互动和讨论功能的绝佳工具。它充当您的应用程序的“样式指南”。

7.使用短绒棉签和格式化程序


  • 短绒的示例：ESLint，stylelint。
  • 大多数快速启动工具（例如create-react-app）都会为您预装棉绒。但是，如果您使用的是旧的代码库，则linter可能没有用。
  • 它们有助于发现错误，但也可以用于设置团队编写的代码样式。当您从同事那里获得功能时，这可以减轻认知负担。
  • 该sonarJS eslint插件将有助于通过检查其逻辑结构，提高代码的质量。
  • prettier — . . .

8.


  • .
  • CSS- CSS-in-JS.
  • .

9.


:


- — commitlint


10.支持变更日志


在任何项目的开始，通常很容易将所有更改保存在内存中。随着项目的发展，变更日志可能是主要的“存储库”，其中将描述代码库的显着更改。几个月甚至几年都会过去，并且仍然与您相关。

清单不停


是的，根据您的项目范围和所使用的技术，您可以在此处添加更多点。以上内容足以从根本上改善许多前端应用程序。几乎每个原则都可以逐步应用，具体取决于您和您的团队确定的优先级。因此，您无需考虑如何一次应用所有内容：）

More articles:


All Articles