Bonnes pratiques de développement Web de pointe issues de mon expérience dans l’industrie
Si vous ne les suivez pas déjà, envisagez de commencer tout de suite
Il y a quelques mois, J’ai commencé à travailler sur un projet de développement d’applications web d’un an, et j’ai réalisé combien de développeurs ne sont pas tout à fait conscients des meilleures pratiques industrielles dans le développement frontal des applications web. Même moi, je n’étais pas au courant de certaines pratiques. J’ai donc décidé d’écrire cet article pour partager ce que je sais et ce que j’ai appris sur les meilleures pratiques à suivre lors du développement d’une application web.
Cet article se concentrera sur les meilleures pratiques dans le développement frontal parce que la qualité du code frontal est le facteur le plus décisif d’une grande application web dans mon expérience, mais la plupart des développeurs ne suivent pas ces pratiques et développent leurs composants individuels. Si les développeurs frontaux ne suivent pas ces pratiques, il sera très difficile de gérer le code, il n’y aura pas de cohérence dans la conception, et la vitesse de l’application web aura également un impact négatif. Suivre ces pratiques rendra le code plus propre et facile à gérer, et augmentera la productivité de tous les développeurs.
Dans cet article, je vais parler des meilleures pratiques à suivre lors de la structuration de l’architecture frontale du projet, de l’écriture du code frontal et de la préparation du déploiement. Alors commençons.
Lorsque vous commencez le projet, la première chose est de structurer correctement l’architecture du code front-end. Et voici les meilleures pratiques que chaque développeur front-end du projet doit suivre.
Structurer le code de style
Dans le dossier styles, créez des dossiers séparés pour les configurations, la base, la mise en page, les composants et les pages en fonction de votre application web. Utilisez un fichier de typographie séparé pour définir les tailles et les couleurs de toutes les balises de texte HTML(telles que h1,h2,…) utilisées dans l’application web. Les couleurs doivent être définies dans un fichier de variables. Attribuez les couleurs aux variables avec des noms appropriés et utilisez ces variables lorsque les couleurs doivent être appliquées dans tout le site Web. Incluez ces fichiers de style à l’intérieur des dossiers créés de manière similaire à l’image ci-dessous.
Vous pouvez ensuite importer ces fichiers dans le fichier de style principal. Si vous utilisez scss dans votre application web, alors le fichier main.scss serait similaire au code ci-dessous.
Structurer le code JS
Basiquement, structurer votre JavaScript signifie diviser vos fichiers et séparer votre propre JavaScript de celui qui provient d’autres endroits. Les plugins, le vendeur et les scripts sont les trois principaux dossiers dans lesquels nous pouvons diviser les fichiers JS. Les plugins incluraient des morceaux de code utiles que nous utilisons partout dans la web app comme les plugins jQuery, les vendeurs seraient du code JavaScript tiers comme les Frameworks et les bibliothèques comme la bibliothèque slick, et le dossier scripts inclurait les scripts que nous écrivons pour la logique de notre web app.
.