Frontend 2019: résultats de l'année

En 2019, le monde du développement frontal, comme cela s'est déjà produit, se développait à une vitesse vertigineuse. Le matériel, dont nous publions la traduction aujourd'hui, est consacré à une revue des événements importants, des nouvelles et des tendances de 2019.



Et ici , en passant, il y a du matériel similaire publié par nous en 2018. Là, à la fin, il y a une section de prévision pour 2019. À notre avis, beaucoup d'entre eux étaient justifiés. Cet article ne se passera pas sans prévisions, mais nous ne nous devancerons pas.

À propos du téléchargement de frameworks et bibliothèques frontaux populaires à partir de npm

La bibliothèque React prend de nouveau la main et continue de croître, et jQuery, curieusement, est arrivé en deuxième place. Non loin des dirigeants sont allés Angular et Vue. Ces deux cadres ont une base puissante de développeurs enthousiastes. Le cadre Svelte a retenu l'attention du public cette année, mais sa mise en œuvre n'est pas encore très active.


Téléchargez les frameworks et bibliothèques frontaux depuis npm ( source )

WebAssembly devient la quatrième langue du Web, associant HTML, CSS et JavaScript

Après une année plutôt calme, la technologie WebAssembly, début décembre, était bien connue de tous. Le fait est qu'il est officiellement recommandé pour le développement Web du W3C. Le W3C (World Wide Web Consortium) est une organisation internationale centrale dédiée à la normalisation des technologies Web.

La technologie WebAssembly, depuis son introduction en 2017, a attiré une large attention. Beaucoup l'utilisent déjà. Les années précédentes, la spécification WebAssembly 1.0 a été publiée; la prise en charge de cette technologie a été intégrée dans tous les principaux navigateurs.

Une autre actualité de 2019 relative à WebAssembly est liée à la formation de la Bytecode Alliance . L'objectif des organisations de l'alliance est de sécuriser l'avenir de WebAssembly en dehors du navigateur, en travaillant ensemble pour mettre en œuvre des normes et proposer de nouvelles normes.

Nous attendons toujours le moment où la position de WebAssembly sera véritablement renforcée, lorsque cette technologie sera mise en œuvre en grande quantité. Chaque amélioration de WebAssembly nous rapproche de ce point. La déclaration du W3C est, bien sûr, un grand pas vers la légitimation de cette technologie dans le monde de l'entreprise. Nous devons continuer à abaisser les barrières à l'entrée dans le monde de la programmation WebAssembly, ce qui simplifiera le développement de nouveaux projets WebAssembly.

L'utilisation de TypeScript augmente rapidement, de nombreux développeurs admettent leur amour pour ce langage

2019 peut être appelée l'année de TypeScript. Ce langage n'est pas seulement devenu la norme de facto pour résoudre le problème de la saisie du code JS. De nombreux développeurs le préfèrent également au JavaScript ordinaire, à la fois dans les projets personnels et au travail.

Dans une étude StackOverflow publiée plus tôt cette année, TypeScript, dans le classement des langages les plus appréciés par les développeurs, partageait la deuxième place avec Python, derrière Rust uniquement. Et il ne sera pas surprenant que TypeScript augmente encore plus dans la même étude, dont la sortie est attendue début 2020.


De nombreux développeurs aiment TypeScript

TypeScript a littéralement conquis le monde du développement Web. Cela s'applique à la fois au frontend et au backend. Certains programmeurs ont tenté de rejeter TypeScript comme une autre tendance à court terme. Ils pensaient qu'il partagerait le triste sort de Coffeescript. Mais TypeScript a fait ses preuves pour résoudre le problème sous-jacent du développement JS. On a le sentiment qu'avec le temps, sa popularité ne fait que croître.

TypeScript offre aux développeurs Web une grande commodité grâce à l'intégration avec tous les principaux éditeurs de code. Les développeurs JavaScript considèrent TypeScript comme un outil dont l'utilisation entraîne moins d'erreurs. TypeScript à leurs yeux est du code tapé plus facile à lire que du code JavaScript. Ce sont des interfaces d'objets qui contribuent à la création de programmes d'auto-documentation.

Si nous parlons de la popularité de TypeScript, il convient de noter qu'en 2019, il a dépassé React en termes de nombre de téléchargements depuis NPM. Il a également beaucoup plus de téléchargements que ses concurrents - des projets comme Flow et Reason.

Je voudrais attirer votre attention sur le fait que TypeScript et React sont des technologies complètement différentes conçues pour résoudre différents problèmes. Par conséquent, une telle comparaison revient à comparer le chaud au doux. Ce n'est qu'une démonstration de la popularité de TypeScript.


TypeScript contourne React dans NPM

TypeScript 3.0 est sorti fin 2018. En 2019, il est arrivé à la version 3.7, qui comprenait les dernières fonctionnalités de la norme ECMAScript, telles que les chaînes optionnelles et la vérification des valeurs null et undefined . La nouvelle version de TypeScript a amélioré les fonctionnalités liées à l'utilisation des types.

React continue de diriger, les développeurs passionnés par les crochets

Vue et Angular ont des communautés d'utilisateurs dédiées. Vue a même surpassé React en nombre d'étoiles sur GitHub. Mais en matière d'utilisation pratique, qu'il s'agisse de projets personnels de programmeurs ou de leur travail, React détient avec confiance la première place.

Fin 2018, l'équipe React a sorti les soi-disant crochets. En 2019, les crochets ont littéralement capturé le monde de React. La grande majorité des développeurs de React les utilisent comme principal mécanisme de gestion de l'état des composants et de gestion des événements de leur cycle de vie. Au cours de l'année, d'innombrables articles sur les hooks ont été écrits, les schémas de leur utilisation sont devenus plus clairs, les packages React les plus importants ont commencé à fournir des hooks personnalisés qui peuvent être utilisés pour travailler avec ces packages.

Les crochets permettent au programmeur de gérer l'état et le cycle de vie des composants fonctionnels à l'aide d'une syntaxe simple et concise. De plus, React vous permet de créer des hooks personnalisés qui aident les développeurs à écrire du code adapté à la réutilisation, à créer une logique pouvant être utilisée ensemble. Cela élimine le besoin de composants d'ordre supérieur ou de propriétés de rendu.

L'équipe de développement de React accorde une attention particulière à la commodité des programmeurs et des outils qui aident à travailler de manière plus productive. Après l'apparition bruyante des crochets dans React 16.8, lorsque la bibliothèque est arrivée à la version 16.4 en 2019, le reste des innovations n'était pas si grand.

On peut dire qu'après la sortie des hooks, l'équipe de développement de React s'est concentrée sur la commodité des programmeurs en créant des outils auxiliaires. La commodité du programmeur, les sensations qu'il éprouve lors du développement d'applications React, sont devenues le sujet principal de la conférence React Conf 2019. Tom Ochchino, président de la conférence et responsable de l'équipe React, a déclaré que les sentiments du développeur concernant l'utilisation de React reposaient sur trois idées: une faible contribution barrière, productivité élevée, évolutivité des solutions. Jetez un œil à ce qui a été publié (ou devrait l'être) par l'équipe React pour soutenir ces idées:

• Nouvelle version des outils de développement React.
• Nouveau profileur de performances.
• Créez React App v3.
• Mises à jour de l'utilitaire pour les tests.
• Mode compétitif (attendu).
• Le système CSS-in-JS utilisé par Facebook (attendu).
• Préparation progressive / sélective du code de page pré-rendu pour le travail (attendu).
• Réagissez aux améliorations de base concernant la disponibilité (attendues).

On pense que si un programmeur fonctionne agréablement, il réussira quelque chose qui provoquera une impression positive sur les utilisateurs. En conséquence, l'initiative React Developer décrite ci-dessus est une victoire pour tout le monde. Voici une présentation de React Conf 2019 sur les fonctionnalités attendues de React, et voici un lien vers toutes les présentations de cet événement.

Le framework Vue se prépare pour la sortie de la version 3, son utilisation se développe

Probablement, bien que Vue ne puisse pas être appelé le cadre le plus courant, mais il est difficile de ne pas remarquer qu'une communauté s'est formée autour de lui, dont les membres sont passionnés par leur entreprise comme aucun autre. Vue est connu pour avoir pris le meilleur de React et Angular, mais il est plus facile à construire qu'eux. Un autre avantage important de Vue est sa plus grande ouverture et qu'il n'est contrôlé par aucune grande entreprise comme Facebook (React en est le fruit) ou Google (cette société prend en charge Angular).

La principale nouveauté dans le monde de Vue est la prochaine version 3.0. La version alpha est attendue à la fin de l'année. Cette année, Vue 2.x n'a reçu que quelques mises à jour, c'était plus proche du début de l'année. Le fait est que toutes les forces des développeurs visent la sortie de Vue 3.0.

Le fait que Vue n'ait pas eu beaucoup de versions cette année ne signifie pas que rien d'intéressant ne se passe avec ce framework. Lorsque Ewan Yu a publié le RFC pour la troisième version de Vue, il y a eu une large discussion dans la communauté sur le changement. Par exemple, vous pouvez les lire ici et ici .

Le principal problème qui a dérangé les développeurs de Vue était un changement majeur de l'API du framework. Cependant, après l'apparition d'une telle réaction négative, il a été dit que les nouvelles API seront ajoutées aux anciennes et qu'elles seront rétrocompatibles avec Vue 2. De nombreux développeurs disent que si la nouvelle version de Vue ne ressemble pas à ce qu'ils aimeraient, ils envisageront la possibilité de passer à Svelte. Les gens craignent que les changements de Vue ne ressemblent trop à React. Bien que de nombreux membres de la communauté soient toujours inquiets pour l'avenir du framework, il y a le sentiment que le bruit s'est calmé et tout le monde attend juste une nouvelle version.

Dans Vue 3, en plus de la fonctionnalité controversée, de nouvelles fonctionnalités intéressantes et des changements utiles devraient apparaître:

• Composition de l'API.
• Modifications de la configuration et du montage des API.
• Des fragments.
• Prise en charge de la technologie Time Slicing (expérimentale).
• Prise en charge de plusieurs v-modèle.
• Portails
• Nouvelle API de directives personnalisées.
• Amélioration de la réactivité.
• DOM virtuel réécrit.
• Augmenter les propriétés statiques.
• Prise en charge de l'API Hook (expérimentale).
• Optimisation de la génération des slots (séparation du rendu pour les composants parents et enfants).
• Prise en charge améliorée de TypeScript.

Un événement notable dans le monde de Vue a été la sortie de la 4ème version de Vue CLI cette année, où l'objectif principal est de mettre à jour les outils de base.

Voici le discours d'Ewan Yu sur Vue.

Les 8e et 9e versions d'Angular arrivent, ainsi que le nouveau moteur de compilation / rendu Ivy

La philosophie d'Angular, lorsque le framework prescrit certains schémas d'action au développeur, a aidé cet outil à gagner une large base d'utilisateurs. Angular indique aux développeurs ce qui est bien et ce qui ne l'est pas, mais il fournit tous les outils dont les développeurs ont besoin.

Cela élimine de nombreuses raisons de discuter des bibliothèques et des dépendances à inclure dans le projet. Il convient de noter que ces problèmes surviennent souvent dans les équipes utilisant React. De plus, les applications angulaires écrivent en TypeScript. Étant donné que celui qui choisit Angular doit accepter que de nombreuses décisions ont déjà été prises pour lui, ce cadre est très populaire auprès de diverses entreprises. Cette situation permet aux développeurs de se concentrer sur le développement de produits logiciels, plutôt que de perdre du temps à penser aux packages.

En 2019, la version 8 d'Angular est sortie. La même année, le nouveau moteur de compilation / rendu Ivy est sorti. La principale force d'Ivy est qu'elle réduit la taille des paquets. Mais, en fait, cela apporte à Angular et à bien d'autres utilités. Maintenant, avant la sortie d'Angular 9, Ivy est une fonctionnalité optionnelle. Ici vous pouvez lire les détails de ce qui est nouveau dans Angular 8. Je voudrais surtout noter les points suivants:

• Chargement différentiel de code JavaScript moderne.
• L'occasion de se familiariser avec la technologie Ivy.
• Assurer la compatibilité descendante du routeur angulaire.
• Amélioration de l'assemblage des travailleurs Web.
• Possibilité de transmettre des informations sur la façon d'utiliser la CLI Angular aux développeurs Angular.
• Mises à jour des dépendances.

Au cours du mois de décembre 2019, l'équipe Angular s'apprêtait à sortir Angular 9. Il semble que cette version du framework sortira soit à la fin de cette année, soit au début de la prochaine. La plus grande innovation d'Angular 9 est qu'Ivy deviendra le moteur de rendu standard. Voici une vidéo en regardant ce que vous pouvez en savoir plus sur Angular 9.

Maintenant, plus d'attention est accordée à l'accessibilité (a11y) et à l'internationalisation (i18n) qu'auparavant

Le web doit être un espace ouvert à tous et utilisable par tous. En conséquence, l'accessibilité frontale et l'internationalisation sont devenues des priorités. Après le développement rapide de JavaScript et du Web, qui a commencé en 2015, les modèles et les frameworks commencent enfin à se stabiliser. De nos jours, lorsque les technologies sont plus stables qu'il y a plusieurs années, la situation permet aux développeurs de prêter plus d'attention aux outils de localisation des applications et d'augmenter leur disponibilité. Cela fait du Web un endroit plus accueillant pour toutes les catégories d'utilisateurs. Nous devons être fiers du chemin que nous avons déjà parcouru dans ces directions, mais beaucoup reste à venir.

Voici ce qu'ils disent à propos de l'accessibilité sur MDN : «L'accessibilité est une pratique qui permet à votre site d'être utilisé par autant de personnes que possible. Nous pensons traditionnellement à cela comme une accessibilité pour les personnes handicapées, mais en fait, ce nombre comprend d'autres groupes d'utilisateurs qui utilisent des appareils mobiles ou qui ont une connexion réseau lente. »

Et voici ce qui est dit à propos de l'internationalisation sur w3.org : «Si vous internationalisez un projet, cela signifie que vous concevez ou créez vos propres matériaux, applications, spécifications et autres ressources similaires afin de leur permettre de fonctionner normalement pour les utilisateurs appartenant à n'importe quelle culture. vivant dans n'importe quelle région, parlant n'importe quelle langue, ou facilite leur adaptation à ces utilisateurs. "

Caractéristiques de l'ES2019

ECMAScript (la spécification sur laquelle JavaScript est basé) continue de suivre le cycle de mise à jour annuel de cette année. La norme ES2019 présente de nombreuses nouvelles fonctionnalités . En voici quelques uns:

• Méthode Object.fromEntries() .
• String.trimStart() et String.trimEnd() .
• Amélioration de la prise en charge unicode dans la méthode JSON.stringify() .
• Array.flat() .
• Array.flatMap() .
• Amélioration du travail avec try/catch .
• Propriété de description des objets Symbol .

Bien que de nouvelles fonctionnalités très intéressantes soient apparues dans ES2019, des choses peuvent apparaître dans la prochaine norme ES2020 qui sont probablement les plus attendues depuis ES6 / ES2015:

• Champs de cours privés.
• Les chaînes facultatives sont obj.field?.maybe?.exists .
• Vérification des valeurs uniquement sur null et undefined - item ?? 'use this only if item is null/undefined' item ?? 'use this only if item is null/undefined' .
• BigInt données BigInt .

Popularité de flottement explosif

Flutter est sorti 2 ans après React Native, mais a rapidement gagné en popularité. Ce projet est très proche de React Native en termes de nombre d'étoiles sur GitHub. Et si la popularité du projet continue de croître au même rythme, il dépassera bientôt React Native. Flutter est en concurrence avec React et est un autre excellent outil de développement d'applications mobiles multiplateforme.

Étant donné que Flutter ne peut pas se vanter de la même communauté de développeurs conviviaux que React Native a et est représentée par les développeurs Web utilisant React, ces succès semblent particulièrement impressionnants. L'objectif de Flutter est d'être le meilleur cadre de développement mobile multiplateforme.

Voici un tableau dans lequel React Native et Flutter sont appariés pour certains indicateurs.

La Fondation Node.js et la Fondation JS ont fusionné pour former la Fondation OpenJS; Node.js 12 sera la version LTS

Afin de soutenir l'écosystème JavaScript et d'accélérer la croissance du langage, la Fondation Node.js et la Fondation JS ont fusionné pour former la Fondation OpenJS . L'idée principale de cette étape est d'établir une coopération et un développement technologique sous les auspices d'une organisation neutre, qui regroupe désormais 31 projets open source. Ces projets incluent Node, jQuery et Webpack. Cette initiative peut être considérée comme un mouvement positif pour l'ensemble de la communauté JS. Il est soutenu par des sociétés technologiques de premier plan telles que Google, IBM et Microsoft.

La 12e version de Node.js, publiée cette année, selon la tradition établie, recevra un support à long terme (LTS, support à long terme) jusqu'en avril 2023. Node.js 12 offre de nombreuses nouvelles fonctionnalités, mises à jour de sécurité et améliorations des performances. Certaines innovations notables incluent la prise en charge native import/export constructions d' import/export , la prise en charge des champs de classe privés, la compatibilité avec le moteur V8 version 7.4, la prise en charge de TLS 1.3 et l'avènement d'outils de diagnostic supplémentaires. Voici des informations sur les innovations de Node.js 12.

Le framework Svelte attire beaucoup l'attention, mais n'est pas encore largement utilisé.

Le framework Svelte a pu trouver sa place dans le monde déjà bondé des frameworks front-end. Cependant, comme déjà mentionné, cela n'a pas encore conduit à une large utilisation de ce cadre. Si pour exprimer l'essence de Svelte en un mot, nous pouvons dire que c'est un outil "simple mais puissant". Le site Web du projet présente trois points forts:

• Les développeurs Svelte écrivent moins de code.
• Le framework n'utilise pas de DOM virtuel.
• Il est vraiment réactif.

Svelte essaie d'amener la majeure partie du travail à l'étape de compilation, au lieu de faire quelque chose dans le navigateur pendant que la page fonctionne. Svelte possède une architecture basée sur des composants, dont les structures sont compilées en HTML pur et JavaScript. Cela promet la nécessité de moins de code passe-partout. Le cadre utilise les idées de programmation réactive, qui vous permet d'apporter des modifications directes au DOM au lieu de changer le DOM virtuel, puis de réconcilier les modifications avec le réel.

Svelte offre aux développeurs front-end quelque chose de nouveau et d'intéressant, ne leur donnant plus d'opportunités, mais moins. En 2020, il sera intéressant d'observer la croissance et le développement de Svelte. J'espère que nous pourrons voir des exemples de son utilisation dans des projets à grande échelle. Cela vous permettra de savoir à quoi il ressemble par rapport à ses plus grands concurrents - React, Vue et Angular.

Les sites statiques sont toujours pertinents, les développeurs introduisent JAMStack

Les sites statiques ont prouvé qu'ils font partie du Web et qu'ils n'abandonneront pas leurs positions. Cette déclaration est soutenue par l'expansion de l'utilisation de frameworks comme Gatsby, la croissance rapide de l'hébergement de sites statiques comme Netlify, d'innombrables nouvelles entreprises créant des CMS sans interface utilisateur.

Les sites statiques combinent ce qui était déjà sur le Web avec de nouveaux outils et bibliothèques. Ils vous permettent de créer des projets incomparables avec autre chose. Nous pouvons créer des sites en utilisant des bibliothèques modernes comme React, puis nous pouvons les compiler dans des pages HTML statiques lors de la construction du projet. Puisque maintenant toutes les pages sont stockées prêtes à l'emploi, le serveur ne dépense pas de ressources pour les remplir de données lorsque le client y accède. Les pages peuvent être livrées au client instantanément, les projets peuvent profiter pleinement des avantages de la mise en cache CDN. Cela vous permet de garder le contenu des sites aussi proche que possible de leurs utilisateurs.

Lors de la création de sites statiques, le modèle JAMStack (JavaScript, API, Markup) est très populaire. Il s'agit d'une approche hybride combinant des sites statiques et des applications d'une seule page. En utilisant cette approche, les pages sont données au client sous une forme statique, mais lorsqu'elles apparaissent sur le client, elles se comportent comme des SPA, qui utilisent des API et des actions utilisateur pour changer l'état de l'interface.

Les PWA se développent, leur mise en œuvre augmente

L'utilisation de sites statiques est un moyen de créer des projets Web extrêmement rapides. Mais ils ne conviennent pas à tous les cas. Une autre option intéressante est une application web progressive (PWA, application web progressive). Les PWA vous permettent de mettre en cache des ressources dans un navigateur afin d'accélérer le temps de réaction des pages aux influences des utilisateurs et d'assurer l'efficacité des projets sans connexion Internet. De plus, ils vous permettent d'utiliser des flux de travail en arrière-plan qui rapprochent ces applications des applications natives, implémentant, par exemple, la fonctionnalité des notifications push.

Certains prétendent même que PWA peut remplacer les applications mobiles conventionnelles. Quoi qu'il en soit, on peut noter qu'il ne fait aucun doute que les PWA seront pendant longtemps une partie importante des ensembles de technologies utilisées par les entreprises dans le développement de leurs projets.

Les outils frontaux deviennent vraiment de haute qualité

Les développeurs frontaux se plaignent de la fatigue de JavaScript depuis plusieurs années maintenant. Mais vous pouvez voir comment ce problème disparaît progressivement grâce aux efforts considérables de ceux qui soutiennent les projets open source.

Auparavant, si vous deviez créer un SPA, vous deviez créer votre propre ensemble de dépendances à l'aide de Bower ou de NPM. Il était nécessaire de comprendre comment traduire le code à l'aide de Browserify ou Webpack, il était nécessaire d'écrire un serveur Express à partir de zéro et de maintenir leurs applications à flot dans les tempêtes de mises à jour des bibliothèques.

, , . , . , , Create React App, Vue CLI, Angular CLI. — Gatsby, , Expo, React Native. Next Nuxt , . GraphQL- Hasura, TypeScript- GraphQL Code Generator. Webpack. — , .

, « -»?

GraphQL ,

GraphQL , , REST. , , GraphQL. , API GitHub GraphQL , .

GraphQL- . , JSON-. API GraphQL , , API .

API GraphQL , , , TypeScript-. GraphQL Code Generator , TypeScript-, .

GraphQL . Apollo .


GraphQL

CSS-in-JS

-, , JavaScript. CSS-in-JS, , JavaScript-.

, , , JavaScript- import/export . , , , , CSS-in-JS , . , , Facebook CSS-in-JS — , .

, CSS CSS-in-JS. CSS , . , CSS-:

 // JS-  const MyComp = ({ isActive }) => {  const className = isActive ? 'active' : 'inactive';  return <div className={className}>HI</div> } // CSS- .active { color: green; } .inactive { color: red; } 

CSS-in-JS CSS- . , . , React, , . JS-, React:

 const Header = styled.div`  color: ${({ isActive }) => isActive ? 'green' : 'red'}; `; const MyComp = ({ isActive }} => (  <Header isActive={isActive}>HI</Header> ) 

styled-components emotion — CSS-in-JS-. emotion 2019 styled-components . , , , CSS-in-JS. , .


CSS-in-JS-

VS Code

IDE . , , , . -, , . , , VS Code. — , , , , .

State of JS Survey 2019 .


VS Code —

Webpack 5 -

Webpack , JavaScript-. — . Webpack , , . 5 Webpack :

• .
• .
• , , Webpack.

Jest Flow TypeScript

Facebook , Jest . Flow — TypeScript. 2019 , Jest Flow TypeScript. , TypeScript JS-. TypeScript 2020 , .

Chrome 72-78

Chrome . , -, . 2019 7 Chrome. Chrome 79 -, Chrome 80 dev-, Chrome 81 — canary-. , Chrome 2019 .

Microsoft Edge Chromium

Internet Explorer, Edge, - . , , . , - . , Microsoft Chromium Google. 2019 -.

Facebook Hermes — JavaScript- Android, React Native

Facebook , JavaScript- Android . — Hermes . Facebook React Native. , , React Native .

2020

, 2020 :

• - . PWA.
• WebAssembly , .
• GraphQL REST, , GraphQL.
• TypeScript .
• , , -. .
• CSS-in-JS , CSS, .
• «» . , . , . 2020 .
• Flutter React Native - .
• , Svelte.
• Deno ( TypeScript, Node.js).
• AR/VR A-Frame , React VR Google VR . AR/VR.
  
• - (Docker, Kubernetes).

Chers lecteurs! -2020?