Note utilisateur: 5 / 5

Etoiles activesEtoiles activesEtoiles activesEtoiles activesEtoiles actives
 

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

 

Commentaires   

Hubert42
0 #10 Hubert42 03-03-2018 13:43
Formidable cet outil Angular! Il y a eu 3 révolutions: l'informatique, le client-serveur, et la 3eme: la SPAW single page application web
Citer | Signaler à l’administrateur
Dom le dom
0 #9 Dom le dom 08-02-2018 17:14
Citation en provenance du commentaire précédent de Paul :
Je vous conseille les excellents tutoriaux Angular ici : www.tutoriel-angularjs.fr/

Paul, tu nous cites AngularJS là! Et pas Angular! C'est fini Angular. Deja le développeur Angular JS s'est barré de chez Google et a laché le projet pour faire VueJS avec du one-way data binding parce que le two-way c'etait tout pourri. Du coup, Ember, Vue et Angular font du one-way. Alors laisse tomber AngularJS c'est la préhistoire, passe à autre chose mon gars.
Citer | Signaler à l’administrateur
Michel2
0 #8 Michel2 08-02-2018 06:58
Bravo angular 6 , enfin en architecture quasi "MVC" depuis la version 2! Avant c'était tout moisi. Maintenant on a des composants indépendants et réutilisables. On peut les remplacer facilement si besoin. J’apprécie bien.
Citer | Signaler à l’administrateur
DanielD
0 #7 DanielD 04-02-2018 14:17
Ce sont des usines à gaz tout ça! Vanilla JS suffit
Citer | Signaler à l’administrateur
Paul
0 #6 Paul 04-02-2018 11:29
Je vous conseille les excellents tutoriaux Angular ici : www.tutoriel-angularjs.fr/
Citer | Signaler à l’administrateur
Nicolasp
0 #5 Nicolasp 04-02-2018 10:08
J'ai laissé tomber Angular. ReactJS c'est beaucoup mieux que Angular car il y a le virtual DOM
Citer | Signaler à l’administrateur
moderateur
0 #4 moderateur 03-02-2018 10:54
Je comprends Frontend. Pour ne pas rester "englué" longtemps sur un projet, il faut etre rigoureux et appliquer certaines méthodes. Comme les méthodes Agile par exemple.
www.consultingit.fr/architecture-logicielle-redaction-des-specificite-techniques-methodologie
Citer | Signaler à l’administrateur
Frontend
+1 #3 Frontend 03-02-2018 10:20
Citation en provenance du commentaire précédent de Angulaire :
Deja la version 6? Je m'étais ar^été à la 2 :D

Aussi stoppé à la 2.En passant de la 1 à la 2 on a eu l'impresion de se faire un peu ("engulé") englué. On est passé sur react reactjs.org/
Citer | Signaler à l’administrateur
M00RHEAD
0 #2 M00RHEAD 02-02-2018 23:28
Bravo ça mérite 5 étoiles
Citer | Signaler à l’administrateur
Angulaire
+2 #1 Angulaire 02-02-2018 20:53
Deja la version 6? Je m'étais ar^été à la 2 :D
Citer | Signaler à l’administrateur

Ajouter un Commentaire

Ces commentaires reflète exclusivement l'opinion de leurs auteurs et n’engage en aucune façon Consultingit. L'icone à gauche du commentaire apparait si votre adresse email utilisée pour poster est la même que celle de votre compte gravatar: https://fr.gravatar.com Pour insérer une balise youtube: [youtube]IDENTIFIER[/youtube]

Code de sécurité
Rafraîchir