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. HTTP Cat
7. Hoppscotch
8. Insomnia
9. MockAPI
10. Postman ✨
11. React Apollo
12. Relay
13. Swagger
14. 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. AMIResponsive
2. Browserstack
3. Mobile Friendly
4. Responsively
5. Sizzy (payant)
6. Screenfly.org

Tests end to end

• Cypress

Tests unitaires

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

Webperfs

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

Partie 1

Partie 3