Logomotion: tour d'horizon Javascript, base EmberJS

developpement/intro_javascript/presentation/slides.md

@@ -3,18 +3,21 @@ pre { font-size: 0.5em !important; }
 table { font-size: 0.6em !important; } 
 </style>
 
-# Présentation de framework Javascript
+# Frameworks Javascript - Tour d'horizon
 ## William Petit - S.C.O.P. Cadoles
 
 ---
 
-## Riot
-## React + Flux
-## Ember
+<!-- page_number: true -->
+## Les frameworks
+
+## RiotJS
+## ReactJS
+## EmberJS
 
 ---
 
-## Riot
+## RiotJS
 
 ### Présentation générale
 ### Concepts généraux
@@ -353,7 +356,7 @@ Implémenter une application minimaliste de gestion de tâches avec Riot. Cette
 
 ---
 
-## React + Flux
+## ReactJS
 
 ### Présentation générale
 ### Concepts généraux
@@ -611,7 +614,7 @@ Implémenter une application minimaliste de gestion de tâches avec React (sans
 
 ---
 
-## Ember
+## EmberJS
 
 ### Présentation générale
 ### Concepts généraux
@@ -620,6 +623,97 @@ Implémenter une application minimaliste de gestion de tâches avec React (sans
 
 ---
 
+## Présentation générale (1)
+
+
+- Publication: Décembre 2011
+- Mainteneur principal: [Ember Core Team](https://emberjs.com/team/) (projet communautaire)
+- License: MIT
+
+---
+
+## Présentation générale (2)
+
+|Avantages|Inconvénients|
+|:-|:-|
+|"Clés en main"|"Opiniatre"|
+|API stable|Structure MVC classique|
+|Long-term support (1 an)|
+|Documentation exhaustive|
+|Ember Data|
+
+---
+
+## Concepts généraux
+
+### Ember CLI
+### Routes
+### Templates
+### Modèles
+### Contrôleurs
+### Composants
+
+---
+
+## Ember CLI
+
+### Générer une nouvelle application
+
+```shell
+npm install ember-cli -g
+ember new my-app
+cd my-app
+ember serve
+```
+
+---
+
+## Routes
+
+### Générer une nouvelle route
+
+```shell
+ember generate route foo
+```
+
+---
+
+## Templates
+
+```handlebars
+{{!-- Interpolation de variable --}}
+{{ myVar }}
+
+{{!-- Utilisation d'un "helper" --}}
+{{helper params... }}
+
+{{!-- Définition d'un "block" --}}
+{{#block params... }}
+ ...
+{{/block}}
+```
+
+---
+
+## Modèles
+
+### Générer un nouveau modèle
+
+```shell
+ember generate model bar
+```
+---
+
+## Exercice
+
+Implémenter une application minimaliste de gestion de tâches avec EmberJS. Cette application doit comprendre les fonctionnalités suivantes:
+
+- Ajouter une nouvelle tâche (champs texte) avec une priorité parmi les suivantes: "haute", "moyenne", "basse" et un statut: "en cours" ou "terminé"
+- Marquer une tâche comme "terminée".
+- Afficher la liste des tâches en attente, triées par priorité décroissante + tâches terminées en dernier.
+- Les tâches doivent être persistées dans le "Local Storage" du navigateur.
+
+---
 
 # Licence