BT

Accueil InfoQ Articles Etude InfoQ Des Tendances JavaScript Et Développement Web Pour 2020

Etude InfoQ Des Tendances JavaScript Et Développement Web Pour 2020

Favoris

Points Clés

  • WebAssembly a peut-être été la tendance dont on a le plus parlé depuis notre étude précédente. Avec WASI, les possibilités pour WebAssembly ont dépassé le cadre du navigateur, et, fin 2019, WebAssembly a atteint le stade de Recommandation stable W3C. En conséquence, nous avons promu WebAssembly au statut "Eclaireurs".
  • La publication ECMAScript annuelle, ES2020, approche, apportant avec elle le plus grand nombre de nouvelles fonctionnalités depuis ES2015 : "optionnal chaining", BigInt, globalThis, "nullish coalescing" et les imports dynamiques. Toutes ces fonctionnalités sont considérées stables avec, au moins, deux implémentations navigateur fonctionnelles.
  • Les Web components sont passés du statut "Eclaireurs" à "Avant-garde". Les Web components ont atteint la maturité et sont maintenant supportés nativement par Chrome, Firefox, Safari, ainsi que d'autres navigateurs basés sur la même implémentation comme Edge ou Brave.
  • TypeScript a progressé vers le statut "Arrière-garde". TypeScript qui est de loin la variante la plus répandue de JavaScript, a fait des progrès substantiels ces dernières années et est maintenant utilisé par une majorité de frameworks JavaScript.
  • L'univers des frameworks et bibliothèques JavaScript coté client est en perpétuelle évolution, et, bien que React, Vue.js, et Angular aient dominé ces dernières années, une nouvelle vague d’outils de compilation et de frameworks plus légers pourraient venir jouer les trouble-fêtes dans les années à venir.

Chez InfoQ, nous mettons à jour périodiquement nos graphiques afin de montrer à quelle stade en est l'adoption de telle ou telle technologie. Pour ce faire, nous considérons l'état de l'art, les idées innovantes ainsi que les échos qui nous parviennent de nos différents réseaux, meetups, conférences, etc. Nous prenons aussi en compte les métriques de trafic sur le site et la participation aux sessions QCon et autres conférences.

Si un sujet se trouve sur la droite du graphique, vous trouverez probablement beaucoup de contenu à son propos sur InfoQ. Nous l'avons couvert quand il est apparu et toute l'expérience acquise par les "Pionniers" et "Eclaireurs" est disponible pour aider chacun dans sa progression.

Les sujets sur la gauche de la courbe sont ceux que nous considérons comme émergents, utilisés par les "Pionniers" et "Eclaireurs", et nous concentrons notre étude à attirer l'attention du lecteur sur ces idées afin qu'il puisse décider par lui-même s'il doit s'y intéresser maintenant, ou attendre de voir leur évolution.

Cette étude fournit un résumé de la manière dont l'équipe éditoriale d'InfoQ voit l'adoption et l'émergence de nouvelles tendances dans l'univers JavaScript et Développement Web. C'est un avis basé sur des discussions internes exhaustives avec nos éditeurs, eux-mêmes ingénieurs logiciels, la compilation de résultats de sondage publics et privés, ainsi que le niveau de support navigateur apporté à une technologie comme par exemple les web components.

Ce mois-ci, étant donné la vitesse d'évolution de cet environnement qui nécessite une mise à jour annuelle, nous nous penchons sur JavaScript et le Développement Web en général. Voici à quoi ressemblait notre graphique lors de notre précédente étude, fin 2018 :

InfoQ Web Deveopment Trends 2018 Q4
Web Development 2018 Q4 Graph

Considérant la croissance importante de l'environnement Web et JavaScript, il ne nous parait plus judicieux de tout représenter dans un seul graphique. Aussi, nous avons séparé notre analyse en 11 sections :

  • Les langages / standards / patterns de développement Web
  • Les frameworks / bibliothèques coté client
  • Les plateformes / frameworks / API coté serveur
  • Le Cloud pour les ingénieurs Web
  • Gestion / bundling / optimisation des packages
  • Les tests et leur automatisation
  • Les environnements et frameworks mobile / bureau
  • L'IoT, la blockchain et le machine learning pour le Web
  • Visualisation / Réalité augmentée pour développeur Web
  • CSS
  • Editeurs de code et EDI [IDE] pour développeurs Web

Le développement Web est toujours un domaine intéressant pour nous, avec de nouveaux projets JavaScript qui apparaissent chaque jour. Savoir lequel vaut la peine qu’on s’y intéresse et lequel ignorer est notoirement complexe. Néanmoins, les développeurs peuvent toujours apprendre ou s’inspirer de certaines approches, même s’ils ne les utilisent pas dans leur travail au quotidien.

Les langages / standards / patterns de développement Web

InfoQ TrendsWeb Development Languages, Standards, and Patterns
Language/Standards/Patterns 2020 Q1

Pionniers

La publication ECMAScript annuelle, ES2020, approche, apportant avec elle le plus grand nombre de nouvelles fonctionnalités depuis ES2015 : "optionnal chaining", BigInt, globalThis, "nullish coalescing" et les imports dynamiques. Toutes ces fonctionnalités sont considérées stables avec, au moins, deux implémentations fonctionnelles dans des navigateurs.

PureScript propose un langage alternatif à TypeScript. Savoir s'il va dépasser le statut "Pionniers" dans un futur proche est encore incertain, mais il a obtenu un score élevé dans la récente étude sur la situation de JavaScript en 2019.

Eclaireurs

Nous continuons de surveiller Flow, un vérificateur de typage statique pour JavaScript, et Elm et Reason, des alternatives à JavaScript pour créer des applications Web. L'intérêt et le développement de Flow ont pâti de la montée en puissance de TypeScript, mais nous le gardons à l'œil, au cas où cela change.

WebAssembly a peut-être été la tendance dont on a le plus parlé depuis notre étude précédente. Avec WASI, les possibilités pour WebAssembly ont dépassé le cadre du navigateur, et, fin 2019, WebAssembly a atteint le stade de Recommandation stable W3C. En conséquence, nous l’avons promu au statut "Eclaireurs".

En plus du processus W3C traditionnel, Web Incubator CG (WICG) continue de proposer un large choix de nouvelles fonctionnalités et d'éventuels standards. Web Audio continue également de susciter l'intérêt afin de rendre la plateforme Web viable pour diverses applications audio.

Avant-garde

Les paradigmes de programmation fonctionnelle et réactive continuent d'alimenter les discussions sur la manière de créer des applications JavaScript plus efficaces. Evan You, le fondateur de Vue.js, explique : "Ironiquement, je pense que TypeScript m'a davantage aidé à me passer des classes plutôt qu'à les utiliser. Le code source de Vue 3 est à 100% TypeScript sans aucune classes."

Les Web components sont passés du statut "Eclaireurs" à "Avant-garde". Les Web components ont atteint la maturité (Web components reached mainstream maturity) et sont maintenant supportés nativement par Chrome, Firefox, Safari, ainsi que d'autres navigateurs basés sur la même implémentation comme Edge ou Brave. De nombreux frameworks ou bibliothèques comme Angular, Dojo, Ionic, Stencil, Svelte, ou encore Vue.js les supportent nativement.

Nous avons ajouté deux éléments directement à la catégorie "Avant-garde" : ES2019 et AMP.

ES2019 a apporté les méthodes flat et flatMap aux tableaux, Object.fromEntries, et quelques améliorations concernant les string et le paramètre optionnel de la clause catch.

AMP, une alternative qui aspire à rendre le Web plus rapide, a rejoint la fondation OpenJS. Bien que InfoQ ait résisté jusque-là, préférant l'utilisation de standards libres, AMP continue d'être adopté, en particulier parmi les sites de médias et d'informations.

Arrière-garde

Alors que l'univers JavaScript gagne en maturité, il y a, dans cette catégorie, des technologies incontournables qui ne montrent aucun signe de fatigue et qui continuent d'être utilisées par quasiment tous les développeurs JavaScript.

HTML5 et ES6/2015 - ES2018 sont utilisés aujourd'hui par pratiquement toutes les application Web.

TypeScript a progressé vers le statut "Arrière-garde". TypeScript qui est de loin la variante la plus répandue de JavaScript, a fait des progrès substantiels ces dernières années et est maintenant utilisé par une majorité de frameworks JavaScript. Il fait même parti du top 10 des langages selon un rapport GitHub Octoverse et l'étude State of JS survey montre TypeScript comme de loin l'alternative à JavaScript la plus utilisée, avec plus de 50% des sondés qui indiquent qu'ils l'utilisent et ont une opinion favorable de cette surcouche de JavaScript.

Retardataires

Nous finissons notre étude avec les retardataires qui, bien qu'ils soient encore utilisés par de nombreuses applications, ne reçoivent plus suffisamment d'intérêt pour justifier de nouvelles contributions. De nouvelles versions ont supplanté ES5 et HTML4, même si ces nouvelles versions comprennent un grand nombre de fonctionnalités venant de ES5 et HTML4.

Les frameworks / bibliothèques coté client

L'univers des frameworks et bibliothèques JavaScript coté client est en perpétuelle évolution, et, bien que React, Vue.js, et Angular aient dominé ces dernières années, une nouvelle vague d’outils de compilation et de frameworks plus légers pourraient venir jouer les trouble-fêtes dans les années à venir.

InfoQ Web Development Trends Client-side frameworks and libraries
Client-side frameworks/libraries 2020 Q1

Pionniers

Vue.js 3 n'a pas encore été publié à l'heure de ce rapport mais c'est une refonte très attendue, utilisant TypeScript.

Eclaireurs

Dojo continue son chemin, délivrant un framework TypeScript léger, actuellement en version 6, la version 7 étant pour bientôt. Dojo procure un moyen très moderne et efficace pour construire des applications Web réactive en s'appuyant fortement sur TypeScript. Dojo fait partie de la fondation OpenJS.

Ember a récemment annoncé Ember Octane, introduisant un nouveau modèle de composant et un système réactif.

LitElement est le successeur de Polymer, fournissant une bibliothèque pour créer des Web components légers.

Aurelia compte toujours des adeptes et travaille sur la création d'un environnement pour construire des applications à base de composants.

Marko est un autre projet de la fondation OpenJS, qui a vu le jour chez eBay et qui vise à créer des composants d'interface réactifs.

Omi par Tencent est une bibliothèque de création de composants transverses, intégrant le support pour les Web components, JSX et d'autres approches basées sur les composants.

Avant-garde

Trois projets font leur apparition dans cette catégorie.

Stencil par Ionic est devenu le framework de création de composants le plus populaire et, tout comme Omi, capable de créer des composants compatibles avec de nombreux autres frameworks.

Svelte est devenu une alternative populaire à React grâce à son adéquation avec HTML et son approche de framework "transparent".

Preact est une alternative légère (<4KB gzipped) à React, tout en proposant la même API que ce dernier.

Arrière-garde

Angular progresse vers cette catégorie, avec la publication très prochainement d'Angular 9 qui embarque enfin sa mise à jour très attendue du moteur de rendu Ivy.

Vue.js 2 se classe également dans cette catégorie, étant l'un des frameworks JavaScript les plus utilisés aujourd'hui.

React demeure la bibliothèque de rendu la plus populaire et a proposé des améliorations depuis notre dernière étude, notamment avec les hooks.

RxJS reste une bibliothèque de programmation réactive populaire, très utilisée par l'écosystème Angular.

Moment, également membre de la fondation OpenJS, est toujours la bibliothèque la plus utilisée pour la manipulation des heures et des dates.

Alors que le besoin pour des bibliothèques comme Lodash (OpenJS Foundation) diminue, elle est encore très utilisée, de même que Core-js.

Retardataires

Dojo 1.x et Angular 1.x, même s'ils sont encore utilisé, sont en mode maintenance. Quant à JQuery, bien qu'ayant reçue quelques améliorations, elle a pour la plupart été remplacée par les nouvelles fonctionnalités natives HTML et JavaScript.

Les plateformes / frameworks / API coté serveur

La partie JavaScript coté serveur a suscité beaucoup d'intérêt ces derniers temps. Une des innovations les plus importante concerne le rendu coté serveur, le pré-rendu de manière statique et le rendu durant le "build-time" de l'application, tout cela afin de réduire la charge de travail coté client sans pour autant remettre en cause les standards de programmation réactive utilisés dans les applications aujourd'hui.

La démarcation entre coté server / API / coté client s'estompant, cette catégorie regroupe la génération statique, les données, le "state management" d'une application et les approches basées sur les APIs qui sont souvent partagés entre client et serveur.

InfoQ Web Development Trneds Server-side platforms, frameworks, data, and APIs
Server-side platforms/frameworks/data/APIs 2020 Q1

Pionniers

Deno s'approche de la publication de sa version 1.0. Créé par Ryan Dahl, à qui l'on doit également Node.js, Deno aspire à devenir une alternative à Node.js utilisant TypeScript.

Dojo s'est pourvu d’une approche build-time rendering rendant possible l'utilisation de fonctionnalités Node.js pendant cette phase, ouvrant la voie à de nouvelles options en terme de génération statique de sites. En comparaison d'autres solutions, l'approche de Dojo à un niveau composant apparait comme hautement réutilisable. De plus, Dojo stores procure un "state management" prévisible et fiable avec un support natif pour les cas d'utilisation classiques.

Hasura est l'une des nombreuses options pour créer un serveur GraphQL. Selon le State of JS 2019 Rising Stars report, l'intérêt pour Hasura s'est grandement accru au cours de l'année passée.

Eclaireurs

L'intérêt pour Koa, un framework Node.js développé par les créateurs d'Express, continue de croitre.

Nuxt est un framework Vue.js qui propose du rendu coté serveur, de la génération statique et des applications Web monopage (SPA).

Strapi et Storyblok sont deux systèmes open-source de gestion de contenu "headless". Ce secteur a suscité un intérêt croissant alors que les entreprises cherchent à proposer des options de gestion de contenu modernes en lien avec les architectures réactives à base de composants actuelles.

Apollo, qui a émergé à l'origine du framework Meteor, reste une option populaire pour GraphQL.

Avant-garde

Nest.js est un framework Node.js écrit en TypeScript qui a rapidement gagné en popularité grâce à son grand choix d'options et ses fonctionnalités permettant du développement TypeScript "full stack".

Next.js est à React ce que Nuxt est à Vue.js.

Gatsby tire profit de GraphQL pour la récupération de données provenant de plusieurs sources et propose des options de rendu efficaces pour des applications basées sur React.

Fastify est un projet de la fondation OpenJS et apparait comme une alternative à Express en tant que framework Node.js visant la performance.

MobX, une alternative à Redux, est de plus en plus adopté pour le "state management".

Arrière-garde

Node.js demeure de loin l'approche la plus utilisée pour du JavaScript coté serveur et est également la pierre angulaire pour des environnements comme Electron, permettant des créer des applications de bureaux avec des technologies Web. Node.js fait partie de la fondation OpenJS.

Express reste le framework Node.js le plus répandu et fait également partie de la fondation OpenJS.

Bien que REST soit toujours le modèle dominant, GraphQL se pose en concurrent sérieux pour requêter une base de données. Il est aussi courant pour une entreprise de tirer parti à la fois de REST et de GraphQL dans sa manière d'utiliser les APIs.

Redux est toujours la référence en terme de "state management", bien que son utilisation dans des projets de moindre envergure diminue.

Le Cloud pour les ingénieurs Web

Une grande diversité de solutions pour créer et déployer des applications cloud est apparue.

InfoQ Web Development Trends Cloud for Web Engineers
Cloud

Pionniers

Architect est un projet de la fondation OpenJS permettant la création d'application JavaScript, Python et Ruby serverless.

Eclaireurs

AWS Amplify procure une plateforme de développement pour construire des applications mobiles et Web avec AWS.

Netlify est l'un des nombreux choix populaires pour déployer rapidement une application web.

Le SDK Azure gagne en popularité, en grande partie grâce à ses APIs flexibles dans le domaine de l'internet des objets et des services cognitifs.

Avant-garde

AWS Lambda gagne en popularité pour l'exécution de fonctions JavaScript sans serveur.

Zeit Now est un moyen de déployer des applications web, statique ou JAMstack, des fonctions sans serveurs, et peut encore servir comme CDN.

Google Cloud Functions propose l'approche de Google Cloud pour exécuter des fonctions JavaScript sans serveur.

Firebase, un autre service Google, propose une infrastructure cloud pour mobile ou web.

Gestion / bundling / optimisation des packages

Le bundling, la gestion des packages, ainsi que l'optimisation générale d'une application demeurent des sujets important dans le domaine du développement web.

InfoQ Web Development Trends Package Management
Package management/bundling/optimizing 2020 Q1

Pionniers

pika se concentre sur le fait de fournir des outils JavaScript construits et déployés dans des environnements supportant les modules ES.

Entropic est une alternative à npm en phase de développement, avec une approche plus distribuée remplaçant un unique dépôt central.

Eclaireurs

Parcel est un bundler d'application web en pleine croissance. A la date de publication de ce rapport, Parcel 2 est proche de la release.

webhint est un projet de la fondation OpenJS qui ajoute aux outils de linting des améliorations en terme d'accessibilité, de vitesse et de compatibilité entre navigateurs.

Avant-garde

Prettier est un outil de mise en forme de code qui a mis fin à la plupart des débats concernant le formatage du code.

ESLint est un autre projet de la fondation OpenJS qui procure de nombreuses options pour trouver des erreurs et des défauts de conception dans les applications JavaScript. TSLint en tant que produit autonome a été déprécié et est maintenant une extension d'ESLint.

Esprima est un parser ECMAScript très répandu qui permet de travailler avec les AST (Abstract Syntax Tree) et fait également partie de la fondation OpenJS.

Yarn est un gestionnaire de package alternatif à npm qui exploite le même registre.

Rollup est un bundler de modules ES créé par certains des développeurs de Svelte. Rollup est plus utilisé pour les bibliothèques et les modules alors que webpack est plus couramment utilisé pour les applications.

Arrière-garde

NPM est le standard des gestionnaires de package et registre pour JavaScript. Toutefois, il a commencé à être remis en question en 2019 et l'on pourrait être à la recherche d'alternatives dans un futur proche.

webpack est le bundler de modules et optimiseur de code le plus utilisé dans l'univers JavaScript.

Babel fournit un transpiler JavaScript, permettant aux développeurs d'utiliser les toutes dernières fonctionnalités du langage, tout en déployant en production du code compatible avec les anciennes versions. Babel a également ajouté récemment la transpilation TypeScript, bien que d'utilité limitée car n'offrant pas de vérification de type.

Lighthouse est un outil d'analyse automatique créé par Google permettant d'améliorer la performance et la qualité de code d'une application.

Outils de tests et d'automatisation

Il existe de nombreuses options pour réaliser et lancer des tests en JavaScript. Dans un souci de concision, nous avons exclus des bibliothèques comme Chai, Sinon, Jasmine, QUnit ou Cucumber qui fournissent des possibilités de test très utiles et recherchées. Néanmoins, nous continuons de suivre l'évolution de ces bibliothèques ainsi que de nombreuses autres solutions de test.

InfoQ Web Development Trends Testing and Automation
Testing and automation 2020 Q1

Pionniers

Playwright est une toute nouvelle alternative à Puppeteer pour les tests de rendu dans un navigateur. Contrairement à Puppeteer, Playwright cible tous les navigateurs modernes.

Le machine learning appliqué aux tests pour l'automatisation de la génération des tests a fait son apparition. De nombreuses entreprises travaillent sur le sujet, comme Applitools, SauceLabs, Testim, Sealights, Test.AI, Mabl, ReTest, ReportPortail, etc. Il n'y a pas consensus en la matière pour l'instant mais nous espérons que cela change dans un futur proche. Le Visual AI testing est aussi une alternative au tests traditionnels de régression au niveau du rendu.

Eclaireurs

Appium est un framework de tests automatisés pour des applications web natives, hybrides et mobiles utilisant le protocole W3C WebDriver conçut pour Selenium. Appium fait partie du projet OpenJS.

Intern est un projet TypeScript de la fondation OpenJS pour les tests unitaires, fonctionnels (via WebDriver ou même d'autres environnements comme Puppeteer ou Playwright), d'intégration, de performance, etc.

Ava est un exécuteur de tests très répandu pour les applications Node.js.

WebdriverIO est un projet de la fondation OpenJS qui fournit un environnement pour les tests fonctionnels et d'intégration basé sur le protocole WebDriver.

Avant-garde

Cypress a rapidement gagné en popularité en tant qu'exécuteur de tests de bout en bout pour les navigateurs basés sur Chromium et a récemment ajouté le support Firefox et Edge.

Storybook est à la fois un framework de test, un système de conception et un environnement de développement pour créer, tester et partager des composants d'interface.

Arrière-garde

Jest est un framework de test popularisé par l'écosystème React et est peut-être la bibliothèque d'assertion la plus utilisée aujourd'hui.

Mocha de la fondation OpenJS fournit une bibliothèque de tests unitaires simple et facile à appréhender.

Karma et Protractor restent les outils par défaut pour tester les applications Angular.

WebDriver, le protocole apparut avec le projet Selenium, reste le moyen le plus courant d'interagir avec les navigateurs dans le cadre de tests automatisés complets.

Puppeteer est, par bien des aspects, plus simple à utiliser que Selenium, et a choisi une approche d'automatisation de tests ciblant exclusivement les navigateurs basés sur Chromium. Son usage est cependant limité au niveau des fonctionnalités et de la compatibilité navigateur.

Environnement mobile/bureau et frameworks pour ingénieur web

Tirer parti des technologies web pour construire des applications mobiles et de bureau continue de croitre à la fois en terme de popularité et de possibilités.

InfoQ Web Development Trends Mobile and Desktop
Mobile/desktop environments and frameworks 2020 Q1

Pionniers

Ionic Capacitor est une alternative à Cordova qui procure un contrôle plus fin quant à savoir à quel moment utiliser plutôt des technologies natives ou, au contraire, web, pour la création d'applications hybrides.

Eclaireurs

NativeScript permet de compiler des applications Angular ou Vue.js en applications natives.

Avant-garde

Ionic 4+ fournit un framework et une bibliothèque de composants pour construire des applications. A l'origine développé comme un framework Angular, Ionic est maintenant indépendant de la technologie et supporte React et bien d'autres.

React Native permet aux développeurs de créer des applications natives en utilisant des technologies et concepts que l'on retrouve dans React. Les retours sont mitigés quant à l'utilisation de ce type de solutions car en dépit de leur bonne adaptation à certains cas d'utilisation, elles demeurent compliquées à utiliser.

Electron est un projet de la fondation OpenJS permettant de créer des applications de bureau à partir de technologies web en embarquant Chromium et Node.js. Beaucoup d'applications que vous utilisez tous les jours se basent sur Electron, comme Slack par exemple.

Arrière-garde

Cordova reste très utilisé pour créer des applications mobiles hybrides mais il pourrait bien passer rapidement dans la catégorie des "Retardataires".

IoT / Blockchain / Machine learning pour ingénieur web

De plus en plus de possibilités pour les technologies web apparaissent dans des domaines comme l'IoT, la blockchain ou encore le machine learning.

InfoQ Web Development Trends IoT, Blockchain, and Machine Learning
IoT/Blockchain/Machine learning 2020 Q1

Pionniers

ml.js fournit un grand nombre d'outils de machine learning pour les développeurs JavaScript. brain.js, quant à lui, apporte un support pour les réseaux de neurones utilisant l'accélération GPU en JavaScript. Bien que TensorFlow.js reste l’option la plus utilisée en machine learning, ces deux bibliothèques se présentent comme des alternatives pleines de potentiel.

Neurosity propose aux développeurs un avant-gout de Notion, un appareil de mesure des ondes cérébrales et de transcription de pensées. Ce qui permet à Neurosity de se démarquer par rapport à la concurrence, ce sont ses APIs JavaScript.

Eclaireurs

Moddable et JerryScript sont des moteurs ECMAScript légers à destination des objets connectés. JerryScript fait partie de la fondation OpenJS.

Node-Red, également membre de la fondation OpenJS, fournit des outils "low-code" pour des applications réactives dans le domaine de l'internet des objets.

johnny-five est une plateforme JavaScript de robotique et d'IoT lancée par Bocoup.

interledger.js est l'implémentation JavaScript du protocole Interledger, bâti sur un ensemble de standards concernant les registres, la blockchain et les crypto-monnaies. Ce projet fait partie de la fondation OpenJS.

Avant-garde

TensorFlow.js, initialement lancé par Google, est actuellement le package JavaScript le plus utilisé dans le domaine du machine learning.

Visualisation / réalité augmentée pour développeur web

En JavaScript, l'usage de la réalité augmentée, virtuelle ou mixte se popularise.

En dehors de d3 et Three.js, la restitution de données, les graphiques et toutes les approches de visualisation sont éparpillés dans une multitude de projets.

InfoQ Web Development Trends Data Visualization and XR
Visualization/XR 2020 Q1

Eclaireurs

React 360 fournit aux développeurs une expérience en réalité mixte dans un style proche de React.

Bien qu'il reste du travail pour définir les standards en réalité augmentée, la recommandation WebXR 1.0 a été finalisée récemment.

BablyonJS fournit aux développeurs JavaScript et TypeScript une représentation 3D et des APIs pour créer des expériences immersives.

Avant-garde

Three.js est une API bas niveau venant en surcouche de WebGL pour dessiner en 3D dans un navigateur.

La release 1.0 de A-Frame a été publiée récemment, avec un support pour la recommandation WebXR. A-Frame fournit une approche basée sur le DOM, englobant Three.js et les possibilités natives de WebXR.

pixi.js est un autre framework bâti sur WebGL qui fournit les bases du développement de jeux.

Arrière-garde

d3 est la bibliothèque graphique la plus utilisée aujourd'hui pour la visualisation de données.

CSS

Avec toutes les nouveautés apportées au CSS et au design de manière générale ces dernières années, le CSS d'aujourd'hui n'a plus rien à voir avec celui d'il y a 5 ou 10 ans.

InfoQ Web Development Trends CSS
CSS 2020 Q1

Pionniers

Algorithmic CSS est une nouvelle approche visant à construire des structures de mise en page composables en s’appuyant sur des fonctionnalités CSS existantes.

Eclaireurs

CSS Houdini est lui aussi une nouvelle approche qui, cette fois, consiste à venir interagir directement avec le moteur CSS à travers le CSS Object Model (CSSOM) au cours des étapes de mise en page et de calcul des styles du moteur de rendu du navigateur.

Typed CSS tire parti de Dojo et d'autres pour apporter la sécurité de TypeScript au niveau des modules CSS, procurant ainsi une mise en forme précise et efficace pour le développement de composants.

Ant Design est l'un des outils populaires de mise en forme disponible pour le développement et l'utilisation de composants modernes.

TailwindCSS s’appuie sur PostCSS pour fournir un framework CSS bas niveau.

Avant-garde

Design Systems est en passe de devenir un moyen plébiscité d'échange de standards de design et de bibliothèques de composants parmi les entreprises, améliorant ainsi la réutilisation et l'homogénéisation.

CSS Grids est une fonctionnalité CSS dont l'utilisation se répand et qui permet de gérer les mises en pages de type grille sur les sites Web et les applications.

PostCSS est une variante de préprocesseur CSS, qui agit de manière semblable à Babel en transformant les nouvelles syntaxes CSS en une version plus ancienne, dont la compatibilité est mieux assurée.

CSS-in-JS est un concept qui a d'abord gagné en popularité dans l'univers React, permettant de définir du CSS "inline" dans les composants. Des implémentations plus performantes convertissent même le CSS "inline" en un fichier externe afin d'optimiser le délai d'affichage en production.

Material Design a été la première spécification open-source d'importance au niveau du design, et elle reste très populaire parmi de nombreux frameworks et projets.

Linaria est l'une des approches CSS-in-JS les plus utilisée.

Arrière-garde

Le Responsive design est né du besoin d’améliorer l’expérience utilisateur sur téléphones, tablettes ou encore ordinateurs de bureau et reste aujourd'hui l'approche dominante dans le design d'applications. Grâce au design responsive, de nombreuses entreprises ces dix dernières années ont pris conscience de l’importance des supports de communication, les amenant à revoir leur logo ou encore leur design afin de s'adapter à ces nouvelles attentes.

CSS Flexbox est une fonctionnalité CSS très utilisée pour la mise en page d'application.

SASS reste le préprocesseur CSS le plus répandu.

Editeurs de code et EDI [IDE] pour développeurs web

Les EDIs [IDE] et éditeurs de code pour JavaScript et le développement web continuent d'innover en terme de fonctionnalités et de flexibilité. Les EDIs en ligne sont également de plus en plus performants, que ce soit du point de vue des fonctionnalités ou du travail collaboratif.

InfoQ Web Development Trends Code Editors and IDEs
Code editors and IDEs 2020 Q1

Eclaireurs

StackBlitz est l'un des nombreux éditeurs en ligne dans le cloud. Il fournit une importante gamme de fonctionnalités qui n'étaient encore disponibles que sur un éditeur bureau il y a quelques années de ça.

Avant-garde

CodeSandbox, souvent décrit comme une version navigateur de VS Code, est l'EDI cloud le plus utilisé.

Arrière-garde

VS Code est passé en quelques années du statut de projet dédaigné, à cause de son origine chez Microsoft, à celui d'EDI le plus utilisé dans l'univers JavaScript/TypeScript.

WebStorm reste l'EDI payant le plus utilisé pour créer des applications web. WebStorm fait partie de la même famille que des projets comme IntelliJ, avec lequel beaucoup d'ingénieurs effectuant la transition de Java vers JavaScript ont déjà travaillé.

vim et emacs sont toujours des éditeurs de code populaires et peuvent même être transformés en EDI via une série d'outils et d'extension. Il est improbable que des fans inconditionnels, ayant amélioré pendant des années leur productivité et leur efficacité sur ces éditeurs, passent un jour sur une autre solution.

Avec l'acquisition de GitHub par Microsoft, certains s'attendaient à ce qu'Atom fusionne avec VSCode, ce qui n'est pas le cas pour l'instant. Atom, tout comme VSCode, utilisent Electron dans un environnement bureau.

Sublime Text, bien qu'encore utilisé par beaucoup, est en perte de vitesse suite à l'apparition d'Atom dans un premier temps puis de VSCode plus récemment.

Conclusions

L'environnement JavaScript, et Web plus généralement, est foisonnant. Bien qu'il puisse paraitre difficile de se maintenir à jour, nous pensons que la plupart des briques de base dans ce domaine sont désormais en place, laissant le champ libre à l'innovation. L'équipe InfoQ est là pour vous fournir une expertise sur le paysage Web et JavaScript et nous accueillons volontiers vos retours, commentaires et autres contributions.

 

Evaluer cet article

Pertinence
Style

Bonjour étranger!

Vous devez créer un compte InfoQ ou cliquez sur pour déposer des commentaires. Mais il y a bien d'autres avantages à s'enregistrer.

Tirez le meilleur d'InfoQ

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

Commentaires de la Communauté

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Votre profil est-il à jour? Merci de prendre un instant pour vérifier.

Note: en cas de modification de votre adresse email, une validation sera envoyée.

Nom de votre entreprise:
Rôle dans votre entreprise:
Taille de votre entreprise:
Pays/Zone:
État/Province/Région:
Vous allez recevoir un email pour confirmer la nouvelle adresse email. Ce pop-up va se fermer de lui-même dans quelques instants.