๐ญ ๐น๐ถ๐ด๐ป๐ฒ ๐ฑ๐ฒ ๐ฐ๐ผ๐ฑ๐ฒ ๐ฝ๐ฒ๐๐ ๐ณ๐น๐ถ๐ป๐ด๐๐ฒ๐ฟ ๐น๐ฒ๐ ๐ฝ๐ฒ๐ฟ๐ณ๐ ๐ฑ๐ฒ ๐๐ผ๐ป ๐ฎ๐ฝ๐ฝ ๐๐ป๐ด๐๐น๐ฎ๐ฟ.
(๐๐ต ๐ฏ๐ฐ๐ฏ, ๐ค๐ฆ ๐ฏโ๐ฆ๐ด๐ต ๐ฑ๐ข๐ด ๐ถ๐ฏ๐ฆ ๐ฆ๐น๐ข๐จ๐ฆฬ๐ณ๐ข๐ต๐ช๐ฐ๐ฏ...)
Il y a quelques mois, jโai auditรฉ une app Angular lente comme pas possible.
Des dizaines de composants. Tout semblait propre.
Mais dans les templates, ๐๐ป๐ฒ "๐ฝ๐ฒ๐๐ถ๐๐ฒ" ๐ฒ๐ฟ๐ฟ๐ฒ๐๐ฟ revenait souvent :
<๐ฅ๐ช๐ท *๐ฏ๐จ๐๐ฐ๐ณ="๐ญ๐ฆ๐ต ๐ช๐ต๐ฆ๐ฎ ๐ฐ๐ง ๐ช๐ต๐ฆ๐ฎ๐ด">
{{ ๐จ๐ฆ๐ต๐๐๐๐๐ณ๐ช๐ค๐ฆ๐๐ข๐ญ๐ถ๐ฆ(๐ช๐ต๐ฆ๐ฎ) }}
๐ฅ๐ช๐ท>
Rรฉsultat ?
ร chaque cycle de dรฉtection de changement, Angular ๐ฟ๐ฒฬ๐ฒ๐ ๐ฒฬ๐ฐ๐๐๐ฎ๐ถ๐ ๐น๐ฎ ๐ณ๐ผ๐ป๐ฐ๐๐ถ๐ผ๐ป.
Mรชme si les donnรฉes n'avaient pas changรฉ.
๐ญ๐ฌ๐ฌ ๐ฒฬ๐น๐ฒฬ๐บ๐ฒ๐ป๐๐ = ๐ญ๐ฌ๐ฌ ๐ฎ๐ฝ๐ฝ๐ฒ๐น๐ ร ๐ป๐ผ๐บ๐ฏ๐ฟ๐ฒ ๐ฑ๐ฒ ๐ฐ๐ต๐ฎ๐ป๐ด๐ฒ๐บ๐ฒ๐ป๐๐
CPU en feu, UX dรฉgradรฉe, scroll qui lag.
La ๐๐ผ๐น๐๐๐ถ๐ผ๐ป ๐๐ถ๐บ๐ฝ๐น๐ฒ & ๐ฝ๐ฒ๐ฟ๐ณ๐ผ๐ฟ๐บ๐ฎ๐ป๐๐ฒ : ๐น๐ฒ๐ ๐ฃ๐ถ๐ฝ๐ฒ๐ ๐๐ป๐ด๐๐น๐ฎ๐ฟ.
Pourquoi รงa change tout ?
Les pipes purs ne sont exรฉcutรฉs que quand les donnรฉes changent.
Cโest natif, optimisรฉ et pensรฉ pour Angular.
En plus, cโest rรฉutilisable et testable.
Petite rรจgle simple :
Dans les templates Angular, ๐น๐ฒ๐ ๐ณ๐ผ๐ป๐ฐ๐๐ถ๐ผ๐ป๐ ๐๐ผ๐ป๐ ๐๐ฒ๐ ๐ฒ๐ป๐ป๐ฒ๐บ๐ถ๐ฒ๐, les pipes sont tes alliรฉs.
Cโest une des erreurs les plus frรฉquentes que je corrige.
Exemple de refacto pour notre cas:
@๐๐ช๐ฑ๐ฆ({ ๐ฏ๐ข๐ฎ๐ฆ: '๐๐๐๐๐ณ๐ช๐ค๐ฆ๐๐ข๐ญ๐ถ๐ฆ })
๐ฆ๐น๐ฑ๐ฐ๐ณ๐ต ๐ค๐ญ๐ข๐ด๐ด ๐๐๐๐๐ณ๐ช๐ค๐ฆ๐๐ข๐ญ๐ถ๐ฆ๐๐ช๐ฑ๐ฆ ๐ช๐ฎ๐ฑ๐ญ๐ฆ๐ฎ๐ฆ๐ฏ๐ต๐ด ๐๐ช๐ฑ๐ฆ๐๐ณ๐ข๐ฏ๐ด๐ง๐ฐ๐ณ๐ฎ {
๐ต๐ณ๐ข๐ฏ๐ด๐ง๐ฐ๐ณ๐ฎ(๐ท๐ข๐ญ๐ถ๐ฆ: ๐๐ต๐ฆ๐ฎ): ๐ฏ๐ถ๐ฎ๐ฃ๐ฆ๐ณ {
๐ณ๐ฆ๐ต๐ถ๐ณ๐ฏ ๐ท๐ข๐ญ๐ถ๐ฆ.๐ฉ๐ต * ๐ท๐ข๐ญ๐ถ๐ฆ.๐ท๐ข๐ต;
}
}
Et dans ton template :
{{ item | ๐๐๐๐๐ณ๐ช๐ค๐ฆ๐๐ข๐ญ๐ถ๐ฆ }}
๐ฌ Tu as dรฉjร vu cette erreur dans un projet ?
Dis-moi en commentaire.
Et pense ร taguer un collรจgue Angular qui gagnerait ร voir รงa ๐
Merci Elodie, est ce qu'on peut avoir ton retour d'expรฉrience sur l'intรฉgration d'Angular Material 18 pour avoir un thรจme custom ? En faisant รงa, je me trouve avec pleins de variables material non dรฉclarรฉes.
Merci d'avance
Directeur associรฉ | DevToBeCurious Pour l'รฉpanouissement des devs : formations, coaching, mentorat
5 months ago
Tellement d'accord. On en discutait lundi et mardi de cette semaine avec les personnes que je formais, dans ma formation angular avancรฉ !
merci Elodie TURLIER d'aller dans ce sens ! รงa fait tellement plaisir de lire du contenu de qualitรฉ sur Angular