Linkedin Twitter Facebook Github Send Instagram Rss Arrow Top

[FRđŸ‡«đŸ‡·] Recap VueNation 2022 – Jour 2

2eme journée bien remplie, on y a parlé de différents sujets

  • state machine avec xState
  • migration vue-cli -> vitejs
  • validation de formulaire avec VeeValidate
  • Nuxt et ecommerce
  • cypress et component testing
  • open-source et succĂšs/argent
  • Pinia, le nouveau store Ă  la mode

🍍 Pinia

AprÚs une petite démo de la librairie, nous apprenons pas mal de choses lors de la FAQ.

  • Vuex et Pinia sont toujours en concurrence, maintenus par 2 personnes diffĂ©rentes de la core team Vue
  • Selon son crĂ©ateur, Pinia a subjectivement une meilleur synthaxe mais il a encore insisitĂ© sur la similaritĂ© avec vuex@5
  • Une chose est cependant certaine: Pinia a meilleur support de typescript que vuex@4. Typescript dĂ©duit les types directement avec Pinia la oĂč vuex@4 a besoin d’un setup et de l’utilisation de clĂ©es d’injections
  • Il rĂ©pond Ă©galement Ă  la question « Do you need a store », en ajoutant qu’avec la composition api les applications petites/moyennes n’ont plus besoin de store.

Cypress veut prendre le monopole du testing front-end

Comme Ă©voquĂ© hier, Cypress travaille sur les tests de composants qui devraient ĂȘtre la grosse feature du Cypress@10, en plus de leur domination dans les tests E2E. La feature est encore en cours de dĂ©vĂ©loppement (alpha).

ils expliquent pourquoi Cypress s’attaque au composants

Actuellement 📉avec Cypress 📈
DOM Virtuel (jsdom, node)DOM du navigateur
Difficile Ă  debugger (n’est ce pas)UI avec temps d’exĂ©cutions, status, etc
DĂ©roulement des tests abstraits, pas de retours visuelsRetours visuels comme pour l’E2E

La partie compliquĂ©e sera de setup un plugin webpack pour lancer le web server nĂ©cessaire au tests, j’ai l’impression qu’ils ont encore du travail a faire sur cet partie qui n’était pas trĂšs clair.

Pour complĂ©ter les tests de composants, on nous rapelle qu’il existe une feature de tests visuels qui peut ĂȘtre trĂšs intĂ©ressante pour l’équipe design.

Il semblerait Ă©galement qu’on est la possibilitĂ© de tester nos composants sur plusieurs navigateurs supportĂ©s par Cypress

En résumé: Cypress 10: 1 DX, 1 API, 1 outil, et une nouvelle UI

Nuxt for e-commerce (headless shopify)

Un talk trĂšs intĂ©ressant et complet sur l’optimization d’ecommerce shopify, en passant par un nuxt headless. Il s’agit principalement d’utiliser shopify comme API backend, prĂ©-rendre les pages en statique et tout mettre en cache.

L’intervenant explique qu’il voulait Ă©viter de refaire tout son site d’un coup.
Pour faire sa migration, il a eu l’idĂ©e d’utiliser un hĂ©bergeur permettant de partager ses routes en plusieurs backends.

Les premiers Ă©lements convertits en headless sont ceux du chemin d’achat: header, footer, homeage, pages collection, pages produits, panier. Le reste est renvoyer vers le theme shopify SSR.

Aprùs avoir fait le chemin d’achat la suite de la migration c’est faite en fonction de la valeur SEO des pages.

Le plus gros bénéfices du headless est la vitesse, nous entrons ensuite dans les détails techniques

  • Je ne vous apprend sans doute rien, le cache est primordial. Dans son cas, chaque route Ă  une clĂ©e associĂ©e dans le cache, permettant de purger le cache spĂ©ficiquement pour une page produit par exemple.
  • Un cache doit expirer, essayez de prendre en compte la vitesse a laquelle votre contenu Ă©volue pour dĂ©tĂ©rminer la durĂ©e de votre cache. mettez en cache l’API dĂšs que c’est possible
  • Pour ca, utiliser des service workers cotĂ© front. 2 http-clients, un avec et sans cache. n’utilisez pas de cache pour les opĂ©rations liĂ© au panier
  • Soyez prudent avec le prefetching, sur les appareils d’entrĂ©e de gamme, cela peut nuire au perfomances
  • Proriser l’optimisation de vos images, dĂ©finissez le height and width pour rĂ©duire le cumulative shift layout => @nuxt/image
  • avec Vuex, faites persister le au reload avec vuex-persist. Synchronisez votre state quand un utilisateur Ă  plusieurs onglets ouverts avec vuex multi tabs
  • Ne mettez jamais en cache les inventaires (liste derniers produits, liste produits populaires). Cela vous pemettra de garder en cache vos pages produits plus longtemps.
  • Le code tiers va dĂ©truire votre performance, lazy-loadĂ© aprĂšs la premiĂšre interaction de l’utilisateur (mousemove, clock, touchstart, etc)
  • garder la valeur scroll avec vue-router quand l’utilisateur revient sur une page, remettez le scroll a 0 quand il arrive sur une nouvelle page.
  • Utilisez un proxy server-side pour GTM, cela permet en plus de contourner AdBlock

Tout ses enseignements sont matérialisés par ce template Nuxt e-commerce:

FAQ
Pourquoi TailwindCSS ?

tailwind est un bon combo avec vue (composants) et il optimize trĂšs bien le css

Qu’offre Shopify que vous utilisez toujours pour votre backend ?

l’api, le panier et la sĂ©curitĂ© offerte, de nombreux plugins pratique (thrid-party plugin payments)

Qu’avez utilisĂ© pour faire le caching sur Nuxt

Layer0

nuxt 3 from hero to zero

La core team nuxt nous fait la dĂ©mo d’un clone du jeux wordle. Ils font un exemple ou Nuxt est utilisĂ© comme back-end, le code est partagĂ© entre le front le back, le tout en Typescript. Il utilise le nouveau moteur nitro qui a plein d’utilitaires. On note Ă©galement l’utilisation systĂ©matique de la script setup synthax (vue3)

Dans la FAQ, on apprends que:

  • @nuxt/bridge est considĂ©rĂ© stable, il a pratiquement toutes les features de nuxt 3 et la migration devrait ĂȘtre trĂšs simple si on l’utilise
  • Incremental static generation is in the Nuxt 3 roadmap
  • nuxt 3 is still in developement they shipped router middle ware 3-4 days ago
  • Nuxt est un peu moins robuste que Next mais il est plus « Hackable »
  • release candidate Q1 2022,
Author photo

Adrien Zaganelli

đŸ‡«đŸ‡· Front-end @leetchi | young jury @awwwards | Grad @Hetic | indie games, heavy metal and anime