👨🏼‍⚖️ 🖲️ 🖲️ Boîte à outils frontale: utilitaires et fonctionnalités utiles pour accélérer le développement 🧖 📯 😗

Il est révolu le temps où le frontendender pouvait ouvrir le Bloc-notes, écrire quelques lignes de code, le vérifier dans un navigateur et le télécharger sur le serveur via FTP. Le développement d'une interface utilisateur moderne est devenu beaucoup plus compliqué. L'écosystème JavaScript se développe et évolue si rapidement qu'il est facile de s'y perdre. Dans cet article, je vais vous dire ce que l'équipe frontale de Parallels utilise pour optimiser les performances.

Je suis sûr qu'en ce moment, quelque part dans le monde, deux fournisseurs frontaux discutent sérieusement de la meilleure structure à utiliser pour le projet. Et le troisième est connecté à eux - un ardent opposant aux cadres. Il prétend que vous devez écrire en JavaScript vanille, car tous ces pribluds progressifs ne font que gonfler du code avec des dépendances inutiles et sont généralement conçus pour ceux qui ne peuvent pas programmer. Leur discussion ne devrait aboutir à rien. Une heure plus tard, tout le monde se dispersera tranquillement vers des emplois. Chacun restera dans sa propre opinion et travaillera comme avant.

À mon avis, de tels différends sont pires que des différends sur ce qui est apparu plus tôt, un poulet ou un œuf. Parce que la seule vraie solution efficace pour un développement frontal sans problème n'existe pas. Je suis d'accord que toutes les fonctions de base peuvent être effectuées sans utiliser Angular, React, Vue.js et des cadres similaires. Mais si l'objectif est la coopération et que vous créez une application à grande échelle non seulement une, mais en équipe, c'est plus facile avec eux.

Bien sûr, vous pouvez vous en passer, mais ils permettent de ne pas perdre de temps à créer une norme, de définir la structure (vous savez toujours où elle se trouve), de faciliter la routine et d'accélérer le développement. Si nous supposons que la langue est un alphabet, le cadre peut être considéré comme un guide de conversation avec des dialogues de clichés qui facilitent la création de la communication.

Dans cet article, je partagerai des outils utiles que l'équipe et moi utilisons lors de la création de l'interface utilisateur. Ils simplifient considérablement à la fois le développement conjoint et le soutien ultérieur au projet.

***
Je pense que pour commencer, il vaut la peine de parler un peu de vous. Je suis entré dans le monde de l'informatique il y a neuf ans, en 2011. Il a commencé comme une pile complète dans une petite organisation. Puis il s'est engagé dans des applications mobiles hybrides, il était responsable de la partie de la logique qui était dans WebView. Et quelques années plus tard, il s'est retrouvé dans Parallels. Ici, je travaille dans l'équipe Cloud, qui est un fournisseur de solutions Web pour tous les produits de l'entreprise. La plupart des fonctionnalités de l'entreprise nécessitent que je réfléchisse et implémente des tâches frontales. Maintenant concentré sur le développement du portail Mon compte.

Comme vous l'avez probablement déjà compris dans le texte ci-dessus, la création de l'interface de cette application web n'était pas sans cadre. Nous avons choisi Vue.js. Pour rendre agréable de travailler avec lui, ils ont également déployé des outils supplémentaires. C'est ce qui nous a permis d'optimiser au maximum le processus de développement.

Vue CLI

Cet utilitaire de ligne de commande comprend de nombreuses fonctionnalités utiles et est conçu pour un développement rapide de projet. En gros, il crée un cadre standard pour le lancement et vous permet de vous concentrer sur la création de l'application sans penser au stade initial aux outils et à la configuration de l'assemblage. Ils peuvent être adaptés aux besoins du projet ultérieurement.

Vue CLI prend en charge les principales technologies de développement Web. Des outils tels que Webpack, Babel, TypeScript, ESLint, Sass sont prêts à l'emploi. De plus, il existe un support intégré pour les tests unitaires et de bout en bout à l'aide de Mocha et Nightwatch.

Vue devtools

Une extension pour le navigateur qui vous permet de déboguer l'application en temps réel. Il a accès aux propriétés et méthodes des composants, une liste de tous les événements. Vous pouvez contrôler complètement l'état de l'application via une page Web et ne pas attendre une partition pour voir le résultat.

Fonctionne dans Chrome et Firefox. Il n'y a pas d'extension officielle pour les autres navigateurs, mais vous pouvez exécuter Vue Devtools via l'application Electron. L'outil sera alors disponible dans n'importe quel environnement.

Zeplin

Le service facilite le transfert des mises en page vers le développement. Comme dans toute grande entreprise, nous avons un ensemble de composants d'interface utilisateur. Auparavant, il se trouvait dans les fichiers PSD, et à cause de cela, l'accès était très chaotique. Et dans Zeplin il y a une telle chose, appelée le guide de style global.

Vous pouvez y collecter toutes les règles de construction des interfaces d'entreprise. Pour chaque composant de l'interface utilisateur, le code CSS est généré automatiquement - les couleurs, tailles, retraits et autres propriétés de chaque bloc qui composent l'élément sont indiqués. Autrement dit, les styles n'ont plus besoin d'être mis en œuvre à chaque fois à partir de zéro, ce qui accélère considérablement le travail. L'ère PSD est terminée.

De plus, il y a un historique de tous les changements. Vous pouvez facilement suivre comment c'était à l'étape initiale et ce qui s'est passé à la fin.

Git url comme dépendance

C'est la fonctionnalité npm que nous utilisons. Nous devions partager un ensemble de composants d'interface utilisateur afin que les collègues de l'entreprise y aient accès et puissent l'utiliser selon leurs besoins. La solution la plus évidente à ce problème est le package npm. Mais nous ne le voulions pas dans le registre public, le serveur npm local n'était pas une bonne idée, nous avons donc utilisé le bundle git + npm.

Ainsi, chaque employé de Parallels a accès à la base de code de l'interface utilisateur, et comme il s'agit de git, le problème de version est également résolu. Il n'y aura pas de problèmes dus aux mises à jour, rien ne se cassera.

Sentinelle

Pour collecter les erreurs et les journaux qui se produisent du côté client, sans attendre de plainte, nous avons connecté Sentry . Cet outil suit l'exécution du code dans les navigateurs personnalisés.

Si un bogue sort, une demande nous est automatiquement envoyée avec un rapport complet qui reflète à la fois l'essence de l'incident et la liste des actions qui l'ont précédé. Sur la base de ces données, il est très facile de trouver la raison et de tout réparer.

Cela nous a également permis de décharger un peu notre support technique, a sauvé nos collègues des appels et appels inutiles.

À propos des dangers des dépendances

Enfin, un petit conseil. Essayez d'écrire vous-même les utilitaires. Récemment, les bibliothèques avec des solutions toutes faites sont devenues très populaires. Il arrive que les appels d'offres prennent des dépendances même pour des fonctions «unifilaires» qu'ils peuvent écrire les yeux fermés. Quel est le danger? Un échec.

Une histoire instructive s'est produite il y a quatre ans. Une personne a retiré son package de 11 lignes du registre npm et a ainsi cassé environ un millier de projets. Les développeurs du monde entier ont commencé à recevoir des messages d'erreur lorsqu'ils essayaient de déployer leurs applications en raison de l'absence d'un petit module appelé "pad gauche".

Alors ne soyez pas paresseux, ne remplacez pas le code par un tas de dépendances. Comptez sur vous-même et écrivez vous-même de petits utilitaires, et n'utilisez des solutions de bibliothèque prêtes à l'emploi que pour des fonctions complexes - où elles aident vraiment à ne pas réinventer la roue.