L’étude State of Frontend a été publiée, voici quelles sont les tendances 2024 du développement frontend.
Contexte
Commençons par mettre en contexte. State of Frontend 2024 c’est plus de 6000 participants répartis dans 139 pays différents. Notons tout de même qu’il y a quasiment 50% de participants qui sont Européens.
Emploie et séniorité
La plupart des participants sont Full-Stack (33,5%), développeur front senior (32,2%), intermédiaire (20%) ou junior (10%).
Mode de travail
Le télétravail complet (44,6%) ou partiel (42,7%) est pratiqué par 88,2% des participants. On observe une adoption du télétravail de la part des développeurs post Covid malgré le souhait d’un retour en arrière de la part des grands groupes.
Compétences
Un développeur frontend en 2024 se résume rarement à faire que du frontend, il possèdent également d’autres compétences :
- Développeur backend (70,7%)
- Designer (31,3%)
- QA specialist (26,4%)
En résumé, un développeur frontend en 2024 est polyvalent. Il est capable d’intervenir sur tous les aspects du projet, depuis la CI, en passant par le backend, la QA jusqu’au design du frontend.
Frameworks
70% des participants utilisent React.js et sont satisfaits. Vue.js se tient derrière avec 44,8%. Pour fermer la marche des gros frameworks, nous avons Swelte avec 25,8% et Angular2+ avec 22,1%.
Swelte et HTMX sont des technologies qui provoquent de l’engouement chez les participants qui aimerait apprendre ces frameworks.
Meta Framework
Les meta-framework occupent de plus en plus de place avec son leader Next.js (pour React.js) qui représente 52,9% des participants. Derrière lui se tient Nuxt (pour Vue.js) avec 26,5% et Astro (framework agnostic) avec 25,2%.
Une évolution des usages est attendue avec une traction importante pour SwelteKit (35,1%), Remix (29,9%), Astro (29,9%) et Nuxt (20,8%) des participants qui veulent apprendre la techno.
Librairies
Validation
Zod reste la librairie de validation de références avec 34,6%. Joi et class-validator sont représentées mais occupent une part nettement moins importante.
On remarque que l’industrie prend un tournant vers la maintenabilité, fiabilité et la DX. Zod répond parfaitement à ces critères ce qui fait son succès.
Date
date-fns est le leader avec 53,9% des participants qui apprécient la lib, suivit de Moment (45,1%) et Day.js (37,7%).
On note toutefois que 1/4 des participants n’aiment pas la libraire Moment, qui va probablement être de moins en moins utilisée.
Il est conseillé d’utilisé date-fns et Day.js.
Gestion d’état
L’API contexte de React reste la solution de state management la plus appréciée (52,8%) des participants, suivit de Redux Toolkit, Redux, Zustand, Pinia (~30%).
On note que 1/3 des participants n’aiment pas Redux et que 2 participants sur 5 veulent apprendre Zustand, qui semble avoir un futur prometteur.
Domination de Redux et Redux Toolkit dans l’industrie mais une montée en puissance de la librairie Zustand qui possède pas mal de traction dans la communauté.
Autres
Lodash semble être une libraire qui a encore un bel avenir avec 57% des participants qui apprécient la solution. RxJS (principalement présente dans Angular) est utilisé par 26% des participants et est globalement appréciée. jQuery est autant appréciée que dépréciée avec ~27% des participants.
Mise à part Lodash qui répond à un grand éventail de problème, globalement les participants ne portent pas d’interêt pour les autres librairies. On peut imaginer que l’utilisation de framework limitent l’utilité de ces autres librairies.
Data Fetching
La solution TanStack Query (43,4%) combiné au Fetch natif (72,4%) ou Axios (73,6%) est la solution la plus appréciée.
1/4 des participants apprécient ApolloClient, ce qui montre que GraphQL est une solution pas mal utilisée.
30% des participants montrent un intérêt pour l’apprentissage de tRPC.
CI
La CI devient incontournable pour les projets avec 80% des participants utilisant une CI. Les outils les plus utilisés sont GitHub Actions (cloud), GitLab CI (cloud / self hosted) et Jenkins (cloud / self hosted).
Package manager
Domination de NPM avec 56,6% des participants. Yarn reste stable d’année en année avec 21,5%.
PNPM est le package manager avec la plus grande croissance et regroupe 20% des participants. C’est l’option qui semble le plus intéresser la communauté.
JavaScript Runtime
Sans surprise, 96,6% des participants utilisent Node mais cela pourrait changer. Suite aux évolutions récentes, Bun et Deno facilite la façon de setup un projet en apportant le support natif de TypeScript et autres tools nécessaires au développement. Ces solutions risquent d’occuper une part plus importante à l’avenir.
Typescript
90% des développeurs utilisent Typescript. Une majorité d’entre eux (53,1%) considère que Typescript devient le standard du web délaissant JavaScript.
API Navigateur
Voici le top 5 des API du navigateur les plus utilisées :
- Fetch API : 82,1%
- Storage API : 46,4%
- Websockets API : 39,9%
- Clipboard API : 38,7%
- ResizeObserver / IntersectionObserver : 37,5%
La deuxième position de Storage API traduit la tendance à créer des applications “Local First” se rapprochant du développement d’application native. Ce qui est recherché, c’est la performance en rapprochant les données de l’utilisateur diminuant les temps de chargement.
Design System
- shadcn/ui : 28,1%
- MUI : 21,5%
- Bootstrap : 11,7%
shadcn/ui est le Design System le plus populaire et a été très rapidement adopté. Il se base sur Tailwind et Radix et est fortement personnalisable.
Tests
Seul 2,3% déclarent que les tests sont uniquement produits par une équipe de QA dédié, ce qui signifie que 87,7% des développeurs ont la responsabilité partiel ou complète de faire des tests, ce qui en fait une compétence essentielle en tant que frontend.
Voici le répartition des tests :
- Tests unitaires : 87,4%
- Tests E2E : 58,3%
- Tests d’intégration : 52,7%
Le combo de référence est Jest (68,7%) / Cypress (42,6%) mais cela risque de changer avec la forte adoption des nouvelles solutions telles que Vitest (39,8%), Testing Library (39,5%) et Playwright (36,9%).
Code Management
Les éditeurs de code
Les 3 éditeurs de code représentés pour les développeurs frontend sont :
- Visual Studio Code : 75,1%
- JetBrains IDE (WebStorm) : 17,8%
- Vim : 3,1%
La gratuité et la grande communauté autour de VSCode explique sa popularité. JetBrain annonce la gratuité de son IDE WebStorm à des fins non commerciales, ce qui pourrait changer cette répartition.
Les solutions dans le navigateur les plus utilisées sont :
- CodePen : 33,1%
- CodeSandbox : 28,1%
- StackBlitz : 19,9%
Versionning
Github (77,9%) s’impose en leader des solutions de versionning de code, expliqué par le go-to des projets open source et sa solution gratuite assez complète. Il est suivi par Gitlab (15%), et BitBucket (5,3%).
Low Code / No Code
On pourrait dire Low Intereset / No Interest, 86,3% des participants déclarent ne pas utiliser de plateforme de Low Code et 67,1% des participants déclarent ne pas utiliser de plateforme de No-Code.
Notion est la seule plateforme No-Code qui sort du lot avec 29,2% des participants qui utilisent l’outil.
Building Tools
- Vite 82,4%
- esbuild 50,2%
- webpack 44%
- create-react-app 31,3%
- Rollup 33,9%
On notera que create-react-app et webpack déplaisent à une partie significative des participants, montrant une perte d’intérêt pour ces technos, Vite y étant probablement pour quelque chose !
Linting
Quasiment tous les développeurs utilisent ESLint (89,3%) et Prettier (87,5%) qui sont devenus des standards du développement web. Stylelint est plus timide mais regroupe 30,2% des participants.
Système d’exploitation
MacOS domine la bataille avec 54,7% des participants qui l’utilisent. Le reste se partage l’utilisation de Windows (22,1%) et Linux (13,3%).
Utilisation de l’IA dans le développement web
75,8% des participants utilisent l’IA. Les solutions les plus utilisées sont ChatGPT (90%) et GitHub Copilot (57,4%). Les développeurs front utilisent principalement l’IA pour l’assistance de code (89,3%), la recherche d’information (60,5%) ou encore la revue de code (34,9%).
Accessibilité
Il est estimé que 16% (> 1 milliard) des humains sont atteints d’un handicap entrainant des problèmes d’accès aux outils numériques. Ce sujet est central et prend de plus en plus d’importance.
Voici les principales actions concernant la prise en compte de l’accessibilité dans le développement frontend :
- la sémantique HTML (72%)
- les textes alternatifs : attributs label et title (70,3%)
- le style des états actif et focus (53,6%)
- le contraste des couleurs (52,2%)
- la navigation clavier (48,9%)
Les trends futurs
Concernant les sujets qui possèdent un fort intérêt on retrouve :
- DX / UX
- Accessibilité
- Performance
- SSR / Server components
- Framework Fullstack
- Responsivness
On note que les PWA et GraphQL enregistrent une forte perte de popularité avec une diminution respective de 36,1% pour les PWA et 49,9% pour GraphQL.