Logomotion: tour d'horizon Javascript, base EmberJS

This commit is contained in:
wpetit 2018-01-08 23:03:36 +01:00
parent 6eaec99f06
commit 3a14479bc1
1 changed files with 101 additions and 7 deletions

View File

@ -3,18 +3,21 @@ pre { font-size: 0.5em !important; }
table { font-size: 0.6em !important; } table { font-size: 0.6em !important; }
</style> </style>
# Présentation de framework Javascript # Frameworks Javascript - Tour d'horizon
## William Petit - S.C.O.P. Cadoles ## William Petit - S.C.O.P. Cadoles
--- ---
## Riot <!-- page_number: true -->
## React + Flux ## Les frameworks
## Ember
## RiotJS
## ReactJS
## EmberJS
--- ---
## Riot ## RiotJS
### Présentation générale ### Présentation générale
### Concepts généraux ### 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 ### Présentation générale
### Concepts généraux ### 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 ### Présentation générale
### Concepts généraux ### 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 # Licence