« Billets plus récents

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…

Read and Post Comments

Quelques notes en vrac

Liste des applications / outils que j'utilise

Il y a quelques semaines, sur mon site, j'ai créé une nouvelle page qui s'intitule « Liste des applications / outils que j'utilise ».

Quelles sont les motivations qui m'ont poussé à réaliser cette page ?

  • je trouve intéressant de savoir quels sont les outils que X ou Y utilise au quotidien… on y découvre souvent des choses intéressantes (donc n'hésitez pas à réaliser ce type de page). Un site qui a le même esprit est « Ils utilisent ça ».
  • il arrive que l'on me demande quelle librairie j'ai choisi pour réaliser telle ou telle tâche
  • parfois, je ne sais plus quelle librairie javascript j'ai choisi pour réaliser une tâche, dans ce cas cette page me sert de "pense-bête"

Dans le même esprit, j'ai commencé la page « Liste des applications Android que j'utilise » mais pour le moment elle n'est pas très étendue.

virtualenvwrapper

Depuis 3 semaines, j'utilise de plus en plus régulièrement virtualenvwrapper.

Cet outil est vraiment très pratique. Un petit résumé rapide d'utilisation (mais je vous conseille fortement de lire la documentation pour en savoir plus sur les divers fonctionnalités de l'outil, comment l'installer…) :

Je crée le dossier qui contiendra mon projet :

$ mkdir ~/projets/mon_projet/

Je crée un nouvel environement qui porte le même nom que mon projet :

$ mkvirtualenv mon_projet
New python executable in mon_projet/bin/python
Installing setuptools............done.
virtualenvwrapper.user_scripts creating /home/harobed/.virtualenvs/mon_projet/bin/predeactivate
virtualenvwrapper.user_scripts creating /home/harobed/.virtualenvs/mon_projet/bin/postdeactivate
virtualenvwrapper.user_scripts creating /home/harobed/.virtualenvs/mon_projet/bin/preactivate
virtualenvwrapper.user_scripts creating /home/harobed/.virtualenvs/mon_projet/bin/postactivate
virtualenvwrapper.user_scripts creating /home/harobed/.virtualenvs/mon_projet/bin/get_env_details

Quand j'active l'environement mon_projet je souhaite être déplacé directement dans le dossier ~/projets/mon_projet :

$ echo "cd ~/projets/mon_projet" >> /home/harobed/.virtualenvs/mon_projet/bin/postactivate

J'active l'environement mon_projet :

$ workon mon_projet
(mon_projet)$ pwd
/home/harobed/projets/mon_projet

À noter que les commandes fournies par virtualenvwrapper supportent pour la plupart l'auto complétion, par exemple workon <tab> affiche les environements disponibles sur votre système.

Consultez la documentation de virtualenvwrapper pour en savoir plus.

Mozilla Sync

Depuis que je suis passé à Firefox 4, j'utilise Firefox Sync pour centraliser mes bookmarks.

Avant cela, j'utilisais avec plaisir delicious mais l'extension delicious pour Firefox 4 n'est pas disponible.

En tout les cas, Firefox Sync fonctionne vraiment très bien, c'est très facile à configurer, c'est totalement transparent à l'usage… un très beau travail, réalisé entre autre par Tarek Ziade pour la partie serveur (codé en Python).

Read and Post Comments
« Billets plus récents

Mes flux :