@ -192,7 +192,7 @@ plus plaisante et plus connectée \cite{momenttech}.
Pour y parvenir, \entity{Moment} propose une plateforme digitale déployée dans les avions, les trains, les bateaux
de croisière et plus récemment les cliniques de santé.
Cette plateforme permet aux voyageurs de se connecter à un réseau wifi avec leurs propres appareils, et de profiter
de divertissements directement sur ceux-cis.
de divertissements directement sur ceux-ci.
À ce jour, \entityb{Moment} s'apprête à compter 10 ans de travail dans ce domaine, et possède une trentaine d'employés.
\entityb{Moment} a lancé plus de 60 projets dans plus de 15 pays, et ses produits sont utilisés par plus de 10 millions
@ -274,7 +274,7 @@ différents pôles:
\textbf{Mood} (auparavant appelé \entity{Flymingo}) est la suite de produits principale de \entityb{Moment},
qui est aujourd'hui déployée dans plus de 200 avions, 30 bateaux et 300 trains.
La plateforme \entity{Flymingo} permet aux companies de transport de proposer du divertissement à ses passagers,
La plateforme \entity{Flymingo} permet aux compagnies de transport de proposer du divertissement à ses passagers,
avec une installation et une gestion simplifiée et sans le besoin d'installer des tablettes dans les sièges des passagers.
Ce produit est composé d'un serveur, nommé \entity{Flymingo Box}, qui émet son propre réseau wifi,
@ -323,7 +323,7 @@ Les applications développées autour de cette plateforme sont:
\begin{description}
\item[Mint Admin,] qui est une application web permettant aux clinique de fixer les prix
pour les offres que celles-ci souhaite mettre à disposition, ainsi que de gérer l'assignement des différents
pour les offres que celles-ci souhaite mettre à disposition, ainsi que de gérer l'attribution des différents
appareils (comme les télévisions et les tablettes) aux chambres, des différents patients à ces chambres,
et des offres aux patients.
\end{description}
@ -363,20 +363,20 @@ Chaque matin, nous faisons aussi une réunion \og daily \fg,
où chaqu'un présente le travail qu'iel a fait la veille, ainsi que ce qu'iel prévoit de faire ce jour.
Les tâches de la semaine sont inscrites sur \entity{Jira} dans un \term{Sprint} pour la semaine,
où elles seront facilement visibles et leur status sera facilement suivable.
où elles seront facilement visibles et leur statut sera facilement suivable.
L'attribution des tâches se fait en majorité sur la base du volontariat, avec les tâches à haute priorité à faire en premier:
lorsqu'il y a une tâche disponible que l'on souhaite faire,
on s'assigne à celle-ci sur \entity{Jira}, et on passe le status de la tâche de \textit{À faire} à \textit{En cours}. \figref{jira}
on s'assigne à celle-ci sur \entity{Jira}, et on passe le statut de la tâche de \textit{À faire} à \textit{En cours}. \figref{jira}
On crée alors une \term{Merge Request} sur \entity{GitLab} (l'équivalent des \term{Pull Request} sur \entity{GitHub})
pour accueillir les changements à faire pour cette tâche.
Une fois que la tâche est implémentée,
on marque la \term{Merge Request} en mode \og Ready \fg et on passe la tâche sur \entity{Jira} au status\textit{Prêt à review}.
on marque la \term{Merge Request} en mode \og Ready \fg et on passe la tâche sur \entity{Jira} au statut\textit{Prêt à review}.
Un autre membre de l'équipe doit alors \term{review} les modifications au code,
pour s'assurer que les attentes en terms de qualité de code sont remplies.
pour s'assurer que les attentes en termes de qualité de code sont remplies.
Si la \term{review} relève des problèmes, alors ceux-cis doivent être adressés.
Si la \term{review} relève des problèmes, alors ceux-ci doivent être adressés.
Dans le cas contraire, les changements de la \term{Merge Request} sont incorporés dans la branche \texttt{develop} et la tâche sur \entity{Jira} marquée comme \textit{Faite}.
Les tâches qui ne sont pas faites pendant un \term{sprint} sont gardées dans un \term{Backlog},
@ -397,8 +397,8 @@ allant de l'éditeur de texte jusqu'aux outils automatisant le test du code affe
\newcommand{\logowidth}{0.15\textwidth}
\textbf{Git}\cite{git} est utilisé pour gérer le versionage du code: cet outil permet de stocker les modifications
apportées au code sous forme de \og commits \fg, et de facilement rassembler et gérer les modifications faites par plusieures personnes.
\textbf{Git}\cite{git} est utilisé pour gérer le versionnage du code: cet outil permet de stocker les modifications
apportées au code sous forme de \og commits \fg, et de facilement rassembler et gérer les modifications faites par plusieurs personnes.
% wrapfigure does not work with my \entity :(
\begin{wrapfigure}{r}{\logowidth}
@ -408,12 +408,12 @@ allant de l'éditeur de texte jusqu'aux outils automatisant le test du code affe
\end{wrapfigure}
\textbf{GitLab}\cite{gitlab} est utilisé pour stocker les repositories de l'entreprise en ligne,
pour stocker en ligne les packages npm\cite{npm} et pour lancer automatiquement les tâches de \term{Continuous Integration}.
pour stocker en ligne les paquets \entity{npm}\cite{npm} et pour lancer automatiquement les tâches de \term{Continuous Integration}.
\textbf{VSCode}\cite{vscode} est un éditeur de texte utilisé par presque toute l'équipe pour modifier ou naviguer le code.
\textbf{Slack}\cite{slack} est une plateforme de messagerie instantanée,
que l'entreprise préfère aux emails pour la communication indirecte.
que l'entreprise préfère aux e-mails pour la communication indirecte.
\textbf{Jira}\cite{jira} est un logiciel de gestion et de suivi de tickets,
que notre équipe utilise pour suivre les tâches à faire durant la semaine,
@ -422,7 +422,7 @@ ainsi que pour garder un \term{backlog} des tâches à faible priorité.
\textbf{Confluence}\cite{confluence} est un logiciel qui permet à l'équipe de regrouper des documentations qui n'ont pas de place claire au sein du code.
\textbf{NX}\cite{nx} est un outil simplifiant la gestion de \og monorepositories \fg (des repositories contenant plusieures applications et librairies).
\textbf{NX}\cite{nx} est un outil simplifiant la gestion de \og monorepositories \fg (des repositories contenant plusieurs applications et librairies).
\textbf{NX} est utilisé pour la repository de l'équipe qui contient Mint Service, Mint Admin et Mood TV.
L'objectif au long terme et de migrer l'ensemble des projets de l'équipe sur cette repository,
car elle permet de facilement réutiliser du code entre les projets et de synchroniser des modifications entre projets.
@ -441,13 +441,13 @@ mais certains interpréteurs (comme \textbf{Bun} \cite{bun}) supportent le types
et il existe une initiative pour standardiser un système permettant d'ajouter des types en javascript sans devoir le traduire.
\textbf{React}\cite{react} est une librairie JavaScript qui permet de facilement construire des interfaces graphiques fortement intéractives.
React permet d'encapsuler l'affichage et la gestion d'évenéments dans des \og composants \fg, qui peuvent être réutilisés de manière modulaire.
React permet d'encapsuler l'affichage et la gestion d'évènements dans des \og composants \fg, qui peuvent être réutilisés de manière modulaire.
React propose aussi une extension de JavaScript, qui permet d'écrire du code HTML directement dans le code JavaScript,
ainsi que d'insérer des composants avec la même syntaxe.
\textbf{Next.JS}\cite{nextjs} est un framework simplifiant l'utilisation de React pour des plus grandes applications:
NextJS permet de séparer l'application en différentes pages,
et de naviguer de manière inintérompue entre ces pages.
et de naviguer de manière ininterrompue entre ces pages.
NextJS a également pour but d'optimiser la vitesse de chargement de ces pages, en faisant un maximum du rendu de ces pages côté serveur.
\textbf{Nest.JS}\cite{nestjs} est un framework simplifiant la création d'applications back-end.
@ -465,17 +465,17 @@ L'équipe a plusieurs outils en place pour assurer la qualité du code et des ap
Des tests d'intégration sont aussi écrits, qui testent de manière automatique une librairie ou une application entière,
afin de vérifier le bon fonctionnement de cette librairie ou de l'application.
Ces tests sont éxécutés sur nos machines,
Ces tests sont exécutés sur nos machines,
afin de pouvoir rapidement corriger tout morceau de code qui aurait été accidentellement cassé lors d'une modification.
% TODO: citation for CI
\item[Continuous Integration] En plus de tester le code localement,
le code est aussi compilé et testé sur un serveur via les outils de \entity{GitLab} pour l'intégration continue.
Éxecuter ces tests sur un serveur permet de valider le comportement de l'application à tout moment du projet par rapport à une base commune,
Executer ces tests sur un serveur permet de valider le comportement de l'application à tout moment du projet par rapport à une base commune,
et de s'assurer qu'une combinaison de modifications ne mène pas à un problème.
\item[Linting et formatting] Nous utilisons des outils comme \entity{ESLint} et \entity{Prettier} pour vérifier la consistence
\item[Linting et formatting] Nous utilisons des outils comme \entity{ESLint} et \entity{Prettier} pour vérifier la consistance
de la forme du code dans les différents projets.
\entity{ESLint} nous permet de mettre en place des règles vérifiées automatiquement,
et qui lorsqu'elles sont suivies diminuent le risque d'avoir du comportement inattendu dans l'application.
@ -488,11 +488,11 @@ L'équipe a plusieurs outils en place pour assurer la qualité du code et des ap
\item[Recettes] Pour valider les produits, un serveur de test, le \og lab \fg,
est à disposition pour déployer et tester localement les différents projets.
Cette version déployée localement est ensuite testée par les chefs de projet et d'autres personnes de l'entreprise pour déceller des problèmes qui n'auraient pas été trouvés pendant le développement.
Cette version déployée localement est ensuite testée par les chefs de projet et d'autres personnes de l'entreprise pour déceler des problèmes qui n'auraient pas été trouvés pendant le développement.
\item[Semantic versioning] Nous utilisons le versionage sémantique pour nos projets et pour les dépendance des projets.
Le versionage sémantique permet d'encoder dans le numéro de version du programme quel type de mise à jour il y a entre deux versions.
Le format du versionage sémantique est \;\texttt{major.minor.patch}, où:
\item[Semantic versioning] Nous utilisons le versionnage sémantique pour nos projets et pour les dépendance des projets.
Le versionnage sémantique permet d'encoder dans le numéro de version du programme quel type de mise à jour il y a entre deux versions.
Le format du versionnage sémantique est \;\texttt{major.minor.patch}, où:
\begin{itemize}
\item Si seulement \texttt{patch} change, alors la mise à jour ne modifie pas la fonctionnalité, mais corrige uniquement des bugs.
@ -559,9 +559,9 @@ et pour annoncer sur quoi chaqu'un prévoit de travailler ce jour-ci.
J'ai participé à ces réunions dès mon premier jour,
ce qui m'a permis de rapidement construire une compréhension des problématiques récurrente et de la dynamique des différentes applications.
Nous sommes encouragés dans l'équipe à travailler en \og pair programming \fg,
Nous sommes encouragés dans l'équipe à travailler en programmer en paire,
et en général à collaborer ensemble.
Ma première contribution au code a été faite en pair programming,
Ma première contribution au code a été faite en programmation en paire,
après avoir remarqué que la logique pour la complexité des mots de passe dans \entity{Mint Admin} était fausse.
Faire cette contribution en pair programming m'a permis d'être guidé dans le processus d'envoi et de vérification de contributions,
ainsi que d'être guidé dans l'organisation de la repository.
@ -572,7 +572,7 @@ Durant ce stage, j'ai surtout travaillé sur le développement de nouvelles fonc
\begin{itemize}
\item\entity{Mint Service}: développement de nouvelles fonctionnalités, sécurisation de l'API
\item\entity{Mood TV}: optimisation des performances, correction de bugs, réfactors
\item\entity{Mood TV}: optimisation des performances, correction de bugs, refactors
\item\entity{Mint Admin}: correction de bugs
\item\entity{Mint Digital}: correction de bugs, développement de la fonctionnalité pour gérer l'accès à internet
\end{itemize}
@ -607,20 +607,20 @@ et de s'assurer que ces applications soient à la fois sûres, efficaces et flex
NestJS emploie à son coeur les principes de \term{modularité} et d'\term{inversion de contrôle} (\term{IoC}):
\\
L'application est séparée en différents modules, qui eux-mêmes contiennent des \term{services} et des \term{controleurs}. \figref{nestjs3}
L'application est séparée en différents modules, qui eux-mêmes contiennent des \term{services} et des \term{contrôleurs}. \figref{nestjs3}
\begin{description}
\item[Les services] (aussi appelés \term{providers}) contiennent l'implémentation de la logique nécessaire
pour répondre aux besoins de l'application: contacter une base de donnée, traiter l'information, faire des
requêtes réseau, etc.
\item[Les controleurs] sont responsables d'accepter les requêtes des \entity{clients}, de les transformer, de vérifier
\item[Les contrôleurs] sont responsables d'accepter les requêtes des \entity{clients}, de les transformer, de vérifier
leur légitimité et d'appeler les méthodes des \entity{services} avant de transformer la réponse à envoyer au \entity{client}.
\\
NestJS fournit un ensemble d'outils simplifiant l'implémentation des controleurs.
NestJS fournit un ensemble d'outils simplifiant l'implémentation des contrôleurs.
\item[Les modules] s'occupent de gérer la configuration des \entity{services} et des \entity{controleurs}:
chaque \entity{module} indique à NestJS quels \entity{services} et \entity{controleurs} il contient,
\item[Les modules] s'occupent de gérer la configuration des \entity{services} et des \entity{contrôleurs}:
chaque \entity{module} indique à NestJS quels \entity{services} et \entity{contrôleurs} il contient,
ainsi que comment NestJS doit construire ces services dans les cas plus complexes.
\\
Les modules peuvent exporter un sous-ensemble de leurs services, ce qui permet de rapidement
@ -635,16 +635,16 @@ L'application est séparée en différents modules, qui eux-mêmes contiennent d
\end{figure}
La séparation entre controleurs et services permet d'avoir une claire \term{séparation des préoccupations}:
La séparation entre contrôleurs et services permet d'avoir une claire \term{séparation des préoccupations}:
\begin{itemize}
\item Les controleurs s'occupent de gérer, valider et répondre aux requêtes faites par un client;
\item Les contrôleurs s'occupent de gérer, valider et répondre aux requêtes faites par un client;
\item Les services s'occupent de l'implémentation de la logique permettant de satisfaire la requête;
\item Les modules s'occupent de configurer les services et les controleurs, et permettent la modularisation du code.
\item Les modules s'occupent de configurer les services et les contrôleurs, et permettent la modularisation du code.
\end{itemize}
Pour limiter le couplage entre les services, et pour simplifier la réutilisation des services,
NestJS permet de faire de l'\term{injection de dépendances} par \term{constructeur sans défaut}\cite{yang2008empirical} dans les services et dans les controleurs,
NestJS permet de faire de l'\term{injection de dépendances} par \term{constructeur sans défaut}\cite{yang2008empirical} dans les services et dans les contrôleurs,
d'une manière similaire au framework \entity{Spring} en \entity{Java}. \figref{nestjs1}
% TODO: trouver une source
@ -652,7 +652,7 @@ d'une manière similaire au framework \entity{Spring} en \entity{Java}. \figref{
% "On the importance of the separation-of-concerns principle in secure software engineering"
Il devient ainsi plus simple avec ce système de modifier différentes parties du code sans accidentellement casser une autre partie du code.
Il est aussi plus simple de tester du code organisé de la manière suivante, car les services et les controleurs peuvent
Il est aussi plus simple de tester du code organisé de la manière suivante, car les services et les contrôleurs peuvent
être placés dans un environnement isolé et testés individuellement ou collectivement.
@ -665,10 +665,10 @@ Ce système prend la forme de plusieurs librairies, qui doit remplir les conditi
\begin{itemize}
\item Il doit être facilement réutilisable dans d'autres projets.
\item Il doit permettre de changer de fournisseur de service pour l'envoi d'emails sans devoir faire de grands changements du côté des utilisateurs de la librairie.
\item Il doit pouvoir envoyer des emails qui s'affichent de la manière voulue sur la majorités des boîtes mail.
\item Il doit pouvoir envoyer des emails contenant des informations sur l'utilisateur; cette étape devra être faite avec le service de \term{templates} d'email sur \entity{Amazon SES}\cite{amazonses}\cite{amazonsestemplate}
\item Il doit permettre de décrire le contenu des emails d'une manière facilement maintenable et réutilisable.
\item Il doit permettre de changer de fournisseur de service pour l'envoi d'e-mails sans devoir faire de grands changements du côté des utilisateurs de la librairie.
\item Il doit pouvoir envoyer des e-mails qui s'affichent de la manière voulue sur la majorités des boîtes mail.
\item Il doit pouvoir envoyer des e-mails contenant des informations sur l'utilisateur; cette étape devra être faite avec le service de \term{templates} d'e-mail sur \entity{Amazon SES}\cite{amazonses}\cite{amazonsestemplate}
\item Il doit permettre de décrire le contenu des e-mails d'une manière facilement maintenable et réutilisable.
\end{itemize}
Mon travail a commencé par l'analyse de différentes solutions permettant d'adresser les deux dernières conditions.
@ -689,8 +689,7 @@ d'abstraction et de réutiliser facilement le code. Ces composants doivent, plus
\item Pouvoir appeler d'autres composants
\end{itemize}
% TODO: source sur search and replace
J'ai selectionné deux moteurs de recherche et de remplacement de texte (\term{Search and Replace}): \entity{Handlebars}\cite{handlebars} et \entity{Mustache}\cite{mustache}.
J'ai sélectionné deux moteurs de recherche et de remplacement de texte (\term{Search and Replace}): \entity{Handlebars}\cite{handlebars} et \entity{Mustache}\cite{mustache}.
Ces deux moteurs opèrent de manière similaire: ils lisent le code source,
et lorsqu'une variable indiquée par les balises \texttt{\{\{} et \texttt{\}\}} est rencontrée,
celle-ci est subtituée par la valeur assignée au nom de cette variable.
@ -700,7 +699,7 @@ car ils permettent de définir des variables spéciales, que les deux moteurs ap
qui peuvent appeler du code javascript arbitraire.
J'ai enfin fait un prototype en \entity{Typescript},
qui transforme un email décrit à partir de composants \entity{Handlebars} ou \entity{Mustache} en du HTML.
qui transforme un e-mail décrit à partir de composants \entity{Handlebars} ou \entity{Mustache} en du HTML.
Après avoir montré ce prototype à mon chef de projet, nous étions tous les deux d'accord que le moteur \entity{Handlebars}
remplissait mieux nos attentes, en grande partie parce que \entity{Handlebars} permet de passer du code en tant qu'\og enfants \fg,
@ -710,8 +709,8 @@ tandis que \entity{Mustache} requiet de passer par deux composants (un avant et
Pour le premier projet sur lequel \entity{Mint Service} allait être déployé,
\entity{Amazon SES}\cite{amazonses} allait être utilisé pour faire l'envoi de mails.
\entity{Amazon SES} permet d'envoyer les emails sous format texte et HTML en même temps,
permettant d'avoir des emails facilement lisibles par un lecteur d'écran
\entity{Amazon SES} permet d'envoyer les e-mails sous format texte et HTML en même temps,
permettant d'avoir des e-mails facilement lisibles par un lecteur d'écran
ou sur une messagerie configurée pour afficher les mails sans leur mise en forme.
La partie \entity{Handlebars} a donc été étendue pour permettre d'annoter quels parties du code doivent être
@ -727,7 +726,7 @@ Cette première implémentation devait faire l'envoi de mail en deux étapes:
\begin{enumerate}
\item Les mails sont chargés et sont rendus, puis sont mises en lignes sur \entity{Amazon SES} en tant que \og templates \fg\cite{amazonsestemplate}
\item Les mails sont ensuite envoyés en instructant à \entity{Amazon SES} de faire le rendu et l'envoi d'une des \term{templates} à l'adresse mail voulue, avec les données voulues
\item Les mails sont ensuite envoyés en dirigeant à \entity{Amazon SES} de faire le rendu et l'envoi d'une des \term{templates} à l'adresse mail voulue, avec les données voulues
\end{enumerate}
J'ai d'abords créé et implémenté une librairie permettant de compiler du code \entity{Handlebars}
@ -738,31 +737,31 @@ ce qui permet de la réutiliser dans le futur pour d'autres projets.
Puis, j'ai créé et implémenté une librairie Nest.JS nommée \texttt{mailing-nest} qui s'occupe de:
\begin{itemize}
\item Charger les composants et les emails depuis un dossier donné
\item Transformer ceux-cis avec \texttt{handlebars-generator} en HTML et en texte
\item Mettre en ligne des \term{templates} pour utiliser le service d'envoi d'emails personalisés d'\entity{Amazon}
\item Charger les composants et les e-mails depuis un dossier donné
\item Transformer ceux-ci avec \texttt{handlebars-generator} en HTML et en texte
\item Mettre en ligne des \term{templates} pour utiliser le service d'envoi d'e-mails personalisés d'\entity{Amazon}
\item Envoyer les \term{templates} avec les informations de l'utilisateur dedans avec \entity{Amazon SES}
\end{itemize}
Afin de pouvoir tester le fonctionnement de la librairie \texttt{mailing-nest},
j'ai également créé une petite application Nest.JS qui affiche dans le navigateur les emails en format HTML et en format texte.
Cette application permet aussi de développer rapidement les emails sans devoir passer par Amazon pour tester
j'ai également créé une petite application Nest.JS qui affiche dans le navigateur les e-mails en format HTML et en format texte.
Cette application permet aussi de développer rapidement les e-mails sans devoir passer par Amazon pour tester
les modifications.
Enfin, j'ai implémenté un module Nest.JS dans l'application \entity{Mint Service},
qui charge le module de \texttt{mailing-nest} avec en paramètre le chemin des emails pour \entity{Mint}.
qui charge le module de \texttt{mailing-nest} avec en paramètre le chemin des e-mails pour \entity{Mint}.
Ce module est importé à plusieurs endroits dans le code, et expose des méthodes dans son service permettant
de convertir les entités de \entity{Mint Service} au format attendu par les emails.
de convertir les entités de \entity{Mint Service} au format attendu par les e-mails.
\begin{figure}[H]
\includegraphics[width=\textwidth]{mailingnest}
\caption{Organisation initiale du système d'envoi de mail dans Mint-Service}
\end{figure}
Avec le système de mail en place, j'ai pu implémenter la première template d'email, qui était celle pour l'envoi d'identifiants au patients.
Très rapidement, j'ai pu voir sur \url{caniemail.com} que la quasi-totalités des fonctionnalités HTML5 modernes n'étaient pas supportés par \entity{Microsoft Outlook},
ce qui nous forcerait à utiliser des \texttt{<table>} dans l'entièreté des emails pour pouvoir supporter \entity{Microsoft Outlook},
qui est à ce jour le 3ème client email le plus utilisé du monde \cite{oberloemailclients}.
Avec le système de mail en place, j'ai pu implémenter la première template d'e-mail, qui était celle pour l'envoi d'identifiants au patients.
Très rapidement, j'ai pu voir sur \url{canie-mail.com} que la quasi-totalités des fonctionnalités HTML5 modernes n'étaient pas supportés par \entity{Microsoft Outlook},
ce qui nous forcerait à utiliser des \texttt{<table>} dans l'entièreté des e-mails pour pouvoir supporter \entity{Microsoft Outlook},
qui est à ce jour le 3ème client e-mail le plus utilisé du monde \cite{oberloemailclients}.
Une solution à ce problème est d'utiliser une librairie assurant la compatibilité avec \entity{Outlook}.
J'ai choisi la librairie \entity{MJML}\cite{mjml}, qui utilise un langage ressemblant au html, qui est ensuite compilé en HTML compatible avec \entity{Outlook}:
@ -775,7 +774,7 @@ J'ai choisi la librairie \entity{MJML} \cite{mjml}, qui utilise un langage resse
% - [x] parler de ce qu'on prévoyait de faire
% - [~] parler de comment on l'a fait (pour showcase l'avantage du monorepo), et des étapes prises
% - [x] parler des améliorations futures qui pourront être faites
% (ajouter plus de providers, simplifier la logique pour choisir les providers, react.email, svelte, etc.)
% (ajouter plus de providers, simplifier la logique pour choisir les providers, react.e-mail, svelte, etc.)
% - [ ] Comparer la maintenabilité
Après avoir fini l'implémentation du système de mail, j'ai pu l'observer alors qu'il est passé par la vérification de qualité,
@ -786,10 +785,10 @@ L'organisation du code au sein de \entity{Mint Service} a pris deux essais pour
le premier essai plaçait l'envoi des mails dans un service dédié à la gestion des utilisateurs (\texttt{GuestModule}),
mais il s'averrait qu'il fallait assez de code pour préparer les informations des mails qu'il était préférable de déplacer la logique d'envoi des mails dans un module à part, \texttt{MintMailingModule}.
Malgré \entity{MJML} et le système de composants, écrire des templates d'emails reste plus compliqué à écrire que du code React:
Malgré \entity{MJML} et le système de composants, écrire des templates d'e-mails reste plus compliqué à écrire que du code React:
\begin{itemize}
\item La différence de format entre les templates Handlebars/MJML et les composants React fait qu'il est difficile d'appliquer les intuitions valables pour le React lorsqu'on écrit ou réécrit des templates d'emails.
\item La différence de format entre les templates Handlebars/MJML et les composants React fait qu'il est difficile d'appliquer les intuitions valables pour le React lorsqu'on écrit ou réécrit des templates d'e-mails.
\\
Ceci est en grande partie dû au fonctionnement de MJML,
qui requiet une structure stricte dans le code (\texttt{mj-body}$\rightarrow$\texttt{mj-section}$\rightarrow$\texttt{mj-column}$\rightarrow$ texte).
@ -797,8 +796,8 @@ Malgré \entity{MJML} et le système de composants, écrire des templates d'emai
HTML lui a une structure plus flexible,
permettant d'imbriquer la pluspart des éléments disponibles dans un ordre arbitraire. \cite{mdncontentcategories}
\item Le choix de faire le rendu final des emails avec les templates d'\entity{Amazon SES} rend l'écriture des emails plus compliquée
(il faut mixer ensemble deux différents formats handlebars, l'un étant interprété de notre côté, et l'autre étant interprété du côté d'\entityb{Amazon SES}\figref{emailsrchbs}).
\item Le choix de faire le rendu final des e-mails avec les templates d'\entity{Amazon SES} rend l'écriture des e-mails plus compliquée
(il faut mixer ensemble deux différents formats handlebars, l'un étant interprété de notre côté, et l'autre étant interprété du côté d'\entityb{Amazon SES}\figref{e-mailsrchbs}).
\\
Ce choix rend aussi le débogage de toute erreur lors du deuxième rendu très compliqué,
car le seul moyen pour accéder aux erreurs d'envoi de mails sur \entityb{Amason SES} est de mettre en place un système
@ -809,22 +808,22 @@ Pour palier à la deuxième difficulté, j'ai décidé vers la fin de mon stage
afin de faire l'entièreté du rendu de notre côté, et d'uniquement utiliser \entity{Amazon SES} pour l'envoi pur des mails.
J'avais également comme but secondaire de rendre ce système plus robuste,
en permettant notamment l'insertion de code pour vérifier la validité des données insérées dans les emails lorsqu'on est dans un environnement de développement.
en permettant notamment l'insertion de code pour vérifier la validité des données insérées dans les e-mails lorsqu'on est dans un environnement de développement.
Les modifications ont été faites dans l'ordre suivant, qui permettait de progressivement appliquer les changements nécessaires:
\begin{enumerate}
\item Suppression de la transformation des balises secondaires (\texttt{[[} et \texttt{]]}) et des options associées
\item Marquage de différents types comme dépréciés, et ajout de types pour l'envoi pur d'emails
\item Dépréciation des méthodes d'envoi d'email via les templates SES (\texttt{sendTemplatedEmail}), et ajout des méthodes pour l'envoi pur d'emails (\texttt{sendEmail})
\item Marquage de différents types comme dépréciés, et ajout de types pour l'envoi pur d'e-mails
\item Dépréciation des méthodes d'envoi d'e-mail via les templates SES (\texttt{sendTemplatedEmail}), et ajout des méthodes pour l'envoi pur d'e-mails (\texttt{sendEmail})
\item Modification des templates pour ne plus utiliser les balises secondaires
\item Modification de l'application de prévisionage des emails pour utiliser le nouveau format des informations substituées dans les mails
\item Modification de l'application d'apperçu des e-mails pour utiliser le nouveau format des informations substituées dans les mails
\item Modification de \entity{Mint Service} pour utiliser \texttt{sendEmail} au lieu de \texttt{sendTemplatedEmail}
\item Suppression de \texttt{UploadModule} et de \texttt{sendTemplatedEmail}
\item Suppression des types inutilisés
\end{enumerate}
À la suite de ces modifications, les emails s'affichent de la même manière qu'avant,
À la suite de ces modifications, les e-mails s'affichent de la même manière qu'avant,
et le système d'envoi de mails est désormais plus simple à utiliser
et plus simple à étendre avec différents services d'envoi de mail.
@ -832,7 +831,7 @@ Je n'ai pas pu implémenter le système de validation des données, par soucis d
il aurait fallu étendre le système de chargement de composants pour également charger du code Javascript,
et transformer le format des données utilisé par Handlebars en un format facilement vérifiable.
\\
Il est par contre maintenant possible d'écrire dans \entityb{Mint Service} des tests pour s'assurer que la logique de transformation des données reste compatible avec les emails.
Il est par contre maintenant possible d'écrire dans \entityb{Mint Service} des tests pour s'assurer que la logique de transformation des données reste compatible avec les e-mails.
À la suite de cette modification,
je pense qu'il est encore possible d'améliorer de différentes manières ce système d'envoi de mails:
@ -841,7 +840,7 @@ je pense qu'il est encore possible d'améliorer de différentes manières ce sys
\item En ajoutant plus de tests automatisés dans le système, notamment des tests d'intégration
\item En rendant les différents modules plus simples d'utilisation
\item En permettant d'utiliser une syntaxe plus proche de celle de React pour appeler des composants (\texttt{<Composant>} au lieu de \texttt{\{\{>Composant\}\}})
\item En utilisant un système comme \href{https://react.email/}{React Email} ou \href{https://astro.build/}{Astro} pour écrire les templates en Javascript, ce qui permetterait aussi de faire de la vérification des données et des types.
\item En utilisant un système comme \href{https://react.e-mail/}{React Email} ou \href{https://astro.build/}{Astro} pour écrire les templates en Javascript, ce qui permettrait aussi de faire de la vérification des données et des types.
\end{itemize}
\begin{figure}[H]
@ -869,7 +868,7 @@ et j'ai été laissé en autonomie pour trouver pourquoi le temps de chargement
\subsection{Analyse des performances}
La première étape avant de pouvoir optimiser les performances de l'application est de mesurer ses performances.
Il faut pour celà mesurer de manière précise le temps moyen de chargement,
Il faut pour cela mesurer de manière précise le temps moyen de chargement,
et il faut pouvoir avoir un aperçu de quelles opérations prennent le plus de temps.
J'ai tout d'abords activé le mode de débogage sur la télévision,
@ -889,7 +888,7 @@ On peut séparer le temps de chargement en différentes étapes:
\begin{enumerate}
\item Le chargement initial (en bleu), qui est le moment durant lequel le navigateur télécharge le code javascript,
et durant lequel \entity{webpack} prépare ce code pour reproduire un environnement modulaire moderne.
\item L'hydration \cite{hydration}, qui est une étape du rendu avec React: cette étape du chargement permet à React d'attacher
\item L'\term{hydration}\cite{hydration}, qui est une étape du rendu avec React: cette étape du chargement permet à React d'attacher
son arborescence d'état au HTML existant, permettant d'intéragir dans le code React avec les éléments du DOM.
\item La réception des \og catégories \fg, qui consiste au traitement de deux requêtes faites à l'API sur laquelle se trouve le \term{Content Management System}
\item L'envoi de requêtes pour récupérer les informations des films présents dans ces catégories
@ -909,7 +908,7 @@ La solution que j'ai trouvé a été de créer et d'implémenter un protocole d'
et peut relire de ce fichier si jamais il faut reprendre la mesure de performance.
\item Un programme lit les valeurs du fichier, puis calcule la moyenne, l'écart standard de ces valeurs.
Ce programme peut aussi lire deux fichiers, et comparer les performances entre ceux-cis.
Ce programme peut aussi lire deux fichiers, et comparer les performances entre ceux-ci.
\end{itemize}
\begin{figure}[H]
@ -935,11 +934,11 @@ je fais l'hypothèse que les valeurs suivent une distribution normale ($X \hookr
J'ai décidé d'utiliser dans mon programme de statistique un test rudimentaire de normalité,
également présent dans la librairie populaire de benchmark pour le langage \entity{Rust} nommée \entity{Criterion}, \cite{criterion}
qui m'a permis de détecter une erreur dans la mesure de donnée (celle-ci mesurait la même donnée plusieures fois).
qui m'a permis de détecter une erreur dans la mesure de donnée (celle-ci mesurait la même donnée plusieurs fois).
Ce test de normalité vérifie simplement que plus de 95\% des valeurs mesurée tombent dans l'intervale
Ce test de normalité vérifie simplement que plus de 95\% des valeurs mesurée tombent dans l'intervalle
$\mu^{\star}\pm\sigma\cdot z_{0.975}$.
Comme $\sigma$ n'est pas connu, je majore $\sigma^{\star}$ par la valeur haute de l'approximation \cite{tapprox} de son intervale de confiance. \figref{normalitytest}
Comme $\sigma$ n'est pas connu, je majore $\sigma^{\star}$ par la valeur haute de l'approximation \cite{tapprox} de son intervalle de confiance. \figref{normalitytest}
Enfin, on peut utiliser le t-test sur les mesures pour estimer si deux variables aléatoires différentes $X$ et $Y$ diffèrent bien de moyenne. \cite{ttest}
Avec ce test, il est alors possible de déterminer si les performances se sont améliorées ou non.
@ -948,7 +947,7 @@ Pour \entity{Mood TV}, les valeurs mesurées sont les suivantes, en milliseconde
\begin{itemize}
\item Le temps jusqu'au début de l'hydration: \textbf{hydration}
\item Le temps jusqu'à la première éxecution des \texttt{useEffect}: \textbf{mount}
\item Le temps jusqu'à la première exécution des \texttt{useEffect}: \textbf{mount}
\item Le temps jusqu'à ce que l'entièreté des requêtes pour charger les informations des films soient finies: \textbf{ready}
\end{itemize}
@ -967,10 +966,10 @@ Pour \entity{Mood TV}, les valeurs mesurées sont les suivantes, en milliseconde
\subsubsection{Optimisation du nombre de requêtes}
La première optimisation a été d'éviter que les requêtes pour récupérer les informations sur les films ne soient envoyées plusieures fois.
La fonction pour faire la requête pour une catégorie (\texttt{getItems}) utilisait un \texttt{useCallback} et un cache gêré par React,
La première optimisation a été d'éviter que les requêtes pour récupérer les informations sur les films ne soient envoyées plusieurs fois.
La fonction pour faire la requête pour une catégorie (\texttt{getItems}) utilisait un \texttt{useCallback} et un cache géré par React,
ce qui faisait que dès que les informations d'un film était récupéré et stocké dans le cache, React assignait une nouvelle référence à \texttt{getItems},
causant le \texttt{useEffect} responsable pour charger l'ensemble des informations des films à s'éxecuter à nouveau,
causant le \texttt{useEffect} responsable pour charger l'ensemble des informations des films à s'exécuter à nouveau,
et de nouvelles requêtes sont envoyées en conséquence. \figref{fromeffectloop}
Pour résoudre ce problème, j'ai créé une nouvelle fonction qui récupère l'entièreté des informations des films,
@ -1013,7 +1012,7 @@ Puis, j'ai progressivement modifié les fonctions de traitement de requête affe
\subsection{Résultats et rétrospective}
Avec ces optimisations, la page prend désormais entre 4 et 6 secondes pour charger, contre 10 à 15 secondes auparavant.
Le temps d'éxecution sur le processeur de la télévision n'est aussi plus un engorgement,
Le temps d'exécution sur le processeur de la télévision n'est aussi plus un engorgement,
et on peut voir sur le profil des performances qu'une bonne partie du temps est passé à attendre que les différentes requêtes se finissent. \figref{moodtvafter}
\begin{figure}
@ -1026,10 +1025,10 @@ Faire ce travail m'a permis d'avoir une compréhension plus profonde sur différ
\begin{itemize}
\item Les techniques d'optimisation logicielle (profilage, benchmarking)
\item Le modèle de propagation de mises à jour de React (\texttt{useEffect}, les boucles d'évenements infinies \figref{fromeffectloop})
\item Le modèle de propagation de mises à jour de React (\texttt{useEffect}, les boucles d'évènements infinies \figref{fromeffectloop})
\item L'optimisation de la taille des bundle javascript
\item L'extraction de données de performances depuis le navigateur (web vitals \cite{webvitals}, \texttt{reportWebVitals} sur Next.JS \cite{nextjsvitals})
\item L'analyse de données de performances (z-test, t-test, intervale de confiance)
\item L'analyse de données de performances (z-test, t-test, intervalle de confiance)
\end{itemize}
% TODO: a section about
@ -1042,7 +1041,7 @@ Faire ce travail m'a permis d'avoir une compréhension plus profonde sur différ
\subsection{Synthèse des résultats}
J'ai été globalement satisfait du travail que j'ai pu fournir durant ce stage:
les résultats attendus étaient obtenus (le système d'envoi de mail marche encore au moment où j'écris ce rapport, la télévision charge consistemment en moins de 5 secondes, etc.)
les résultats attendus étaient obtenus (le système d'envoi de mail marche encore au moment où j'écris ce rapport, la télévision charge de manière consistante en moins de 5 secondes, etc.)
et j'ai pu écrire des tests unitaires pour une bonne partie de mon code, ce qui permettra de maintenir sa fonctionnalité dans les années à venir.
\subsection{Appréciation des technologies utilisées}
Adrien Burgun
2 years ago