Catégories
Astuces et Design

Guide du débutant – SitePoint

Voici une introduction aux outils que tous les développeurs Web doivent connaître, des commandes Bash de base aux modules complémentaires de navigateur Web qui débogueront vos applications Web et automatiseront les tests de navigation, en plus des pipelines d'intégration continue.

Gardez à l'esprit que cet article est destiné à couvrir les outils que le plus grand nombre de développeurs Web partageront un besoin d'apprendre, pas une liste complète. Alors ne vous fâchez pas si votre outil préféré n'est pas là! (Par exemple, j'ai intentionnellement omis les constructeurs de sites Web WYSIWYG 😉.)

Ligne de commande

La ligne de commande est une interface qui vous permet d'interagir avec le système d'exploitation via une console, et elle peut aller très long façon de faciliter et même d'automatiser les tâches fastidieuses et routinières

Vous ne devriez pas avoir peur de vous salir les mains avec la console. Le temps que vous passerez à apprendre certains scripts de base sera certainement payant.

Outils Bash (Linux, macOS)

Bash est le shell le plus populaire pour les systèmes d'exploitation «de type Unix» tels que Linux et macOS.

Votre maîtrise – ou au minimum, une connaissance de base – du shell Bash peut vous sauver beaucoup de temps. Des choses comme localiser et renommer des fichiers, rechercher et remplacer des chaînes de texte, peuvent littéralement prendre quelques secondes avec des commandes comme locate et grep avec sed, respectivement.

Devenez compétent en Bash en lisant le Guide de démarrage rapide de Bash.

PowerShell (Windows)

PowerShell est le cadre d'automatisation des tâches et de gestion de configuration «bash-like» de Microsoft. Il est livré avec une ligne de commande similaire à celle de (Invite de commandes) (https://en.wikipedia.org/wiki/Cmd.exe (CMD)), mais il comprend également des modules et un langage de script approprié. Mais gardez à l'esprit que le script est PowerShell rien comme l'écriture de scripts dans Bash. À quelques exceptions près, les commandes ont des noms entièrement différents, ce qui signifie que vous devrez les apprendre séparément.

PowerShell 7 (en cours de développement) est destiné à succéder à PowerShell Core 6, qui a été introduit en tant que successeur de PowerShell 5. Qui sait, les gens de Microsoft pourraient comprendre la dénomination par la version 8 ou 9. 🤷‍♂️

Cygwin (également Windows)

Vous avez manqué le Bash sur Windows? Ne le manquez plus! Pour ceux d'entre vous habitués à la puissance du shell Bash mais travaillant régulièrement sur un environnement Windows, il existe une alternative.

Cygwin est un environnement compatible POSIX qui s'exécute nativement sur Microsoft Windows, où le répertoire d'installation se comporte comme la racine et suit une disposition de répertoire similaire à celle trouvée dans les systèmes de type Unix.

Éditeurs de code

Vous savez presque certainement ce qu'est un éditeur de code source, mais vous ne connaissez peut-être pas certaines de leurs fonctionnalités puissantes, telles que l'intégration git.

Il existe des environnements de développement intégrés (IDE) tels que NetBeans et Eclipse – mais ils regorgent de fonctionnalités dont nous ne nous soucierons pas de toute façon de toute façon.

En tant que développeurs Web, nous sommes plus enclins aux outils multiplateformes. Jetons un œil à quelques-uns d'entre eux.

Atome

Sans surprise, tel qu'il est développé par GitHub, Atom possède le meilleur contrôle Git intégré de tous les éditeurs de texte, spécifiquement destiné aux référentiels GitHub.

Mais ce n'est pas tout. «L'éditeur de texte piratable pour le 21e siècle» est incroyablement facile à personnaliser (voir la documentation), et un riche écosystème de packages et de thèmes s'est développé autour de lui. N'oubliez pas de consulter le blog et les forums de discussion pour voir ce qui se passe, car il existe de nombreuses mises à jour régulières.

Texte sublime

Sublime Text est le produit le plus ancien de cette liste (il existe depuis 2008) et le seul qui ne soit pas gratuit. Il est toujours très populaire et a été le premier éditeur à introduire bon nombre des fonctionnalités que nous considérions comme données aujourd'hui dans n'importe quel éditeur de code décent, telles que "goto any", "goto definition" et "multiple selections", entre autres.

Il a également un client Git compagnon avec une interface très élégante, Sublime Merge, introduit en 2018.

Code Visual Studio

Code Visual Studio (à ne pas confondre avec Visual Studio est un autre éditeur de code très populaire en ce moment, qui comprend des fonctionnalités puissantes telles que:

  • IntelliSense, qui fournit des compléments intelligents basés sur des types de variables, des définitions de fonctions et des modules importés.
  • Débogage en ligne pour analyser les problèmes de codage directement depuis l'éditeur.
  • Contrôle de version avec les commandes Git intégrées (apprenez à utiliser le contrôle de version).
  • Extensions et personnalisation qui s'exécutent dans des processus distincts, garantissant qu'ils ne ralentiront pas l'éditeur (en savoir plus sur les extensions).
  • Intégration cloud avec Microsoft Azure pour déployer et héberger des sites, stocker et interroger des données relationnelles et basées sur des documents, et évoluer avec l'informatique sans serveur.

Lisez notre guide de l'utilisateur avancé de Visual Studio Code pour devenir un pro de VS Code, et plongez encore plus dans le livre Visual Studio Code: Outils d'édition et de débogage de bout en bout pour les développeurs Web.

Les finalistes

Bien qu'il ne soit pas si populaire, Brackets mérite d'être mentionné, car il est principalement axé sur le développement Web, avec une fonctionnalité très intéressante appelée Live Preview, qui permet une connexion en temps réel à votre navigateur pour visualiser instantanément les modifications apportées à CSS et HTML à l'écran.

Notepad ++ est un remplacement direct du bloc-notes Windows, très minimaliste et dépourvu de certaines fonctionnalités de puissance que nous avons mentionnées, telles que l'intégration de Git, mais c'est toujours une application puissante et légère pour modifier le code.

Basé sur la ligne de commande

En ce qui concerne les éditeurs en ligne standard, vous avez Emacs et Vim… et des guerres de flammes sans fin pour lesquelles est le meilleur!

Les outils de développement Web fournis par certains navigateurs ne sont pas tout à fait des constructeurs de sites Web ou des IDE, car ils ne facilitent pas la création directe d'une page Web et ne remplacent pas un éditeur de code. Ils aident plutôt à tester l'interface utilisateur (UI) du projet sur lequel vous travaillez.

À l'époque, vous aviez besoin d'un certain nombre d'extensions pour créer un environnement de débogage décent, mais de nos jours, la plupart des navigateurs disposent d'excellents outils intégrés pour aider les développeurs Web.

Quelques outils que vous pouvez vous attendre à trouver:

  • UNE Inspecteur DOM pour modifier le code HTML et CSS directement sur le modèle d'objet de document (DOM), afficher les écouteurs d'événements et définir les points d'arrêt de mutation DOM.
  • UNE console pour afficher et filtrer les messages de journal, inspecter les objets JavaScript et les nœuds DOM, et exécuter du code JavaScript dans le contexte de la fenêtre ou du cadre actif.
  • UNE débogueur pour contrôler le flux d'exécution en parcourant le code et définir des surveillances et des points d'arrêt.
  • UNE moniteur réseau pour inspecter les demandes et les réponses du cache du réseau et du navigateur, y compris XMLHttpRequest asynchrone (XHR) – qui peuvent tous être très utiles pour identifier les goulots d'étranglement.
  • Une inspecteur de l'accessibilité pour accéder à l'arborescence d'accessibilité de la page (a11y), ce qui vous permet de vérifier ce qui manque ou ce qui nécessite une attention afin de rendre votre site accessible au plus grand nombre.
  • Mesure du rendement pour profiler le temps d'exécution et les ressources système requises par le site et parcourir les piles d'appels JavaScript.
  • Mesure de la mémoire pour suivre la consommation de mémoire et comparer les instantanés de tas à différentes étapes de l'exécution du code.
  • UNE gestionnaire de stockage pour gérer les données mises en cache, les cookies, le stockage Web et même les données structurées IndexedDB.
  • UNE gestionnaire des services pour gérer et déboguer les employés de service avec des mises à jour, des désenregistrements et le démarrage / arrêt des employés individuels.
  • Une émulateur pour tester différentes résolutions d'écran et même différentes coordonnées de localisation.

Chrome DevTools

Google Chrome est livré avec un ensemble complet et incroyablement bien documenté appelé DevTools.

En fait, c'est une bonne idée de visiter les outils de Google pour les développeurs Web, car vous trouverez de nombreuses ressources utiles.

Outils de développement Firefox

Firefox a d'abord introduit l'inspecteur DOM dans la version 3, et depuis lors, ses outils de développement sont un ensemble de pointe qui est livré avec des goodies supplémentaires comme Eyedropper, prendre des captures d'écran et des règles, pour n'en nommer que quelques-uns.

De même, le Mozilla Developer Network (MDN) est une ressource obligatoire pour les développeurs Web.

Outils de développement Safari

En raison de son manque de fonctionnalités et de la faible prise en charge des développeurs Web, Apple Safari est une tâche difficile à travailler et, comme Internet Explorer à l'époque, ce serait bien de ne pas avoir à y faire face. Mais il suffit de le faire.

Il propose des outils de développement Web qui ne sont pas aussi complets que ceux mentionnés ci-dessus, et toute la documentation que vous obtiendrez est ce que quelqu'un peut avoir écrit pendant une pause déjeuner. (Oui, c'est tout.)

Autres

Même Microsoft Edge, le successeur du tristement célèbre Internet Explorer, dispose d'un ensemble décent d'outils de développement!

Et si vous avez envie d'un bon vieux Opera, consultez cette réponse Stack Exchange pour voir comment vous ouvrez ses outils de développement.

Apprenez les Chrome et Firefox DevTools avec Browser Devtool Secrets.

Depuis l'arrivée de Node.js (l'environnement d'exécution qui exécute du code JavaScript en dehors du navigateur Web), JavaScript a été utilisé non seulement pour améliorer les interfaces utilisateur, mais aussi pour écrire des outils de ligne de commande et pour des programmes de script côté serveur, établissant efficacement le " JavaScript partout »paradigme.

Par conséquent, tout un écosystème a émergé autour de lui, et voici quelques outils que vous devez connaître.

npm

Le Node Package Manager (npm) prétend être «le plus grand registre de logiciels au monde», et c'est un outil essentiel car il est la principale façon de distribuer du code JavaScript de nos jours.

Comme indiqué sur son site Web, vous pouvez utiliser npm pour:

  • Adaptez les packages de code pour vos applications ou incorporez les packages tels quels.
  • Téléchargez des outils autonomes que vous pouvez utiliser immédiatement.
  • Exécutez des packages sans téléchargement à l'aide de npx.
  • Partagez le code avec n'importe quel utilisateur npm, n'importe où.
  • Restreignez le code à des développeurs spécifiques.
  • Créez des organisations (organisations) pour coordonner la maintenance, le codage et les développeurs des packages.
  • Formez des équipes virtuelles en utilisant Orgs.
  • Gérez plusieurs versions de code et les dépendances de code.
  • Mettez à jour les applications facilement lorsque le code sous-jacent est mis à jour.
  • Découvrez plusieurs façons de résoudre le même puzzle.
  • Trouvez d'autres développeurs qui travaillent sur des problèmes et des projets similaires.

Il existe essentiellement trois composants dans npm:

  1. le site Internet, pour découvrir des packages et configurer des profils.
  2. le CLI, qui traverse un terminal.
  3. le enregistrement, qui héberge la base de données publique du logiciel JavaScript.

Pour plus d'informations, consultez le Guide du débutant de npm, le Node Package Manager.

webpack

webpack est un autre niveau de logiciel de packaging, rassemblant tous les actifs frontaux d'une application comme HTML, CSS et les images en actifs statiques, également appelés «bundles». Ces bundles peuvent ensuite être utilisés pour produire du code à la demande via le crachement de code. (Lisez Réduire les charges utiles JavaScript avec le fractionnement de code pour voir ce que cela signifie.)

Vous pouvez utiliser webpack pour:

  • Bundle ES Modules, CommonJS et AMD (même combinés).
  • Créez un ensemble unique ou plusieurs blocs chargés de manière asynchrone lors de l'exécution (pour réduire le temps de chargement initial).
  • Résolvez les dépendances pendant la compilation, réduisant la taille d'exécution.
  • Traitez les fichiers avec des chargeurs pendant la compilation (par exemple, TypeScript vers JavaScript, chaînes de guidon vers les fonctions compilées, images vers Base64, etc.).
  • Faites tout ce dont votre application a besoin avec un système de plugins hautement modulaire.

Consultez le guide du débutant du guide Webpack pour une introduction.

Composants polymères et Web

Lors de leur introduction en 2011, les composants Web étaient considérés comme la prochaine grande chose pour le Web. Et bien qu'il y ait eu un certain développement autour de lui, son adoption a été beaucoup plus lente que prévu. Cependant, la possibilité de créer de nouveaux éléments HTML et de les encapsuler, afin qu'ils puissent être utilisés plus tard et distribués sur différents sites pour empêcher la réécriture des fonctionnalités, est encore tout à fait légitime.

Développée par Google, Polymer est une bibliothèque pour la création d'applications Web à l'aide de composants Web, et elle a de nombreux adhérents dans le cadre de l'entreprise, tels que Google lui-même, Netflix, Electronic Arts et IBM. En outre, Google a mis en œuvre bon nombre de ses principes de conception de matériaux dans Polymer, ce qui en fait un outil très attrayant pour mettre en œuvre des sites bien conçus.

Découvrez-en plus sur les composants polymères et Web sur:

Gestion de code

Une version distribuée, une révision ou un système de contrôle de source (DVCS) est un moyen de gérer les bases de code via des validations logicielles. En d'autres termes, il s'agit d'une norme pour suivre les changements de développement logiciel de manière ordonnée, sécurisée et efficace. (Voir «Valider les modifications de votre base de code de la bonne façon».)

Il existe un certain nombre de systèmes de contrôle de version, tels que BitKeeper, Subversion, Mercurial (ma préférence personnelle), Azure DevOps (nouveau venu en ville). Mais un seul est roi…

Git

Créé par Linus Torvalds (également créateur de Linux), Git est rapidement devenu le de facto standard pour DVCS (en partie grâce à GitHub également). Ses vraiment distribué, car chaque répertoire Git sur chaque ordinateur ou nœud est un référentiel à part entière, avec l'historique complet et les capacités complètes de suivi de version, indépendamment du nœud considéré comme un serveur central.

Il y a un certain nombre de concepts que vous devrez vous familiariser avant de saisir pleinement DVCS en général et Git en particulier, tels que la ramification et la fusion, les distributions, les pulls… mais vous verrez que les bases (ce que vous utiliserez la plupart du temps) sont faciles à apprendre.

Vous pouvez acquérir une solide compréhension de Git en moins d'un week-end avec Jump Start Git.

Sélénium

L'automatisation des tests de navigateur est vraiment importante, et Selenium a non seulement maîtrisé les tests de navigateur, mais l'a même porté à un autre niveau.

  • Selenium WebDriver pilote un navigateur nativement, comme le ferait un utilisateur réel, localement ou sur des machines distantes.
  • Selenium IDE est une extension Chrome et Firefox qui facilite l'enregistrement et la lecture des tests dans le navigateur.
  • Grille de sélénium prend WebDriver à un autre niveau en exécutant des tests sur plusieurs machines en même temps, réduisant le temps nécessaire pour tester sur plusieurs navigateurs et systèmes d'exploitation.

Découvrez comment effectuer des tests de bout en bout avec Selenium sur une application Python.

Il y a aussi Marionnettiste, une bibliothèque Node.js de Google qui fournit une API pour contrôler Chrome ou Chromium sans tête sur le protocole DevTools. Bien franchement, le sélénium est façon plus un outil avancé – ou vraiment, un écosystème – que Puppeteer, que vous pouvez également utiliser pour parler au protocole Chrome DevTools (voir Chrome DevTools et Selenium 4).

Docker et conteneurs de logiciels

Nous ne pouvons pas vraiment expliquer une grande partie de Docker ici et lui rendre justice, mais une chose est sûre: les conteneurs de logiciels peuvent dramatiquement améliorer votre flux de travail de livraison et de déploiement.

Pour acquérir une compréhension approfondie de celui-ci, lisez Learning Docker – Second Edition.

Pipelines CI / CD

L'intégration continue (CI) est liée à la livraison continue (CD) dans un pipeline dit CI / CD pour un déploiement continu. Mais qu'est-ce que tout cela signifie?

De Wikipedia, et en bref:

  • CI s'assure que le logiciel archivé sur la ligne principale est toujours dans un état qui peut être déployé auprès des utilisateurs.
  • CD rend le processus de déploiement entièrement automatisé.

En d'autres termes, la livraison continue est une pratique (et non une technologie) qui rationalise le développement logiciel en douceur, avec des tests et des déploiements automatisés dans le cloud, très en phase avec la culture DevOps.

Tous les processus de déploiement peuvent être entièrement automatisés, de la vérification des bogues de workflow avec Selenium à la compilation et à la création de logiciels, en extrayant la dernière version vérifiée de GitHub, en corrigeant la base de données et même en redémarrant les caches. Tout ce qui doit être fait, vous venez de mettre dans le pipeline.

Pour plus d'informations sur DevOps, consultez l'article «DevOps by Example» de SitePoint.

GitLab CI / CD

GitLab est un service similaire à GitHub. Mais contrairement à GitHub, qui héberge les référentiels Git et propose certains outils DevOps, GitLab est essentiellement un outil de cycle de vie DevOps (et le meilleur sur le marché, selon un rapport Forrester) qui aussi héberge les référentiels Git. Cela dit, il n'y a pratiquement aucune fonctionnalité GitHub qui manque dans GitLab (l'inverse est plus vrai).

Le service est basé sur un modèle basé sur la consommation des minutes de génération utilisées:

Plan Créer des minutes Utilisateur / mois
Gratuit 2 000 0 $
Bronze 2 000 9 $
argent 10 000 19 $
Or 50 000 99 $

En mettant l'accent sur des chaînes d'outils complexes, la vitesse et la sécurité, nous ne pouvons pas vraiment couvrir ici toutes les fonctionnalités de GitLab CI / CD, mais consultez ces ressources:

Actions GitHub

GitHub, le principal hébergeur de projets logiciels utilisant Git, semble arriver un peu tard avec la solution CI / CD appelée GitHub Actions, qui a introduit la prise en charge CI / CD pour les référentiels publics en août dernier (ce que les concurrents faisaient depuis des années). maintenant).

Dans tous les cas, le service est prêt pour la production avec une liste d'actions assez longue que vous pouvez commencer à intégrer dans vos pipelines.

Plan Créer des minutes Mois
Gratuit 2 000 0 $
Pro 3 000 7 $
Équipe 10 000 9 $ / utilisateur
Entreprise 50 000 contacter les ventes

Les minutes de construction semblent très généreuses, mais il existe certaines restrictions sur la concurrence qui peuvent affecter négativement la durée totale de fonctionnement, alors assurez-vous de vérifier les limites d'utilisation.

Plus d'informations:

Pipelines Bitbucket

Bitbucket Pipelines & Deployments fonctionne comme un jeu d'enfant avec Jira (un outil très populaire parmi les équipes de développement agiles) et Bitbucket. Sans surprise, car ce sont toutes des créations d'Atlassian, tout comme Trello.

Bien que Bitbucket Pipelines semble offrir beaucoup moins de minutes, gardez à l'esprit qu'il n'y a pas de frais supplémentaires pour la concurrence:

Plan Créer des minutes Utilisateur / mois
Gratuit 50 0 $
la norme 2500 3 $
Prime 3 500 6 $

Plus d'informations:

Vous pouvez apprendre comment configurer chacun de ces systèmes CI pour un exemple d'application Web Python à l'aide de ce guide.

Emballer

Tant que cet article a été, de nombreux outils ont été laissés de côté – certains consciemment et d'autres parce que je ne les connais même pas!

Le développement Web s'intègre de plus en plus à d'autres disciplines comme le développement de logiciels mobiles et de bureau, avec de nouveaux outils, approches et pratiques de développement qui arrivent tout le temps. Ne vous méprenez pas, je ne m'en plains pas. Je le célèbre, car c'est pour le mieux. Mais cela élargit certainement les voies possibles de manière folle, et vous ne pouvez que vous attendre à ce qu'il devienne encore plus compétitif à l'avenir.

Comme je le dis habituellement: si vous voulez rester précieux, reste curieux!

Laisser un commentaire

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