Ember.js - Épisode 1 - Présentation de l'application feuille de matchs

Je souhaite écrire une série de billets à propos de Ember.js, un framework Javascript qui permet d'écrire des applications webs.

J'ai commencé à étudier et à expérimenter Ember.js il y a quelques semaines.

C'est le billet « Une bien belle mise à jour » sur le blog du service Capitaine Train (n'hésitez pas à me contacter si vous souhaitez recevoir une invitation à ce super service en ligne) qui m'a donné envie d'étudier Ember.js.

J'avais déjà croisé cet outil par le passé… mais j'avais vite zapé car je n'avais pas vu l'intérêt de ce énième framework javascript.

Une série de billets sur le développement d'une application web ?

Je souhaite réaliser ma série de billets à propos de Ember.js sous la forme d'un récit du développement d'une petite application web, mettant en oeuvre entre autres : Ember.js (Javascript coté client) et Pyramid (en Python coté serveur).

Pourquoi sous cette forme ? Et bien parce que je pense qu'un exemple complet de réalisation d'une application (que je souhaite dans tous les cas réaliser) peut être une bonne source d'information pour ceux qui veulent se lancer avec Ember.js et Pyramid.

À noter… que vous pourrez apprendre des choses uniquement sur Ember.js sans avoir l'obligation d'étudier Pyramid… et inversement.

Mes premiers contacts avec Ember.js

Ma rencontre avec Ember.js a suivi ces étapes :

  1. j'ai regardé vite fait… je n'ai pas vu son potentiel
  2. j'ai regardé un peu plus la documentation… et c'est la partie suivante de la documentation qui a attiré mon attention « Computed Properties (Getters) »
  3. j'ai fait un petit exemple rapide… j'ai été impressionné par la fonctionnalité suivante de Ember.js (qui est son cœur… sa raison d'être) :
    • lorsque l'on modifie les données au niveau de la couche modèle… le rendu de la page est automatiquement mis à jour (en rejouant le ou les templates présents dans la page)
    • lorsqu'il y a une interaction utilisateur au niveau de l'UI… les données de la couche modèle sont automatiquements mis à jour
  4. j'ai commencé à réaliser un premier projet plus concret… et je suis très vite resté bloqué sur des problèmes… que j'ai maintenant réussi à résoudre mais après beaucoup de recheches

Ma conclusion :

  • Ember.js semble être un super outil…
  • Ember.js manque encore de documentation… et surtout des exemples

À travers le récit du développement de l'application « Feuille de matchs » je souhaite justement partager les difficultés que j'ai rencontré et indiquer des solutions.

Avertissement

Je n'ai pas beaucoup d'expérience sur Ember.js, dans ce billet et dans les billets suivants… je ne vous dis pas qu'il faut absolument que vous utilisiez cet outil.

Peut être que dans six mois je vais m'apercevoir et conclure que cet outil a plein d'inconvénients, plein de limitations… mais pour le moment j'adore… tout va bien à part le manque de documentation.

Je pourrai vous en dire plus… quand j'aurai développé une ou deux applications webs basées sur Ember.js.

Présentation rapide de l'application

Je fais du Tennis de Table en compétition depuis plusieurs années.

Voici la feuille de match d'une rencontre de Tennis de Table par équipe :

Mon objectif… est de créer un service web permettant de :

  • saisir d'une manière conviviale une feuille de match
  • partager facilement une feuille de match sur le web
Là où Ember.js est intéressant dans cette application web, c'est qu'il y a beaucoup d'intéraction au niveau des champs de la feuille de match.
Par exemple, lors de la saisie des noms des joueurs dans les deux cadres en haut du document… ces noms sont automatiquement mis à jour dans la liste des matchs.
Le total des sets… des matchs doit être automatiquemnt mis à jour lors de la saisie des scores des sets.

Code source et démonstration de l'application

Voici une démonstration de la première version de l'application. Pour le moment il n'y a qu'une petite partie de l'application Javascript qui est réalisée.

Je ferai un screencast de la démonstration pour le prochain billet.

Par la suite… je vais mettre à jour ce billet pour qu'il continue à être à jour avec les évolutions de l'application… du code source…

blog comments powered by Disqus

Mes flux :