Get best of the week

10 principes de projets frontaux évolutifs

Les applications Web ont parcouru un long chemin depuis leur création. Nous savons quel rôle important JavaScript joue sur le Web et quelles possibilités illimitées nous avons lors du choix des cadres et des technologies. Chaque cadre a ses propres avantages et inconvénients, mais presque tous utilisent une sorte de méthodologie de base. Des outils tels que create-react-app, next.js, vue-cli et d'autres sont vraiment utiles pour la formation initiale du projet et sa structure, mais sinon vous êtes libre de créer l'application en fonction de vos préférences et exigences du projet.

Cet article contient une liste de principes qui seront utiles lors de la création d'applications Web à l'aide de React et Vue.. Ils vous aideront à définir la bonne direction et à rationaliser le développement. La plupart de ces principes s'appliquent à la création de tout logiciel, mais la liste est toujours conçue spécifiquement pour les applications Web.

1. Concevoir des composants, pas des écrans


  • Essayez d'encapsuler toute la logique du composant afin qu'il puisse être facilement affiché n'importe où, par exemple, sur différents écrans et dans différentes sections.
  • Toutes les opérations CRUD s'appliquent aux contrôleurs / fournisseurs pour les données nécessaires. Ces données sont ensuite transférées aux composants qui leur sont associés. Une approche courante consiste à utiliser redux / vuex: les données sont stockées dans le stockage et considérées comme vraies, et les conteneurs récupèrent les informations nécessaires.

2. Séparez les couches de présentation de la logique / gestion d'entreprise


Tous les composants n'ont pas besoin d'une connexion au stockage, à une API de serveur ou à un autre service. Lorsque vous rendez des composants «indifférents à la source de données», les possibilités de les réutiliser augmentent considérablement.

3. Utilisez la méthode d'extraction de données standard.


  • Ce principe illustre à merveille les hooks de repos , ce qui encourage la création d'une structure simple et compréhensible d'appels d'API.
  • Pour certains projets, l'utilisation d'appels avec une extraction de données explicite est suffisante. Mais si vous travaillez avec de nombreuses sources et relations, l'abstraction de l'API du serveur vous aidera.

4. Utilisez une stratégie d'entrée utilisateur commune


  • Il s'agit notamment des formulaires, de la sélection des étiquettes, de la validation et de la validation, des conditions d'erreur.
  • : antd.
  • UI-, .

5.



6. Storybook


Storybook est un excellent outil pour interagir avec les concepteurs et discuter des fonctionnalités. Il sert de «guide de style» pour votre application.

7. Utilisez des linters et des formateurs


  • Exemples de linter: ESLint, stylelint .
  • La plupart des outils de démarrage rapide, tels que create-react-app, préinstallent des linters pour vous. Mais si vous travaillez avec l'ancienne base de code, les linters peuvent être inutiles.
  • Ils aident à trouver les bogues, mais peuvent également être utilisés pour styliser le code que l'équipe écrit. Cela réduit la charge cognitive lorsque vous travaillez sur des fonctionnalités que vous avez reçues de vos collègues.
  • Le plugin sonarJS eslint contribuera à améliorer la qualité du code en vérifiant sa structure logique.
  • prettier — . . .

8.


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

9.


:


- — commitlint


10. Support changelog


Au tout début d'un projet, il est généralement facile de conserver toutes les modifications en mémoire. Au fur et à mesure que le projet se développe, le journal des modifications peut être le principal «référentiel», où des modifications notables de la base de code seront décrites. Des mois et même des années passeront, et cela restera pertinent pour vous.

La liste se rallonge de plus en plus


Oui, ici, vous pouvez ajouter beaucoup plus de points, selon la portée de votre projet et les technologies utilisées. Ce qui précède sera suffisant pour améliorer radicalement de nombreuses applications frontales. Presque tous les principes peuvent être appliqués progressivement et en fonction des priorités que vous et votre équipe déterminerez. Vous n'avez donc pas besoin de réfléchir à la façon de tout appliquer en même temps :)

More articles:


All Articles