Le monde du développement Web se développe incroyablement rapidement. Ce qui était hier les nouvelles d'aujourd'hui est peut-être déjà dépassé, mais ce que presque personne ne sait aujourd'hui, demain peut devenir le moteur du progrès. Le matériel, dont nous publions la traduction aujourd'hui, examinera toutes les choses les plus intéressantes qui se sont produites dans le domaine frontal en 2018. Nous parlerons du développement de frameworks et d'outils auxiliaires, des tendances JavaScript, ainsi que de la direction dans laquelle le frontend peut aller en 2019.
Normalisation de WebAssembly
WebAssembly est souvent considéré comme l'une des technologies sur lesquelles le futur Web sera construit. Cette technologie vise à maximiser les performances du code, à réduire sa taille et la possibilité de développement Web en utilisant différentes langues en convertissant des programmes écrits en eux en un seul format binaire pris en charge par les navigateurs Web.
Au deuxième semestre 2017, les développeurs de tous les principaux navigateurs ont
signalé la prise en charge de WebAssembly. Puis, en février 2018, 3 événements importants se sont produits: la première version de
la spécification WebAssembly a été publiée, les spécifications de l'
interface JavaScript et de
l'API Web correspondantes ont été publiées.
À propos du téléchargement des bibliothèques frontales populaires à partir de npm
Les quatre premiers modules frontaux les plus populaires téléchargés à partir de npm incluent React, jQuery, Angular et Vue. Ci-dessous, nous parlerons plus en détail de la situation des bibliothèques pour le développement Web.
Téléchargements de bibliothèques frontales 2018 à partir de npmReact continue de dominer le monde des bibliothèques frontales et évolue constamment
React est un leader du développement Web depuis de nombreuses années. La portée de son utilisation a continué de croître en 2018. Cette bibliothèque reste l'une des plus appréciées des programmeurs, selon une
enquête menée par Stack Overflow.
L'équipe de développement principale de React est très active dans le développement de la bibliothèque et l'ajout de nouvelles fonctionnalités. Au cours de 2018, de nombreux ajouts à React v16 ont pu être vus, y compris de nouvelles
méthodes de cycle de vie des composants, une nouvelle
API de contexte , de
nouveaux événements de pointeur de souris, des
fonctions paresseuses et un nouveau
composant d' ordre supérieur
React.memo . Il convient de noter que la plus grande attention a été accordée aux
crochets API React et Suspense .
Les crochets React ont rencontré un grand intérêt, ils ont beaucoup écrit à leur sujet, beaucoup les aimaient. Cette technologie vous permet d'ajouter un état aux composants fonctionnels en utilisant la fonction
useState , elle permet de gérer les événements du cycle de vie des composants.
Voici une vidéo qui montre comment l'utilisation de hooks peut améliorer considérablement le code d'application React.
Une autre nouvelle fonctionnalité intéressante de cette bibliothèque est React Suspense. Il est conçu pour contrôler le chargement des données dans les composants React eux-mêmes. L'API Suspense vous permet de suspendre la sortie des données en attendant la fin de l'opération asynchrone de la réception de n'importe quelle source. C'est l'API Suspense qui est utilisée dans les fonctions paresseuses pour implémenter la séparation du code des composants. Le principal objectif de la mise en œuvre de cette technologie est la capacité de gérer tous les téléchargements de données asynchrones, tels que les demandes à diverses API. De plus, l'API Suspense vous permet de mettre en cache les demandes de réponse.
Il existe un exemple spécialement conçu qui illustre de nombreux indicateurs de chargement de données sur une page, affichés tant que les indicateurs
isFetching définis sur
true . Grâce à l'API Suspense, le développeur dispose de contrôles d'interface utilisateur, en particulier, ces outils peuvent être utilisés pour indiquer ce qui doit être affiché à l'écran en attendant le chargement des données, pour définir un délai d'expiration et pour configurer la navigation. Il existe même une croyance répandue selon laquelle l'API Suspense peut éliminer le besoin de Redux. À partir de
ce discours de Dan Abramov, vous pouvez en apprendre davantage sur le développement d'applications à l'aide de cette API.
Vue continue de croître en contournant réagir par nombre d'étoiles sur GitHub
Après la croissance explosive de Vue en 2017, la même chose s'est poursuivie en 2018. Ce cadre a même
surclassé React en termes de nombre d'étoiles sur GitHub.
Bien que les développeurs Web adorent Vue, ce cadre est encore assez loin derrière React et Angular en termes d'utilisation réelle. Cependant, Vue dispose d'une base d'utilisateurs actifs qui continue de croître, ce qui donne l'espoir que Vue jouera un rôle important dans le développement Web à l'avenir.
Ewan Yu (créateur de Vue) parle beaucoup de Vue 3
Vue s'apprête à sortir la version 3.0. En 2018, le créateur du cadre, Ewan Yu, a parlé lors de divers événements des capacités attendues du cadre et a
écrit à ce sujet.
Le framework angulaire reste très populaire, sa septième version
En octobre 2018, la septième version d'Angular a été publiée. Ce cadre a subi à ce jour un développement important, passant de l'architecture MVC à un système moderne utilisant des composants. Sa popularité est également en constante augmentation.
Bien qu'Angular n'ait pas les mêmes supporters zélés qui distinguent React et Vue, ce framework est toujours populaire dans les projets professionnels. De nombreux développeurs se lassent de React, car lorsqu'ils utilisent cette bibliothèque, ils doivent prendre beaucoup de décisions concernant le choix d'outils supplémentaires, la conception de l'architecture de l'application, la construction du processus de construction de projets. Angular, d'autre part, supprime du développeur la nécessité de prendre de nombreuses décisions, met à sa disposition des modèles architecturaux largement utilisés. Angular est un framework dont les capacités couvrent tous les besoins d'un développeur d'applications Web, et l'outil de ligne de commande correspondant prend complètement en charge le processus de construction du projet. Bien sûr, beaucoup de choses avec cette approche sont définies dans le cadre assez étroitement. Un autre avantage de l'utilisation d'Angular dans un environnement professionnel est le fait qu'il est conçu pour utiliser TypeScript. Grâce à Angular, nous pouvons dire que ce cadre s'est créé un nom dans l'environnement de développement Web et continue de renforcer sa position.
Il convient de noter que le package
@angular/core npm est le nouveau Angular, et le package
angular est l'ancien AngularJS.
Voici les données npm sur les téléchargements des packages
@angular/core ,
angular ,
react et
vue en 2018, ainsi que des informations sur l'état de ces projets depuis GitHub.
Données de projet pour angulaire / noyau, angulaire, réactif et vueDe plus en plus de développeurs aimeraient apprendre GraphQL, mais cette technologie n'a pas encore contourné REST.
La technologie GraphQL a trouvé une application dans certains grands projets comme
GitHub , mais elle ne s'est pas encore répandue assez largement. Selon l'étude State of JS, seulement un peu plus de 20% des développeurs frontaux ont utilisé la technologie GraphQL, mais l'indicateur caractérisant ceux qui en ont entendu parler et prévoient de l'utiliser est impressionnant de 62,5%.
Technologie GraphQL
La technologie CSS-in-JS est de plus en plus courante
Lors de l'analyse d'un environnement de développement Web, on a le sentiment qu'il est sur le point d'unifier absolument tout en utilisant JavaScript. Cette tendance est également visible lorsqu'elle est appliquée à la technologie CSS-in-JS, en utilisant les styles créés à l'aide des outils de chaîne JS. Cela vous permet de travailler avec des styles et des dépendances à l'aide de la syntaxe JS habituelle et des mécanismes d'importation et d'exportation. De plus, il simplifie le style dynamique, car les composants utilisant CSS-in-JS peuvent convertir des propriétés en styles. Voici des exemples de CSS et CSS-in-JS standard.
Pour gérer les styles dynamiques à l'aide de CSS standard, vous devez travailler avec les noms de classe dans le composant et les mettre à jour en fonction de l'état et des propriétés. De plus, pour différentes options de style, vous devez utiliser des classes CSS:
Grâce à CSS-in-JS, les classes CSS ne sont plus nécessaires. Il suffit de passer la propriété correspondante au composant stylisé qui implémente la stylisation dynamique. Le code sort beaucoup plus propre, nous obtenons une séparation plus claire des tâches entre les styles et React, permettant à CSS de faire un style dynamique basé sur les propriétés. Dans React, ce code ressemble à du JavaScript tout à fait normal:
const Header = styled.div` color: ${({ isActive }) => isActive ? 'green' : 'red'}; `; const MyComp = ({ isActive }} => ( <Header isActive={isActive}>HI</Header> )
Pour implémenter les fonctionnalités CSS-in-JS, les bibliothèques telles que les
composants de
style et l'
émotion sont principalement utilisées. La bibliothèque de composants stylisés existe plus longtemps qu'Emotion, elle est devenue plus répandue, mais la popularité d'Emotion augmente rapidement, de nombreux développeurs la choisissent. Il convient de noter que Kent S. Dodds a même
cessé de travailler sur sa bibliothèque Glamorous CSS-in-JS, préférant Emotion. Voici à quoi ressemblent les composants Styled et les bibliothèques Emotion en termes de npm et de GitHub.
Composants stylisés et bibliothèques d'émotions en 2018Le framework Vue prend en charge le CSS local lors de l'utilisation de composants à fichier unique sans utiliser de bibliothèques supplémentaires. Pour ce faire, ajoutez simplement la propriété
scoped à la balise de composant de
style , après quoi Vue utilise la technologie CSS-in-JS pour organiser le travail avec des styles locaux qui ne vont pas au-delà du composant et ne tombent pas dans d'autres composants.
En outre, il convient de noter que dans Angular, par défaut, grâce à l'utilisation de la technologie d'
encapsulation de
vue , la portée CSS est utilisée.
Les développeurs aux prises avec la fatigue technologique trouvent le salut dans les outils de ligne de commande
Tout le monde sait à quel point il peut être épuisant de surveiller des bibliothèques constamment mises à jour, qui sont vitales pour les projets Web, ainsi que de mettre à jour correctement les projets en tenant compte des mises à jour des bibliothèques et de prendre les bonnes décisions architecturales dans de telles conditions. Ce problème est devenu un catalyseur pour le développement d'outils de ligne de commande qui résolvent ces problèmes, permettant aux programmeurs de se concentrer sur le travail sur les applications. Tous ces outils sont devenus le principal moyen de création de nouvelles applications en 2018. En particulier, les projets suivants peuvent être notés dans ce domaine:
Next.js (SSR pour React),
Create-React-App (création d'applications client React),
Nuxt.js (SSR pour Vue),
Vue CLI (applications client Vue) ,
Expo CLI pour React Native, outils
angulaires standard.
Le désir des développeurs de simplifier le front-end et d'augmenter la productivité a conduit à une augmentation de la popularité des générateurs de sites statiques
Pendant le développement rapide et révolutionnaire de JavaScript, tout le monde a aimé apprendre les dernières bibliothèques et les mettre en pratique. Cependant, maintenant que tout se stabilise plus ou moins, les développeurs ont commencé à réaliser que tous les sites ne devraient pas être des applications complexes d'une seule page (SPA). Cette compréhension a conduit à l'émergence, à la croissance et au développement de générateurs de sites statiques. Grâce à eux, vous pouvez développer des projets à l'aide de divers outils frontaux, tels que React ou Vue, qui sont ensuite, lors de l'assemblage, convertis en fichiers HTML statiques. Cela vous permet de donner très rapidement aux clients une page entièrement terminée.
Les sites statiques sont bons car ils sont la combinaison parfaite de simplicité et de performances. Si des fichiers HTML sont générés lors de l'assemblage du projet, cela permet d'envoyer des pages finies à des utilisateurs qui se chargent presque instantanément, sans avoir recours au rendu serveur ou client. Avec le code HTML, le client charge également les fichiers JS nécessaires au fonctionnement de la page, ce qui offre aux utilisateurs les mêmes capacités que les applications simples d'une page.
Les générateurs de sites statiques sont parfaits pour créer quelque chose comme des sites personnels ou des blogs, mais ils peuvent également être utilisés dans des projets plus importants. En 2018, les générateurs tels que
Gatsby et
React Static pour les applications React, et des outils comme
VuePress pour les projets basés sur Vue
gagnaient en popularité. En fait, les sites statiques sont devenus si populaires que le projet open source Gatsby est devenu une entreprise et a reçu des investissements en capital-risque.
Architectures sans serveur et JAMStack
La popularité croissante des sites statiques a conduit au développement de technologies de serveur conçues pour les prendre en charge. Ainsi, les dernières années dans le domaine du développement web ont constamment parlé d'architectures sans serveur, cela est dû au fait qu'elles vous permettent d'organiser la séparation du code serveur et client et de réduire le coût des projets de maintenance.
Le mouvement vers l'absence de serveur a été élargi grâce à la méthodologie de développement de projet Web JAMStack (J est JavaScript, A est API, M est Markup, c'est-à-dire balisage). JAMStack est basé sur les concepts de développement de sites statiques, dont nous avons parlé dans la section précédente. Cette technique vous permet d'atteindre des vitesses de chargement de site extrêmement élevées grâce au balisage préformé. Sur le client, ces sites se transforment en SPA dynamique grâce à l'utilisation d'API de serveur spéciales. En 2018, il a même passé, sous les auspices de freeCodeCamp, Netlify et GitHub, le premier
hackathon JAMStack .
Voici le matériel qui démontre les caractéristiques de l'utilisation de l'architecture JAM sur freecodecamp.com, qui vous permet d'évaluer les possibilités de développement d'applications à grande échelle en utilisant la méthodologie JAMStack.
TypeScript peut être l'avenir de JS, mais on ne peut pas en dire autant de Flow
JavaScript est souvent critiqué pour son manque de typage statique. Les principaux outils pour résoudre ce problème sont
TypeScript et
Flow . Dans le même temps, TypeScript est beaucoup plus populaire que Flow, et, en fait, une étude de Stack Overflow a montré que les développeurs aiment encore plus TypeScript que JavaScript lui-même (les chiffres correspondants pour ces langages sont de 67% et 61,9%). Selon l'étude State of JS, plus de 80% des développeurs prévoient d'utiliser TS ou l'utilisent déjà avec plaisir. Si nous parlons de Flow, alors seulement 34% des développeurs l'utilisent ou veulent l'utiliser.
À en juger par tous les indicateurs, TypeScript est une solution standard pour le typage statique en JS; beaucoup préfèrent TS à JavaScript ordinaire. Cette année, le nombre de téléchargements TS en npm a augmenté constamment et de manière significative, tandis que le calendrier de téléchargement de Flow est resté assez plat. On a le sentiment que TypeScript, à partir d'un outil utilisé uniquement par des adeptes ardents de la frappe statique, devient un outil extrêmement utilisé pour le développement Web. Voici les données TypeScript et Flow (comme
babel-preset-flow ) de npm et GitHub.
Téléchargements TypeScript et Flow au second semestre 2018Webpack 4 est sorti début 2018
Webpack 4 est sorti seulement 8 mois après la sortie de Webpack 3. La nouvelle version de Webpack a continué à simplifier le travail et à accélérer le processus de construction. Parfois, les performances de Webpack 4 peuvent dépasser les performances de Webpack 3 de 98%. Webpack 4 vise à utiliser des paramètres par défaut raisonnablement sélectionnés, prend en charge plus de fonctionnalités sans avoir besoin de plug-ins, et pour commencer à utiliser Webpack, il n'est plus nécessaire de préparer d'abord un fichier de configuration. De plus, Webpack prend désormais en charge WebAssembly et vous permet d'importer directement des fichiers WebAssembly.
Babel 7.0 est sorti
Babel 7 est sorti en 2018 - après presque trois ans depuis la sortie de Babel 6. Babel est une bibliothèque au moyen de laquelle le code JavaScript est transformé, qui utilise les capacités de nouvelles normes (ES6 +), en code ES5, qui permet compatibilité du navigateur des projets JS.
Le matériel informant de la sortie de la nouvelle version de Babel indique que Babel 7 est plus rapide, plus moderne, prend en charge les options de configuration avancées, a amélioré les fonctionnalités liées à la minification, prend en charge les technologies JSX Fragments et TypeScript, de nouvelles constructions de langage qui en sont à leurs débuts harmonisation, et plus encore. Il convient de noter que les packages Babel dans npm utilisent désormais l'espace de noms
@babel .
Publications importantes de 2018
Prenons plusieurs publications importantes publiées en 2018.
- Voici le matériel sur combien vous payez pour utiliser JavaScript en 2018.
- Voici un article de l'événement React Conf, à partir duquel vous pouvez en apprendre davantage sur l'avenir de React.
- Dans cet article, Airbnb partage son expérience avec React Native, acquise par l'entreprise sur 2 ans.
- Ici, Google montre à tous ceux qui le souhaitent un appareil d'interface utilisateur Web Google Photos.
- Ici, vous pouvez lire que Microsoft va transférer le navigateur Edge sur la plate-forme Chromium.
- Et voici une présentation très intéressante de Ryan Dahl, créateur de Node.js.
Prévisions pour 2019
Qu'attend le frontend en 2019? Voici nos prévisions:
- WebAssembly deviendra de plus en plus courant dans les projets Web en raison du développement continu de cette technologie, de la standardisation et du désir des développeurs de productivité.
- React restera toujours en tête du classement des outils de développement Web, tandis que Vue et Angular continueront de développer leur base d'utilisateurs.
- CSS-in-JS peut être l'approche de style standard, remplaçant CSS standard.
- Peut-être que les développeurs feront attention aux composants Web standard .
- Sans surprise, la productivité continuera d'attirer l'attention mondiale. Cela suggère que les applications Web avancées (PWA) et les technologies de partage de code seront utilisées dans la grande majorité des projets Web.
- Grâce à la diffusion et au développement de PWA, les projets Web seront mieux intégrés aux capacités des appareils mobiles et de bureau, et offriront aux utilisateurs des capacités à part entière sans connexion réseau.
- La croissance et le développement d'outils de ligne de commande visant à libérer les développeurs de la nécessité de configurer indépendamment les outils et à leur donner la possibilité de créer calmement des projets Web se poursuivront.
- De plus en plus d'entreprises mettront en œuvre des solutions mobiles basées sur des technologies standard telles que React Native ou Flutter .
- Dans le développement frontal, le rôle de la conteneurisation augmentera (en particulier, nous parlons de Docker et Kubernetes).
- Une promotion significative de GraphQL aura lieu, cette technologie sera utilisée dans plus d'entreprises.
- TypeScript ne sera plus considéré comme une alternative au JavaScript ordinaire, mais comme un choix standard dans les situations où JavaScript était généralement choisi auparavant.
- La technologie de réalité virtuelle fera un grand pas en avant en utilisant des bibliothèques comme A-Frame , React VR et Google VR .
Chers lecteurs! Qu'attendez-vous du développement frontal en 2019?