diff --git a/figures/email-src-hbs.tex b/figures/email-src-hbs.tex index 9f8ec9c..7bef5cb 100644 --- a/figures/email-src-hbs.tex +++ b/figures/email-src-hbs.tex @@ -1,4 +1,4 @@ -\begin{figure} +\begin{figure}[H] \begin{lstlisting}[language=hbs, numbers=none] {{#>mint.main}} {{#>mint.title}} diff --git a/figures/email-src-mjml.tex b/figures/email-src-mjml.tex index 6ada83c..75bb9b9 100644 --- a/figures/email-src-mjml.tex +++ b/figures/email-src-mjml.tex @@ -1,4 +1,4 @@ -\begin{figure} +\begin{figure}[H] \begin{lstlisting}[language=xml, numbers=none] diff --git a/figures/fromeffectloop.tex b/figures/fromeffectloop.tex index 866edd1..b17889e 100644 --- a/figures/fromeffectloop.tex +++ b/figures/fromeffectloop.tex @@ -1,4 +1,4 @@ -\begin{figure} +\begin{figure}[H] \begin{subfigure}[t]{\textwidth} \begin{lstlisting}[language=JavaScript] function useCategoryCache() { diff --git a/figures/normalitytest.tex b/figures/normalitytest.tex index 1c66091..989cdb6 100644 --- a/figures/normalitytest.tex +++ b/figures/normalitytest.tex @@ -1,4 +1,4 @@ -\begin{figure} +\begin{figure}[H] \begin{align*} \sigma_{low} &= S_{n-1}^2 - z_{1-\alpha/2} \frac{\sqrt{2}S_{n-1}^2}{\sqrt{n}} \\ \sigma_{high} &= S_{n-1}^2 + z_{1-\alpha/2} \frac{\sqrt{2}S_{n-1}^2}{\sqrt{n}} \\ @@ -9,8 +9,8 @@ &I = [\mu^{\star} \pm \sigma_{high} \cdot z_{1 - \beta/2}] \\ &\text{Avec un taux d'erreur de $\alpha$,} \\ X \hookrightarrow \mathcal{N}(\mu, \sigma^2) - &\Rightarrow \forall i, \mathcal{P}(\omega_i \in I) = 1 - \beta' \ge 1 - \beta \\ - &\Rightarrow S = \sum_{i=1}^{n}{\mathds{1}_{I}(\omega_i)} \hookrightarrow \mathcal{B}(1 - \beta', n) \\ + &\Rightarrow \forall i, \mathcal{P}(X_i \in I) = 1 - \beta' \ge 1 - \beta \\ + &\Rightarrow S = \sum_{i=1}^{n}{\mathds{1}_{I}(X_i)} \hookrightarrow \mathcal{B}(1 - \beta', n) \\ &\Rightarrow \mathbb{E}(S) = (1 - \beta') n \ge (1 - \beta) n \end{align*} \caption{Calcul du test de normalité par valeurs anormales} diff --git a/figures/types.tex b/figures/types.tex new file mode 100644 index 0000000..ffc1790 --- /dev/null +++ b/figures/types.tex @@ -0,0 +1,97 @@ +\begin{figure}[H] + \begin{lstlisting}[language=JavaScript] +export type InputType = { + string: string, + 'date-time': Date, + number: number, + checkbox: boolean, +}; + +export type InputField = { + defaultValue?: T; + validate?: (value: T) => boolean; + label?: string; + inputType: keyof InputType; +}; + +export class InputFieldBuilder { + static from(inputType: K): InputField { + // ... + } + // ... +} + +/** + * Represents an action that can be performed on the target device + **/ +export abstract class Action { + static module: string; + static action: string; + + abstract run(params: TInput): Promise; +} + +/** +* Returns the `Params` generic type in `Action` +**/ +export type ExtractActionParams> = + TAction extends Action ? Params : never; +\end{lstlisting} + \caption{Exemple de types avancés en TypeScript (1/2)} + \label{types} +\end{figure} +\begin{figure}[H] +\begin{lstlisting}[language=JavaScript] +/** +* This type returns a narrowed-down version of `Record`, that requires that every value in `Params` +* has a field attached to it. +**/ +export type MapActionParams = Params extends undefined | void | null + ? unknown + : { + [Key in keyof Params]: Params[Key] extends InputType[keyof InputType] + ? InputField + : InputField; + }; + +/** +* Conditionally sets the `fields` property of `Request` to: +* - if `TAction` is set to `unknown` (default), an optional `Record` +* - if `TAction` is set to an `Action`, then it will extract the properties defined in that `Action`, +* and require you to properly define their fields +**/ +export type RequestFields = TAction extends Action + ? { + fields: Record & MapActionParams>; + } + : { + fields?: Record; + }; + +/** + * Represents a network request that will be sent to the device to perform the similarly-named Action. + **/ +export type Request = { + action?: string; + module?: string; +} & RequestFields; + +// Exemple: + +class ShowMessageAction extends Action<{ message: string}, void> { + run({message}): Promise { + // show `message` + } +} + +const ShowMessageRequestFields: RequestFields = { + module: 'system', + action: 'showMessage', + fields: { + // Si on omet `message` ou si on utilise un autre type, une erreur est affichée + message: InputFieldBuilder.from('string').build() + } +}; + \end{lstlisting} + \caption{Exemple de types avancés en TypeScript (2/2)} +\end{figure} diff --git a/images/poles.pdf b/images/poles.pdf new file mode 100644 index 0000000..c8957b7 Binary files /dev/null and b/images/poles.pdf differ diff --git a/images/survival_plot.png b/images/survival_plot.png new file mode 100644 index 0000000..4b9f865 Binary files /dev/null and b/images/survival_plot.png differ diff --git a/references.bib b/references.bib index a8ce169..f9b7819 100644 --- a/references.bib +++ b/references.bib @@ -270,3 +270,10 @@ eprint={https://analyticalsciencejournals.onlinelibrary.wiley.com/doi/pdf/10.1002/cem.2713}, year={2015} } + +@misc{reactivity, + title={Guides: Reactivity}, + author={SolidJS}, + howpublished="\url{https://www.solidjs.com/guides/reactivity}", + note="En ligne; accédé le 10 Février 2023]" +} diff --git a/report.tex b/report.tex index 170003a..350facc 100644 --- a/report.tex +++ b/report.tex @@ -165,10 +165,9 @@ une start-up française basée à Paris et fondée en 2013. \newline - % TODO: check wording (maritime) - Moment propose à ses clients des offres de divertissement pour l'aviation, le secteur maritime, les chemins de fer et - plus récemment le domaine de la santé. Leur offre principale, \og Flymingo \fg, permet d'accéder aux divertissements - directement depuis les appareils mobiles des passagers. + Moment propose à ses clients des offres de divertissement pour l'aviation, le secteur maritime, le secteur ferroviaire et + plus récemment le domaine de la santé. Leur offre principale, la \og Flymingo Box \fg, est une solution tout-en-un qui permet + aux passagers de directement accéder à une librairie de divertissement depuis leurs appareils mobiles. \newline J'ai pu contribuer au développement de fonctionnalités pour la nouvelle offre déployée dans les cliniques de santé, @@ -195,17 +194,15 @@ 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. -% TODO: récupérer le vrai nombre d'employés et de projets À 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é une cinquantaine de projets, dans 15 pays, et ses produits sont utilisés par plus de 10 millions +\entityb{Moment} a lancé plus de 60 projets dans plus de 15 pays, et ses produits sont utilisés par plus de 10 millions de passagers par jour. -% TODO: valider Air France? -\entityb{Moment} fournit ses services aujourd'hui à \entity{Air France}, l'\entity{Aéroport de Paris}, -\entity{TGV InOui}, \entity{Air Belgium}, \entity{Brittany Ferries} et \entity{Air Senegal}. +\entityb{Moment} fournit ses services aujourd'hui à \entity{TGV InOui}, \entity{Air Belgium}, \entity{Brittany Ferries} et \entity{Air Senegal}. +\entityb{Moment} a aussi dans le passé fourni ses services à \entity{Air France} et \entity{l'Aéroport de Paris}. -L'entreprise \entityb{Moment} a lancé en 2021 une filiale nommée \entity{Moment Care}, qui se spécialise dans -le divertissement dans le domaine de la santé: +Après avoir déployé déjà 500 serveurs, l'entreprise \entityb{Moment} a lancé en 2021 une filiale nommée \entity{Moment Care}, +qui se spécialise dans le divertissement dans le domaine de la santé: \entity{Moment Care} souhaite révolutionner le contenu des offres de divertissement dans les établissements de santé, et la manière d'y accéder \cite{momentcare}. @@ -254,20 +251,29 @@ différents pôles: \item[Full Stack:] L'équipe \entity{Full Stack} développe les différentes applications front-end et back-end que \entity{Moment} propose. Ces applications s'étendent du serveur de streaming de médias aux applications web et aux applications mobiles. C'est également l'équipe que j'ai rejoint durant ce stage. - \end{description} +\end{description} + +\begin{figure}[H] + \includegraphics[width=\textwidth]{poles} + \caption{Diagramme des pôles de l'entreprise} +\end{figure} +\newpage \subsection{Produits de Moment} -\subsubsection{Flymingo} +\subsubsection{Mood} % TODO: crop images \begin{wrapfigure}{r}{0.25\textwidth} \centering \includegraphics[width=0.25\textwidth]{flymingo-box} \caption*{Flymingo Box} + \includegraphics[width=0.25\textwidth]{mood-digital} + \caption*{Mood Digital} \end{wrapfigure} -\textbf{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. +\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, avec une installation et une gestion simplifiée et sans le besoin d'installer des tablettes dans les sièges des passagers. @@ -277,13 +283,18 @@ sur lequel les passagers peuvent se connecter pour profiter des divertissements. Différentes applications sont développées autour de la \entity{Flymingo Box}: \begin{description} - \item[Flymingo Entertainment] aussi appelé \entity{Flymingo Digital}, est une application web, - sur laquelle les passagers se connectent pour regarder des films, - lire de la presse ou jouer à des jeux dans le navigateur. - L'application peut être utilisée sur les téléphones, tablettes et ordinateurs. - \\ - L'application peut aussi être adaptée visuellement aux besoins des clients, - ou pour supporter différents services comme l'achat en ligne, les informations de voyage, etc. + \item[Mood Entertainment] aussi appelé \entity{Mood Digital}, est une application web, + sur laquelle les passagers se connectent pour regarder des films, + lire de la presse ou jouer à des jeux dans le navigateur. + L'application peut être utilisée sur les téléphones, tablettes et ordinateurs. + \\ + L'application peut aussi être adaptée aux besoins des clients, pour être en accord avec le langage visuel de leur marque + ou pour supporter différents services comme l'achat en ligne, les informations de voyage, etc. +\end{description} + +\begin{description} + \item[Mood TV] est une application tournant sur les télévisions connectées et permettant de profiter du contenu directement sur une télévision. + Ces télévisions sont surtout utilisées sur les bateaux de croisière. \end{description} \begin{description} @@ -294,33 +305,11 @@ Différentes applications sont développées autour de la \entity{Flymingo Box}: \begin{description} \item[La \og Crew App \fg] est une application sur \entity{iOS} pour les membres de l'équippage, qui permet de mettre en pause la lecture des médias pour faire des annonces aux passagers, - accéder aux informations des achats faits sur l'application \entity{Flymingo Digital}. -\end{description} - -\subsubsection{Mood} - -\begin{wrapfigure}{r}{0.25\textwidth} - \centering - \includegraphics[width=0.25\textwidth]{mood-digital} - \caption*{Mood Digital} -\end{wrapfigure} - -% TODO: vérifier la justification de mood -\textbf{Mood} est une distribution de \entity{Flymingo} plus optimisée pour la robustesse et la rapidité, -au prix d'une moins vaste customisabilité. - -\begin{description} - \item[Mood Entertainment] aussi appelé \entity{Mood Digital}, - est une version de \entity{Flymingo Digital} \og standarde \fg. -\end{description} - -\begin{description} - \item[Mood TV] est une application tournant sur les télévisions connectées et permettant de profiter du contenu directement sur une télévision. + accéder aux informations des achats faits sur l'application \entity{Mood Digital}. \end{description} \subsubsection{Mint} -% TODO: éviter la collision de wrapping en forcant un saut de page avant la section précédente \begin{wrapfigure}{r}{0.25\textwidth} \centering \includegraphics[width=0.25\textwidth]{mint-digital} @@ -334,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-cis 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'assignement 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} @@ -402,7 +391,7 @@ allant de l'éditeur de texte jusqu'aux outils automatisant le test du code affe \newcommand{\logowidth}{0.15\textwidth} -\entity{Git} \cite{git} est utilisé pour gérer le versionage du code: cet outil permet de stocker les modifications +\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. % wrapfigure does not work with my \entity :( @@ -534,7 +523,7 @@ Mes tâches au sein de cette équipe seraient de: \end{itemize} Au moment de mes entretiens pour ma candidature de stage, -les thèmes principaux sur lesquels l'équipe travaillaient étaient le développement de \entity{Flymingo Digital} +les thèmes principaux sur lesquels l'équipe travaillaient étaient le développement de \entity{Mood Digital} et de \entity{Mood TV}, ainsi qu'un peu de développement pour \entity{Mint}. J'ai aussi pu apprendre que l'équipe utilise la librairie \entity{React} et le framework \entity{Next.JS} pour ses applications front-end, @@ -557,7 +546,7 @@ un éditeur de texte et un gestionnaire de fenêtre avec lequel je suis plus à J'ai aussi reçu la documentation d'\og onboarding \fg, qui contient une liste de documentations avec lesquelles je devais me familiariser afin de pouvoir travailler efficacement. -J'ai parcouru ces documentations et ai testé certaines des fonctionnalités décrites dans celles-cis dans un mini-projet de test. +J'ai parcouru ces documentations et ai testé certaines des fonctionnalités décrites dans celles-ci dans un mini-projet de test. L'équipe se réunit chaque matin pour discuter des nouveautés et du travail de la veille, et pour annoncer sur quoi chaqu'un prévoit de travailler ce jour-ci. @@ -754,8 +743,6 @@ j'ai également créé une petite application Nest.JS qui affiche dans le naviga Cette application permet aussi de développer rapidement les emails sans devoir passer par Amazon pour tester les modifications. -% TODO: screenshots - 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}. Ce module est importé à plusieurs endroits dans le code, et expose des méthodes dans son service permettant @@ -935,7 +922,6 @@ alors on peut calculer la moyenne empirique ($\mu^{\star}_n$) et la variance ($( (\sigma^{\star}_n)^2 = S_{n-1}^2 &= \frac{\sum_{i=1}^{n} (\omega_i - \mu^{\star}_n)^2}{n-1} \\ &= \frac{(\mu^{\star}_n)^2}{n-1} - \frac{\sum_{i=1}^{n} \omega_i^2}{n(n-1)} \\ \\ \mu^{\star}_n \xrightarrow{n\rightarrow\infty} \mu & \quad \quad \quad \sigma^{\star}_n \xrightarrow{n\rightarrow\infty} \sigma - % TODO: preuve? \end{align*} Afin de pouvoir comparer différents ensembles de valeurs, @@ -1047,6 +1033,45 @@ Faire ce travail m'a permis d'avoir une compréhension plus profonde sur différ \section{Conclusion} +\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.) +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} + +J'ai eu durant ce stage des sentiments partagés \entity{React}: + +D'un côté, je trouve que la programmation avec React souffre de la décision de React à être à mi-chemin entre de la programmation réactive \og fine \fg \cite{reactivity} +et de la gestion manuelle de mise à jour. +J'ai rencontré beaucoup de bugs causés par des effets de bord du système de React, +dont certains qui ne pouvaient qu'être résolus en changeant en profondeur l'organisation de plusieurs composants. + +De l'autre côté, le refactor de \entity{Mood TV} pour extraire ses composants et les placer dans une librairie était très agréable, +car j'avais le contrôle sur l'organisation que ces composants allaient avoir, et le résultat était très satisfaisant une fois ces composants agencés ensemble. + +J'ai apprécié la programmation autour de \entity{Nest.JS}: +le principe d'inversion de contrôle permet d'écrire du code facilement vérifiable et réutilisable, +ce qui rend la base de code plus agréable à naviguer et utiliser. + +J'ai enfin été agréablement surpris par \entity{TypeScript}: +si on active l'ensemble des vérifications du code, alors il y a très peu de chances d'avoir des erreurs de type au runtime. +Le système de type est assez avancé pour pouvoir concevoir des types qui garantissent des invariantes qui auraient été difficiles à garantir dans d'autres langages typés. +Écrire des types avancés en TypeScript est presque un art. \figref{types} + +\subsection{Estimation du gain apporté} + +Pour donner une estimation du gain que mon travail a apporté à l'entreprise, +j'estime que j'ai contribué à 10\% du code sur l'ensemble des applications dévelopées pour \entity{Moment Care}. +Si on estime ensuite que notre équipe contribue à la moitié de la valeur ajoutée par \entity{Moment Care}, +et que \entity{Moment Care} génère environ 200,000€ par an (les bénéfices de l'année 2022 de \entity{Moment Care} étaient de 183,000€), +alors on obtient une fourchette basse du gain que j'ai apporté, qui s'élève à 10,000€/an pour les quelques années à suivre. + +Naturellement, ma part de contribution va diminuer, via du code écrit par d'autres personnes dans le futur, et via des refactors de mon code. +Une rapide analyse du code sur la monorepository indique que la demi-vie du code est de 6 mois; \figref{halflife} +ceci donne environ 2.9 années d'espérance à mon code, soit une fourchette basse de 30,000€ de gain sur les années à venir. + \makeutbmbackcover{} \newpage @@ -1059,8 +1084,6 @@ Faire ce travail m'a permis d'avoir une compréhension plus profonde sur différ \newpage \section{Annexes} -\subsection{Listings de code} - \inputfig{nestjs1} \inputfig{nestjs2} \inputfig{email-src-hbs} @@ -1069,4 +1092,12 @@ Faire ce travail m'a permis d'avoir une compréhension plus profonde sur différ \inputfig{fromeffectloop} \inputfig{normalitytest} +\begin{figure}[H] + \includegraphics[width=\textwidth]{survival_plot} + \caption{Graphique de survivabilité du code sur la monorepository} + \label{halflife} +\end{figure} + +\inputfig{types} + \end{document}