Angular 6 Ng Europe Eventlama workshop Manfred Steyer
Eventlama nous sponsorise ce workshop Angular 6 exceptionnel! Vous souhaitez aussi sponsoriser le transcript d'un evenement? C'est par ici
Préparons-nous pour l'arrivée d'Angular 6 en mars. Pour ceux qui ne connaissent pas Angular ce formidable framework, il s'agit d'une librairie qui permet de créer des applications informatiques. Consultingit vous raffraichit la mémoire avec cette formation AngularJS ici
Eventlama, en deux mot, c'est un Eventbrite like.
EVENTLAMA est créé et utilisé par des personnes qui organisent des événements de haute technologie. Nous savons que c'est beaucoup de travail, vous devez construire un site Web, une application mobile, ajouter des conférenciers un par un, lancer des appels aux conférences, gérer les sponsors, suivre les médias, les réseaux sociaux, gérer les commandes, les tickets, les remboursements, les prospects et plus! Eventlama réalise toutes ces tâches décourageantes en un seul clic afin que vous puissiez vous détendre et passer plus de temps à vous concentrer sur l'expérience de vos participants avec des fonctionnalités innovantes qui feront que vos clients apprécieront ce que vous leur proposez.
Voici un aperçu du programme. Pour accéder au cours complet c'est ici.
Une question? Posez-la ici
Aide au développement d'applications
Manfred Steyer à la NG-Europe 2018 (evenement réunissant les plus grands experts Angular, du monde entier) nous propose un workshop très intéréssant pour développer une application avec Angular 6
Comment est construite une application Angular 6?
Comment structurer une application Angular?
Comment diviser une application Angular en pluisieurs petites parties?
Astuce: toujours utiliser les dernières versions d'Angular dans les nouveaux projets, on a accès aux dernières fonctionnalités...
Petites révisions...
Angular, les modules
App module → SharedModule
Root module, Feature Module, Shared module
package.json
Ce nom va etre important lorsque l'on va gérer npm install
Choisir ce nom avec la plus grande attention
NPM? Mais pourquoi des packages NPM avec Angular?
Proprietes dans le package.json
Logique réutilisable
On peut structurer de grosses applications
La structure d'un package NPM:
/node_modules
your-stuff
package.json
Les propriétés dans le package.json
nom
version
description
points d'entrées
typings
dépendances
Angular dans le package.json
{
"dependencies": {
"@angular/core": "4.2.0",
"@angular/http": "4.2.0"
}
}
2/1/2018
6
package.json
{
"dependencies": {
"@angular/core": "4.2.0",
"@angular/http": "4.2.0"
}
}
package.json
{
"dependencies": { },
"
peerDependencies
": {
"@angular/core": "^4.0.0",
"@angular/http": "^4.0.0"
}
}
toutes les dépendances à l'interieur seront installées
attention aux dependances
dependancies:
@angular/core: 4.0.0 …
On peut avoir n'importe quelle version compatible ici.
Une question? Posez-la ici
Aide au développement d'applications
Le concept des “barrels” Angular
Un module est un fichier
Un barrel est l'exposition de ce fichier, soit une API publique
|
index.ts : export * from './src/demo.service'; export { OtherDemoService} from './src/other-demo.service'; NgModule({ ... }) export class LibStarterModule { } |
Les Devdependencies
elles ne sont pas installées, elles sont là pour la compatibilité;
Normalement, avec modèle Ecmascript c'est juste un fichier avec une structure
C'est une facade pour la librairie
Index.ts reference les librairies
Démarrage du projet
Le format de package Angular
Etude complète du package NPM ici
Generateur pour créer les librairies:
npm install -g yo
npm install -g generator-angular2-library
yo angular2-library
Les tests et le deploiement
Test en local
Les liens symboliques
librairie: npm-link
npm link library-name
Tester avant de mettre en production.
Publier vers le registre NPM
Incrementer la version dans le package.json
npm version patch minor, majoir, version...
npm run build
npm-registry en local
TFS de Microsoft supporte de plus en plus
Nexus pour les habitués de Java
Verdaccio, solution très légère, j'aime bien, c'est italien
npm I -g verdaccio
Les solutions alternatives pour configurer le registre
npm set registry http://localhost:4873
default registry.npmjs.org
npm get registry
project /npmrc in project root
“forRoot”
npm version minor
build
npm publish –registry http://localhost:4873
Angular Package Format
https://goo.gl/hjt7G3
Avantages
Créer une nouvelle librairie c'est très simple
Tout le monde utilise la dernière version
Pas de conflits de versions
Extension Nrwl pour Angular
Toolkit open source pour les applications Angular en entreprise
npm install -g @nrwl/schematics
npm install -g @angular/cli
create -nx -workspace myworkspace
ng generate app myapp
ng generate lib mymodule
ng serve --app=myapp
ng generate component myButton --app=mymodule
ng build --app=myapp
Angular aime les microservices
C'est mieux que développer un service monolithe avec 100 développeurs dessus.
On a 100 micro services, avec 1 développeur réponsable par micro service.
Petites équipes
gestion de l'équipe facilitée
applications moins complexe
développement séparé
Différerntes technologies peuvent cohabiter
On peut remplacer un micro service defectueux facilement
Deploiement plus simple
Les données sont distribuées
Une application ne peut pas perturber une autre application
On peut déployer les applications quand on veut, elles sont indépendantes
Micro service avec SPA single page applications
Redux enregiste le contexte et on peut le placer dans le local storage, ou dans une base de donnée...
Chauqe application Microsoft Office est une SPA, idem pour Google maps, quand on choisit une destination et qu'on affiche la route, c'est une SPA.
Composition de l'interface utilisateur: avec ou sans iframes?
On peut créer un shell qui charge un autre micro service dans un shell.
API de messagerie pour envoyer des messages entre les micro services.
Les web components ou composants webs partagés dans Angular
On peut créer différentes applications avec des "composants partagés"
Angular 6 arrive en mars il y aura
Les elements Angular
Voir le spécialiste Rob Wormald
Composition de l'interface idéale:
Hyperliens
iframes
composants webs
Logique utilisable de projets en projets:
libs
opensource
Structures d'un micro service
projet avec un seul répertoire
Angular propose des gardes fous
Ce sont des services. Ils fonctionnent comme des guardes: ils empechent l'activation ou la desactication des routes.
Configurer les gardes fous
CanActivate → CanActivate
CanActivateChild → CanActivateChild
CanLoad->canLoad
CanDeactivate<T> ->canDeactivate
Résultat: un booléen, un obersvable(boleen) , une promesse(boleen)
|
const APP_ROUTES: Routes= [ { path: '/mon-application', component: ComposantDeLapplication, canActivate: [AuthGuard], children: [ { path: 'application-modification/:id', component: ApplicationEditComponent, canDeactivate: [ApplicationEditGuard] }, [...] ] ] |
Une question? Posez-la ici
Aide au développement d'applications
Les intercepteurs HTTP
L'idée c'est de proposer un “hook” http, de pouvoir intercepter les requetes, et de les modifier.
Les requetes sont des headers, des logins, des gestion d'erreurs, etc.
La chaine de responsabilité
Requete
Intercepteur, intercepteur, logique (requette http)
Réponse
Idéal pour un jeton d'accès pour l'authentification ou gérer les erreurs d'identification lors d'un login.
On peut l'intégrer à Active Directory : on peut mettre des droits au niveau du frontend vers le backend.
Il y a 3 roles:
Serveur d'identification
serveur resource
client
Workflow:
Le client demande au serveur l'authentification.
Le serveur renvoir l'identification au client avec un jeton
Le client utilise le jeton pour demander les resources au serveur resource
Qu'est-ce que Oauth2?
C'est le fait de pouvoir utiliser une application en s'étant identifié sur une autre.
Par exemple, quand on arrive sur une application, on nous demande de se connecter d'abord avec Facebook.
Une fois que l'on est connecté à Facebook, on a le droit d'utiliser l'application.
L'application a besoin d'un tiers de confiance pour certifier l'utilisateur.
Un client qui a quelques amis Facebook et une photo publique par exemple est un vrai client.
Le compilateur Angular
Il extrait le texte des templates en .xml
On peut traduire ru xml sans outil supplémentaire
Jit or AOT
Très bonnes performances
Avant on ne pouvait pas changer de langage sans relancer l'application. Maintenant, grace à la JIT, pas besoin de recharger l'application, on a l'autre langage.
La traduction Angular
Voici un répertoire github très intéréssant:
https://github.com/ocombe/ng2-translate
Une grande partie de librairies AngularJS 1.X ont été mises à jour
Les fichiers sont basés sur Json
On peut changer de langue “on the fly”
Angular c'est bien, mais les performances dans tout ça?
La structure d'un module permet le “lazy-loading” ou le chargement progressif comme le montre quand on charge l'application, dans la console debug chrome, onglet “network”.
Le “Preloading” à la sauce Angular
Les modules dont on a besoin seront chargés après que l'application ait démarré.
Quand on a besoin d'un module, il est disponible de suite
Le fameux “on push” d'Angular
Angular est notifé si quelquechose change. Quand les données changent, avec par exemple un @input
Angular va comparer le nouvel objet avec l'ancien de référence.
Un ancien objet === Un nouvel objet ?
Création des evenements dans les composants
Le déclenchement peut se faire manuellement si besoin, mais ce n'est pas recommandé.
Parce qu'une détection manuelle va bypasser le framework et ce n'est pas une bonne pratique, et ce n'est donc pas maintenable.
La compilation AOT d'Angular
HTML vers Javascript
Compilation de template
JIT: just in time compilation
AOT: Ahead of time, pendant la compilation
Le compilateur Ahead of time apporte une meilleure performance au lancement de l'application
On n'a pas besoin d'inclure le compilateur dans le bundle de l'application, le poids de l'application est reduit
Des outils peuvent analyser le code source pourenlever les parties non utilisées: “three shaking”
Et l'Angular CLI?
Ng build --prod
@ngtools/webpack
Travaux pratiques avec Angular
Installer NodeJS
Installer angular CLI
Installer Visual Studio Code
Installer Chrome
installer le plugin chrome https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn
installation des plugins pour travailler avec Angular
C:\Users\Moi\Documents\02_Labs-20180201T124146Z-001\02_Labs\flight-workspace
Revue de code
Npm start
Bibliothèques\Images\angular-webpack-compiled-successfully
On se connecte au localhost port 4200
localhost:4200
Et voila la belle application SPA Angular6 qui nous permet de gérer des trajets en avion, un aéroport... Effet Waou!
C'était un petit aperçu du programme. Pour demander le cours complet c'est ici.
Ce transcript reflète exclusivement l'opinion de ses auteurs et n’engage en aucune façon Consultingit
Voilà, j'espère que ça vous a plu. Vos commentaires/remarques sont les bienvenus