SlideShare une entreprise Scribd logo
1  sur  9
Télécharger pour lire hors ligne
2
Objectif de cette vidéo
● Présentation des 'MVC' coté Client (client side)
● Les applications 'simple page' (Single Page
Application)
● Commencer avec AngularJS
● Les pièges à éviter
3
4
Explications
Avant : assemblage des données et des
templates sur le serveur.
serveur Client
6
Impacts
● Utilisation de dispositif REST
● Glissement vers des applications SPA (Single
Page Application)
7
Vers les SPA : les layouts
Généralement les pages sont assemblées (le serveur
ou par le client) par morceaux à partir d'un modèle de
site. (layout).
Insertion d'un fragment de page dans un layout
Sinatra
9
Alors ?
REST , SPA , MVVM : Nouveaux phénomènes de
mode ? ==> Relèvent du même concept
Pas seulement:
Reposent sur une logique économique.
Diminuer les couts d'infrastructure
Assurer la scalabilité
Rationnaliser les developpements :
● Equipe projet simplifiée
● Architecture simple (§ clean architecture)

Contenu connexe

Tendances

Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido SOAT
 
Introduction à Zend Framework
Introduction à Zend FrameworkIntroduction à Zend Framework
Introduction à Zend FrameworkGauthier Delamarre
 
comprendre angularJS en 10 minutes
comprendre angularJS en 10 minutescomprendre angularJS en 10 minutes
comprendre angularJS en 10 minutesDavid Bo
 
Cancellable Promises
Cancellable PromisesCancellable Promises
Cancellable PromisesJulien Rollet
 
Utilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDBUtilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDB13p
 
Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the futureOuadie LAHDIOUI
 
MVVM par Karim PIerre Maalej
MVVM par Karim PIerre MaalejMVVM par Karim PIerre Maalej
MVVM par Karim PIerre MaalejCocoaHeads France
 
Le service workers
Le service workersLe service workers
Le service workersneuros
 
Wonder_picture_nguyen_patois_rollot_scala
Wonder_picture_nguyen_patois_rollot_scalaWonder_picture_nguyen_patois_rollot_scala
Wonder_picture_nguyen_patois_rollot_scalaMathieu Scala
 
Geek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.jsGeek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.jsOLBATI
 
Jug Summer Camp 2014 - ESLint
Jug Summer Camp 2014 - ESLintJug Summer Camp 2014 - ESLint
Jug Summer Camp 2014 - ESLintDemey Emmanuel
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontendyllieth
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à AngularjsRossi Oddet
 
publier une application Node sur heroku
publier une application Node sur herokupublier une application Node sur heroku
publier une application Node sur herokueric German
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)Yacine Rezgui
 
NodeJs, une introduction
NodeJs, une introductionNodeJs, une introduction
NodeJs, une introductionToxicode
 

Tendances (20)

Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
 
Jump4 It Gwt Mvc
Jump4 It Gwt MvcJump4 It Gwt Mvc
Jump4 It Gwt Mvc
 
Introduction à Zend Framework
Introduction à Zend FrameworkIntroduction à Zend Framework
Introduction à Zend Framework
 
comprendre angularJS en 10 minutes
comprendre angularJS en 10 minutescomprendre angularJS en 10 minutes
comprendre angularJS en 10 minutes
 
Cancellable Promises
Cancellable PromisesCancellable Promises
Cancellable Promises
 
Utilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDBUtilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDB
 
Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the future
 
iGraal et les webextensions
iGraal et les webextensionsiGraal et les webextensions
iGraal et les webextensions
 
MVVM par Karim PIerre Maalej
MVVM par Karim PIerre MaalejMVVM par Karim PIerre Maalej
MVVM par Karim PIerre Maalej
 
Le portage des WebExtensions
Le portage des WebExtensionsLe portage des WebExtensions
Le portage des WebExtensions
 
Le service workers
Le service workersLe service workers
Le service workers
 
Wonder_picture_nguyen_patois_rollot_scala
Wonder_picture_nguyen_patois_rollot_scalaWonder_picture_nguyen_patois_rollot_scala
Wonder_picture_nguyen_patois_rollot_scala
 
Geek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.jsGeek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.js
 
Jug Summer Camp 2014 - ESLint
Jug Summer Camp 2014 - ESLintJug Summer Camp 2014 - ESLint
Jug Summer Camp 2014 - ESLint
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
 
Vue Introduction
Vue IntroductionVue Introduction
Vue Introduction
 
publier une application Node sur heroku
publier une application Node sur herokupublier une application Node sur heroku
publier une application Node sur heroku
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
 
NodeJs, une introduction
NodeJs, une introductionNodeJs, une introduction
NodeJs, une introduction
 

En vedette

Cleancode / Tocea / Introduction
Cleancode / Tocea / IntroductionCleancode / Tocea / Introduction
Cleancode / Tocea / IntroductionSylvain Leroy
 
Design applicatif avec symfony2
Design applicatif avec symfony2Design applicatif avec symfony2
Design applicatif avec symfony2RomainKuzniak
 
Méthodologie de gestion des tâches dans les projets web
Méthodologie de gestion des tâches dans les projets webMéthodologie de gestion des tâches dans les projets web
Méthodologie de gestion des tâches dans les projets webRomainKuzniak
 
Solution de collecte intelligente des déchets (Ecube Labs)
Solution de collecte intelligente des déchets (Ecube Labs)Solution de collecte intelligente des déchets (Ecube Labs)
Solution de collecte intelligente des déchets (Ecube Labs)Ecube Labs
 
Models and Service Layers, Hemoglobin and Hobgoblins
Models and Service Layers, Hemoglobin and HobgoblinsModels and Service Layers, Hemoglobin and Hobgoblins
Models and Service Layers, Hemoglobin and HobgoblinsRoss Tuck
 
Limpiando espero la arquitectura que yo quiero
Limpiando espero la arquitectura que yo quieroLimpiando espero la arquitectura que yo quiero
Limpiando espero la arquitectura que yo quieroJose Manuel Pereira Garcia
 
Composer in monolithic repositories
Composer in monolithic repositoriesComposer in monolithic repositories
Composer in monolithic repositoriesSten Hiedel
 
Command Bus To Awesome Town
Command Bus To Awesome TownCommand Bus To Awesome Town
Command Bus To Awesome TownRoss Tuck
 
Symfony: Your Next Microframework (SymfonyCon 2015)
Symfony: Your Next Microframework (SymfonyCon 2015)Symfony: Your Next Microframework (SymfonyCon 2015)
Symfony: Your Next Microframework (SymfonyCon 2015)Ryan Weaver
 
Clean architecture with ddd layering in php
Clean architecture with ddd layering in phpClean architecture with ddd layering in php
Clean architecture with ddd layering in phpLeonardo Proietti
 
Domain Driven Design using Laravel
Domain Driven Design using LaravelDomain Driven Design using Laravel
Domain Driven Design using Laravelwajrcs
 
Software Design Patterns in Laravel by Phill Sparks
Software Design Patterns in Laravel by Phill SparksSoftware Design Patterns in Laravel by Phill Sparks
Software Design Patterns in Laravel by Phill SparksPhill Sparks
 
Le pattern View Model avec Symfony2
Le pattern View Model avec Symfony2Le pattern View Model avec Symfony2
Le pattern View Model avec Symfony2RomainKuzniak
 
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2Sofien Benrhouma
 

En vedette (19)

Clean code
Clean codeClean code
Clean code
 
Cleancode / Tocea / Introduction
Cleancode / Tocea / IntroductionCleancode / Tocea / Introduction
Cleancode / Tocea / Introduction
 
Clean architectures
Clean architecturesClean architectures
Clean architectures
 
DDD in PHP
DDD in PHPDDD in PHP
DDD in PHP
 
Design applicatif avec symfony2
Design applicatif avec symfony2Design applicatif avec symfony2
Design applicatif avec symfony2
 
Laravel 5 and SOLID
Laravel 5 and SOLIDLaravel 5 and SOLID
Laravel 5 and SOLID
 
Méthodologie de gestion des tâches dans les projets web
Méthodologie de gestion des tâches dans les projets webMéthodologie de gestion des tâches dans les projets web
Méthodologie de gestion des tâches dans les projets web
 
Solution de collecte intelligente des déchets (Ecube Labs)
Solution de collecte intelligente des déchets (Ecube Labs)Solution de collecte intelligente des déchets (Ecube Labs)
Solution de collecte intelligente des déchets (Ecube Labs)
 
Models and Service Layers, Hemoglobin and Hobgoblins
Models and Service Layers, Hemoglobin and HobgoblinsModels and Service Layers, Hemoglobin and Hobgoblins
Models and Service Layers, Hemoglobin and Hobgoblins
 
Limpiando espero la arquitectura que yo quiero
Limpiando espero la arquitectura que yo quieroLimpiando espero la arquitectura que yo quiero
Limpiando espero la arquitectura que yo quiero
 
Composer in monolithic repositories
Composer in monolithic repositoriesComposer in monolithic repositories
Composer in monolithic repositories
 
Command Bus To Awesome Town
Command Bus To Awesome TownCommand Bus To Awesome Town
Command Bus To Awesome Town
 
Symfony: Your Next Microframework (SymfonyCon 2015)
Symfony: Your Next Microframework (SymfonyCon 2015)Symfony: Your Next Microframework (SymfonyCon 2015)
Symfony: Your Next Microframework (SymfonyCon 2015)
 
Clean code coding like a professional
Clean code   coding like a professionalClean code   coding like a professional
Clean code coding like a professional
 
Clean architecture with ddd layering in php
Clean architecture with ddd layering in phpClean architecture with ddd layering in php
Clean architecture with ddd layering in php
 
Domain Driven Design using Laravel
Domain Driven Design using LaravelDomain Driven Design using Laravel
Domain Driven Design using Laravel
 
Software Design Patterns in Laravel by Phill Sparks
Software Design Patterns in Laravel by Phill SparksSoftware Design Patterns in Laravel by Phill Sparks
Software Design Patterns in Laravel by Phill Sparks
 
Le pattern View Model avec Symfony2
Le pattern View Model avec Symfony2Le pattern View Model avec Symfony2
Le pattern View Model avec Symfony2
 
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
 

Similaire à Angularjs101-les_SPA:support de la video

M20486 formation-developper-des-applications-web-asp-net-mvc-4
M20486 formation-developper-des-applications-web-asp-net-mvc-4M20486 formation-developper-des-applications-web-asp-net-mvc-4
M20486 formation-developper-des-applications-web-asp-net-mvc-4CERTyou Formation
 
02 - [ASP.NET Core] ASP.NET Core MVC
02 - [ASP.NET Core] ASP.NET Core MVC 02 - [ASP.NET Core] ASP.NET Core MVC
02 - [ASP.NET Core] ASP.NET Core MVC Cellenza
 
les style d'architecture
les style d'architecture les style d'architecture
les style d'architecture Mouna Maazoun
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJsRadhoueneRouached
 
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...Microsoft Technet France
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdfimenhamada17
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPKristen Le Liboux
 
Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"Nazih Heni
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreStéphane Traumat
 
03 - [ASP.NET Core] Services RESTful et SPA
03 - [ASP.NET Core] Services RESTful et SPA 03 - [ASP.NET Core] Services RESTful et SPA
03 - [ASP.NET Core] Services RESTful et SPA Cellenza
 

Similaire à Angularjs101-les_SPA:support de la video (20)

M20486 formation-developper-des-applications-web-asp-net-mvc-4
M20486 formation-developper-des-applications-web-asp-net-mvc-4M20486 formation-developper-des-applications-web-asp-net-mvc-4
M20486 formation-developper-des-applications-web-asp-net-mvc-4
 
02 - [ASP.NET Core] ASP.NET Core MVC
02 - [ASP.NET Core] ASP.NET Core MVC 02 - [ASP.NET Core] ASP.NET Core MVC
02 - [ASP.NET Core] ASP.NET Core MVC
 
Prezentare ASP.Net.pptx
Prezentare ASP.Net.pptxPrezentare ASP.Net.pptx
Prezentare ASP.Net.pptx
 
Introducthion mvvm avec wpf
Introducthion mvvm avec wpfIntroducthion mvvm avec wpf
Introducthion mvvm avec wpf
 
Angular retro
Angular retroAngular retro
Angular retro
 
les style d'architecture
les style d'architecture les style d'architecture
les style d'architecture
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Java Server Faces - Beyond
Java Server Faces - BeyondJava Server Faces - Beyond
Java Server Faces - Beyond
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
 
ASP_NET_complet.pdf
ASP_NET_complet.pdfASP_NET_complet.pdf
ASP_NET_complet.pdf
 
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...
 
TP GWT JDEV 2015
TP GWT JDEV 2015TP GWT JDEV 2015
TP GWT JDEV 2015
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
 
Angular 11
Angular 11Angular 11
Angular 11
 
Séquence1.pptx
Séquence1.pptxSéquence1.pptx
Séquence1.pptx
 
Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"
 
CV REBAI Hamida
CV REBAI HamidaCV REBAI Hamida
CV REBAI Hamida
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
 
03 - [ASP.NET Core] Services RESTful et SPA
03 - [ASP.NET Core] Services RESTful et SPA 03 - [ASP.NET Core] Services RESTful et SPA
03 - [ASP.NET Core] Services RESTful et SPA
 

Plus de eric German

Quelle révolution pour la blockchain
Quelle révolution pour la blockchainQuelle révolution pour la blockchain
Quelle révolution pour la blockchaineric German
 
Mongodb101 support de la video pour débuter
Mongodb101  support de la video pour débuterMongodb101  support de la video pour débuter
Mongodb101 support de la video pour débutereric German
 
Mongodb introduction
Mongodb introductionMongodb introduction
Mongodb introductioneric German
 
ruby 2.0 et lazy evaluation
ruby 2.0 et lazy evaluationruby 2.0 et lazy evaluation
ruby 2.0 et lazy evaluationeric German
 
ExpressTOcoffeescript refactorisation
ExpressTOcoffeescript refactorisationExpressTOcoffeescript refactorisation
ExpressTOcoffeescript refactorisationeric German
 
Virtualisation avec virtualbox
Virtualisation avec virtualboxVirtualisation avec virtualbox
Virtualisation avec virtualboxeric German
 
Redis installation
Redis installationRedis installation
Redis installationeric German
 
Bluesmvc solutionlinux 2012 eric german
Bluesmvc solutionlinux 2012 eric german Bluesmvc solutionlinux 2012 eric german
Bluesmvc solutionlinux 2012 eric german eric German
 

Plus de eric German (17)

Quelle révolution pour la blockchain
Quelle révolution pour la blockchainQuelle révolution pour la blockchain
Quelle révolution pour la blockchain
 
Mongodb102
Mongodb102Mongodb102
Mongodb102
 
Angularjs102
Angularjs102Angularjs102
Angularjs102
 
Mongodb101 support de la video pour débuter
Mongodb101  support de la video pour débuterMongodb101  support de la video pour débuter
Mongodb101 support de la video pour débuter
 
Mongodb introduction
Mongodb introductionMongodb introduction
Mongodb introduction
 
ruby 2.0 et lazy evaluation
ruby 2.0 et lazy evaluationruby 2.0 et lazy evaluation
ruby 2.0 et lazy evaluation
 
Agl2012
Agl2012Agl2012
Agl2012
 
ExpressTOcoffeescript refactorisation
ExpressTOcoffeescript refactorisationExpressTOcoffeescript refactorisation
ExpressTOcoffeescript refactorisation
 
Virtualisation avec virtualbox
Virtualisation avec virtualboxVirtualisation avec virtualbox
Virtualisation avec virtualbox
 
Redis installation
Redis installationRedis installation
Redis installation
 
Express1
Express1Express1
Express1
 
Railsminute
RailsminuteRailsminute
Railsminute
 
Herokup2
Herokup2Herokup2
Herokup2
 
Keygen heroku1
Keygen heroku1Keygen heroku1
Keygen heroku1
 
Bluesmvc solutionlinux 2012 eric german
Bluesmvc solutionlinux 2012 eric german Bluesmvc solutionlinux 2012 eric german
Bluesmvc solutionlinux 2012 eric german
 
Tp-jquery
Tp-jqueryTp-jquery
Tp-jquery
 
Ruby Pour RoR
Ruby Pour RoRRuby Pour RoR
Ruby Pour RoR
 

Angularjs101-les_SPA:support de la video

  • 1.
  • 2. 2 Objectif de cette vidéo ● Présentation des 'MVC' coté Client (client side) ● Les applications 'simple page' (Single Page Application) ● Commencer avec AngularJS ● Les pièges à éviter
  • 3. 3
  • 4. 4 Explications Avant : assemblage des données et des templates sur le serveur. serveur Client
  • 5.
  • 6. 6 Impacts ● Utilisation de dispositif REST ● Glissement vers des applications SPA (Single Page Application)
  • 7. 7 Vers les SPA : les layouts Généralement les pages sont assemblées (le serveur ou par le client) par morceaux à partir d'un modèle de site. (layout). Insertion d'un fragment de page dans un layout Sinatra
  • 8.
  • 9. 9 Alors ? REST , SPA , MVVM : Nouveaux phénomènes de mode ? ==> Relèvent du même concept Pas seulement: Reposent sur une logique économique. Diminuer les couts d'infrastructure Assurer la scalabilité Rationnaliser les developpements : ● Equipe projet simplifiée ● Architecture simple (§ clean architecture)