Lior Chamla : Développez vous bien !/Recréer Angular pour mieux le comprendre

  • Gratuit

Recréer Angular pour mieux le comprendre

  • Cours
  • 59 Leçons

Partez de rien avec moi, et voyageons dans la création d'un framework Javascript 🚀
Vous comprendrez alors les idées et les concepts qui sont à l'oeuvre derrière Angular, et serez prêts à mieux le comprendre !

A propos de Lior Chamla

Développeur web et formateur depuis plus de 13 ans, je forme les salariés et les étudiants sur des technologies telles que Symfony, React ou encore Angular !

J'ai une chaîne YouTube qui connaît un certain succès et que tu peux consulter pour mieux connaître les contenus que je produis 😉

Ce que nous allons apprendre ensemble 👀

Tout est fait, dans ce cours gratuit de 4 heures et 20 minutes, pour vous apprendre les idées et concepts qui se cachent derrière Angular !

Développement front-end moderne

Utiliser TypeScript dans une application web
🛠️ Utiliser NPM et son écosystème
🚀 Utiliser ViteJS pour compiler CSS et TypeScript

Les pilliers d'Angular

😮 Découverte du concept de Directive à la base du framework
💉 Découverte et mise en place d'un système d'Injection de dépendances
🔎 Zone.js et la détection de changement

Notions de Development eXperience

💪 Contrôler le code grâce au typage fort !
🎨 Faciliter le développement grâce aux décorateurs TS

Contenu

Introduction (5 minutes)

Introduction de la formation
🚀 Les objectifs de la formation
🛠️ Les outils nécessaires (VSCode, NodeJS et NPM)
📁 GitHub : Retrouvez le code de la formation

A la découverte des Directive ! (45 minutes)

Mise en place du projet
Installer ViteJS et Typescript
La notion de Directive
Créer une Directive PhoneNumberDirective
🎨 Refactoring #1 : Méthodes de la Directive
Utiliser le sélecteur d'Attributs
Créer une Directive CreditCardDirective
Distinction entre "outils" et "framework"
Intégrer le sélecteur dans la Directive
🎨 Refactoring #2 : Modules JS
Récupérer des informations depuis les attributs de l'élément
📁 GitHub : Retrouver le code de fin de section

Injection de dépendances (1 heure)

La notion de services
Le problème des instances multiples
L'injection de dépendances
Le problème de l'instanciation précoce
Analyser les constructeurs des Directives
Découverte des paramètres du constructeur
Instancier la Directive avec ses dépendances
La notion de Providers
Réutiliser les instances existantes de nos services
Providers spécifiques à une Directive
🎨 Refactoring #3 : Refactorer le Framework
📖 Résumé de ce qu'on a vu
📁 GitHub : Retrouver le code de fin de section

Amélioration de la DX (eXpérience de développement - 1 heure et 40 minutes)

📖 Rappel : la différence entre impératif et déclaratif
Utiliser les types TypeScript pour faciliter le développement
Créer un décorateur @Directive !
Créer un décorateur @Input !
Créer un décorateur @HostListener !
Créer un décorateur @HostBinding !
Utiliser lodash pour atteindre des propriétés imbriquées
Améliorer la DX avec les commentaires ?
Réécrire la CreditCardDirective avec nos nouveaux outils !
La limite de notre @HostBinding
Proxy : être au courant quand une propriété change !
Ne considérer que les @HostBinding dans notre Proxy
Mettre à jour les bindings automatiquement
Les limites de notre méthode de surveillance
Créer un détecteur de changements !
Permettre au détecteur de faire les mises à jour
Optimiser la détection de changements !
Créer un @HostBinding sur la value de l'<input>
Améliorer la DX du système de bindings
Zone.js : Améliorer notre détection de changements
Exemple : La directive Chrono
🎨 Refactoring #4 : Cacher la Zone dans le Framework
📁 GitHub : Retrouver le code de fin de section

A l'assaut des Composants (50 minutes)

Créer une directive UserProfile
Template HTML et Interpolations
Template HTML et écouteurs d'événements
Créer un décorateur @Component
Convention : sélecteur CSS d'éléments
Exemple : le composant Counter
📁 GitHub : Retrouver le code de fin de section