| title | tags | description | lang | slideOptions | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
Présentation de Angular JS, EPFL VPSI — Décembre 2019 |
AngularJS, EPFL |
View the slide with "Slide Mode". |
fr |
|
- KataCoda
- stackblitz.com
- http://www.typescriptlang.org/play/
- https://jsonplaceholder.typicode.com/photos
-
On plonge !
ng serve, et un IDE qui type-checke TypeScript, Chrome, Augury- 💡
ng create: pourquoi pas, mais toujours relire le diff
- 💡
- Une app “hello world” avec un module et un component (pas d'explications pour l'instant)
- Les trucs utiles
- this.console = console, this.alert = window.alert etc.
-
{{ products | async | json }}
- Démo d'une directive ("appHighlight", tiré de la doc) avec exercices
- Comment en faire "app-highlight" ?
- Explications
- TypeScript ; décorateurs, constructeurs magiques à la C++
- Dependency injection (sur ElementRef) : le hollywood principle, appliqué aux constructeurs et à leurs paramètres
this.el.nativeElement.style.backgroundColor#kesako- Un
Componentest juste uneDirectiveavec un template- Pain point : le langage de templates
- [appMyBinding]='jsExpr' # Ceci est une entrée
- (click) = 'doSomehing()' # Ceci est une sortie
- [(ngModel)] # Two-way data binding
- Pain point : le langage de templates
-
Généralités (à mijoter / réduire)
- Historique d'Angular, positionnement, success stories
- Angular a bien changé...
- Exit les variables $, sauf cas particuliers (
$eventdans un(keyup)=)
- Exit les variables $, sauf cas particuliers (
- Paradigmes et shiftes
- Comme tout le monde :
- personnalisation des tags
- Web widgets (encore que)
- Comme tout le monde, mais mauvaise idée
ng create— Mieux vaut savoir ce qu'il fait réellement (notamment dans le@NgModule);git diffest votre ami
- Spécifique à Angular
zerolow-code platform, grâce à TypeScript- Dependency injection
- Interprétation des templates sur le client (vs. "AoT", Ahead of Time, qui est une optimisation de prod', et qui pour faire court, ne marche pas)
- Interdiction d'accès à
window
- Comme tout le monde :
- Angular a bien changé...
- «Pourquoi Angular est-il mieux que...» → Quels problèmes Angular essaye-t'il de résoudre ?
[ Image de la courbe économique : https://en.wikipedia.org/wiki/Pareto_efficiency#/media/File:Front_pareto.svg ]
- Attaque du problème du dataflow (⇒ mieux que jQuery)
- Intégration «transparente» dans une application Web (⇒ mieux que Meteor)
- Projets de grande taille (⇒ mieux que Vue.js)
- Plusieurs approches pour l'architecture des données
- Plusieurs étages de modularité (components et modules) ⇒ «mieux» que React
- Travail à plusieurs : conventions de style, types (TypeScript), IDE
- Détection des changements : l'approche brutale
- Angular pour mobile (⇒ mieux que Vue)
- Plug ! Ionic est à Meteor comme Cordova est à TypeScript
- Les faiblesses
- Codé à la Java — zones.js est vendu comme un «thread-local storage pour JS»
- Modèle de redessin difficile à raisonner
- Les Trois Pannes :
ExpressionChangedAfterItHasBeenCheckedError, boucle de recalcul, données affichées obsolètes
- Les Trois Pannes :
- Historique d'Angular, positionnement, success stories
-
On continue ! Le menu
- NavRouter ⇒ où l'on découvre à quoi sert le
importsdu @NgModule - Bootstrap et
NgbModule - Injectons quelque chose ! I18N { getLanguage(), setLanguage() } ⇒ où l'on découvre à quoi sert
providers
- NavRouter ⇒ où l'on découvre à quoi sert le
-
TODO Ici un § théorique à choix
-
TODO Présenter : HostBinding, HostListener, ng-class, etc.
-
Rendre l'app utile : XHR, sécurité
- On commence fort : un typeahead («Vous avez aimé les Promises ? Vous allez adorer les Observables !»)
- Pour protéger vos écritures : pensez framework
- REST ⇒ penser à l'authentification
-
Test first, at last
Outillage et pré-requis
- — Débogueur pour Chrome
- tslint, une belle usine à gaz
- Impossible de lui faire émettre des infos de type — Recommander une alternative Mise en route / sujets simples
- Mise en place à l'intérieur d'une application
- npm, peer dependencies
npm install -g?npx!
- Les bases de JS et TypeScript
- JavaScript moderne : promesses (yeah!), classes (bleeargh)
- moins besoin de lodash, mais quand même
@types,tsconfig.json, oh my — https://medium.com/@KevinBGreene/surviving-the-typescript-ecosystem-working-with-types-and-type-definitions-3539baf26627- Exercice : convertir un fichier .js en .ts (GUI adapté à fournir)
- JavaScript moderne : promesses (yeah!), classes (bleeargh)
- Un composant simple (dans un
@NgModule)- Vocabulaire : vue (template), contrôleur
- Exploration avec Augury
- Surprise : l'élément cible du templating n'est pas remplacé ! «Il n'y a jamais trop de <div>» (Abraham Lincoln, 1851)
- Passage de paramètres : @Input() et <foo [field]>
- Mnémonique : [ce qui rentre], (ce qui sort)
- Le cycle de développement
- polyfills.ts : ne sont pas des polyfills... Plutôt des fragments de run-time
- Angular semble fournir une aide guère plus que minimaliste pour la «compilation conditionnelle» de ce run-time
- Probablement une source de tirage de cheveux en fin de projet (optimisation)
- Compilation, release
- polyfills.ts : ne sont pas des polyfills... Plutôt des fragments de run-time
- Routeur et single-page Web app
- ⚠ Un composant doit savoir s'il est «routé» ou appelé par un template ! angular/angular#18967
Sujets avancés
- Test first!
- Performance troubleshooting : profiler le re-rendu https://stackoverflow.com/questions/40850766/debug-angular2-change-detector
- Mobile first, SASS, ARIA, intégration charte graphique
- Ionic
pour l'autonomie...
- Un cycle de développement qui vous soutient
- Zéro warnings dans la console du navigateur
- Savoir comment revenir à l'état qui marche avec git
- Les bons outils pour aller de l'avant
- Une definition of done
- Une approche utile de la documentation
- Angular → Angular 2 → ... Angular
- Mais certains articles etc. concernant Angular 2 sont toujours d'actualité ! ⇒ observer la date. Date < 2019 ⇒ passez votre chemin.
slide: https://hackmd.io/p/template-Talk-slide
We have a collaborative session
please prepare laptop or smartphone to join!
- Front-end developer
- VSCode ❤️
- I use tabs. 🐱
{%youtube E8Nj7RwXf0s %}
digraph {
compound=true
rankdir=RL
graph [ fontname="Source Sans Pro", fontsize=20 ];
node [ fontname="Source Sans Pro", fontsize=18];
edge [ fontname="Source Sans Pro", fontsize=12 ];
subgraph core {
c [label="Hackmd-it \ncore"] [shape=box]
}
c -> sync [ltail=session lhead=session]
subgraph cluster1 {
concentrate=true
a [label="Text source\nGithub, Gitlab, ..."] [shape=box]
b [label="HackMD Editor"] [shape=box]
sync [label="sync" shape=plaintext ]
b -> sync [dir="both"]
sync -> a [dir="both"]
label="An edit session"
}
}
- Bind with each page
- Manipulate DOM
- Add event listeners
- Isolated JavaScript environment
- It doesn't break things
<style> code.blue { color: #337AB7 !important; } code.orange { color: #F7A004 !important; } </style>
onMessage('event'): Register event listenersendMessage('event'): Trigger event
- Dead simple API
- Only cares about application logic
import * as Channeru from 'channeru'
// setup channel in different page environment, once
const channel = Channeru.create()// in background script
const fakeLogin = async () => true
channel.answer('isLogin', async () => {
return await fakeLogin()
})// in inject script
const isLogin = await channel.callBackground('isLogin')
console.log(isLogin) //-> true- Cross envornment commnication
- A small library to solve messaging pain
- TypeScript Rocks 🎉
You can find me on
- GitHub
- or email me
