Conception d’interfaces graphiques full JavaScript avec Angular, TypeScript et Bootstrap

Objectifs & compétences

Evaluer les enjeux du développement d'une application web, et son intérêt Disposer des connaissances et compétences nécessaires pour rendre une application "offline" Maîtriser l'utilisation du Framework proposé par Google : Angular 2+ (versions 2 et ultérieures) Comprendre comment tirer parti de Bootstrap pour développer rapidement des pages Web "responsive" Être capable de prendre en charge l'intégralité du développement de la partie "front"

Public visé

Développeurs .Net ou Java souhaitant exploiter les possibilités offertes par HTML5 et CSS3 Chargés de développement d'applications informatiques

Pré-requis

Avoir suivi la formation du module "Développement Java avancé et accès aux données" (AS550) ou disposer de compétences équivalentes Avoir suivi la formation "Les fondamentaux du développement d'interfaces graphiques avec HTML5, CSS3 et JavaScript" (W-HT3) ou disposer de compétences équivalentes Avoir déjà développé et livré une application Web

Programme

ÉVOLUTIONS RÉCENTES DU DÉVELOPPEMENT WEB Du site web à l'application web Les nouveaux frameworks web et leurs utilités La structure d'une application web Les outils : webpack, npm, angular-cli RAPPELS Présentation de JavaScript ES6 Présentation des fonctions fléchées (Arrow functions) et de leur intérêt Introduction aux fonctions synchrones et asynchrones (Promises et observables) TYPESCRIPT : PRINCIPES ET FONCTIONNEMENT Installation TypeScript Transpiler EcmaScript Let, variables locales et constantes Typage et types natifs Paramètres optionnels, valeurs par défaut Classes et interfaces Gestion des modules Décorateurs ANGULAR : PRINCIPES ET GESTION DES COMPOSANTS Définition de composants Comprendre les Web Components (standard, concepts, shadow DOM, scoped CSS...) Cycle de vie dans l'application Angular Compiler : Change Detection Syntaxe des templates : interpolation/expression, "Binding" et filtres Directives de transformation : ngIf, ngFor, ngSwitch... Définition syntaxique, le symbole (*) Variables locales et variables de Template Classe de composants Directives de configuration : selector, provider Evènements utilisateur et évènements logiques personnalisés : EventEmitter ANGULAR : GESTION DE L'ENVIRONNEMENT FormControl et FormGroup TDF versus DDF : Template Driven Form et Data Driven Form Validation et gestion d'erreur personnalisée Liaison de données via HTTP Gestion et configuration des échanges HTTP au niveau applicatif Création de routes Intercepter les paramètres de routage et wildcard Ciblage, "router-outlet" événements de routage Gestion de routes dans l'arbre des composants Configuration des "Guard" pour le l'initialisation des routes ANGULAR : FONCTIONS AVANCÉES Services workers Création de pipes AOT INDEXED DB Paradigme de stockage objets Principes de fonctionnements Créer et structurer l’objet de stockage CRUD Updating de la structure Sécurité SOCKET IO Présentation de Socket .IO Intérêts d'utilisation Communication full duplex http2, Socket .IO Gestion des sockets Les rooms et le broadcast

Modalités

Méthodes