Get best of the week

10 principles of scalable front-end projects

Web applications have come a long way since their inception. We know what important role JavaScript plays in the web and what limitless possibilities we have when choosing frameworks and technologies. Each framework has its own advantages and disadvantages, but almost all use some kind of basic methodology. Tools such as create-react-app, next.js, vue-cli and others are really useful for the initial formation of the project and its structure, but otherwise you are free to create the application in accordance with your preferences and requirements of the project.

This article contains a list of principles that will be useful when creating web applications using React and Vue.. They will help you set the right direction and streamline development. Most of these principles apply to the creation of any software, but still the list is designed specifically for web applications.

1. Design components, not screens


  • Try to encapsulate the entire logic of the component so that it can be easily displayed anywhere, for example, on different screens and in different sections.
  • All CRUD operations apply for necessary data to controllers / suppliers. This data is then transferred to the components that are associated with them. One common approach is to use redux / vuex: the data is stored in the storage and is considered true, and the containers retrieve the necessary information.

2. Separate presentation layers from business logic / management


Not all components need a connection to storage, a server API, or some other service. When you make components “indifferent to the data source”, the possibilities for reusing them greatly increase.

3. Use the standard data extraction method.


  • This principle illustrates wonderfully rest-hooks , which encourages the creation of a simple and understandable structure of API calls.
  • For some projects, using calls with explicit data extraction is sufficient. But if you work with numerous sources and relationships, then abstracting the server API will help you.

4. Use a common user input strategy


  • These include forms, label selection, validation and validation, error conditions.
  • : antd.
  • UI-, .

5.



6. Storybook


Storybook is a great tool for interacting with designers and discussing functionality. It serves as a “style guide” for your application.

7. Use linters and formatters


  • Examples of linter: ESLint, stylelint .
  • Most quick start tools, such as create-react-app, will pre-install linters for you. But if you are working with the old code base, then linters can be useless.
  • They help in finding bugs, but can also be used to style the code that the team writes. This reduces the cognitive load when working on features that you received from your colleagues.
  • The sonarJS eslint plugin will help improve the quality of the code by checking its logical structure.
  • prettier — . . .

8.


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

9.


:


- — commitlint


10. Support changelog


At the very beginning of any project, it is usually easy to keep all changes in memory. As the project grows, changelog may be the main “repository", where notable changes to the code base will be described. Months and even years will pass, and it will still be relevant to you.

The list goes on and on


Yes, here you can add many more points, depending on the scope of your project and the technologies used. The above will be enough to radically improve many front-end applications. Almost every principle can be applied gradually and depending on the priorities that you and your team will determine. So you don’t need to think about how to apply everything at once :)

More articles:


All Articles