Top 100 des meilleurs outils pour le développement Web

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.

Les indispensables pour vos compétences de développeur web

1. Etre à l’aise avec votre éditeur de code ou IDE et le terminal (console).
2. Maîtriser les outils embarqués de développement dans le navigateur (DevTools Chrome etc.).
3. Mettre en place un environnement de travail local (serveur web, SGBD, gestionnaire de base de données).
4. Se servir d’un outil de prototypage.
5. Maîtriser fondamentaux du Web HTML-CSS, se documenter sur les principes de développement, code CLEAN, code SOLID…
6. CSS Framework Tailwind , SCSS
7. JS
8. JS DOM
9. Configurer un linter.
10. JS Asynchone
11. TypeScript
12. Pratiquer un outil pour versionner votre code et collaborer sur une branche dev, GIT GitHub par exemple.
13. Chat GPT, Git CoPilot.
14. Se former à un framework front-end JavaScript React/Next , Angular / Vue.
15. NodeJS
16. PHP / Symfony
17. Python / Django REST
18. Bases de données et API
19. SQL, PostgreSQL
20. Réaliser des tests d’API : Postman ou Insomnia par exemple, gérer l’asynchrone (fetch, Ajax).
21. Employer un framework SSR rendu côté serveur.
22. Se former à un framework backend.
23. Effectuer des tests unitaires pour vérifier vos fonctionnalités.
24. Faire usage d’un outil de déploiement.
25. Réaliser des opérations courantes sur les tableaux collections des données, sérialiser désérialiser pour le partage des données sur le Web.
26. Vérifier les failles à l’aide d’outils de tests de sécurité.
27. Documenter son application
28. DevOps Docker Kubernetes
29. Webperfs
30. Réaliser un projet perso qui vous tient à coeur.

Sélectionnez un bloc contenant de 1 à 3 compétences dans cette liste pour lesquelles vous souhaitez progresser.

Il vous faudra au minimum 1 an pour vous former et vous familiariser à pratiquer ces outils : le chemin d’apprentissage est illimité.

1. L’environnement de développement

Logiciel 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

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 notre machine en local.

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

2. Outils de développement d’applications front-end

AY11 Accessibilité

Quel développeur peut ne pas tenir compte de critères d’accessibilité Web de nos jours ?

1. Axe
2. Formation (React)
3. NVDA (Windows)
4. Voice over (Mac OS)
5. Wave
6. Tota11y

API

1. API Platform
2. Axios
3. Fast API
4. GraphQL
5. HTTP Cat
6. Hoppscotch
7. Insomnia
8. MockAPI
9. Postman ✨
10. Swagger (génération de profils)
11. ThunderClient

Builder JS

1. ESBuild
2. Jspm
3. Rollup.js
4. SnowPack
5. System.js
6. Vite.js
7. WebPack ✨

CSS

1. Almond CSS
2. Autoprefixer
3. CSS Fingerprint
4. Sass
5. PostCSS
6. PostCSR Tailwind

CMS JavaScript

1. Apostrophe CMS
2. Keystone.js
3. Ghost CMS
4. Prismic.io
5. Total.js

Conception – Design System

1. Balsamiq (Premium, zoning wireframes)
2. Bit / Bit.dev + Zeplin
3. Builder X
4. Codesee.io (Mapping des applications)
5. ColorHunt
6. Designresourc.es
7. Haikei
8. Hidden tools
9. Framer
10. Judo
11. Figma ✨
12. Invision DSM
13. Mockoon
14. Plasmic
15. Pollen Design System
16. Typescale
17. Invision DSM
18. Penpot.app
19. Plamic
20. Radix UI Colors
21. Quant UX
22. Wireflow
23. Zeroheight

Design Patterns (patrons de conception)

1. Patterns.dev

Développement de composants

1. Component.ai
2. React SVGR
3. Simple Sharing buttons
4. Storybook
5. Tailwind Components
6. The Component Library

Frameworks CSS

1. Bootstrap
2. Bulma
3. Foundation
4. Material UI
5. Materialize
6. Tailwind

Frameworks JS et librairies d’application Web

1. Angular (Google) ✨
2. Astro Build ✨
3. Gatsby ✨
4. React.js (Facebook) ✨
5. Next.js ✨ Framework React
6. Remix
7. Svelte.js / SvelteKit
8. Turbo SPA
9. Vue.js ✨

Outils Angular

1. Angular Cli
2. Augury (debug)
3. Angular Language Service
4. Angular Devtools
5. Angular ESLint
6. Angular Fullstack
7. Angular Material (bibliothèque de composants UI)
8. Angular Universal (déploiement)
9. Angular UI
10. CompoDoc
11. Componizer (VScode)
12. Karma (tests)
13. NgInspector
14. Ngx Bootstrap
15. Ngrv (visualisation graphique des modules, composants, providers, directives)
16. Ngrx (gestion des états)
17. Protractor (tests automatisés)
18. Rest Angular

Outils React

1. BuilderX.io
2. Create React App Dev
3. React Query
4. React Hook Form
5. React Dev Tools (Chrome, Firefox)
6. React Testing Library
7. React UI tools
8. SWR
9. Storybook.js
10. Vite.js

Librairies

1. Emotion.sh (CSS > JS)
2. Motion.dev
3. Zx (Scripts Bash)

GSS générateur de site statique

1. 11y Eleventy (JavaScript) ✨
2. Hugo (Go)
3. TeleportHQ (déploiement)

Gestionnaires de paquets

1. Flatpack
2. Homebrew (Mac) / Homebrew Formulae (Mac)
3. Npm et Npx / Npmjs.com
4. Yarn

Lanceurs de tâches

1. Gulp JS
2. Grunt JS

Linter selon le langage

1. ESLint
2. JsLint
3. TSLint
4. Stylelint

Outils de debug et approche clean code

1. JSHint
2. PHPStan
3. Sidekick (Navigateur + Devtools côté backend)
4. Node.js Debugger
5. Zoho Debug

Outils navigateur

1. Chrome DevTools
2. Firefox Developer Tools
3. Safari Developer Tools:

Outils de tests

Responsive Web Design

1. Responsively
2. Sizzy (payant)

Tests end to end

• Cypress

Tests unitaires

1. Jasmine JS
2. Jest

1. Appium
2. Chromatic
3. Linear
4. Selenium (framework)
5. Sentry
6. Testing Library (APIs)
7. Travis
8. Qodana

Webperfs

1. Ffmpeg
2. ImageMagick
3. Tools.pingdom.com
4. YellowLab

3. Outils de développement d’applications back-end

Authentification

1. Magic.link
2. Oauth0

Base de données

Conception de bases de données

Outils d’aide à la modélisation

MCD Création de modèles conceptuels de données

1. DBDesigner ✨
2. Lucidchart
3. SmartDraw
4. Mysql Workbench

MLD création de Modèles logiques de données

1. Erwin Data Modeler
2. IBM InfoSphere Data Architect
3. Oracle Data Modeler
4. Power Designer

UML

1. Staruml.io

SDBD et outils d’administration

1. PhpMyAdmin
2. Tableplus.com (payant)

SQL

1. DataGrip
2. DBeaver
3. DBVis
4. EverSQL
5. H2Database
6. HeidiSQL
7. MariaDB
8. PostgreSQL
9. SequelPro (Mac)
10. SQLite
11. SQL Server

NoSQL

1. MongoDB
2. MangoDB

NoCode

1. Airtable (No-code)
2. Glide
3. Nocodb (alternative open source à AirTable)
4. Smartsheet (No-code – Payant)

CMS Backend

1. Cosmic JS
2. Craft CMS
3. Strapi ✨ JS

Frameworks backend

1. Django
2. Hibernate/JPA (Java)
3. Laravel
4. Spring Boot (Java)
5. Symfony ✨

Interfaces d’administration

1. AppSmith
2. Tooljet

Meta Frameworks

1. ExpressJS
2. Fastify

Node.js

1. Express.js (framework pour créer des applications web et des API)
2. Passport.js (bibliothèque d’authentification utilisateurs)
3. Mocha (tests)
4. PM2 (gestionnaire de processus en production)
5. Socket.io (création d’application en temps réel)

ODM (Mapping objets documents)

1. Mongoose

ORM (Mapping objets relationnels)

1. Doctrine (Symfony)
2. Eloquent (Laravel)
3. Knex.js
4. Prisma
5. Sequilize
6. TypeORM

4. Outils de développement devops

Conteunirisation

1. Docker ✨
2. Garden.io
3. Kubernate
4. LXD (Linux)
5. Vagrant
6. WayScript

Hébergement – cloud – CDN

1. AWS / AWS EC2 / AWS Lambda
2. AWS Cloudfront (CDN)
3. Azure
4. Cloudflare ( CDN)
5. Cloudinary (CDN médias)
6. Coder
7. Cyclic
8. EasyCron
9. Filezilla (SFTP)
10. Firebase hosting (Google)
11. Google Cloud
12. Heroku (payant)
13. NHost (alternative à Firebase open source)
14. Netifly ✨
15. Owncloud
16. NextCloud
17. Nhost
18. Putty (SSH)
19. Termius (SSH Mac OS)
20. Vercel

Virtualisation

1. Hyper V
2. Parallels
3. VirtualBox
4. Vmware

5. Outils de développement dataviz

1. ChartCSS
2. CubeJS
3. D3JS
4. Chartjs.org
5. LeafletJS
6. Raphael

6. Outils de documentation

1. Bookstack
2. Cht.sh
3. Devbook
4. Devhint
5. DokuWiki
6. Emacs
7. Gitbook ✨
8. JSDoc
9. Learnxinyminutes
10. Loom
11. MediaWiki
12. Mkdocs
13. OpenAPIS
14. Quod AI
15. Readme.so
16. Slite
17. Wiki.js
18. Zim Wiki

7. Outils de développement d’applications mobile

1. Adalo (payant – No-code)
2. Flutter.dev ✨
3. Glide
4. Ionic
5. React Native

8. Pratique

Calendrier

• Calendly
• Sunsama (partage de calendrier)

Collaboration

1. Carbon
2. CodePen
3. Confluence
4. CoScreen
5. GitHub Copilot
6. GitLive
7. JSFiddle
8. OneLang
9. Peek (open source capture d’écran au format GIF)
10. Slack ✨
11. SourceTree
12. SublimeMerge

Emailing, sms, chat

1. Agora
2. Amazon SES
3. Mailgun
4. SendGrid

Freelancing

1. Codeur.com
2. Dolibarr ✨
3. Facture.net
4. FreelanceDay
5. Freelance Republik
6. Henrri
7. LeHibou
8. MyAE ✨
9. Pakko
10. Progonline
11. Shine.fr
12. Welcome To the Jungle

Géolocalisation, geofencing

1. Google Map API
2. Leaflet.js
3. Mapbox API
4. OSM
5. Plot

Gestion de mots de passe

1. 1password
2. Dashlane
3. Bitwarden
4. Passbolt (open source)

Liste de tâches

1. Google Tasks (Gmail)
2. Microsoft Todo
3. Todoist

OS MacOS / OSX

1. Dev Utils
2. Flycut
3. HomeBrew
4. Rectangle (Mac)

Optimisation

1. Squoosh

Playgrounds

1. Riju.codes
2. Replit

Paiement e-commerce

1. BrainTree
2. MangoPay
3. Paypal API
4. Paddle
5. Stripe API

Plateformes de développement d’applications

1. AWS Amplify
2. AWS Data Firehose
3. Back4app.com
4. Bitrise
5. Firebase (Google)
6. Heroku (payant)
7. Plasmic.app

Prise de notes, schémas, screencast

1. Dendron
2. Diagrams.net (schémas UML + sauvegarde Cloud)
3. Evernote
4. Google Docs / Google Spreadsheet
5. Google Keep
6. Kazam ScreenCaster (Linux)
7. LanguageTool
8. Notable (prise de notes en Markdown)
9. Notion ✨
10. Notion AI
11. QOwnNotes (sur son propre Cloud)
12. Xournalpp (open source)
13. Typora

Productivité

1. Espanso
2. Eesel
3. JavaScript Booster

RegEx

1. Regex101
2. Plus d’outils

Recherche, moteur de recherche RESTful

1. Elastic Search
2. Kibana (visualisation des datas)

Santé, bien-être

• Claviers
• F.lux protection des yeux
• Écran dalle OLED
• Siège

Revue de code

1. DeepSource
2. Pull Request : révisions de code à la demande de la part d’ingénieurs et de développeurs experts.

Statistiques

1. Counter.dev
2. Segment

Tableau blanc

1. Excalidraw (Draw.io)
2. Figjam (Figma)

Workflow – Automation

1. IFTTT
2. Lucidchart
3. Make
4. Microsoft Power Automate
5. Notion API

9. Outils du développeur SEO

1. BeamUsUp
2. Google Lighthouse (Chrome)
3. LSI Graph
4. Monitor Backlinks
5. Rank Math SEO Analyzer
6. Ranxplorer
7. Semrush
8. Slerpee
9. WhatsMySerp
10. XML Sitemaps

10. Outils du développeur d’applications web low-code

1. Adalo
2. Appgyver
3. Bubble
4. Strikingly
5. Webbly

11. Trousse à outils

1. Baseline background remover
2. Bundle Phobia
3. Cacher : sauvegarde de snippets de code
4. Diff Checker (payant)
5. Dopfolio
6. Emmet Cheat Sheet
7. Extends Class : validateur de syntaxe
8. Fig.io
9. Fira Font
10. Frontend Toolkit
11. GitHub1s
12. Keycode.info
13. Is my host fastyet
14. JSON Formatter
15. JSON Generator
16. Npkill
17. Omatsuri.app
18. Retool
19. Ray.st (détecter les technos utilisées par un site)
20. Screensizemap
21. SideKick
22. SmallDev Tools
23. Sourcegraph
24. Wakatime
25. Will it cors

12. Outils et ressources de veille

1. Daily.dev
2. Devdocs (documentations des API logiciels)
3. Dev.to
4. Hacker.io
5. LesJeudi
6. Finddev.tools (répertoire d’outils)
7. Référentiel métier AFPA
8. Stackshare.io
9. Stackoverflow / Stackexchange
10. Wappalyzer
11. Welovedevs (Job Board)

13. Outils du développeur Web3

1. EtherJS (librairie client Ethereum)
2. Graph API (indexation, requêtes)
3. Hardhat (environnement de développement Ethereum)
4. Ifps (stockage)
5. Polygon (blockchain)

14. Outils du développeur WordPress

1. Local By Flywheel
2. Debug bar
3. Deploybot
4. Gatsby
5. PHP Unit
6. Query Monitor
7. WordPress API Rest Controller
8. WP GraphQL
9. WP-Cli
10. WPPB

15. Outils de gestion de projet

1. AirTable ✨
2. Appflowy.io
3. Asana
4. Basecamp ✨
5. Buddy ✨
6. Click-up
7. Freedcamp
8. Figma Product Planner
9. Gouti
10. Jira
11. Kitmaker
12. MeisterTask
13. Monday
14. MS Project
15. NTask
16. OfficeTimeLine (feuille de route)
17. Prioritize
18. ProjeqtOrt
19. Redmine
20. Tara.ai
21. Taskade
22. Trello
23. Wrike
24. ZenHub
25. Zenkit

16. Sécurité des applications web

1. Burp Suite Community Proxy
2. Graudit
3. JWT (Json Web Tokens)
4. Local PHP Security Checker
5. Logtail
6. PHP Code Sniffer
7. Retire.js
8. SonarLint
9. Zap Proxy Owasp

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