Guide du débutant –

Voici une introduction aux outils que tous les développeurs Web doivent connaître, des commandes Bash de base aux modules complémentaires du 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 ce L’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 WYSIWYG constructeurs de sites Web ?.)

Ligne de commande

La ligne de commande est une interface qui vous permet d’interagir avec le peut aller très loin pour faciliter et même 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 très certainement payant.

Bash Tools (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 à tout le moins, une connaissance de base – du shell Bash peut vous faire économiser 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 localiser et grep avec sed respectivement. [19659006] Maîtrisez Bash en lisant le Guide de démarrage rapide Bash .

PowerShell (Windows)

PowerShell est le cadre d’automatisation des tâches «bash-like» et de gestion de configuration de Microsoft. Il est livré avec une ligne de commande similaire à celle du [Command Prompt] (https://en.wikipedia.org/wiki/Cmd.exe (CMD)), mais il comprend également des modules et un langage de script . Mais gardez à l’esprit que les scripts sont PowerShell en rien comme les 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 trouver le nom 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ù l’installation

Éditeurs de code

Vous savez très certainement ce qu’est un éditeur de code source mais vous ne le savez peut-être pas connaître certaines de leurs caractéristiques de puissance 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 qui ne nous intéressent pas de toute façon.

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

Atom

Sans surprise, car il est développé par GitHub, Atom a le Git intégré le plus fin contrôle de n’importe quel éditeur 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 les documents ), et un riche packages et écosystème de thèmes a prospéré autour de lui . N’oubliez pas de consulter le blog et forums de discussion pour voir ce qui cuisine, car il y a de nombreuses mises à jour régulières.

Texte sublime

Sublime Text est le plus ancien produit 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 un grand nombre des fonctionnalités que nous considérons comme étant données aujourd’hui dans n’importe quel éditeur de code décent, telles que «goto any», «goto definition» et «multiple selections», entre autres. [19659006] Il a également un client Git compagnon avec une interface très élégante, Sublime Merge introduit en 2018.

Visual Studio Code

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

• IntelliSense qui fournit des compléments intelligents basés sur sur les types de variables, les définitions de fonctions et les modules importés.
• Débogage en ligne pour analyser les problèmes de codage directement depuis l’éditeur.
• Contrôle de version avec commandes Git intégrées (découvrez comment utiliser le contrôle de version ).
• Extensions et custo 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éployez et hébergez des sites, stockez et interrogez des données relationnelles et basées sur des documents, et évoluez avec l’informatique sans serveur.

Lisez notre Guide de l’utilisateur avancé de Visual Studio Code pour devenir un pro du VS Code, et plongez encore plus avec le livre Code Visual Studio: outils d’édition et de débogage de bout en bout pour les développeurs Web .

The Runners Up

Bien que peu 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 pour Windows Notepad très minimaliste et manquant de puissance les fonctionnalités que nous avons mentionnées telles que l’intégration Git, mais c’est toujours une application puissante et légère pour éditer le code.

CodeLobster est un éditeur (IDE) PHP, HTML, CSS, JavaScript avec le support de Drupal CMS, Joomla CMS, Magento CMS, Smarty, Twig, WordPress, librairie JQuery et frameworks: CodeIgniter, CakePHP, Symfony, Yii, AngularJS, BackboneJS, MeteorJS, Laravel, Phalcon. Il comprend le programme de débogage PHP puissant, le renseignement dynamique, la saisie automatique pour toutes les langues et le client FTP/SFTP.

CodeLobster IDE est capable de travailler avec VCS Git distribué et fournit aux développeurs des outils graphiques pour comparer différentes versions de fichiers et afficher l’historique des validations.

Basé sur la ligne de commande

Comme pour les éditeurs basés sur la ligne standard, vous avez Emacs et Vim … et des guerres de flammes sans fin pour lesquelles on est 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 contribuent ni à la création directe d’une page Web ni à e un remplacement pour 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:

• Un inspecteur DOM pour modifier le code HTML et CSS directement sur le document object model (DOM), view écouteurs d’événement and set DOM mutation breakpoints .
• A console pour afficher et filtrer les messages du journal , inspectez les objets JavaScript et les noeuds DOM et exécutez le code JavaScript dans le contexte de la fenêtre ou du cadre actif.
• Un débogueur pour contrôler le flux d’exécution parcourant le code et définissez montres et points d’arrêt.
• Un moniteur réseau pour inspecter les demandes et les réponses de le cache du réseau et du navigateur, y compris asynchrone XMLHttpRequest (XHR) – qui peuvent tous être très utiles pour identifier les goulots d’étranglement.
• Un inspecteur d’accessibilité pour accéder à l’accessibilité de la page (a11y)
• Mesure des performances à profil temps d’exécution et ressources système requises par le site et marcher Piles d’appel 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.
• A stockage pour gérer les données mises en cache, les cookies, le stockage Web et même IndexedDB les données structurées.
• Un gestionnaire de service worker pour gérer et déboguer service worke rs avec mises à jour, désenregistrement et démarrage / arrêt de chaque travailleur.
• Un émulateur pour tester différentes résolutions d’écran et même différentes coordonnées d’emplacement.

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 pour les développeurs Web de Google, car vous y trouverez de nombreuses ressources utiles.

Outils pour les développeurs Firefox

[19659006] Firefox a introduit pour la première fois l’inspecteur DOM dans la version 3, et depuis lors ses Developer Tools sont un ensemble à la pointe de la technologie qui vient avec des goodies supplémentaires tels que Pipette prenant des captures d’écran et rul pour n’en nommer que quelques-uns.

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

Safari Developer Tools

En raison de son manque de fonctionnalités et de son faible support pour les développeurs Web, Apple Safari est pénible à travailler et, comme Internet Explorer à l’époque, ce serait bien de ne pas d’avoir à y faire face. Mais il suffit de le faire.

Il contient 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 a peut-être écrit lors d’un déjeuner. Pause. (Oui, c’est tout ce qu’il y a.)

Autres

Même Microsoft Edge le successeur du tristement célèbre Internet Explorer, possède un ensemble décent de 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 DevTools Chrome et Firefox avec Navigateur Devtool Secrets .

Depuis l’arrivée de Node.js (l’environnement d’exécution qui exécute le 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 paradigme «JavaScript partout».

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

npm

Le gestionnaire de packages de nœuds (npm) prétend être « le plus grand registre de logiciels au monde », et c’est un outil essentiel car il est le principal moyen de distribuer du code JavaScript de nos jours .

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

• Adapter des packages de code pour vos applications, ou incorporer des packages tels quels.
• Téléchargez des outils autonomes que vous pouvez utiliser immédiatement. [19659045] Exécutez des packages sans les télécharger à 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 des packages, le codage, et développeurs.
• Formez des équipes virtuelles en utilisant des organisations.
• Gérez plusieurs versions de code et les dépendances de code.
• Mettez facilement à jour les applications lorsque le code sous-jacent est mis à jour.
• Découvrez plusieurs façons de résoudre le même casse-tête. [19659045] Trouver d’autres développeurs qui travaillent sur des pro similaires

Il existe essentiellement trois composants à npm:

1. Le site Web pour découvrir des packages et configurer des profils.
2. Le CLI qui passe par un terminal.
3. Le registre qui héberge la base de données publique du logiciel JavaScript.

Pour plus d’informations, lisez A Beginner’s Guide to npm, the Node Package Manager .

webpack

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

Vous pouvez utiliser webpack pour:

• Bundle Modules ES CommonJS et modules AMD (même combinés).
• Créez un seul ensemble ou plusieurs blocs qui sont chargés de manière asynchrone au moment de l’exécution (pour réduire le temps de chargement initial).
• Résolvez les dépendances pendant la compilation, ce qui réduit le temps d’exécution
• Traitez les fichiers avec les 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 que votre application requiert avec un [ système de plug-in modulaire .

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

Polymère et composants Web

Lors de son introduction en 2011, Les composants Web étaient considérés comme la prochaine grande chose pour le We b. 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é par Google, Polymer est une bibliothèque pour la création d’applications Web à l’aide de composants Web, et il a de nombreux adhérents dans le cadre de l’entreprise, tels que Google lui-même, Netflix, Electronic Arts, et IBM. De plus, Google a implémenté bon nombre de ses principes de conception de matériaux dans Polymer, ce qui en fait un outil très attrayant pour implémenter des sites bien conçus.

En savoir plus sur Polymer et les composants Web sur:

Gestion de code

Un version distribuée, révision ou système de contrôle de source (DVCS) est un moyen de gérer les bases de code via les 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 « Validez les modifications apportées à votre base de code ».)

Il existe un certain nombre de systèmes de contrôle de version, tels que BitKeeper Subversion Mercurial (mes favoris personnels), 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 norme facto pour DVCS (en partie grâce à GitHub également). Il est 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.

Vous devez vous familiariser avec un certain nombre de concepts avant de saisir pleinement DVCS en général et Git en particulier, tels que ramification et fusion de distributions . … 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 très importante et Selenium n’a pas seulement maîtrisé les tests de navigateur, mais l’a même emporté un autre niveau.

• Selenium WebDriver pilote un navigateur natif
• Selenium IDE est une extension Chrome et Firefox qui facilite l’enregistrement et la lecture des tests dans le navigateur.
• Selenium Grid amène WebDriver à un autre niveau en exécutant des tests sur plusieurs machines en même temps, réduisant ainsi le temps nécessaire pour tester sur plusieurs navigateurs et systèmes d’exploitation.

Apprenez à effectuer des opérations de fin tests complets avec Selenium sur une application Python.

Il existe également Puppeteer une bibliothèque Node.js de Google qui fournit une API pour contrôler sans tête Chrome ou Chrome sur le protocole DevTools . Bien franchement, le sélénium est bien 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 faites-lui justice, mais une chose est sûre: les conteneurs de logiciels peuvent considérablement améliorer votre flux de travail de livraison et de déploiement.

Pour en savoir plus, lisez Learning Docker – Second Edition .

Pipelines CI / CD

L’intégration continue (CI) est étroitement liée à la livraison continue (CD) dans un soi-disant pipeline CI / CD pour 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é pour les utilisateurs.
• Le CD rend le processus de déploiement entièrement automatisé.

En d’autres termes, la livraison continue est une pratique (pas une technologie) qui rationalise le développement logiciel en douceur, avec des tests automatisés et des déploiements sur le cloud, très en phase avec les 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, à l’extraction de la dernière version vérifiée de GitHub, à la correction de la base de données et même au redémarrage des caches.

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 héberge également 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:

En se concentrant sur des chaînes d’outils complexes vitesse et 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 le parti avec sa solution CI / CD appelée Actions GitHub qui a introduit le support CI / CD pour les référentiels publics en août dernier (quelque chose de comp

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

Les minutes de construction semblent très généreuses, mais il existe des 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:

Bitbucket Pipelines

Bitbucket Pipelines & Deployments fonctionne comme un jeu d’enfant avec Jira (un outil très populaire) parmi équipes de développement agile ) et Bitbucket . Sans surprise, car ce sont toutes des créations de 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 l’accès simultané:

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 .

Wrapup

Aussi longtemps comme cet article était, 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, des approches et des 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 il étend certainement les voies possibles de façon folle, et vous ne pouvez qu’espérer qu’il deviendra encore plus compétitif à l’avenir.

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

Lucero est un programmeur et un entrepreneur avec un sens pour Python, la science des données et DevOps. Élevé à Buenos Aires, en Argentine, c’est un musicien qui aime les langues (celles que vous utilisez pour parler aux gens) et la danse.