Comment écrire du Clean Code en JavaScript

Подписаться 8 тыс.

Просмотров 6 тыс.

50% 1

On explore quelques principes de base pour écrire du code propre dans n’importe quel langage de programmation. Pour illustrer ces principes, on revisite le code du projet Canvas en JavaScript pour le rendre plus élégant et performant.
Dépôt Github : github.com/Gen...
Besoin d'une développeuse freelance ? Travaillons ensemble : www.malt.fr/pr...
ME SUIVRE AILLEURS :
○ Instagram : / genevievemasioni
○ GitHub : github.com/gene...
○ Site web : education.gene...
TOUT MON MATÉRIEL :
education.gene...
PARTENARIATS :
Si vous êtes une entreprise et que vous souhaitez me proposer un fabuleux projet, veuillez me contacter à l'adresse suivante : contact [at] genevievemasioni [point] com
》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》
IMPORTANT :
Les propos injurieux, racistes, etc. sont strictement interdits sur cette chaine et seront supprimés et reportés. Je prierai chacun(e) de bien vouloir respecter ses pairs, leurs avis personnels et mon travail. Merci de ne pas céder aux bassesses du plagiat !
Aussi, je n’essaie pas de vous vendre mes idées dans le sens où je n’essaie pas de faire que vous les acceptiez. Je les présente simplement comme d'autres façons de voir les choses, d’après mes expériences.

Опубликовано:

6 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 77

@marcsitze8565 7 месяцев назад

Merci pour la presentation pleine d'energie 💥💥💥, j'ai quelques prositions pour rendre ton fichier main.js plus propre, 1) tu peux par exemple extraire toutes tes fonctions utilitaires et les ajouter dans un autre fichier que tu peux appeler utils.js 2) je vois que tu as ecris document.getElementById pres de 10 fois, tu aurais pu creer une fonction utilitaire qui allait prendre en entree l'id d'un element du DOM et reutiliser cette fonction, de facon a ce que si demain tu veux changer le type de selecteur tu le change en un seul endroit, 3) Tu as parler d'un truc de performance dans ta video, n'oublie pas aussi de retirer les evenement que tu as attacher sur le DOM apres execution pour eviter le memory leak comme tu expliquais plus-tot, tu peux creer une fonction pour ca avec le nom cleanup. prend moi comme un petit frere, c'est ce que je voulais intervenir de ma part

@GenevieveMasioni 6 месяцев назад

Tout à fait d'accord avec tes recommandations, merci ! J'implémenterai tout ça quand j'aurai deux minutes.

@Gontran_ 7 месяцев назад

Toujours aussi claire et concise, ça nous change des recommandations abstraites rencontrées un peu partout. Là elles sont appliqué directement sur du code (déjà fonctionnel) ce qui est beaucoup plus qualitatif. Vraiment bravo pour tout le travail de minutie sur tes vidéos, elles n'en sont que plus instructives et agréable à voir .

@GenevieveMasioni 7 месяцев назад

Merci ! Après 30 heures de préparation, tournage et montage pour cette vidéo, je suis très contente de lire ça. 😄

@arnoclr 7 месяцев назад

J’ai cliqué par curiosité et waouh ! Belle présentation, la plupart des infos sont là !

@GenevieveMasioni 7 месяцев назад

Merci :)

@laurentducerf5575 7 месяцев назад

Propos pertinent et très clair, bravo !

@GenevieveMasioni 7 месяцев назад

Merci !

@Oxey405 7 месяцев назад

Très qualitatif ! Je code depuis longtemps et j'ai comme même (ré)appris des choses. Tu mérites plus de vues !

@GenevieveMasioni 7 месяцев назад

Merci, contente que ce soit utile !

@gangstaberry2496 6 месяцев назад

Ta vidéo est beaucoup plus explicative que les autres par rapport a ce sujet... Merci beaucoup ^^

@GenevieveMasioni 6 месяцев назад

Contente que ce soit utile ! C'est parce que j'ai tenu à illustrer mes propos par un projet quand bien même il est trop peu complexe pour bien représenter une base de code d'entreprise. J'aimerais souligner qu'on ne fait pas exprès de faire des généralités et de présenter des concepts sans les illustrer par du code. On le fait parce qu'une base de code d'entreprise est souvent propriétaire (et donc interdite à la diffusion) et qu'il est difficile de créer un projet d'illustration qui simule correctement les problématiques qu'on rencontre en entreprise. :)

@gangstaberry2496 6 месяцев назад

@@GenevieveMasioni je te souhaite tout le succès ! Merci pour l'information... Je suis en train de commencer mes études informatiques et j'aime bien tes vidéos 🙌

@bacishogemerci2517 7 месяцев назад

T'es une pépite ! Merci pour cette présentation claire, précise et concise. Keep going !

@GenevieveMasioni 7 месяцев назад

Contente que ce soit utile !

@raphaelhenry-navarro3928 7 месяцев назад

Contenu clair, Geneviève est dynamique, compréhensible et illustre simplement ses propos ! J'aime beaucoup tes vidéos 🙏 merci !

@GenevieveMasioni 7 месяцев назад

Contente que la vidéo soit utile !

@user-yp2ii5gl1p 7 месяцев назад

Bien, je comprends, ton format de vidéo est très bon, il est très bon. Ta connaissance semble étendue et j'aimerais t'écouter parler un peu plus technique si tu vois ce que je veux dire. J'essaie de monter ma propre chaîne RU-vid, mais 24h ne me suffisent pas de faire tous ce que j'ai à faire en tant Développeur. Donc je préfère écouter quotidiennement des RU-vidurs développeurs comme toi. Merci.

@GenevieveMasioni 7 месяцев назад

Oui, créer des vidéos n’est pas chose simple. Plus les vidéos sont techniques plus le travail est laborieux et chronophage. Je jongle comme je peux avec mon travail.

@franckngoubounkou9930 7 месяцев назад

Tres explicite. Jaime trop les explications sans bavures claires nettes limpides.Tu connais. L Afrique a toujours eu du talent. Je triple mes efforts des demain . Tu viens de me booster e.core plus je suis dopé 😊.

@GenevieveMasioni 7 месяцев назад

Contente que ce soit utile !

@lelabotik 7 месяцев назад

Je l’attendais depuis un moment la vidéo. Penses tu que tous ces éléments énoncés sont applicables à VBA ?

@GenevieveMasioni 7 месяцев назад

Ça fait très longtemps que je n’ai pas codé en VBA mais j’ai pu appliquer ces principes généraux à plusieurs langages de programmation malgré leurs différences. C’est pourquoi j’ai évité de donner des directives trop spécifiques à un langage sauf pour la performance. 😄

@akil3293 7 месяцев назад

Incroyable tu as réussi à sourire à la fin de la vidéo. Merci pour les conseils, ils sont de toutes évidences très pertinents

@SanixDarker 7 месяцев назад

Je decouvres la chaine, agreablement surpris, je viens de suscribe ! Merci pour ce tuto propre, niket et concis.

@GenevieveMasioni 7 месяцев назад

Merci ! Contente que ce soit utile.

@karljoyeux8845 7 месяцев назад

j'ai écouté la première phrase, je me suis abonné, t'as une très bonne élocution, tu es agréable à écouter. Fais attention au micro, ça grésille un peu mais ce n'est pas très gênant

@GenevieveMasioni 7 месяцев назад

Merci ! J’ai remarqué (trop tard) les défauts sonores et visuels. J’ai mis à jour mon process de post-production en ajoutant des points de validation des réglages et de la qualité d’export avant publication sur RU-vid. Je ferai attention la prochaine fois.

@jdims651 7 месяцев назад

@@GenevieveMasioni woaou même ta réponse à un commentaire est classe!

@Exize_ 7 месяцев назад

Merci pour cette superbe vidéo, comme l'ont dit les autres dans les commentaires, le fait que ce soit déjà sur du code fonctionnel rend le visionnage beaucoup plus immersif et pratique. Hâte d'en voir plus !

@GenevieveMasioni 7 месяцев назад

Merci à toi ! Ça me parait essentiel d’illustrer le propos par du code fonctionnel même s’il n’est pas aussi complexe que les bases de code en entreprise.

@dominiquetalis1516 7 месяцев назад

Salut Geneviève. Tes explications sont très claires. Tu vulgarises des concepts qui ne sont pas si simples à comprendre pour un débutant. Je te tire mon chapeau. Par contre, j'ai juste une petite remarque par rapport à ce que tu dis à 10:21. Avec de la JSDoc, tu peux décrire ta fonction, typer (comme en typescript) ses arguments et ce quelle renvoie. Du coup, même si elle est dans un autre dossier, tu as une description de la fonction. Et en terme de perf, comme tu dis, c'est quand même mieux t'externaliser la fonction, surtout dans un boucle. Voilà, en tous cas, j'ai pris plaisir à suivre ta vidéo. Continue comme ça !

@GenevieveMasioni 7 месяцев назад

Merci pour ce retour détaillé J'utilise JSDoc et je prévois d'en parler dans une future vidéo sur les types en JS. :)

@dominiquetalis1516 7 месяцев назад

@@GenevieveMasioni ah super. Moi aussi, je l'utilise beaucoup (même sur certaines variables). C'est, je trouve, une partie très sous-estimée dans l'apprentissage du JS.

@marcusgarvey7210 7 месяцев назад

Excellente ! Merci beaucoup pour ce partage ❤

@GenevieveMasioni 7 месяцев назад

Contente que ce soit utile !

@japhetbazungula2200 7 месяцев назад

Waouh 🎉 Je viens de découvrir ta chaîne je m'abonne direct Merci pour la vidéo 😊

@GenevieveMasioni 7 месяцев назад

Contente que ce soit utile !

@kayodeadechinan5928 7 месяцев назад

waoh, j'ai appris tellement de choses. Ta communication est limpide. Bravo! et merci pour la vidéo. Je m'abonne direct.

@GenevieveMasioni 7 месяцев назад

Merci ! Contente que ce soit utile.

@bricelyonelnguetsop7129 Месяц назад

Merci, belle présentation

@GenevieveMasioni 23 дня назад

Contente que ce soit utile !

@Idric_Evarne 7 месяцев назад

Ma première de vidéo de toi! Très quali! Beaucoup de valeur! Merci à toi ❤

@GenevieveMasioni 7 месяцев назад

Merci !

@sublymus 7 месяцев назад

tres belle video.. let watch another

@GenevieveMasioni 7 месяцев назад

Contente que ce soit utile !

@DavidLardy 7 месяцев назад

Waouh ! genial cette presentation. Bravo !!

@GenevieveMasioni 7 месяцев назад

Merci 😁

@matthieuwlazinski 7 месяцев назад

Trop top merci beaucoup pour ta vidéo.

@GenevieveMasioni 7 месяцев назад

Avec plaisir 😊

@Ghislou13 7 месяцев назад

Salut, je suis développeur web depuis 4 ans et je trouve tes conseils très pertinents ! J'ai quelques remarques : - Tu dis souvent "Je vais te donner ce conseil" ou des phrases de ce style sans vraiment donner la source ou le nom couramment utilisé pour la méthode, exemple : le DRY (Don't Repeat Yourself) autre acronyme/concept de ce style - Pour le sujet de l'indentation, oui, ne pas trop avoir d'imbrications dans des blocs de if par exemple (préférer un early return) c'est bien, mais pour la taille max des lignes je te conseille plutôt d'utiliser des utilitaires tels que Prettier pour formatter automatiquement ton code en fonction de bonnes pratiques pré-établies et consensuelles. - Je ne sais pas si tu comptes l'utiliser ou en parler mais je te conseille de t'intéresser à Typescript si tu codes en Javascript qui t'ajoute une couche de typage vraiment utile pour ne pas faire n'importe quoi. C'est contraignant mais très utile en plus d'autres outils comme eslint.

@GenevieveMasioni 7 месяцев назад

Merci pour ce retour détaillé ! En bref : - sections coupées au montage qui feront l’objet d’une vidéo dédiée : linter/prettier/Typescript, principes SOLID en POO, fonctionnement de la mémoire, complexité algorithmique. La vidéo faisait 23 minutes. J’ai retiré ces sections pour que la vidéo soit plus digeste et pour que ces concepts soient mieux expliquées et mieux illustrées ultérieurement. - je privilégie le message avant tout. Les termes DRY, KISS, etc. ne sont que des moyens mnémotechniques qui me paraissent superflus. Je n’utiliserai des acronymes que s’il est fondamental de les connaître (en plus de comprendre les concepts qu’ils représentent). Ex: TDD, CI/CD, POO, SOLID, etc. - Mon propos est basé sur ma formation et mon expérience professionnelle. Je tiens ici un discours tout à fait standard qui synthétise des pratiques classiques de l’industrie. Le jour où je partagerai une opinion (préférence personnelle discutable), je l’accompagnerai de sources pertinentes.

@jdims651 7 месяцев назад

Trop classe!❤

@jonathanteyssier3153 5 месяцев назад

Très intéressant merci

@GenevieveMasioni 5 месяцев назад

Contente que ce soit utile !

@noa-fish3727 7 месяцев назад

Super vidéo , merci d’être aussi claire et concise !

@GenevieveMasioni 7 месяцев назад

Merci !

@Talaria.School 7 месяцев назад

Cool ta chaîne. Vraiment quali le contenu.

@GenevieveMasioni 7 месяцев назад

Contente que ce soit utile !

@pingd-wende 7 месяцев назад

Claire et concis 😊👍

@GenevieveMasioni 7 месяцев назад

Merci :)

@manouhaouzi2530 7 месяцев назад

Génial 👍👍 👍

@GenevieveMasioni 7 месяцев назад

Contente que ce soit utile !

@zemiorka 6 месяцев назад

Outstanding 🎉

@GenevieveMasioni 6 месяцев назад

Contente que ce soit utile !

@pierreollivier1 7 месяцев назад

perso pour les fonctions je conseil de nomer de la maniere suivante : [nom_du_fichier]_[objet]_[verb]_[complement]. par exemple en C si j'ai un module renderer.c j'aurais a l'interieur des fonctions avec des noms dans ce style : renderer_windows_create(); renderer_windows_attach_rgba(); renderer_windows_destroy(); comme ca le prefixe m'indique exactement d'ou la fonction vient, et c'est tres facile de savoir ou aller modifier son code si besoin est, la stack trace est aussi super claire. Apres beaucoup de conseil s'applique uniquement au WebDev.

@GenevieveMasioni 7 месяцев назад

J’ai vu des conventions de nommage diverses en industrie selon le langage de programmation et les préférences de l’équipe. C’est pourquoi j’ai évité d’entrer dans le détail des pratiques de nommage. Si je décide de faire une vidéo dédiée, je couvrirai des pratiques web mais aussi logiciel. Je viens moi-même du logiciel (C, C++, Java). L’exemple de getTime() vs time() est de toute évidence une influence de Java. 😄

@furtivesock 7 месяцев назад

Hello! Merci pour les rappels ! Tantôt dans les langages orientés objets on est plus à l'aise dans la structure du code tantôt en JS on a plus de liberté et ce qui fait qu'on ne sait pas vers quoi s'orienter 😅 Je vois que tu regroupes tout dans des fichiers main.js/classes.js, mais est-ce que ce serait pas pertinent de déplacer les éléments (par responsabilités) dans des fichiers/répertoires dédiés ? Pour un petit projet ce n'est pas si intéressant je le conçois mais à long terme ?

@GenevieveMasioni 7 месяцев назад

Oui, tout à fait ! Je n’ai parlé de concision et de responsabilité que pour les fonctions mais ça s’applique aussi aux fichiers. Ils ne doivent pas être trop longs et doivent avoir une responsabilité unique. Pour un projet complexe, j’aurais créé un fichier par classe par exemple. Dans ce cas, le découpage précis dépend de l’application et de ce qui semble être le plus propre et facile à maintenir. J’utilise JS comme langage de prototypage de mes projets perso précisément parce qu’il est très permissif. Dans la réalité, je m’oriente souvent vers des langages plus spécialisés et robustes comme Java pour l’orienté objet ou le C.

@francisebena1401 5 месяцев назад

honnetement tu pourrais créer un manuel je ne sais pas un documment explicatif point par point pour ça, tellement intéressent le cleanCode, j'ai beaucoup decouvert mais j'avoue avec ton debit un peu rapide lol, il se volatilise d'un coup.

@GenevieveMasioni 5 месяцев назад

Contente que ce soit utile ! Je prends note.

@searchingmurphy 5 месяцев назад

Super clair , par contre on me demande de ne plus utiliser var mais let ou const et je vois des var dans ton code. Je suis new dans le javascript genre 2 mois. Merci pour getElementById !

@GenevieveMasioni 5 месяцев назад

Tu as raison, il est généralement recommandé d'utiliser let plutôt que var dans le code JS moderne. var est une variable globale (accessible dans toute la fonction où elle est déclarée). let est une variable accessible uniquement dans le bloc où elle est déclarée. On préfère let à var car elle offre une portée plus précise du code, ce qui limite les erreurs de portée et les collisions de noms de variables. Par conséquent, le code est plus robuste. Ça ne veut pas dire qu'on ne peut/ doit pas utiliser var. Dans mon code d'illustration, j'ai utilisé var là où je voulais que la variable soit accessible dans tout le programme (portée globale).

@searchingmurphy 5 месяцев назад

@@GenevieveMasioni oké :)

@danield.goncalves7516 7 месяцев назад

Super vidéo. Mais est-ce que je suis le seul qui à les yeux bousillés avec les aller retours vscode sombre - powerpoint blanc ?

@GenevieveMasioni 7 месяцев назад

J’ai changé de thème pour les prochaines vidéos. J’ai une légère préférence pour le light mode mais je comprends que ce soit peu confortable.

@vulcanjibe 6 месяцев назад

La seule façon d écrire du JavaScript propre, c est de code en Typescript 😂😂😂😂 Le JavaScript natif ça reste bricolo et bricolette font de l informatique