Développement Web avancé

84 Pages·2016·1.6 MB·French

DØveloppement Web avancØ : MEAN
Mongodb, Express, AngularJS, Nodejs
E. RAMAT
UniversitØduLittoral-C(cid:244)ted’Opale
23 juin 2016
E.Ramat (ULCO-LISIC) WebavancØ 23juin2016 1/84
Sommaire
1 Introduction
2 Node.js
3 Express
4 MongoDB
E.Ramat (ULCO-LISIC) WebavancØ 23juin2016 2/84
Plan
1 Introduction
2 Node.js
3 Express
4 MongoDB
E.Ramat (ULCO-LISIC) WebavancØ 23juin2016 3/84
Introduction
Objectifs
comprendre une application web moderne
introduire le concept d’application multi-tiers
mettre en place une architecture Full-stack Javascript
ComplØments abordØs
Mongodb : un systŁme de bases de donnØes no-sql basØes sur les documents
et BSON/JSON
Express : un framework Web pour nodejs
AngularJS : un framework JS c(cid:244)tØ client basØ MVC
NodeJS : une plateforme serveur basØ sur le moteur JS V8
des gestionnaires de modules et de dØpendances :
(cid:73) npm : le gestionnaire de modules de nodejs
(cid:73) bower : idem pour la couche cliente
E.Ramat (ULCO-LISIC) WebavancØ 23juin2016 4/84
Introduction
MEAN stack
E.Ramat (ULCO-LISIC) WebavancØ 23juin2016 5/84
Introduction
Architecture gØnØrale
E.Ramat (ULCO-LISIC) WebavancØ 23juin2016 6/84
Introduction
Les outils - client
Le debugger
sous Iceweasel/Mozilla, le plugin Firebug
sous Chrome, c’est intØgrØ
PossibilitØs
navigation dans le DOM et modi(cid:28)er des ØlØments
tracer les transferts rØseaux (mØthode, type de ressource, taille, temps, ...)
visualiser les sources javascript et les (cid:28)chiers css tØlØchargØs
exØcuter pas (cid:224) pas des scripts JS, visualiser et modi(cid:28)er des variables JS
visualiser et modi(cid:28)er les cookies, les bases de donnØes locales
(localstorage en HTML5)
voir le contenu de la console (sortie des scripts JS)
E.Ramat (ULCO-LISIC) WebavancØ 23juin2016 7/84
Introduction
Les outils - IDE
Jetbrains - Webstorm
E.Ramat (ULCO-LISIC) WebavancØ 23juin2016 8/84
Introduction
Les outils - client
Webstorm
colorisation, mise en forme automatique, completion, ...
exØcution selon divers con(cid:28)gurations (node.js, tests unitaires, ...)
debug c(cid:244)tØ serveur
analyse de code (qualitØ)
versionning (git)
E.Ramat (ULCO-LISIC) WebavancØ 23juin2016 9/84
Introduction
Les outils - client
Sous Chrome
la vue du DOM
les ØlØments de CSS qui s’appliquent sur le document
on peut aussi cliquer sur un ØlØment d’une page pour obtenir sa
reprØsentation dans le DOM et les styles appliquØs
E.Ramat (ULCO-LISIC) WebavancØ 23juin2016 10/84