Session du 3 Octobre 2019
Mentor de Soutenance : Aurélien Antonio
Commentaires
1. Évaluation globale du projet réalisé par l’étudiant (en spécifiant les critères non-validés si le projet est à retravailler) :
Émeric a réalisé un très bon travail sur ce projet 8 tous les points demandés ont bien été abordés, les corrections sur le projet ont été faites, les documents réalisés ( sur Github ) l’audit est disponible via un google drive, le lien se trouve sur Github également. Une très bonne approche du projet.
2. Évaluation des livrables selon les critères du projet :
Tous les attendus sont présent. D’ailleurs on ne retrouve dans le zip que l’application en elle même, toute la documentation se trouvant sur le git du projet.
3. Évaluation de la présentation orale et sa conformité aux attentes du projet :
La présentation orale était un peu plus longue que les attentes sur ce projet, cependant la dissertation et bonne et les explications complètes. Bonne maitrise du code de l’application.
4. Évaluation des nouvelles compétences acquises par l’étudiant :
Les compétences suivantes sont acquises par la réalisation et présentation du projet :
- Mettre en œuvre des tests unitaires et fonctionnels dans une application web
- Optimiser les performances d’un projet à l’aide des DevTools
- Reprendre en main un projet JavaScript existant
5. Points positifs (au moins 1) :
- Très bon usage des outils disponible ( Wiki Github, JSDoc )
6. Axes d’amélioration (au moins 1) :
- L’Audit pourrait être poussé un peu plus loin, mais permet cependant déjà d’avoir une bonne vision des choses à reprendre sur le projet.
C’est un très bon travail réalisé par Émeric, Félicitations !
Ressources du Projet
Projet
Dans le monde professionnel, on est souvent amené à reprendre un projet existant. Que faire quand vous vous retrouvez avec le code de quelqu’un d’autre ? Comment l’améliorer ? Voilà un savoir-faire qui vous sera très utile au quotidien !
En effet, faire un projet de bout en bout est « facile » : on connaît son fonctionnement sur le bout des doigts. En revanche, on se rend vite compte qu’il est plus dur de reprendre le travail de quelqu’un d’autre… surtout quand il n’a pas de tests !
Vous venez d’intégrer une petite équipe qui pense que tous les problèmes du monde viennent du fait que les gens ne sont pas assez organisés et qu’un peu de focus pourrait tout changer ! C’est pourquoi ils ont créé ce qu’ils appellent la meilleur application « to-do list » du monde. L’idée elle-même est très bien mais le code derrière n’est pas au top ! Ils vous ont sollicité pour ajouter des tests et régler quelques bugs dans le code.
Commencez par télécharger le code du projet :
Regardez comment il est structuré et essayez de comprendre comment il fonctionne. Votre mission sera de corriger des bugs, ajouter des tests, et optimiser sa performance.
Étape 1 : Corrigez les bugs du projet
Il y a deux bugs dans le code et c’est votre mission de les trouver ! Voici quelques indices:
- Le premier est une faute de frappe.
- Le deuxième introduit un conflit éventuel entre deux IDs identiques.
Vous allez chercher ces bugs dans le code, un peu comme dans « Où est Charlie ». Une fois les bugs trouvés, corrigez-les ! Ils empêchent le code de marcher correctement (pour l’instant ce n’est même pas possible d’ajouter des tâches à la liste à cause de ces bugs).
Il y a également des améliorations à faire, même s’il ne s’agit pas de bugs proprement dit. Essayez de trouver où vous pouvez optimiser des boucles et vérifiez s’il y a des fonctions qui affichent des informations dans la console de débogage qui ne sont pas nécessaires.
Étape 2 : où sont les tests du projet ?!
Vous allez voir que ce projet a déjà quelques tests mais largement pas assez ! Pour le prendre en main, vous allez ajouter tous les tests unitaires et fonctionnels pertinents que vous pouvez. L’objectif est de solidifier le projet. Ainsi, lorsque vous le modifierez par la suite, vous pourrez vous baser sur ces tests pour vérifier que vous ne « cassez » rien.
Cette étape peut paraître un peu longue et fastidieuse, mais elle est nécessaire pour gagner beaucoup de temps et éviter des surprises à l’avenir !
Il est nécessaire d’utiliser la commande npm install pour installer tous les fichiers Jasmine.
Il y a déjà un fichier existant pour les tests de ce projet : ControllerSpec.js .
À l’intérieur de ce fichier, quelques tests à ajouter sont indiqués
dans le code. Ils sont indiqués avec le commentaire suivant :
// TODO: write test
Plus précisément, vous pouvez les trouver sur les lignes #62, #86, #90, #137, #141, #146, #150, #156, et #196 de ControllerSpec.js .
Vous pouvez aller plus loin et ajouter des tests supplémentaires si vous le voulez !
Astuce : gagnez du temps en adoptant la méthode TDD. Comme beaucoup de développeur·ses, si vous rédigez vos tests et corrigez des bugs en même temps, vous pouvez utiliser des tests pour identifier ce qui ne fonctionne pas – ce qui accélère la correction des bugs.
Étape 3 : optimisez la performance du projet
Votre équipe vous a demandé d’analyser la performance d’un site concurrent pour identifier ce qui marche bien et ce qui ne marche pas, au cas où vous décidez de « scaler » votre propre application. Voici le site du concurrent.
Utilisez la console de développement de votre navigateur pour analyser la performance du site. Faites attention aux ressources utilisées par les différents éléments du site (par exemple, ce qui est lent, ce qui est rapide, etc) et aux ressources utilisées par les publicités sur le site et celles utilisées pour effectuer les fonctionnalités « To-do » pour la liste elle-même.
Maintenant, vous allez faire un audit de performance. En vous appuyant sur les données, écrivez un document de 300 à 500 mots qui décrit la performance du site, comment il se distingue de votre application, et comment optimiser la performance en vue d’un éventuel « scaling » de votre application.
Étape 4 : améliorez le projet
Maintenant que vous connaissez ce code par cœur, vous pouvez facilement ajouter des informations supplémentaires à votre documentation. Vous êtes désormais prêt à écrire de la documentation technique ! Jetez un œil aux exemples suivants pour vous inspirer.
Pour le dire plus simplement, il faut documenter les éléments suivants :
- le projet lui-même (l’usage non technique)
- comment il fonctionne techniquement
- votre audit
Vous pouvez utiliser le format que vous souhaitez (ex. un wiki sur Github, un document en format texte, etc).
Fichiers à fournir
- La base de code mise à jour avec les améliorations et les tests
- La documentation technique de votre projet, y compris votre audit, sous le format que vous souhaitez
Présentation du projet
Vous ferez donc une présentation de votre projet avec un évaluateur, afin de simuler des conditions réelles.
La présentation suivra la structure ci-dessous :
- Présentation de votre code, des tests et de vos optimisations : 15-20 minutes
- Questions / réponses : 10 minutes
À la fin de votre présentation, l’évaluateur fera un débriefing pendant environ 5 minutes.
Compétences évaluées
- Mettre en œuvre des tests unitaires et fonctionnels dans une application web
- Optimiser les performances d’un projet à l’aide des DevTools
- Reprendre en main un projet JavaScript existant
1 commentaire sur “ Todo List : Reprenez et améliorez un projet existant ”