Logomotion: mise à jour introduction framework javascript

developpement/intro_javascript/presentation/slides.md

@@ -379,12 +379,12 @@ Implémenter une application minimaliste de gestion de tâches avec Riot. Cette
 |Avantages|Inconvénients|
 |:-|:-|
 |Grande communauté, très active | Changement de license puis rétropédalage en 2017 |
-| Maintenu et utilisé par Facebook en interne | Nécessité de mettre en place un pipeline de transpilage |
+| Maintenu et utilisé par Facebook | Nécessité de mettre en place un pipeline de transpilage |
 | Architecture Flux | Architecture Flux |
 | Possibilité de faire des applications "isomorphiques" avec NodeJS |
-| "React Native" |
+| Projet "React Native" |
 | API stable |
-| Virtual DOM |
+| Virtual DOM ([voir cet article](https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/)) |
 | Moteurs "lightweight" compatibles |
 
 ---
@@ -601,6 +601,8 @@ export default Clock
 
 ![center](./img/flux-simple-f8-diagram-with-client-action-1300w.png)
 
+[Voir une description des concepts](https://github.com/facebook/flux/tree/master/examples/flux-concepts)
+
 ---
 
 ## Exercice
@@ -641,6 +643,8 @@ Implémenter une application minimaliste de gestion de tâches avec React (sans
 |Long-term support (1 an)|
 |Documentation exhaustive|
 |Ember Data|
+|Ember Inspector|
+|Ember CLI|
 
 ---
 
@@ -651,7 +655,6 @@ Implémenter une application minimaliste de gestion de tâches avec React (sans
 ### Templates
 ### Modèles
 ### Contrôleurs
-### Composants
 
 ---
 
@@ -668,18 +671,53 @@ ember serve
 
 ---
 
-## Routes
+## Routes (1)
 
 ### Générer une nouvelle route
 
 ```shell
-ember generate route foo
+ember generate route posts
 ```
 
 ---
 
-## Templates
+## Routes (2)
 
+### Attacher un/plusieurs modèles à une route
+
+```javascript
+// app/routes/posts.js
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  model() {
+    return this.get('store').findAll('post');
+  }
+});
+```
+
+---
+
+## Routes (3)
+
+### Effectuer une redirection
+
+```javascript
+// app/routes/index.js
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  beforeModel() {
+    this.transitionTo('posts');
+  }
+});
+```
+
+---
+
+## Templates (1)
+
+### Syntaxe générale
 ```handlebars
 {{!-- Interpolation de variable --}}
 {{ myVar }}
@@ -691,16 +729,183 @@ ember generate route foo
 {{#block params... }}
  ...
 {{/block}}
+
+{{!-- Helpers imbriqués --}}
+{{sum (multiply 2 4) 2}}
 ```
 
 ---
 
-## Modèles
+## Templates (2)
+
+### "Blocks" de base
+```handlebars
+{{!-- Condition --}}
+{{if myVar}}
+  Maybe...
+{{else}}
+  Or not.
+{{/if}}
+
+{{!-- Boucle --}}
+{{#each people as |person|}}
+  <li>Hello, {{person.name}}!</li>
+{{/each}}
+```
+
+---
+
+## Templates (3)
+
+### "Helpers" spécifiques
+```handlebars
+{{!-- Affiche myVar[key] (accès dynamique aux variables exposées dans le controleur) --}}
+{{get myVar "key"}} 
+
+{{!-- Affiche le contenu de la (sous) route --}}
+{{outlet}}
+
+{{!-- Modèle exposé par la route --}}
+{{model}}
+
+{{!-- Affiche un lien vers la route donnée --}}
+{{link-to routeName}}
+
+{{!-- Attacher une action à un élément (onclick) --}}
+<button {{action "myAction"}}>Do it !</button>
+```
+---
+
+## Contrôleurs (1)
+
+### Générer un contrôleur
+
+```shell
+ember generate controller posts
+```
+---
+
+## Contrôleurs (2)
+
+### Exposer des variables pour le template
+
+```shell
+import Controller from '@ember/controller';
+
+export default Controller.extend({
+  foo: "bar" // {{ foo }} dans le template associé
+});
+```
+---
+
+## Contrôleurs (3)
+
+### Actions
+
+```shell
+import Controller from '@ember/controller';
+
+export default Controller.extend({
+  
+  foo: "bar"
+
+  actions: {
+    myAction: function() {
+      // On modifie la valeur de "foo"
+      // Si "foo" est utilisé dans le template, il sera automatiquement mis à jour
+      this.set("foo", "hello world");
+    }
+  }
+});
+
+```
+---
+
+## Modèles (1)
 
 ### Générer un nouveau modèle
 
 ```shell
-ember generate model bar
+ember generate model post
+```
+---
+
+## Modèles (2)
+
+### Définition d'un modèle
+
+```javascript
+// app/models/comment.js
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  
+  // Simple attributs
+  text: DS.attr('string'),
+  
+  // Relations
+  post: DS.belongsTo('post')
+  
+});
+
+// app/models/post.js
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  
+  // Simples attributs
+  title: DS.attr('string'),
+  content: DS.attr('string'),
+  
+  // Relations
+  comments: DS.hasMany('comment')
+  
+});
+```
+---
+
+## Modèles (3)
+
+### Manipuler une instance de modèle
+
+```javascript
+// app/controllers/posts.js
+
+// Créer une nouvelle instance
+var post = store.createRecord('post', {
+  title: 'Mon article',
+  content: 'Lorem ipsum'
+});
+
+// Modifier l'instance
+post.set('title', 'Foo bar');
+
+// Sauvegarde de l'instance
+post.save().then(() => console.log("Post saved !"));
+
+// Supprimer l'instance
+post.destroyRecord().then(() => console.log("Post deleted !"));
+
+```
+---
+
+## Modèles (4)
+
+### Effectuer des requêtes sur le "store"
+
+```javascript
+// app/controllers/posts.js
+
+// Récupérer toutes les instances de "post"
+var posts = this.get('store').findAll('post');
+
+// Requête avec filtre
+var posts = this.get('store').query('post', { 
+  filter: {
+    title: "Foo Bar"
+  }
+});
+
 ```
 ---