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

Le développement front-end est un domaine important du développement web. Les développeurs front-end utilisent une variété d’outils pour créer des pages web interactives, réactives et esthétiquement agréables.

Dans cette deuxième partie, nous allons vous présenter une sélection des meilleurs outils de développement front-end.

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 et GraphQL front

1. API Platform
2. Apollo Graph OS
3. Axios
4. Fast API
5. GraphQL
6. Httpie.io ✨
7. HTTP Cat
8. Hoppscotch
9. Insomnia
10. MockAPI
11. Postman
12. React Apollo
13. Relay
14. Swagger
15. ThunderClient ✨

Builder JS

1. ESBuild
2. Jspm
3. Rollup.js
4. SnowPack
5. System.js
6. Vite.js ❤️
7. WebPack (dans frameworks)✨

CSS

1. Almond CSS
2. Autoprefixer
3. Chakra UI React
4. CSS Fingerprint
5. Mantine UI
6. Sass ❤️
7. PostCSS ❤️
8. 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 CSS JS

1. Component.ai
2. Daisyui.com Tailwind Components
3. React SVGR
4. Shadcn
5. Simple Sharing buttons
6. Storybook ❤️
7. Tailwind Components
8. 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 (Meta) ✨ ❤️
5. Next.js ✨ Framework React Front et Back ❤️
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. JSX
4. MUI
5. React Query
6. React Hook Form
7. React Dev Tools (Chrome, Firefox)
8. React Testing Library
9. React UI tools
10. SWR
11. Storybook.js
12. 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 – Packages managers

1. Flatpack
2. Homebrew (Mac) / Homebrew Formulae (Mac)
3. Npm et Npx / Npmjs.com
4. Pnpm.io
5. 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. Node.js Debugger
4. Zoho Debug

Outils navigateur

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

Outils de tests

Responsive Web Design

1. AMIResponsive
2. Browserstack
3. Mobile Friendly
4. Responsively
5. Sizzy (payant)
6. Screenfly.org

Tests end to end

• Cypress
• Playwright ✨

Tests unitaires

1. Jasmine JS
2. Jest
3. Appium
4. Chromatic
5. Linear
6. React Testing Library
7. Selenium (framework)
8. Sentry
9. Testing Library (APIs)
10. Travis
11. Qodana
12. Vitest ✨

Webperfs

1. Ffmpeg
2. GTMetrix
3. ImageMagick
4. Lib CWebp
5. Tools.pingdom.com
6. YellowLab
7. WebPonize (Mac)