Тёмный

7 Anti-Patterns Angular que tout Développeur Junior doit connaître 

Simon Dieny - Code Senior
Подписаться 47 тыс.
Просмотров 15 тыс.
50% 1

👨🏻‍💻 Démarrer votre carrière de Développeur Professionnel :
www.angularsenior.fr/apply
***
Dans cette vidéo, je vous présente 7 anti-patterns que j'aperçois régulièrement dans une application Angular.
Mais le plus important ?
C'est qu'on va voir POURQUOI ce sont des anti-patterns.
Pour que vous soyez capables de les expliquer à d'autres développeurs, si jamais vous tombez sur un anti-pattern dans leurs code...
Il n'y rien de pire que de savoir que c'est une mauvaise pratique...sans être capable de l'expliquer à son auteur. Je vous assure que la situation est frustrante pour tout le monde.
Bonus : On va voir les extraits de code qui corrige ces erreurs également...
Bon visionnage,
Simon.
***
00:00 : Introduction
00:13 : Les débuts catastrophiques de mon tutoriel sur les Pokémons !
01:11 : Anti-Pattern n°1: Utiliser subscribe dans un autre subscribe
03:56 : Anti-Pattern n°2 : Ne pas mettre fin aux abonnements de vos Observables
06:15 : Anti-Pattern n°3 : Utiliser trop de services dans vos composants
07:56 : Anti-Pattern n°4 : Utiliser excessivement any de TypeScript
10:34 : Anti-Pattern n°5 : Manquer de stratégie de Détection de Changement
11:45 : Anti-Pattern n°6 : Appeler une méthode dans un template
13:33 : Anti-Pattern n°7 : Ne pas appliquer le Lazy Loading
15:39 : La Newsletter du Code Senior

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

 

12 июл 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 43   
@ThearsenikfromGmail
@ThearsenikfromGmail 3 месяца назад
Mes 8 ans d'expérience sur Angular résumé en moins de 17 mins. Rien à dire, que des conseils efficaces.
@codeursenior
@codeursenior 3 месяца назад
Merci pour vos précieux commentaires, venant de quelqu'un de plus expérimenté que moi. 🙏
@ThearsenikfromGmail
@ThearsenikfromGmail 3 месяца назад
@@codeursenior c'est la qualité de l'expérience qui compte. J'apprends quand même des choses sur cette chaîne.
@codeursenior
@codeursenior 3 месяца назад
@@ThearsenikfromGmail 🔥
@jeffgbeho6433
@jeffgbeho6433 3 месяца назад
J'utilise angular depuis 1 an et cette video liste exactement toutes les erreurs que j'ai fait quand je code. Merci pour la vidéo, ca m'a permis de m'en rendre compte
@codeursenior
@codeursenior 3 месяца назад
Au plaisir, vous êtes équipé pour faire de la propagande autour de vous sur ces anti-patterns désormais. 👍
@raphaelspitz3682
@raphaelspitz3682 3 месяца назад
Merci pour les explications. Ca fait longtemps que je code en Angular et quand je vois tes vidéos je suis impréssionné par la compléxité du Framework et les mauvaises pratique que nous avons tous appliqué deçu et même si ça fonctionnait quand même. Le problème c'est que le framework est asseez jeune (2016) et constament mis a jour et la documentation en effet parfois diffcile à lire et donc on se met à faire ce qu'on peut genre en effet un subscribe dans un subscribe lol ! puis quelques mois plus tard on apprend enfin comment ne plus faire ça grace à ce genre de vidéos. Encore merci c'était sympa à regarder
@codeursenior
@codeursenior 3 месяца назад
Au top, content que le format soit agréable tout en faisant de la saine propagande pour Angular. Et je suis d'accord avec vous, le framework est jeune et évolue très (trop) vite. Avec Angular 17 on est repartis pour de la montée en compétence.
@RH-lm5kp
@RH-lm5kp 3 месяца назад
très cool merci beaucoup
@codeursenior
@codeursenior 3 месяца назад
🔥
@PG-ev9jn
@PG-ev9jn 3 месяца назад
Ben j’ai du boulot encore 😂 ! Merci pour cette vidéo très enrichissante
@codeursenior
@codeursenior 3 месяца назад
Au top, que les mauvaises pratiques "retourne dans l'ombre". Je compte sur vous !
3 месяца назад
Pour les subscribes dans les subscribes, j'aurais invité à découvrir la vidéo que tu as faite sur le sujet car il n'y a pas que le switchMap pour orchester les asynchrones qui déclenchent des asynchrones... D'autres alternatives peuvent être plus adaptées en fonction de la stratégie dont on a besoin.
@codeursenior
@codeursenior 3 месяца назад
Hello @CedricLecocq, vous avez raison, voici le lien vers la vidéo : SwitchMap vs ConcatMap vs ExhaustMap vs MergeMap => ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-yZMPSkuNI6A.html
@jean-christophepiro6362
@jean-christophepiro6362 3 месяца назад
Excellent !
@codeursenior
@codeursenior 3 месяца назад
J'espère que vous parlez de moi !
@anaselmakhloufi2180
@anaselmakhloufi2180 3 месяца назад
rien a dire vraiment bravo a toi
@codeursenior
@codeursenior 3 месяца назад
Au top, merci pour vos retours sur les bonnes pratiques présentées.
@ascensionspirituelle7287
@ascensionspirituelle7287 3 месяца назад
Excellente vidéo comme d'habitude ♥️ je reconnais un salon marocain derrière. Tu es au Maroc ?
@codeursenior
@codeursenior 3 месяца назад
Merci, au top ! Effectivement, je suis dans un salon Marocain. 👍
@djamalabdounassirharoun5878
@djamalabdounassirharoun5878 3 месяца назад
Bonsoir ou bonjour Simon, j'espère que ça va. excellente vidéo comme d'habitude. 😂 tu n'as pas en disant que tu donnes des astuces pour senior. Moi j'ai une préoccupation qui la suivante, c'est que je n'arrive pas à passer un cramp dessus avec JavaScript, rassure toi pas parce que je trouve le langage au contraire j'ai pas de soucis là dessus, c'est plus par manque de stratégie, l'itinéraire à prendre, les types projets sur lesquels il faut bosser, même les exercices nécessaires pour consolider les connaissances sur les bases du langage.
@codeursenior
@codeursenior 3 месяца назад
Salut, merci pour ton retour sur la vidéo. Concrètement, je pense mettre en libre service sur mon site un workshop consacré à JavaScript en entreprise. Je vous préviendrai par email et par RU-vid quand ce sera disponible. Bon apprentissage à vous, Simon.
@djamalabdounassirharoun5878
@djamalabdounassirharoun5878 3 месяца назад
@@codeursenior Merci pour ta réponse, 😀 je viens de relire mon commentaire, j'ai vu qu'il y avait des mots manquants, mais je suppose que le message avait été compris. Merci une fois de plus.
@codeursenior
@codeursenior 3 месяца назад
@@djamalabdounassirharoun5878 Pas d'inquiétudes, je pense avoir bien compris. 😉
@christopherfc4954
@christopherfc4954 3 месяца назад
Vidéo super intéressante surtout avec les solutions apportées merci. Que penses-tu de l'opérateur firstValueFrom de RxJS pour transformer en promesse un observable, dans le cas des nested subscribe ? On viendrait attendre la première valeur émise avant d'aller chercher la seconde. Bien sûr on perd l'asynchronisme et le script est bloqué le temps de récupérer cette première valeur.
@raphaelspitz3682
@raphaelspitz3682 3 месяца назад
perso j'utilise ça :)
@codeursenior
@codeursenior 3 месяца назад
Salut, je ne connaissais pas cet opérateur. Mais je pose la question, pourquoi ne pas utiliser une Promesse directement ? Car il semble que vous n'avez pas besoin d'utiliser pas la réactivité apportée par les Observables si vous pouvez switch sur l'API des Promesses.
@techtop33
@techtop33 3 месяца назад
Très belle vidéo. Par contre j’ai fait un tour sur ton site, rubrique mon histoire mais avec plein de fautes. Faudra faire un peu d’effort de ce côté hein 😂
@codeursenior
@codeursenior 3 месяца назад
C'est fait ! Merci pour ton retour constructif. 👍
@toonpomme5178
@toonpomme5178 3 месяца назад
nous pour unsubscribe on utilise first(). on est en mode api avec une app backend. et finalement on renvoie toujours des objets ça permets de pas s'embeter avec les unsubscribe à chaque fois.une fois le retour de l'api fait pouf unsub
@thm007
@thm007 3 месяца назад
Salut, de ma compréhension, avec seulement un «first», si l'observable n'emet pas au moins une fois, la fonction de «nétoyage» de l'observable (TeardownLogic) n'est jamais appelé et l'observable risque de continuer de «tourner en tâche de fond». (mais j'ai pas compris peut-être ce que tu veux dire par «on renvoie toujours des objets ça permets de pas s'embeter avec les unsubscribe»)
@toonpomme5178
@toonpomme5178 3 месяца назад
@@thm007 hey, merci pour le msg. C'est une bonne question. Peut être que c'est un effet de bord chez nous mais si j'ai bien compris first fait le teardown a chaque 1ere valeur émise. On a toujours ou next ou error qui est passé. Donc peut être qu'on contrôle pas assez... Mais en tout cas je ne vois pas de résidu de subscribe dans notre app, ce qui est notre comportement voulu. En tout cas je vais vérifier lundi 😉
@thm007
@thm007 3 месяца назад
​@@toonpomme5178 Oui c'est piégeux aussi pour les observables qui tardent trop avant d’émettre leur valeurs ou ne font jamais de complete()… Du coup, sous angular, j’ai pris l’habitude de procéder avec «une seule» subscription pour tous les observable et souvent aussi des timeout : subs = new Subscription(); /*…*/ this.subs.add(obs1$.pipe(timeout(xxx)).subscribe() this.subs.add(obs2$.pipe(timeout(xxx)).subscribe() /*…*/ ngOnDestroy(): void { // unsubscribe pour tous en une fois this.subs.unsubscribe() }
@codeursenior
@codeursenior 3 месяца назад
Hello, les timesout sont sous-côté, et sont la stratégie pour refermer tout les cas possible pour un observable : next, error, complete et... timeout quand le serveur est dans les choux !
@simoab680
@simoab680 3 месяца назад
Hé simon c est un salon Marocain là :]
@codeursenior
@codeursenior 3 месяца назад
Tout à fait, c'est un salon marocain. D'ailleurs la chaîne a toujours été sur ce sujet. 👍
@zorglluub
@zorglluub 3 месяца назад
Une vidéo pertinente et instructive, comme tu en as l'habitude :-) Mais il faut vraiment que tu bannisses de tes vidéos ta phrase fétiche, qui ne te met pas du tout en valeur : "Je m'appelle Simon et j'ai été l'un des plus jeunes formateurs Javascript de France, puisqu'à seulement 26 ans, je formais des ingénieurs chez ATOS, l'une des plus grandes entreprises d'Europe avec plus de 110 000 collaborateurs." Rien ne va dans cette phrase. Ce que tu cherches à nous dire, c'est que tu es légitime pour nous parler de code. OK. Mais cette phrase, "Je m'appelle Simon..." dit tout le contraire; elle affaiblit ton propos. 1 Elle donne l'impression que tu t'accroches à ta gloire passée. Qui plus est, sur un exploit non significatif : "le plus jeune formateur Javascript de France". Être le plus jeune ça ne dure qu'un temps et ce n'est pas un exploit, encore moins un gage de qualité. 2 "Je formais des ingénieurs...", de nouveau, on est dans le passé. Mais cette phrase nous laisse aussi percevoir une forme de frustration de ne pas être ingénieur toi-même. Comme s'il fallait être ingénieur pour être un bon tech lead ou avoir de la légitimité. 3 "Avoir travaillé pour ATOS", on est toujours dans le passé, mais avec de nouveau un côté malaisant. Tu ne travailles plus pour eux parce qu'on t'a viré ? Parce que tu étais mauvais ? Parce que ce sont des requins et que dans ce type de boîte on n'est qu'un numéro ? etc.... Avoir travaillé pour ATOS n'est pas un gage de qualité. (Je suis déjà tombé sur des consultants ATOS qui étaient totalement incompétents). Je te propose de remplacer ta phrase par quelque chose de beaucoup moins "cringe" et malaisant : "Je m'appelle Simon et je suis tech lead et formateur Angular (depuis X ans)."
@codeursenior
@codeursenior 3 месяца назад
Hello, 1000 mercis pour ton message. C'est quelque chose que je répète en boucle depuis que j'ai lancé la chaîne pour me présenter, mais effectivement je sentais que quelque chose n'allait pas. Je vais regarder pour mettre à jour cela dans les prochaines vidéos. 👍
@v-sig2389
@v-sig2389 3 месяца назад
La miniature xD xD
@codeursenior
@codeursenior 3 месяца назад
Ne soyez pas jaloux de mes mignatures légendaires. Merci.
@jonathanbonnet262
@jonathanbonnet262 3 месяца назад
Attention. Truand.
@codeursenior
@codeursenior 3 месяца назад
Où ça ? Heureusement que vous êtes là pour nous protéger !
Далее
Maîtrisez ces 3 soft-skills pour coder chez Google
22:33
Good dad 🥰 #demariki
00:17
Просмотров 10 млн
Best father #shorts by Secret Vlog
00:18
Просмотров 6 млн
Dix conseils pour les devs juniors
8:24
Просмотров 1,1 тыс.
Good dad 🥰 #demariki
00:17
Просмотров 10 млн