Programme de Formation Dojo

Introduction

Historique et version

Présentation de l'environnement de développement NodeJS

Présentation de Dojo CLI

Atelier : Créer un projet Dojo Maitriser l'environnement de dojo

Rappels HTML5, JavaScript, DOM

Rappels des normes EcmaScript

Présentation de TypeScript

Utilisation de la syntaxe jsx/tsx

Le DOM Virtuel

Utiliser les Widgets

Structure de base d'un Widget

Syntaxe basé sur les fonctions et les classes

Afficher un widget: la fonction render()

Travailler avec le vdom et les types de noeuds

Configurer les widgets à l'aide des WidgetProperties

Gérer les évènements

Liste des widgets prédéfinis

Atelier : Créer plusieurs pages avec des widgetsConfigurer le routage

Déclarer un fichier de routes

Gestion des paramètres dynamiques

Définir une route et des paramètres par défaut

Ajouter des routes enfants

Exploiter l'API de la classe Router

Tester les routes à l'aide de MatchDetails

Atelier : Mettre en place une application multi-vuesInternationaliser les widgets

Définir la langue de l'application

Internationaliser un widget : la classe I18nWidget

Déclarer les fichiers de traduction

Gérer la pluralisation des chaines

Atelier : Traduire l'applicationPersister des données

Persister des données en locale

Présentation du service Stores

Les méthodes d'accès aux données

Liste des commands et des operations disponible

Persister des données sur un serveur distant

Fonctionnement des promesses et async/await

Requêtes asynchrones : API fetch

Traitement des réponses

Atelier : Enregistrer des donnéesConfigurer l'application

Compiler l'application pour l'environnement de prod et de dev

Configurations additionnelles, le fichier .dojorc

Définir le Base Path de l'application

Charger des ressources extérieurs

Comprendre la gestion des assets

Atelier : Compiler un projet pour la publication

Programme de Formation Dojo Toolkit Découvrir Dojo Toolkit Développement d'applications web

Panorama des frameworks disponibles

Dojo Toolkit : présentation, contextes d'utilisation, versions

Modules et utilisations

Environnements et outils de développement

Intégration aux autres frameworks et outils de développement JavaScript modernes Atelier : Installation de l'environnement Dojo, premiers lancements. Ecrire des programmes JS avec Dojo Toolkit

AMD, Modules

Bases : prototype, instanciation, closures, lambdas

Programmation orientée prototype : simulation de classes, héritage, mixins

Fonctions utilitaires : dojo_base, dojo/i18n, Stateful, mixin

Promises et Deferred

Programmation orientée aspect

Couches de gestion évènementielle : emit, on, Evented, Stateful, topic

Atelier : Multiples exemples d'utilisation de Dojo Toolkit Manipuler le document et gérer le navigateur Structure d'une application : router, dojo/back, dojo/hash, dojo/url, dojo/io-query

Manipulation du DOM : dom,dom-attr, dom-class, dom-construct, dom-geometry

Sélection de noeuds avec Dojo/query

Gestion des animations avec dojo/fx

Atelier : Création d'une application single-page interactive Gérer la communication client / serveur Requêtes avec dojo/request

HTML et JSON

Requêtes asynchrones

Traitement des réponses JSON

Atelier : Mise en place d'une communication asynchrone dans une application Dojo. Construire une IHM avec Dojo Toolkit

Présentation de Dijit

Widgets : cycle de vie, instantiation, dojo/parser

Widgets de formulaire : textbox, dates, etc.

Panorama des widgets disponibles : menus, boîte de dialogues, etc.

Mise en page avec des conteneurs : ContentPane, AccordionContainer, TabContainer, etc.

Validation des contrôles

Création de widgets personnalisés

Gestion événementielle intra-widgets (this.own, this.watch), gestion de la mémoire

Gestion du Drag'n Drop Atelier : Construction d'une interface riche avec Dojo Utiliser des modèles de données Gestion des données dans Dojo : solutions disponibles

Widgets connectés aux données

Data Stores : présentation, utilisation

Filtering select

Tableaux (DGrid) : simples, éditables

Atelier : Utilisation de modèles de données interactifs Intégrer des outils Présentation de dojox

Composants avancés : calendar, charts, gridx

Gestion des styles et des thèmes

Mise en place de tests unitaires avec Intern

Intégrtion d'application responsive design

Dojo Build System

Packages et layers

Intégration avec Grunt

Atelier : Implémentation d'une application responsive design, optimisations.

Programme de Formation Script.aculo.us

Introduction

Présentation de Script.aculo.us : objectifs, alternatives...

Cas d'utilisation, exemples de sites

Dépendances avec la librairie prototype.js

Principes spécifiques

Interfaces utilisateurs

Effets divers dans l'interface d'utilisation

Combinaison d'effets

Bilan sur les effets : comparaison, performances

DragAndDrop et autres interactions complexes

Atelier pratique : mise en place d'un menu "accordéon" et d'un système de sélection d'articles en drag&dropAJAX avec Script.aculo.us

Communication asynchrone/synchrone

Mise en oeuvre d'AJAX

Contrôles spéciaux - "in-place text edit" et autocomplétion

Interactions diverses avec un serveur

Atelier pratique : mettre en place un outil d'autocomplétionAugmentation de Script.aculo.us

Tests unitaires : principe et bibliothèque JavaScript

Tests unitaires appliqués à soi

Licences, dépôts, versions multiples

Augmentation de Script.aculo.us

Programme de Formation Prototype

Introduction

Présentation de Prototype : objectifs, alternatives

Cas d'utilisation

Vue globale de la librairie

Cohabitation avec d'autres frameworks

Atelier : Mise en place de Prototype.js - gestion des conflits avec les autres frameworksLe coeur de Prototype

Notions d'objets, création de classes

Héritage : définition, utilisation

Modification du prototype d'une classe

Manipulation de chaines de caractères

Gestion des dates, intervalles

Tableaux et collections Exécution périodique Utilisation des expressions régulières Fonctionnement standard de la classe Function

Atelier : Multiples scénarios d'utilisation de fonctions Prototype.js - création de classes et utilisationInterfaces utilisateurs avec Prototype

Gestion des éléments de la page (DOM) : manipulation, création

Simplification de l'accès aux éléments de la page

Extension de la classe ELEMENT

Traitement des formulaires HTML

Gestion des styles CSS avec Prototype

Gestion des évènements

Atelier : Manipulation de pages webs : éléments, styles, validation de formulaires, comportements, menus Notions avancées

Communication asynchrone/synchrone

Mise en oeuvre d'AJAX

AJAX avec Prototype

Chargement de pages et injection de code

Compatibilité avec les autres frameworks

Script.aculo.us et Prototype

Atelier : Requêtes AJAX et effets visuels

Programme de Formation EmberJS

Introduction

Développement d'applications web

Panorama des frameworks disponibles

Architecture, pattern MVC (Model View Controller)

Ember.js : présentation, composantes

Rappels HTML5, JavaScript

Atelier : Mise en place d'un projet intégrant Ember.js Découpage MVC

Contrôleurs : fonctionnement, implémentation

Modèle et contexte : hiérarchie, création

Gestion des événements utilisateur

Implémentation des vues : affichages, saisies, actions, binding et filtres

Chargement de données avec jQuery

Gestion des paramètres

Invocation des contrôleurs dans la vue

Moteur de templates

Atelier : Création d'une application web MVC complète Debug et tests

Gestion des exceptions

Debug d’Ember.js

Tests unitaires

Injection de dépendances

Atelier : Debug d'applications et automatisation de tests Notions avancées

Noyau Ember.js

Les helpers en détails

Intégration de composants graphiques évolués avec JQuery UI

Configuration du routage

Gestion de l'historique

Internationalisation de l'application

Formatage : dates, nombres

Implémentation de filtres

Atelier : Configuration de l'application - I18N Appels serveur

Intercepteurs de réponse

Appels asynchrones (Ajax), gestion des appels REST

Atelier : Multiples appels de services

Programme de Formation Svelte Initiation

Introduction

Présentation et comparaison des différents framework Javascript : Angular, React, Next, Vue, Nuxt...

Présentation de Node.JS et npm

Présentation de Vite

Créer une application en ligne de commande

Présentation

Découvrir ECMAScript

Spécification ECMAScript

Fonctions fléchées,

Design patterns

Définition de modules

Système natif de gestion des modules, chargement

Gestion des dépendances

La communication asynchrone ( Promesses, async await )

Créer une application Svelte

Les différentes manières de créer une application

Choisir son template

Comprendre l’architecture d’un projet

Découvrir les composants

Décrouvrir la structure d’un fichier .svelte

Rendre ses composants réactifs avec l’interpolation

Gérer les événements

Affichage conditionnel

Rendu de listes

Utiliser la Logique de template

Calculer l’apparence avec le style et les classes

Gérer les données avec la directive:bind

Créer des variables locales,

Outils de débogage,

Interpréter du HTML

Intéragir entre composants

Les différents designs de composants

Créer des composants de design avec les slots,

Passer des données statiques avec le contexte,

Passer des données dynamiques avec les props,

Mettre en place la navigation

Présentation de Svelte Navigator,

Installer et configurer le router,

Déclarer ses routes et créer des liens