PC & Mobile

Outils pratiques pour écrire des applications JavaScript

Outils pratiques pour écrire des applications JavaScript


Le langage JavaScript étant très répandu et utilisé par toutes les applications Web frontales, il existe de nombreux outils formidables pour vous aider à écrire facilement des applications JavaScript de haute qualité. L’écosystème d’outils s’agrandit de jour en jour, et plus d’outils sont disponibles pour construire et déboguer des applications JavaScript.

ESLint est un outil de lintérisation, un outil qui vérifie les problèmes de qualité du code tels que le style, la longueur des fonctions, etc. Il est utilisé pour maintenir la structure du code de formatage cohérente dans toute la base du code et pour éliminer les problèmes de formatage incohérent, de mauvaise utilisation du code JavaScript comme double égal et triple égal, et beaucoup d'autres choses. Ils peuvent également être utilisés pour identifier les erreurs de syntaxe et les bogues simples. ESLint a une énorme liste de règles qu’il vérifie et il est configurable avec un fichier texte.

Pour exécuter ESLint, nous pouvons l’installer sur nos ordinateurs via NPM, soit par projet, soit globalement. La configuration peut être effectuée avec un fichier contenant la liste des règles à activer ou à désactiver en JSON. Le fichier s'appelle .eslintrc et la règle est définie par projet. Dans le fichier, nous avons quelque chose comme:

{
"règles": {
"semi": ["error", "always"],
"citations": ["error", "double"]
}
}

définir les règles d'activation ou de désactivation et définir le niveau de reporting. Erreur signifie que cela sera signalé comme une erreur. Il peut également être défini comme un Attention ou éteint complètement avec le de option. Il existe également des règles prédéfinies, comme le eslint: recommandé règles intégrées dans le package ou règles de style AirBNB pouvant être installées en installant le package theeslint-config-airbnb. Les détails se trouvent à l'adresse https://www.npmjs.com/package/eslint-config-airbnb pour le package AirBNB et les règles recommandées par défaut d'ESLint se trouvent à l'adresse https://eslint.org/docs/rules/.

Comme nous pouvons le voir à l’adresse https://eslint.org/docs/rules/, il existe une multitude de règles dans le style du code JavaScript. Il existe des règles liées à l’espacement, aux points-virgules, aux tableaux, aux nouvelles lignes, aux indentations, au casse des variables, aux virgules, etc. Il existe une liste énorme de règles que vous pouvez modifier.

Lorsque vous exécutez ESLint, toutes les règles que vous avez activées sont examinées et les fichiers sont vérifiés. Ensuite, vous obtiendrez une liste des problèmes de style qu'il identifie et vous en informerons. Vous pouvez également le configurer pour qu'il les corrige automatiquement afin que vous n'ayez pas à le faire. Il peut tout réparer automatiquement, mais il fera de son mieux pour le faire.

La console de développement du navigateur est le meilleur ami du développeur front-end. Il vous permet d'inspecter chaque élément pour voir ses styles calculés, c'est-à-dire les styles appliqués aux éléments provenant de fichiers CSS externes, de styles en ligne et de balises de style. Il vous permet de voir le document HTML qui est rendu à partir de JavaScript et de regarder l’arborescence DOM changer en même temps que la page. C’est formidable, car cela vous permet de voir ce qui change lorsque la page est modifiée. Vous pouvez également suspendre l'exécution ou définir des points d'arrêt afin d'avoir le temps d'examiner de près le changement souhaité avant son retrait.

Il est facile de manipuler les styles CSS avant d’apporter des modifications à votre code. Cela vous fait gagner beaucoup de temps, car vous ne devez pas continuer à jouer avec le code et à l'actualisation jusqu'à ce que vous voyiez ce que vous voulez à l'écran. Pour ce faire, dans la console de développement Chrome, il suffit de cliquer avec le bouton droit de la souris sur l'élément souhaité, puis de cliquer sur Inspecter. Cela devrait nous amener à l’onglet Eléments, puis là-bas, l’onglet Styles apparaît au bas de l’écran. Vous pouvez y entrer ce que vous voulez et voir ce que vous obtenez immédiatement. Les modifications apportées ici ne sont pas enregistrées dans votre code. Par conséquent, si vous souhaitez les rendre permanentes, vous devez les copier dans votre code. Si vous avez semé le trouble et que vous ne pouvez pas revenir à ce que vous voulez, vous pouvez simplement actualiser et recommencer. Il contient également un diagramme du modèle de boîte pour les marges et les marges et présente également tous les écouteurs d'événement attachés à l'élément via l'onglet Ecouteurs d'événement, juste à côté de l'onglet Styles. L’onglet Propriétés contient également toutes les propriétés de l’élément que vous inspectez. C’est formidable, car vous n’avez pas besoin d’ajouter un journal de console ni d’exécuter de commande dans la console pour obtenir les informations. L'onglet Éléments vous permet également de manipuler directement le code HTML des éléments. Ceci est très pratique car vous pouvez à nouveau manipuler la structure de la page avant de vous engager à modifier quoi que ce soit dans votre code.

Dans l'onglet Console de la console de développement Chrome. Vous pouvez taper des commandes et voir la sortie renvoyée. La sortie du console.log Les instructions que vous avez insérées dans votre code sont également affichées ici lors du chargement de la partie du code. Si vous voulez inspecter les propriétés des variables globales, vous pouvez entrer le nom des variables globales ici et voir le vidage du contenu de la variable globale que vous souhaitez inspecter. Il existe également l’option Conserver le journal pour conserver la sortie du journal après l’actualisation, et l’option Saisie automatique à partir de l’historique pour afficher ou non le complétement automatique du code que vous saisissez dans la console.

L'onglet Sources de la console de développement Chrome vous permet de voir le code intégré de votre application Web. Il vous permet également de définir des points d'arrêt pour créer la console et afficher la structure finale du fichier une fois le code compilé. Nous pouvons voir les fichiers CSS et JavaScript construits à partir d'ici.

L'onglet Réseau est également un onglet important de la console de développement Chrome. Il montre tout ce qui a été téléchargé et téléchargé entre votre application et le serveur. Toutes les requêtes HTTP effectuées par votre application sont affichées ici. Lorsque vous cliquez sur une entrée à gauche de l'onglet, vous voyez tous les détails de la demande HTTP faite par votre application. Tous les éléments, de l'URL à l'origine de la demande, aux en-têtes de demande et de réponse de la demande et aux paramètres envoyés au serveur sont tous affichés ici. En outre, l’état de la demande est également visible ici. Par conséquent, si nous pouvons voir si la demande a été effectuée avec succès et le code de réponse si la demande l’a transmise au serveur. L'onglet Aperçu et réponse sur le côté droit affiche le corps de la réponse du serveur. Cela fonctionne pour tout type de réponses. L'aperçu en affiche une version formatée, tandis que l'onglet Réponse affiche la version brute. Enfin, l'onglet Timing nous permet de voir le temps nécessaire pour effectuer une requête entre le client et le serveur. Le graphique ci-dessus indique également le calendrier des demandes. Vous pouvez les filtrer par différents types de demandes. Les plus importantes pour la plupart des applications Web sont l'onglet XHR qui affiche uniquement les demandes AJAX. Nous souhaitons également parfois consulter les onglets JS, CSS, Img ou Media pour voir si les scripts et le média sont téléchargés correctement. Il y a aussi l'onglet WS pour vérifier la communication WebSockets.

L'onglet Réseau nous permet également de simuler différents types de demandes allant de demandes normales à Internet mobile lent et rapide. Nous pouvons même couper Internet sans fil ou déconnecter de notre connexion Internet sans fil pour voir ce qui se passe lorsque notre navigateur est hors ligne.

L’onglet Performances de la console de développement de Chrome nous permet de décrire les performances de nos pages. Nous pouvons consulter cet onglet de la console Chrome pour connaître le temps de chargement de différentes choses, telles que le téléchargement de scripts, le rendu de la page, etc. Ceci est utile pour identifier les goulots d'étranglement des performances avec notre code.

L’onglet Application de la console de développement de Chrome est toujours très utile. Nous pouvons voir ce qui est stocké dans Stockage local, Stockage de session et les cookies de notre ici. En outre, nous pouvons les modifier et voir l'impact que cela a sur notre application. Nous pouvons également effacer tout le stockage de l'application actuelle chargée et recommencer sans passer par les paramètres du navigateur. C'est pratique pour déboguer tous les problèmes liés au stockage.

Pour auditer les performances et l'accessibilité de notre application, accédez à l'onglet Audits de la console et modifiez les paramètres pour voir ce qui se passe lorsque nous modifions différents paramètres pour simuler le type de périphérique dans lequel l'application Web est chargée. Nous pouvons modifier la bande passante d'Internet mobile lent à Internet rapide classique. Nous pouvons également vérifier si notre application Web progressive est réellement conforme aux exigences d’une application Web progressive.

En outre, une vue réactive permet de simuler l’aspect de votre page si vous la regardez à partir de différents appareils mobiles. Il a quelques téléphones et tablettes à choisir par défaut.

Comme nous pouvons le constater, la console de développement Chrome est l’un des meilleurs outils de débogage et de simulation du marché. D'autres navigateurs tels que Firefox et Edge ont des fonctionnalités similaires mais peuvent avoir des noms différents. Toutefois, la console de développement Chrome est l’un des outils de développement front-end les plus complets du marché. Les autres navigateurs à base de chrome devraient aussi avoir quelque chose comme ça.

Console développeur Chrome

Si vous écrivez des applications avec des frameworks tels que React, Vue.js ou Angular, vous devez utiliser les outils de ligne de commande de ce framework pour construire votre projet. De plus, React s'appelle Create React App. L’outil de Vue.js est appelé Vue CLI et l’outil de Angular CLI est appelé Angular CLI. Les 3 frameworks disposent d'outils pour démarrer votre projet et l'intégrer au produit final. Ils prennent également en charge leur construction dans différents environnements, de sorte que vous puissiez placer vos variables d’environnement dans un environnement. .env fichier pour le CLI de React Vue. Ils peuvent lire les fichiers de variables d'environnement en fonction de l'environnement. Pour Create React App, toutes vos clés de variable d'environnement doivent commencer par REACT_APP et pour Vue CLI, ils doivent tous commencer par VUE_APP . Pour la construction, les deux peuvent spécifier l’environnement dans lequel vous pouvez le construire. Pour Angular, nous pouvons placer les variables spécifiques à l’environnement dans leurs propres fichiers et les modifier. angular.json d'ajouter les variables d'environnement lors de la construction. C’est très pratique car nous n’avons pas besoin d’ajouter d’outils supplémentaires pour nous en occuper.

Les CLI Vue et Angular peuvent également exécuter des scripts pour ajouter du code afin d’ajouter différentes choses. Pour Angular, diverses bibliothèques ont fourni une ng ajouter commande d'ajouter leurs propres bibliothèques dans nos applications. Par exemple, le magasin NgRx nous permet de lancer ng add @ ngrx / store pour l'ajouter à l'application. Et pour Vue.js, diverses bibliothèques telles que la bibliothèque Vue Electron Builder qui nous permet de créer des applications de bureau avec Vue.js nous fournissent vue add constructeur d'électrons commande pour ajouter leur code à notre propre base de code. La bibliothèque est située à l'adresse https://github.com/nklayman/vue-cli-plugin-electron-builder.

Certains outils de ligne de commande ont leurs propres fonctionnalités spécialisées. Par exemple, Vue CLI peut créer du code dans des composants Web avec une seule commande avec vue-cli-service build - cible wc --inline-vue . La CLI angulaire peut créer les différents composants avec une commande comme ng g composant homePage créer un composant appelé Page d'accueil .

Enfin, tous les outils créeront vos applications pour une utilisation en production en réduisant et en obscurcissant votre code afin que les utilisateurs ne puissent pas voir le code à la vue et qu'il soit aussi petit que possible.

Comme nous pouvons le constater, l’utilisation d’outils de ligne de commande dans différents cadres est la manière dont les nouvelles applications frontales sont créées à l’heure actuelle. C’est bien mieux que de créer manuellement l’échafaudage de nos applications, ce qui est très fastidieux et sujet aux erreurs.

JSFiddle est un site Web idéal pour jouer avec le code JavaScript frontal, comme son nom l'indique. Il vous permet d’écrire rapidement du code HTML, CSS et JavaScript frontal sur la page d’accueil. Il vous permet également d’ajouter du code standard pour les bibliothèques et les frameworks les plus populaires tels que React, Vue, jQuery et Bootstrap directement sur la page d’accueil. Les préprocesseurs CSS tels que SCSS sont également pris en charge et peuvent être activés en un clic. Vous pouvez voir la sortie dans le volet Résultats dans le coin inférieur droit de l'écran. C’est formidable, car cela nous permet de créer rapidement des prototypes et des extraits et de les sauvegarder si nous créons un compte.

JSFiddle

JSBin est un autre outil permettant de jouer avec le code JavaScript. Il vous permet d’entrer HTML, CSS et JavaScript et d’ajouter des bibliothèques et des frameworks populaires tels que Angular, React, Vue, moment.js, jQuery et bien d’autres. Il existe également un volet de sortie pour voir les résultats et avec la version Pro, nous pouvons avoir des extraits privés et des sauvegardes Dropbox.

Le formateur et validateur JSON, situé à l'adresse https://jsonformatter.curiousconcept.com/, est pratique pour formater les données JSON dans un format d'arborescence lisible par l'homme. C’est un excellent moyen de visualiser les données de requête et de réponse JSON que nous devons souvent traiter.

Formateur JSON

Le réseau de développeurs Mozilla est l’un des sites Web de documentation les plus complets pour le développement frontal. Il contient à peu près tout ce que nous avons besoin de savoir sur HTML, CSS et JavaScript dans un seul et même site Web. Il est pratique de savoir quelles API sont compatibles avec quels navigateurs. En outre, il possède une gamme complète de fonctions incluses dans chaque API. HTML5 contient de nombreuses nouvelles API, ce qui en fait l’un des meilleurs sites Web pour rechercher les API dans une fonction. La liste complète des API couvre de nombreuses colonnes et chaque colonne est très haute. Il y a donc beaucoup de choses, y compris expérimentales.

Vous trouverez également dans la section Références et Guides une longue liste de tutoriels pour tout apprendre sur le développement en amont. Il a tout, du HTML de base aux animations, en passant par le développement de base avec des frameworks tels que Django et Express. En outre, il vous fournit des exercices et des projets à faire pour apprendre le matériel couvert. C'est en fait plus complet que les livres que vous payez dans la librairie pour en apprendre davantage sur le développement Web.

Les URL des sections du réseau de développeurs Mozilla sont les suivantes:

MDN JavaScript Docs
Didacticiels MDN
Afficher plus

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Articles similaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Bouton retour en haut de la page
Fermer