[TECH] Convertit les composants du dossier banner sur PixOrga au format GJS (PIX-12532). #8896

frinyvonnick · 2024-05-13T13:28:35Z

🦄 Problème

Ember Polaris introduit un nouveau format de composant (cf Template Tag Format). L'équipe de développement d'Ember prévoit que ce soit celui par défaut d'ici la fin de cette version majeure.

Le but de cette PR est de montrer ce qu'il est possible de faire avec ce nouveau format et de présenter quelques techniques de migration possible.

🤖 Proposition

Quelques composants ont été choisis parce qu'ils présentaient des caractéristiques intéressantes à migrer :

Banner::Communication : migration d'un composant avec des getters
Banner::Information : démonstration de la création de composants privés
Banner::LanguageAvailability : démonstration de comment se passer d'une classe quand on utilise un service

🌈 Remarques

Les principales sources d'informations sont :

le documentation officielle : https://guides.emberjs.com/release/components/template-tag-format/
la RFC : https://rfcs.emberjs.com/id/0779-first-class-component-templates/
la keynote de 2023 : https://www.youtube.com/watch?v=e5alKTMf5w4

Le but de cette démonstration est aussi de montrer qu'on est plus obligé d'utiliser les classes. C'est d'ailleurs un pré-requis si on ne souhaite pas tout mettre dans le même fichier avec ce nouveau format.

☝️ Je précise que je n'ai pas d'avis sur le sujet je montre juste ce qui est possible.

Le dernier point qui oblige actuellement à utiliser les classes, c'est l'utilisation du decorator tracked. Les Ressources sont sensés nous permettre de nous en passer (c'est le sujet de la prochaine MEJ).

Cette PR pourrait être mergé à part le dernier commit qui est exclusif à la Mise en Jambe (à drop si on souhaite aller plus loin).

💯 Pour tester

La CI est verte ✅

pix-bot-github · 2024-05-13T13:29:28Z

Une fois les applications déployées, elles seront accessibles via les liens suivants :

Les variables d'environnement seront accessibles via les liens suivants :

frinyvonnick · 2024-05-15T09:49:27Z

Après discussion, la @1024pix/team-acces souhaite potentiellement merger cette PR réalisé dans le cadre d'une MEJ. J'ai donc droppé le commit qui ajoutait une page pour la démonstration et passer la PR en ready to review.

Le commit d87e087 est un peu opnionated et sera peut être remis en cause si on décide d'utiliser les Resources en early adopters. Je vous laisse juger de la pertinence de le garder ou pas 😄

Alexandre-Monney

C'est beau 🤩 🐈‍⬛

lionelB · 2024-05-16T08:01:19Z

orga/app/helpers/get-service.js

+import { getOwner } from '@ember/application';
+import Helper from '@ember/component/helper';
+
+export default class GetService extends Helper {


suggestion : rajouter un bout de jsdoc qui montre comment on s'en sert, j'ai l'impression que la syntaxe let .. as |value| et pas forcément très connu

C'est un des helpers mis en avant dans la documentation officielle : https://guides.emberjs.com/release/components/helper-functions/#toc_the-let-helper

La liste exhaustif des helpers de ember sont là : https://api.emberjs.com/ember/4.5.0/classes/Ember.Templates.helpers/

Le let je ne l'ai jamais utilisé, et le as |value| je l'ai plus utilisé pour des boucles for. Mais oui, un peu de documentation ferait du bien.

as |value| est la syntaxe pour définir une variable dans le template à partir d'une source de données. C'est le cas effectivement des boucles mais c'est aussi utilisé pour les yieldable block qui ont des paramètes (la doc : https://guides.emberjs.com/v3.12.0/components/block-params/).

Il y a ici un exemple avec la définition de plusieurs variables : https://guides.emberjs.com/v3.12.0/templates/displaying-a-list-of-items/#toc_accessing-an-items-index

igorissen · 2024-05-16T08:16:15Z

orga/app/components/banner/communication.gjs

+  {{#if (isEnabled)}}
+    <PixBanner @type={{(bannerType)}} class="sticker-banner">


Si je comprends bien, on est maintenant obligé d'utiliser des parenthèses (NOM_DE_FONCTION) dans les nouveaux templates ? Je suppose pour spécifier que l'on n'utilise pas de classe pour le composant.

La syntaxe avec les parenthèse permet d'appeler les fonctions. C'est obligatoire quand il y a des paramètres, je peux vérifier si ici on peut s'en passer 😄

igorissen · 2024-05-16T08:33:23Z

orga/app/components/banner/language-availability.gjs

+}
+
+<template>
+  {{#let (getService "service:session") as |session|}}


Serait-on obligé de faire ceci pour une liste de services que l'on souhaite importer ? Si oui, c'est assez verbeux. N'y a-t-il pas d'autre moyen d'importer un ou plusieurs services pour un composant ?

Comme dit sur Slack, cette manière de faire risque d'évoluer avec l'utilisation des Ressource. On a accès directement au owner dans les Ressources donc on peut récupérer facilement les services dedans. Ici c'était une proposition pour pouvoir se passer des classes afin de pouvoir mettre le code JavaScript dans des différents du code de templating.

A titre personnel, je n'ai pas d'avis (les deux solutions me vont classe ou fonction). J'avais d'ailleurs proposé de dropper le commit 😉

igorissen · 2024-05-16T08:38:14Z

orga/app/components/banner/language-availability.gjs

+      <PixBanner
+        @type="information"
+        @canCloseBanner="true"
+        @onCloseBannerTriggerAction={{fn session.updateDataAttribute "localeNotSupportedBannerClosed" true}}


Si on souhaite rendre, plus lisible ce code (de mon point de vue), on pourrait faire ceci et remettre la fonction closeBanner avec un argument session, c'est bien ça ?

Suggested change

@onCloseBannerTriggerAction={{fn session.updateDataAttribute "localeNotSupportedBannerClosed" true}}

@onCloseBannerTriggerAction={{(closeBanner session)}}

Oui, c'était mon implémentation initiale. Mais je voulais montrer ici que ça n'est pas obligatoire il y a tous les outils dans Ember par défaut pour faire autrement 😄

igorissen · 2024-05-16T08:39:17Z

orga/app/helpers/get-service.js

+import { getOwner } from '@ember/application';
+import Helper from '@ember/component/helper';
+
+export default class GetService extends Helper {


Le let je ne l'ai jamais utilisé, et le as |value| je l'ai plus utilisé pour des boucles for. Mais oui, un peu de documentation ferait du bien.

xav-car

je suis plutôt pour drop le dernier commit histoire d'avoir une certaine consistance dans la déclaration de nos composants.

Mais si on laisse comme ça, ça me va aussi. ( réponse de Normand )

frinyvonnick self-assigned this May 13, 2024

frinyvonnick added the Development in progress label May 13, 2024

frinyvonnick force-pushed the test-ember-functions branch 3 times, most recently from 47aa348 to d87e087 Compare May 15, 2024 09:47

frinyvonnick added 👀 Tech Review Needed 👀 Func Review Needed and removed Development in progress labels May 15, 2024

frinyvonnick marked this pull request as ready for review May 15, 2024 09:47

frinyvonnick requested a review from a team as a code owner May 15, 2024 09:47

frinyvonnick changed the title ~~[TECH] PR pour faire la MEJ sur le format de composant avec la balise template~~ [TECH] Converti les composants du dossier banner sur PixOrga au format GJS. May 15, 2024

frinyvonnick changed the title ~~[TECH] Converti les composants du dossier banner sur PixOrga au format GJS.~~ [TECH] Convertit les composants du dossier banner sur PixOrga au format GJS. May 15, 2024

frinyvonnick changed the title ~~[TECH] Convertit les composants du dossier banner sur PixOrga au format GJS.~~ [TECH] Convertit les composants du dossier banner sur PixOrga au format GJS (PIX-12532). May 15, 2024

Alexandre-Monney approved these changes May 15, 2024

View reviewed changes

lionelB reviewed May 16, 2024

View reviewed changes

lionelB approved these changes May 16, 2024

View reviewed changes

igorissen reviewed May 16, 2024

View reviewed changes

xav-car added the team-prescription label May 16, 2024

xav-car approved these changes May 16, 2024

View reviewed changes

xav-car added Tech Review OK and removed 👀 Tech Review Needed 👀 Func Review Needed labels May 16, 2024

igorissen approved these changes May 22, 2024

View reviewed changes

frinyvonnick added the 🚀 Ready to Merge label May 22, 2024

pix-service-auto-merge force-pushed the test-ember-functions branch 2 times, most recently from 99f0c35 to a8417f6 Compare May 22, 2024 09:02

frinyvonnick added 2 commits May 22, 2024 09:10

refactor(orga): Banner::Communication component

6712509

refactor(orga): Banner::Information component

24cd81a

frinyvonnick added 2 commits May 22, 2024 09:10

refactor(orga): Banner::LanguageAvailability component

828c6d8

refactor(orga): remove class from Banner::LanguageAvailability component

0e9d6c8

pix-service-auto-merge force-pushed the test-ember-functions branch from a8417f6 to 0e9d6c8 Compare May 22, 2024 09:10

pix-service-auto-merge merged commit 9db44a4 into dev May 22, 2024
5 of 7 checks passed

pix-service-auto-merge deleted the test-ember-functions branch May 22, 2024 09:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TECH] Convertit les composants du dossier banner sur PixOrga au format GJS (PIX-12532). #8896

[TECH] Convertit les composants du dossier banner sur PixOrga au format GJS (PIX-12532). #8896

frinyvonnick commented May 13, 2024 •

edited

pix-bot-github commented May 13, 2024

frinyvonnick commented May 15, 2024

Alexandre-Monney left a comment

lionelB May 16, 2024

frinyvonnick May 16, 2024

frinyvonnick May 16, 2024

igorissen May 16, 2024

frinyvonnick May 16, 2024 •

edited

frinyvonnick May 16, 2024

igorissen May 16, 2024

frinyvonnick May 16, 2024

igorissen May 16, 2024

frinyvonnick May 16, 2024

igorissen May 16, 2024

frinyvonnick May 16, 2024

igorissen May 16, 2024

xav-car left a comment

		{{#if (isEnabled)}}
		<PixBanner @type={{(bannerType)}} class="sticker-banner">

	@onCloseBannerTriggerAction={{fn session.updateDataAttribute "localeNotSupportedBannerClosed" true}}
	@onCloseBannerTriggerAction={{(closeBanner session)}}

[TECH] Convertit les composants du dossier banner sur PixOrga au format GJS (PIX-12532). #8896

[TECH] Convertit les composants du dossier banner sur PixOrga au format GJS (PIX-12532). #8896

Conversation

frinyvonnick commented May 13, 2024 • edited

🦄 Problème

🤖 Proposition

🌈 Remarques

💯 Pour tester

pix-bot-github commented May 13, 2024

frinyvonnick commented May 15, 2024

Alexandre-Monney left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frinyvonnick May 16, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

xav-car left a comment

Choose a reason for hiding this comment

frinyvonnick commented May 13, 2024 •

edited

frinyvonnick May 16, 2024 •

edited