VueJs Amsterdam 2019 Résumé de l'expérience et des discussions (partie 2)

VueJs Amsterdam est l’une des plus grandes conférences Vue. Il comprend un jour de FrontEndDeveloperLove et deux jours de discussion avec Vue. Dans la deuxième partie de cette série, apprenez-en davantage sur l'événement et sur les excellents orateurs présentés.

Il s'agit de la deuxième partie d'une série récapitulant la conférence – voir la première partie du récapitulatif ici . .

Après le grand discours de Johannes sur l’avenir des logiciels JavaScript (Ed Note: mentionné à la fin de le dernier message ), le prochain était Sean Larkin avec l’introduction «Nouvelles fonctionnalités de Webpack 5. «C’était l’une des conférences que je voulais voir, car j’utilise Webpack quotidiennement. À ma grande déception, la conférence de Sean a été sautée et le prochain orateur annoncé. Heureusement, Sean a présenté son discours, mais un peu plus tard. Par conséquent, le prochain orateur après Johannes était Elena avec «Élégance du mouvement avec des animations angulaires réactives».

Élégance du mouvement avec des animations angulaires réactives – Elena Gancheva

Néanmoins, il est important de ne pas en faire trop et de mettre trop d'animations qui pourraient distraire et frustrer. Les animations peuvent enrichir l'expérience utilisateur lorsqu'elles sont utilisées pour la décoration, lors de micro-interactions, montrant l'avancement du chargement ou clarifiant les étapes ou l'état d'une application, mais elles doivent sembler naturelles.

Elena a montré quelques exemples d’animations utilisant les matériaux Angular Material, SVG, RxJS et Angular Animations.

Animation Love Button

https://stackblitz.com/edit/angular-love-button

La première animation est une animation décorative qui réagit à la micro-interaction. Nous avons une paire d'yeux qui, avec l'utilisation de l'animation, imite le fait de regarder autour lorsque vous déplacez un curseur. L'animation en tant que telle montre l'effet immédiat d'une action effectuée par un utilisateur

Animation de progression

https://stackblitz.com/edit/angular-progression-animation

L'exemple suivant est une animation de progression. Il transforme un bouton en une ligne indiquant l’état de la progression. Il peut être utilisé pour informer l'utilisateur que quelque chose se passe en arrière-plan et combien de temps il faut encore pour qu'une action soit terminée.

Animation réutilisable

https://stackblitz.com/edit/angular-james

Cet exemple montre combien il est facile de contrôler l'état de l'animation et de la réutiliser pour plusieurs éléments.

Elena a mis fin à sa conversation en soulignant que les animations et les interactions devraient se sentir Naturel.

Nouvelles fonctionnalités de Webpack 5 – Sean Larkin

Webpack est l’un des outils les plus populaires du flux de travail de développement front-end moderne. est un bundle de modules qui a beaucoup plus à offrir que cela, grâce aux centaines de plugins disponibles. La version actuelle de webpack est 4 et Sean L Les propos d'Arkin ne concernaient pas seulement les nouvelles fonctionnalités de la prochaine version – Webpack 5 -, mais expliquaient également le fonctionnement de Webpack sous le capot.

Faster Builds

Webpack utilise un système de plug-in pour étendre les fonctionnalités. Comme Sean l'a expliqué, la prochaine version sera une mise à jour ennuyeuse, car elle n'entraînera aucune modification majeure pour les utilisateurs. La plupart des modifications sont internes, mais ce qui est intéressant, c’est que les temps de construction seront jusqu’à 98% plus rapides. Il s'agit d'une amélioration extrême par rapport à Webpack 4, en particulier pour les grands projets. C'est possible grâce à un nouvel algorithme de mise en cache qui sera introduit dans la prochaine version.

Fonctionnalités obsolètes

Parmi les autres modifications apportées à Webpack, citons la suppression des fonctionnalités obsolètes dans Webpack 5. Cette modification peut affecter les rédacteurs de plug-in, et lors de la mise à niveau vers Dans une version plus récente, il est important de s’assurer que les fonctionnalités obsolètes ne sont pas utilisées.

En tant que développeur qui utilise Webpack dans presque tous les projets, j’attends avec impatience la prochaine version, car je peux dire par l’expérience que les versions de production peuvent prendre un certain temps.

Microfrontends – Luca Mezzalira & Max Gallo

Les microfrontends sont une idée intéressante dérivée du motif architectural des microservices. Les décisions architecturales ont une incidence sur les l’avenir, car ils affectent les développeurs, les utilisateurs et les entreprises. De mauvaises décisions peuvent entraîner une perte de temps et d’argent. Il est donc important de prendre en compte de nombreux aspects lors de la construction d’un logiciel.

[1965]

Luca et Max ont expliqué comment ils utilisaient les microfrontends dans leur société, Dazn. Ils ont fait valoir que l'utilisation de microfrontends facilite la gestion de projet au sein de nombreuses équipes. Tout comme dans les microservices, qui sont des entités séparées avec leurs propres langages et technologies, les microfrontends sont indépendants et peuvent être gérés par des équipes autonomes pouvant utiliser leur propre pile technologique. Je pensais que dans le cas d'une grosse application, qui pourrait potentiellement utiliser même quelques frameworks et différentes versions de bibliothèques, la taille de JavaScript serait énorme. Cela pourrait être minimisé en chargeant différemment différentes parties de l'application à la demande et en mettant fortement en cache certains fichiers. En outre, les opérateurs de service pourraient également être utilisés pour améliorer la mise en cache. Les microfrontends sont implémentés dans Dazn en mettant en place un intermédiaire entre un utilisateur et des microfrontends, qui chargent les parties requises de l'application sur demande. à travers ma liste habituelle de newsletters. Cela semble être une idée intéressante, mais je pense qu’il faut un peu plus de temps. Microfrontends est une nouveauté dans le monde du développement front-end et n'a pas encore acquis une excellente traction.

Composants Web avec Angular – Ana Cidre & Sherry List

L'exposé d'Ana et Sherry sur l'explication des composants Web et de la manière dont ils peuvent être utilisé dans une application angulaire. Les composants Web sont des fonctionnalités très intéressantes, car ils permettent de créer des éléments personnalisés réutilisables et compatibles avec le cadre, qui peuvent être importés et utilisés directement dans des fichiers HTML.

Si vous êtes intéressé par la compatibilité de divers frameworks avec des composants Web, vous pouvez consulter ce lien – https://custom-elements-everywhere.com/ .

Les composants Web comprennent trois fonctions principales: modèle HTML, éléments personnalisés et DOM Shadow. Celles-ci ne sont malheureusement pas prises en charge par tous les navigateurs. Polyfill sont disponibles, mais certaines fonctionnalités peuvent ne pas fonctionner exactement de la même manière. Pour en savoir plus sur la prise en charge des composants Web sur les navigateurs – https://caniuse.com/#search=web components .

C'est tout pour le moment sur VueJS Amsterdam.

Pour plus d'informations sur Vue

Découvrez comment créer d'excellentes interfaces utilisateur avec Vue? Découvrez Kendo UI pour Vue notre complète Bibliothèque de composants d'interface utilisateur qui vous permet de créer rapidement des applications réactives de haute qualité, comprenant tous les composants dont vous avez besoin, des grilles et des graphiques aux planificateurs et aux cadrans.