Top 100 des meilleurs outils pour le développement Web- Partie 1

Ecran ordinateur code source

De quels outils de développement web avez-vous besoin pour construire votre application ou votre site Web ?

Voici une liste pratique de 100 outils pour aider le développeur Web et Web mobile à répondre à cette question.

Distinguer les outils selon les besoins métier

Le développeur front-end réalise des sites et applications dynamiques, les fonctions complexes et les interfaces utilisateurs.

Quant à l’intégrateur il est garant de l’accessibilité web, du responsive web design convertit les maquettes réalisées par le designer UX-UI.

Le développeur back-end structure les données, veille à ce que la base de données soit conforme au schéma physique, conçoit et développe des composants d’accès, développe la partie de gestion du site, construit et articule les actions qui peuvent être effectuées.

Un petit conseil qui aide

Travailler avec trop d’outils, de langages, de technologies pour une développeuse ou un développeur est complètement contre-productif. Qui ne se sentirait submergé par autant de nouveaux logiciels qui émergent constamment à un rythme effréné et infini ?! Serez-vous vraiment plus efficace en les connaissant tous ?

Pour vous, il est bien plus important et profitable de connaître en profondeur quelques outils, de les pratiquer régulièrement.

Cette inventaire a pour simple objectif de vous faire découvrir quelques outils triés sur le volet et classés selon des besoins spécifiques aux métiers.

Nous marquons d’un coeur ❤️ ceux que nous aimons et ceux de nature à nous faciliter notre travail au quotidien.

Nous commençons cette série par le setup de dev.

L’environnement de développement

L’ environnement de développement est appelé aussi setup de dev. Il correspond à la configuration logicielle et matérielle nécessaire pour développer des logiciels ou des applications.

Cela inclut généralement un éditeur de code, un terminal/console pour exécuter des commandes système, une suite de développement intégrée (IDE), des outils de gestion de version, des frameworks et des bibliothèques, ainsi que d’autres outils spécifiques au langage de programmation utilisé.

Logiciels d’environnement intégré IDE

Ce sont les logiciels qui nous permettent de coder nos programmes sans installer de plugins complémentaires.

  1. Eclipse
  2. Netbeans
  3. Visual Studio

IDE spécifique

  1. AppCode (Mac) Swift Objective C
  2. Arduino Web Editor IDE
  3. BlueJ (Java)
  4. CodeLite
  5. Gnat Studio (C++)
  6. GoLand JetBrains
  7. PHP Storm
  8. Python : Idle, PyDev, PyCharm JetBrains, Thonny (novice), Spyder
  9. IntelliJ IDEA Java Kotlin Groovy
  10. QtCreator (apps mobile)
  11. WebStorm (JavaScript) JetbBrain

Éditeur de code

  1. Codespaces
  2. Coffeecup
  3. Slickedit
  4. VIM
  5. VSCode ❤️
  6. VSCode.dev (navigateur)
  7. VSCodium

Environnement spécifique

  1. Anaconda (Python)
  2. AWS Cloud 9 (cloud)
  3. Node.js ✨ ❤️ (environnement d’exécution JavaScript asynchrone et orienté événement)

Gestion de versions

Pour suivre les évolutions, les versions de notre code source.

  1. BitBucket
  2. GIT client GIT, Git bash ❤️
  3. GitHub ✨ ❤️
  4. GitLab
  5. Meld (comparer des versions de fichiers)

En interface utilisateur graphique GUI

  1. Github Desktop
  2. Gitkraken
  3. SmartGIT
  4. Sourcetree
  5. Sublime Merge
  6. Liste complète

Logiciel assistant virtuel IA

  1. Copilot + CopilotX ❤️
  2. Tabnine

Matériel

  1. Laptop Mac Book Pro dernière génération
  2. Apple Adaptateur Multiport AV Numérique USB‑C
  3. Hub USB-C
  4. Mac Pro + Ecran Studio Display
  5. PC à monter soi-même Intel Core i7-13700
  6. Ecran Dell Ultra Sharp, Asus ProArt PA279CV, BenQ PD2700U, BenQ PD2725U

Ecrans BENQ pour Mac ❤️

Serveur Web local

Faire tourner les applications comme si elles étaient hébergée avec tous les outils de tests et de développement sur votre machine en local.

  1. Apache HTTP Server
  2. Apache Tomcat
  3. Expose
  4. GuniCorn (Python / Linux)
  5. Laragon (LAMP)
  6. LAMP (Linux)
  7. Mamp (Mac) / Xampp
  8. Microsoft IIS
  9. Ngrok 
  10. Nginx
  11. Laravel Valet (DnsMasq + Nginx) (Mac) ❤️

Terminal / console

  1. Terminal système sur macOS ou Command Prompt sur Windows.
  2. Terminal intégré dans l’IDE (Bash, Zsh, Tmux, terminal de déboggage JS etc)
  3. Terminal en ligne de commande : par exemple ITerm2 (Mac Os) ❤️
  4. Terminal à distance SSH : par exemple Termius, Putty (SSH)
  5. Warp (Mac OS)
  6. Terminal Docker

Le setup de développement peut varier en fonction du type de développement que vous effectuez, qu’il soit en front-end ou en back-end. C’est ce le sujet de notre prochaine partie.

Liste compilée par Stéphane ARRAMI, membre de Jury Professionnel Titre Professionnel Développeur Web et Web Mobile DWWM

Mise à jour : 26 avril 2023

Retour en haut