Se préparer pour 2020: 8 tendances en matière de développement JavaScript côté client que vous devez connaître

L'auteur du document, dont nous publions la traduction aujourd'hui, souhaite partager avec les lecteurs une prévision concernant le développement des technologies web pour les années à venir. En particulier, nous parlerons ici de ce que, selon l'auteur, les développeurs frontaux valent probablement la peine de commencer à apprendre aujourd'hui.

Tout ce qui concerne JavaScript se développe très rapidement. Cela vaut également pour ce qui peut être attribué au domaine du développement Web. De nos jours, ceux dont les projets ne sont pas basés sur les technologies les plus modernes commencent surtout à ressentir l'écart entre ce qu'ils utilisent et le nouveau qui apparaît presque quotidiennement. Ces technologies incluent Webpack, React, Jest, Vue, Angular dans leur état actuel. Alors que la «population» du monde du développement frontal, y compris les spécialistes techniques et les programmeurs, ne cesse de croître, ce monde s'efforce de normaliser. L'arrivée de nouvelles technologies et d'outils change déjà la donne.



Nous pouvons dire avec une certaine certitude que la normalisation du développement des interfaces utilisateur sera une tendance courante dans le développement des technologies frontales. En particulier, nous parlons d'une composition basée sur des composants, le désir de systèmes modulaires. Cette tendance affecte presque tout - du style aux tests et même à la gestion de l'état des applications. Cette tendance peut inclure des technologies construites autour de composants Web, de modules ES, des outils correspondants et bien plus encore.

1. Systèmes pour travailler avec des composants Web, indépendants des frameworks et des bibliothèques

En général, nous pouvons dire que c'est l'avenir. Pourquoi? Le fait est que les systèmes en question sont indépendants des cadres. Cela signifie qu'ils peuvent fonctionner à la fois de manière totalement indépendante et avec n'importe quel framework, compte tenu de ses caractéristiques concernant la présentation du code. Ces systèmes ne sont pas caractérisés par ce qu'on appelle la «fatigue JavaScript», la «fatigue JavaScript». Ils sont pris en charge par les navigateurs modernes. Dans les projets créés avec leur utilisation, la quantité optimale de code auxiliaire est incluse. Ils font bon usage des capacités de VDOM.

Les composants en question sont construits en utilisant la norme Custom Elements. Il vous permet de créer de nouvelles balises HTML, d'affiner leurs propriétés - de l'apparence aux mécanismes internes et aux fonctionnalités de travail avec Shadow DOM.

Les projets notables dans ce domaine sont Lit-html (et Lit-element ), StencilJS , SvelteJS , Bit .

À quoi devraient ressembler les principes de modularité, de réutilisation, d'encapsulation et de normalisation à l'ère des composants? Si vous y réfléchissez, pensez à l'avenir du développement de l'interface utilisateur, il s'avère que cet avenir est représenté par des composants Web. Nous reviendrons sur cette idée. En attendant, voici quelques documents utiles sur les composants Web. Ici, vous pouvez lire des informations sur les outils de développement de composants Web. Voici des informations sur les bibliothèques de composants Web. Vous trouverez ici un exemple de prototypage d'un lecteur RSS à l'aide de composants Web.

2. À propos de l'avenir des guerres de frameworks et de bibliothèques

En termes de nombre de téléchargements depuis NPM, React contourne toujours régulièrement Angular et Vue. Du moins pour l'instant .

Ici, nous n'allons pas parler des frameworks et des bibliothèques qui sont meilleurs que d'autres et pourquoi il en est ainsi. Si vous êtes intéressé à lire à ce sujet - le voici - des matériaux dans lesquels, sur des données réelles, Angular, React et Vue sont comparés. Nous allons étudier la situation dans son ensemble. Et cela ressemble à ceci: dans le développement frontal, la part des technologies basées sur les composants augmente. Il ne cesse de croître. Le nombre de développeurs qui utilisent des technologies similaires augmente également, et - rapidement. De plus, dans ce domaine, il y a suffisamment d'espace libre pour l'introduction de nouveaux outils.

Alors, quel cadre viendra en premier dans 5 ans? Personne ne le sait. Mais il est sûr de dire que quelqu'un qui veut se préparer à l'avenir devrait étudier les technologies de base de l'écosystème JavaScript et s'habituer à l'environnement dans lequel le DOM est contrôlé par des composants Web. Peut-être que dans 5 ans React sera le principal outil de développement d'interfaces. Vous pouvez y penser en consultant le tableau ci-dessus, basé sur les données du NPM. Mais pas si simple. Jetez un œil, par exemple, à ces mesures. Ils nous permettent de dire qu'en termes d'utilisation réelle, l'écart entre React et Vue est très faible.


Vue et React, en termes d'utilisation réelle, sont très proches

À l'avenir, nous prévoyons d'améliorer la normalisation des composants Web indépendamment des frameworks. À cet égard, on peut réfléchir à l'effet que cela aura sur la guerre-cadre. Et au fait, comme nous le savons tous, React n'est même pas un framework, mais juste une bibliothèque.

3. Isolement, réutilisation et composition des composants

Bit est un exemple de plateforme axée sur le développement de composants, la collaboration avec eux et leur réutilisation

En parlant de développement frontal et des composants à partir desquels les interfaces utilisateur sont construites, on ne peut s'empêcher de rappeler Bit .

Cette plate-forme open source vous permet d'isoler des composants (ou tout morceau de code JS pouvant être réutilisé) et de les transformer en blocs de construction pouvant être utilisés dans de nombreux projets. Dans ce cas, le développeur peut contrôler le code source des composants, gérer ses modifications et une arborescence complète de ses dépendances.

En termes simples, grâce à Bit, le développeur a la possibilité d'améliorer ses composants dans différents projets et de synchroniser les modifications. Grâce au hub de composants bit.dev, cette idée s'étend au développement d'équipe, permettant aux membres de l'équipe d'organiser le code et de le partager.

Le hub Bit fournit au développeur tout ce qui est nécessaire pour la création et l'utilisation conjointes de composants. Par exemple - des outils de recherche pratiques, un environnement interactif dans lequel vous pouvez expérimenter avec des composants, un support complet pour CI / CD.

Grâce à Bit, vous pouvez utiliser non seulement les composants créés par les efforts de votre équipe, mais aussi des projets open source. Cela inclut la possibilité de recommander des modifications aux composants existants et la possibilité de partager leurs développements.

4. Modules ES et CDN

Les modules ES font partie de la norme ES6 qui décrit comment travailler avec des modules dans le navigateur. L'utilisation de cette technologie vous permet de transférer certaines fonctionnalités vers des modules qui peuvent être téléchargés, par exemple, via CDN. Après la sortie de Firefox 60, nous pouvons dire que les modules ES prennent en charge tous les principaux navigateurs . Des travaux sur la prise en charge des modules ES sont également en cours dans Node.js. De plus, la prise en charge des modules ES devrait être ajoutée à WebAssembly .

5. Gestion des états au niveau des composants

Quoi de neuf sur la gestion de l'état des applications? De nos jours, la gestion des états se résume à mettre quoi que ce soit dans le référentiel mondial Redux.

Mais une telle approche peut compliquer le travail avec les composants, peut devenir un obstacle à la divulgation complète de leurs capacités en termes de réutilisation et de modularité. Si nous considérons la situation de ce point de vue, nous pouvons dire que des projets comme MobX nous offrent une approche intéressante et plus réactive pour travailler avec l'état des applications (ici vous pouvez également rappeler le projet non déclaré ).

Si nous parlons des nouveaux mécanismes standard React pour gérer l'état, nous pouvons rappeler l'API contextuelle et les hooks. Leur apparence signifie que le programmeur n'a plus besoin de bibliothèques tierces pour gérer l'état et que cet état peut être géré au niveau des composants fonctionnels. Cela améliore la modularité des projets et la possibilité de réutiliser les composants.

Par conséquent, si vous essayez de regarder vers l'avenir, il se peut bien que le terme «état» soit utilisé principalement dans l'application aux composants encapsulés, et non dans l'application à certains entrepôts de données mondiaux de niveau application.

6. La stylisation des composants est une composition

Séparation des composants qui implémentent la logique et les styles - la façon de styliser les composants à travers la composition

Beaucoup a été dit sur la façon de styliser les composants. Il existe de nombreuses opportunités dans ce domaine. Ce sont des CSS intégrés, des modules CSS, une description CSS dans du code JS, des composants stylisés et des solutions intermédiaires comme Stylable.

En pensant au futur style des composants, j'ai tendance à imaginer le style comme une composition. Cela signifie que les systèmes de conception de composants doivent inclure à la fois des composants qui implémentent une logique et des composants qui décrivent les styles. Avec cette approche, il est possible de créer un système de conception de composants qui évolue au fur et à mesure du développement du projet. Cela élimine la nécessité pour les développeurs de maîtriser les bibliothèques volumineuses pour le style. Les outils utilisés pour concevoir des composants comme Sketch ou Figma peuvent également utiliser cette idée.

7. GraphQL-API et applications clientes basées sur les données

La technologie GraphQL et une approche de développement basée sur les composants offrent des opportunités intéressantes pour les applications client Web. Par exemple, en utilisant Apollo, vous pouvez facilement créer des composants d'interface utilisateur qui fonctionnent avec des données via GraphQL. Il existe de nombreux autres outils qui facilitent le travail avec GraphQL.

La gestion raisonnable de diverses API simplifie le développement d'applications pilotées par les données. Cela vous permet d'augmenter la vitesse de développement. En conséquence, GraphQL est une technologie qui doit être portée à l'attention de ceux qui pensent à l'avenir.

8. Outils de conception basés sur les composants

Les composants deviennent progressivement une partie intégrante des systèmes de conception de projets Web. Cela réduit l'écart entre les concepteurs et les programmeurs. Les deux se rapprochent.

Par exemple, Sketch fournit déjà des outils pour le développement modulaire de conceptions de composants qui nécessitent des dépendances entre les composants. Il existe déjà des outils pour travailler dans Sketch avec des composants qui façonnent leur présentation visuelle par programmation. L'utilisation généralisée de tels outils n'est qu'une question de temps. Des outils comme Figma sont principalement destinés aux composants d'interface utilisateur réutilisables. Le projet Framer développe un outil pour les concepteurs de programmation. Cet outil permet aux concepteurs de contrôler la façon dont les éléments de l'interface utilisateur sont transformés en composants React.

Résumé

Ici, nous vous avons présenté plusieurs tendances dans le développement Web client qui, selon l'auteur du document, devraient prêter attention à quelqu'un qui veut être prêt pour l'avenir. Nous espérons que cette publication vous a donné matière à réflexion.

Chers lecteurs! Comment voyez-vous l'avenir du développement Web?