Consulting, services, computer engineering. Implementation of technology solutions and support for businesses.

User Rating: 5 / 5

Star ActiveStar ActiveStar ActiveStar ActiveStar Active
 

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

 

angular 6 ng europe google framework

 

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

 

https://goo.gl/hjt7G3

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

 

Add comment


Security code
Refresh