Fermer

juillet 17, 2019

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


Étiez-vous à VueAmsterdam ou l'auriez-vous souhaité? Bien que quelque temps ait passé, les leçons apprises sont toujours inestimables. Prenons un moment pour revenir sur l’événement et sur les excellents orateurs qui nous ont présenté.

Bienvenue à la troisième partie de mon résumé de VueAmsterdam 2019. Je vais juste me lancer, mais si vous avez raté les parties précédentes, vous pouvez les trouver ici: Partie 1 et Partie 2 .

Après les composants Web d'Ana et Sherry avec Angular Talk, décrits dans l'article précédent Gijs Weterings est entré en scène pour parler des applications Web progressives.

Transformer votre application Web en PWA – Gijs Weterings

 Employés du service "title =" Employés du service "/></p data-recalc-dims=

Gijs a commencé son exposé par une introduction aux applications Web progressives (PWA) et a expliqué en quoi elles consistent et comment convertir une application normale. une application Web progressive: une application doit satisfaire à un ensemble d'exigences, et l'une des conditions les plus importantes est qu'une application doit être servie via HTTPS, sinon cela ne fonctionnera pas. En outre, Gijs a énuméré divers avantages des PWA et a montré comment en créer une. enregistrement d'un ouvrier de service.

 Que-peut-on-PWA-faire "title =" Que-peut-on-PWA-faire "/></p data-recalc-dims=

Les ouvriers de service sont au cœur du Web progressiste Applications. Les PWA offrent des fonctionnalités très utiles telles que des fonctionnalités de mise en cache et en mode hors connexion, d'accès aux API mobiles, de notifications push, etc. La présentation de Gijs consistait principalement en une procédure pas à pas. Outre l'enregistrement des employés de service, Gijs a montré comment implémenter différents types de mise en cache et comment utiliser les notifications push.

Cette présentation a constitué une introduction très utile à Progressive Web Apps pour ceux qui ne pouvaient pas en savoir plus. Selon caniuse.com tous les principaux navigateurs prennent désormais en charge les opérateurs de services, ce qui permet à de nombreux utilisateurs de tirer parti de ces fonctionnalités.

Le nouveau souffle de Bel-Air – Rick Hanlon

Automatisé complet les tests sont essentiels pour vérifier si une application s'exécutera sans erreur et pour s'assurer que les modifications de code n'introduisent pas de bogues. Jest est l'un des frameworks de test JavaScript les plus populaires et Rick Hanlon a présenté ses nouvelles fonctionnalités, en particulier les "adaptateurs personnalisés" et les "adaptateurs asymétriques et instantanés personnalisés".

 FreshJest "title =" FreshJest "/ ></p data-recalc-dims=

 Code verbeux "title =" Code verbeux "/></p data-recalc-dims=

L'accès aux propriétés imbriquées est détaillé et peut être redondant. Jest fournit des messages d'erreur génériques en raison de l'absence de contexte pour lequel le test a été écrit, et il serait très utile de pouvoir fournir davantage d'informations lorsque les tests échouent. Heureusement, cela sera possible avec la nouvelle fonctionnalité de correspondance personnalisée.

 Messages spécifiques d'erreur "title =" Messages d'erreur spécifiques "/></p data-recalc-dims=

Les adaptateurs personnalisés autorisent l'extension" attendez "pour créer vos propres méthodes de correspondance. Cela devrait donner lieu à des tests plus concis, plus faciles à lire et à comprendre.A la place de messages d'erreur génériques, les agents de correspondance personnalisés permettent la création de messages d'erreur spécifiques. Vous pouvez créer un adaptateur personnalisé en utilisant expect.extend () api. [19659003]  toHAveFullName-custom-matcher "title =" toHAveFullName-custom-matcher "/></p data-recalc-dims=

L'un des exemples présentés par Rick montre comment créer un matcher personnalisé appelé" toHaveFullName ". Le nom lui-même fournit des informations utiles. sens. Un matcher personnalisé doit renvoyer un objet doté de la propriété 'pass' pour indiquer si le test a réussi ou non, et de la propriété 'message' qui sera le message d'erreur affiché en cas d'échec du test.

 FreshNotFreshComparison-1 " title = "FreshNotFreshComparison-1" /></p data-recalc-dims=

Non seulement moins de code est écrit dans le test en raison de l'abstraction des tests, mais les tests sont également plus faciles à suivre et fournissent un résultat plus significatif. Un autre exemple présenté par Rick montre comment les tests peuvent être facilement résumés et quelle différence les adaptateurs personnalisés font.

 FreshNotFreshComparison-2 "title =" FreshNotFreshComparison-2 "/></p data-recalc-dims=

Enfin, Rick a présenté des correspondants personnalisés asymétriques et instantanés. [19659003]  toMatchSnapshot "title =" toMatchSnapshot "/></p data-recalc-dims=

Jest est un excellent outil de test et, comme je l'utilise moi-même, j'ai été ravi de voir ces nouvelles fonctionnalités arriver à Jest.

Reste, GraphQL & gRPC – David Den Toom

Juste après Rick Après avoir terminé son exposé sur les adaptateurs personnalisés, David est arrivé sur scène et a commencé son exposé en expliquant les microservices et leurs avantages – par exemple, la liberté de choix technique, l’évolutivité et les déploiements. Cependant, les microservices ne sont pas sans inconvénients, car ils peuvent affecter les performances, rendre les tests plus difficiles et introduire une couche supplémentaire de complexité.

 microservices "title =" microservices "/></p data-recalc-dims=

Ensuite, David a mentionné BFF, et il ne voulait pas dire «meilleurs amis pour toujours».

 bff "title =" bff "/></p data-recalc-dims=

Le BFF qu'il voulait dire est" Backend for frontend ", qui est une couche entre l'expérience utilisateur et les ressources qu'il appelle. . David a ensuite expliqué en quoi cela consiste, ainsi que ses avantages et ses inconvénients. Par exemple, les applications Web et mobiles avec API REST devraient avoir des BFF distinctes, ce qui est un inconvénient car cela nécessiterait un travail supplémentaire.

 reste-duplicate-bff "title =" reste-duplicate-bff " /></p data-recalc-dims=

Après avoir parlé de BFF avec une API REST, David a comparé REST avec GraphQL et décrit leurs avantages et leurs inconvénients, contrairement aux API basées sur REST, qui ne nécessitent pas de moteur distinct pour chaque application.

 rest-vs-graphql "title =" reste-vs-graphql "/></p data-recalc-dims=

David propose qu'Apollo avec GraphQL puisse être utilisé comme BFF pour les microservices. Certains des avantages incluent la mise en cache des champs demandés afin qu'ils ne soient récupérés qu'après un certain temps, ainsi que le contrôle du type de cache. Par exemple, un prix aurait une étendue de cache différente, chaque utilisateur pouvant appliquer une remise différente.

 caching "title =" caching "/></p data-recalc-dims=

Enfin, David a présenté gRPC, un produit mis au point par Google. Comme David l'a mentionné, la description initiale n'explique pas grand-chose, mais sonne plutôt comme un argument marketing.

 grpc "title =" grpc "/></p data-recalc-dims=

Cependant, le gRPC possède des fonctionnalités de base assez intéressantes.

 grpcs-features "title =" grpcs-features "/></p data-recalc-dims=

Les fonctionnalités de base incluent HTTP / 2; des bibliothèques auto-générées; un flux bidirectionnel; une authentification, un traçage, un équilibrage de charge et un bilan de santé,; tampons (sérialisation des données) et type de sécurité.

Pour en savoir plus à ce sujet, rendez-vous à l'adresse suivante: https://grpc.io/ .

Par la suite, David a montré comment utiliser gRPC et comment un serveur utilisant gRPC se compare à un serveur GraphQL.

 graphql-vs-grpc "title =" graphql-vs-grpc "/></p data-recalc-dims=

David a couru tw o les scripts qui ont fait 1000 requêtes à GraphQL et au serveur gRPC. La différence était assez impressionnante, les résultats différant d’environ 2 secondes en faveur du serveur gRPC. Néanmoins, l’outillage pour gRPC est assez limité pour le moment. De plus, il n’est pas possible de CURLing les points de terminaison et le client doit avoir accès à un fichier .proto. Par conséquent, si vous devez choisir laquelle utiliser, n’oubliez pas d’analyser le pour et le contre des deux solutions.

Quoi de neuf avec Gatsby.js – Kyle Mathews

 intro "title =" intro "/></p data-recalc-dims=

Gatsby.js est un framework gratuit et à code source ouvert basé sur React qui peut être utilisé pour créer des sites Web à rendu statique. Kyle Mathews, créateur de Gatsby, a présenté De nouvelles fonctionnalités à venir à Gatsby ainsi que ce que Gatsby a réussi à réaliser.Il existe des milliers de sites Web gérés par Gatsby et qui offre un écosystème florissant de contributeurs et de services open source. En outre, en partenariat avec Contentful, Gatsby sera lance son premier produit en nuage appelé Gatsby Preview.

 gatsby-preview "title =" gatsby-preview "/></p data-recalc-dims=

Kyle évoque également les tendances actuelles.

 trends" title = "trends" /></p data-recalc-dims=

Certaines des améliorations apportées à Gatsby consistent en des outils et du code utilisés en interne dans le cadre.

 gatsby-améliorations "title =" gatsby-améliorations "/></p data-recalc-dims=

Une amélioration tout à fait impressionnante pour la prochaine version de Gatsby. est une vitesse de construction qui sera environ 50 à 60% plus rapide que dans la version précédente. Kyle a également indiqué que son objectif est d'obtenir une vitesse de construction moyenne d'environ 1 seconde avec des flux de génération en temps réel. S'ils réussissent, ce sera une grande réussite. L’appui au thème est une autre caractéristique sur laquelle l’équipe Gatsby travaille actuellement.

J’ai entendu beaucoup de bonnes pensées sur Gatsby, et même si je n’ai pas eu l’occasion de l’utiliser moi-même, c’est certainement une bonne idée de l’essayer.


Ce blog a été créé par Kendo UI

Vous voulez en savoir plus sur la création d’applications Web de qualité? Tout commence avec Kendo UI – la bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux menus déroulants et jauges.

 KendoJSft "title =" KendoJSft "style =" vertical-align: middle; "/> </a data-recalc-dims=





Source link