Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Alain Tchana, alain.tchana@enseeiht.fr N7 2014 Introduction à une techno web à

Alain Tchana, alain.tchana@enseeiht.fr N7 2014 Introduction à une techno web à la mode AngularJS Alain Tchana, Maître de Conférence Institut National Polytechnique de Toulouse IRIT / Équipe SEPIA alain.tchana@enseeiht.fr Alain Tchana, alain.tchana@enseeiht.fr 2 N7 2014 Objectifs du cours 1) Pourquoi AngularJS ? 2) Où se positionne-t-il dans le développement web ? rapport à JEE par exemple ? 3) Comment l'utilise-t-on ? Pouvoir répondre aux questions suivantes : Alain Tchana, alain.tchana@enseeiht.fr N7 2014 Contexte Conclusion AngularJS Problématiques Plan Alain Tchana, alain.tchana@enseeiht.fr N7 2014 Aperçu Avant de se lancer Alain Tchana, alain.tchana@enseeiht.fr N7 2014 Bref aperçu avant de se lancer (extrait de votre support de cours) Alain Tchana, alain.tchana@enseeiht.fr N7 2014 Bref aperçu avant de se lancer (extrait de votre support de cours) Alain Tchana, alain.tchana@enseeiht.fr N7 2014 Contexte Web dynamique Alain Tchana, alain.tchana@enseeiht.fr 8 N7 2014 Contexte : App. web dynamiques (rappel rapide) ➔ Les informations produites par le même lien varient d'un utilisateur à l'autre. 1) Les informations présentées sur la même page varient avec le temps (court). 2) Les informations présentées sur la même page varient suivant les actions de l'utilisateur. Caractéristiques d'une application web dynamique  Le site reconnaît chaque utilisateur  Construit un contenu en fonction du user Alain Tchana, alain.tchana@enseeiht.fr 9 N7 2014 Contexte : App. web dynamiques (rappel rapide) ➔ Les informations produites par le même lien varient avec le temps (peu être très court). 1) Les informations présentées sur la même page varient avec le temps (court). 2) Les informations présentées sur la même page varient suivant les actions de l'utilisateur. Caractéristiques d'une application web dynamique  Le site se met à jour dynamiquement  sans l'admin system  L'utilisateur est directement à l'origine Alain Tchana, alain.tchana@enseeiht.fr 10 N7 2014 Contexte : App. web dynamiques (rappel rapide) ➔ Les informations présentées sur la même page varient suivant les actions de l'utilisateur. 1) Les informations présentées sur la même page varient avec le temps (court). 2) Les informations présentées sur la même page varient suivant les actions de l'utilisateur. Caractéristiques d'une application web dynamique  La vue prend des initiatives toute seule  Modifie des bouts de la page  Peut contacter un serveur distant  L'utilisateur est indirectement à l'origine Alain Tchana, alain.tchana@enseeiht.fr 11 N7 2014 Contexte : App. web dynamiques (rappel rapide) ➔ Un script côté serveur (CGI par exemple) ➔Reçoit la requête ➔Identifie l'utilisateur et génère une page HTML ➔ Conséquences (pour le développeur) ➔Le script est volumineux ➔Illisible ➔Difficile à maintenir et à faire évoluer Comment était implantée une app. web dyn, à l'époque ? Pb. 1 Alain Tchana, alain.tchana@enseeiht.fr 12 N7 2014 Contexte : App. web dynamiques (rappel rapide) ➔ Toute action du client sur la page ➔Nécessite le contact du serveur ➔La régénération de la page (toute entière) ➔Même si la modification était minime ➔ Conséquences (pour le client web) ➔Les temps de réponse sont longs (trafic sur le réseaux) ➔Le serveur sature très vite (génération de la page entière, IO) Comment était implantée une app. web dyn, à l'époque ? Pb. 2 Alain Tchana, alain.tchana@enseeiht.fr N7 2014 Contexte MVC Alain Tchana, alain.tchana@enseeiht.fr 14 N7 2014 Contexte : App. web dynamiques (rappel rapide) ➔ Organise le code de l'application en 3 catégories ➔Les structures de données des informations que manipulent l'app. ➔Contient le code métier ➔C'est le Modèle ➔Le code qui construit la façon dont le modèle est présenté ➔C'est la Vue ➔Les contrôles ➔Contrôle des requêtes. MAJ modèle ➔C'est le Contrôle MVC : un guide de programmation au secours du développeur Pb. 1 Alain Tchana, alain.tchana@enseeiht.fr 15 N7 2014 Contexte : App. web dynamiques (rappel rapide) ➔ Organise le code de l'application en 3 catégories ➔Les structures de données des informations que manipulent l'app. ➔Contient le code métier ➔C'est le Modèle ➔Le code qui construit la façon dont le modèle est présenté ➔C'est la Vue ➔Les contrôles ➔Contrôle des requêtes. MAJ modèle ➔C'est le Contrôle MVC : un guide de programmation au secours du développeur Pb. 1 Alain Tchana, alain.tchana@enseeiht.fr 16 N7 2014 Contexte : App. web dynamiques (rappel rapide) ➔ Organise le code de l'application en 3 catégories ➔Les structures de données des informations que manipulent l'app. ➔Contient le code métier ➔C'est le Modèle ➔Le code qui construit la façon dont le modèle est présenté ➔C'est la Vue ➔Les contrôles ➔Contrôle des requêtes. MAJ modèle ➔C'est le Contrôle MVC : un guide de programmation au secours du développeur Pb. 1 Alain Tchana, alain.tchana@enseeiht.fr 17 N7 2014 Contexte : App. web dynamiques (rappel rapide) ➔ Plusieurs technos permettent de faire du MVC ➔PHP ➔JEE ➔Les EJB pour le modèle ➔Les servlets pour le contrôle ➔Les JSP pour la vue ➔Etc. La dynamicité de l'app. web se traduit par celle de la « vue » MVC : un guide de programmation au secours du développeur Pb. 1 Alain Tchana, alain.tchana@enseeiht.fr 18 N7 2014 Contexte : App. web dynamiques (rappel rapide) ➔ Plusieurs technos permettent de faire du MVC ➔PHP ➔JEE ➔Les EJB pour le modèle ➔Les servlets pour le contrôle ➔Les JSP pour la vue ➔Etc. La dynamicité de l'app. web se traduit par celle de la « vue » MVC : un guide de programmation au secours du développeur Pb. 1 Alain Tchana, alain.tchana@enseeiht.fr N7 2014 Contexte Zoom sur la vue Alain Tchana, alain.tchana@enseeiht.fr 20 N7 2014 Contexte : App. web dynamiques (rappel rapide) ➔ Le DOM ➔Structure de données représentant votre page dans le navigateur ➔Possibilité de le modifier via java script (JS) ➔Ajout ou modification d'éléments ➔Le navigateur prend en compte (à chaud) les modifications ➔Ne se modifie pas de la même façon sur tous les navigateurs ➔Non standardisation des navigateurs Pb. 2 Alain Tchana, alain.tchana@enseeiht.fr 21 N7 2014 Contexte : App. web dynamiques (rappel rapide) ➔ Comment le développeur s'en sert pour modifier une zone ➔Un code JS dans la vue soumet une requête au serveur ➔Le serveur traite la requête ➔Le serveur retourne les informations nécessaires pour la MAJ de la vue ➔Un code JS dans la vue MAJ la vue en modifiant le DOM ➔ Conséquences ➔La logique de la MAJ de la page est placée côté client ➔Peu de trafic sur le réseau (bon pour le temps de réponse) Modification dynamique du DOM au secours du client web Pb. 2 Alain Tchana, alain.tchana@enseeiht.fr 22 N7 2014 Contexte : App. web dynamiques (rappel rapide) ➔ Plusieurs technos telles que ➔Java script : la renaissance ➔Ajax Modification dynamique du DOM au secours du client web Pb. 2 Alain Tchana, alain.tchana@enseeiht.fr N7 2014 Problème 1 Application du MVC Problématiques Problème 2 Testabilité Alain Tchana, alain.tchana@enseeiht.fr 24 N7 2014 Problématiques ➔ Le MVC est essentiellement respecté côté serveur ➔ Or, l'analyse des codes des app. existantes montrent que ➔Besoin du MVC au niveau de la machine cliente (sans s'en rendre compte) ➔Le DOM est un modèle ➔Une partie du contrôle a été transférée sur le client ➔Pour éviter les transits sur le réseaux La mise en pratique du MVC n'est pas totale Alain Tchana, alain.tchana@enseeiht.fr 25 N7 2014 Problématiques La mise en pratique du MVC n'est pas totale Alain Tchana, alain.tchana@enseeiht.fr 26 N7 2014 Problématiques ➔ MVC devient : M+(MVC)+C ➔Le backend implante le « M » ➔Le client implante la vue qui est maintenant un mini MVC ➔Le « M » c'est le DOM ➔Le « V » est vide ➔Le « C » est le premier niveau de contrôle ➔Le backend implante le « C » (le second niveau de contrôle) La mise en pratique du MVC n'est pas totale Alain Tchana, alain.tchana@enseeiht.fr 27 N7 2014 Problématiques ➔ Ce MVC côté client n'est pas pris en compte par les technos de dev. actuelles ➔ Conséquences ➔Il est mal programmé ➔Mélange du modèle, de la vue, et du contrôle L'application du MVC n'est pas totale Alain Tchana, alain.tchana@enseeiht.fr 28 N7 2014 Problématiques ➔ Faut implanter soit même ➔« modification du modèle → modification de la vue » ➔Faut implanter des « observateurs » ➔ De plus, modifier le DOM est fastidieux ➔Verbeuse : document.getElementByID.xxx.yyy.zzz ➔Nécessite la maîtrise de l'architecture du DOM ➔Faut prendre en compte la spécificité de chaque navigateur Bref le code de la vue est alourdi, verbeux et mal structuré Quelques causes de cette mauvaise programmation Alain Tchana, alain.tchana@enseeiht.fr 29 N7 2014 Problématiques ➔ Faut implanter soit même ➔« modification du modèle → modification de la vue » ➔Faut implanter des « observateurs » ➔ De plus, modifier le DOM est fastidieux ➔Verbeuse : document.getElementByID.xxx.yyy.zzz ➔Nécessite la maîtrise de l'architecture du DOM ➔Faut prendre en compte la spécificité de chaque navigateur Bref le code de la vue est alourdi, verbeux et mal structuré Quelques causes de cette mauvaise programmation Alain Tchana, alain.tchana@enseeiht.fr 30 N7 2014 Problématiques ➔ Faut implanter soit même ➔« modification du modèle → modification de la vue » ➔Faut implanter des « observateurs » ➔ De plus, modifier le DOM est fastidieux ➔Verbeuse : document.getElementByID.xxx.yyy.zzz ➔Nécessite la maîtrise de l'architecture du DOM ➔Faut prendre en compte la spécificité de chaque navigateur Quelques causes de cette mauvaise programmation Alain Tchana, alain.tchana@enseeiht.fr uploads/Management/introduction-a-une-techno-web-a-la-mode-angularjs-pdf.pdf