Archive

Articles taggués ‘emberJs’

Routes et templates Ember.js

Cet article est le troisième d’une série consacrée à la découverte d’Ember.js, framework javascript pour créer des applications web single page, que j’utilise quotidiennement avec bonheur depuis maintenant plus d’un an.

Dans le précédent article, nous avons déjà écrit le routeur spécifiant les différents états de l’application. Rappel:

App.Router.map(function () {
    this.resource('catalog', function () {
        this.resource('category', { path: '/category/:category_id' }, function () {
            this.resource('item', { path: '/item/:item_id' });
        });
    });
    this.route('checkout');
});

Nous allons maintenant implémenter les routes et les templates permettant de naviguer dans l’application.
Récupérer la branche step1 du projet git si vous avez manqué le précédent article.

git checkout step1

En cas de problème vous pourrez regarder la version finale de ce 3ème article dans la branche step2.

Continuons… Une ressource est une route spécialisée regroupant d’autres routes.
Naviguer dans l’application revient donc à faire le rendu des différentes routes rencontrées sur le chemin.

Préparatifs

Mise en page dans le template application

Qui dit hiérarchie de route dit hiérarchie d’IHM. Nous devons donc d’abord éditer le template application pour indiquer à Ember via un helper {{outlet}} l’emplacement où il devra insérer le rendu d’une route enfant:

<script type="text/x-handlebars" data-template-name="application">
    <header>
        <h1><a href="#">Flashy clothes store</a></h1>
        <h4>An Ember.js demo application</h4>
    </header>
    {{outlet}}
</script>

S’outiller pour débugger en cas de problème

En cas de problème dans ce tuto, pas de panique, Javascript et Ember sont maintenant bien outillés.
1er réflexe: ouvrir la console du navigateur pour chercher l’ erreur et afficher sa stacktrace. Si celà ne suffit pas d’autres solutions existent:

Logger les transitions du routeur (en dev)
var App = Ember.Application.create({
    LOG_TRANSITIONS: true
});
Utiliser Chrome et installer l’extension Ember Inspector

Lire la suite…

Categories: Java EE Tags: , , , , ,

Démarrer un projet Ember.js

Cet article est le second d’une série consacrée à la découverte d’Ember.js, framework javascript pour créer des applications web single page, que j’utilise quotidiennement avec bonheur depuis maintenant plus d’un an.

Après une introduction rapide aux concepts fondamentaux d’Ember dans le 1er article, passons à la pratique en ciblant une première application idéale : un site de commerce en ligne. La vente de vêtements flashy permettra d’exploiter une police d’icônes vectorielles sans se prendre la tête avec les illustrations graphiques (oui c’est fluo, c’est moche et je le revendique).

Obtenir le kit de démarrage rapide du projet

Cloner le projet Github:

git clone git@github.com:philcast/flashy-clothes-store.git

Autopsie du kit:

  • index.html: source html unique de notre appli single page
  • css
    • app.css: styles css de l’application
    • foundation: toolkit css avec grille responsive (version 5.x)
  • fonts
    • cloths: police d’icones vectorielles que l’on pourra utiliser en css en modifiant leur taille et leur couleur
  • js
    • app.js: source js de l’application
    • lib: les dépendances js
      Dépendance Version Description
      ember.js 1.3.2 (obligatoire)
      ember-data.js 1.0.0-beta.6 librairie de persistance de données pour Ember.js (facultatif – utilisé plus tard)
      handlebars.js 1.2.1 librairie de templating logic-less (obligatoire)
      foundation 5.x librairie js nécessaire aux plugins du toolkit css Foundation + dépendance Modernizr (facultatif)
      jquery 2.0.3 (obligatoire)
Sources du projet:

Le fichier app.js contient le minimum vital pour créer une application Ember.js. La variable App servira d’espace de nommage pour éviter de possibles conflits avec les librairies tierces.

var App = Ember.Application.create();

Le fichier index.html contient lui un script inline de type text/x-handlebars dans son body. Il s’agit du template Handlebars de l’application, qui sera compilé au runtime par Ember pour générer du html à insérer dans le DOM (avant la balise fermante du body).

<html>
...
<body>

<script type="text/x-handlebars" data-template-name="application">
    <header>
        <h1><a href="#">Flashy clothes store</a></h1>
        <h4>An Ember.js demo application</h4>
    </header>
</script>

<script src="js/lib/jquery-2.0.3.min.js"></script>
<script src="js/lib/modernizr-2.7.1.min.js"></script>
<script src="js/lib/foundation-5.0.3/foundation.min.js"></script>
<script src="js/lib/handlebars-1.2.1.js"></script>
<script src="js/lib/ember-1.3.2.js"></script>
<script src="js/app.js"></script>

</body>
</html>

Pour simplifier le tutoriel, tous les futurs templates seront regroupés dans cette même page html.

Conception des modèles

Nous concevons ici des modèles pour Ember Data, un store client permettant de s’interfacer avec des fournisseur de données tiers via des adaptateurs.

Lire la suite…

Categories: Java EE Tags: , , , , ,

A la découverte d’Ember.js

31/01/2014 Comments off

Cet article est le premier d’une série consacré à la découverte d’Ember.js,  framework javascript pour créer des applications web single page, que j’utilise quotidiennement avec bonheur depuis maintenant plus d’un an.

Ember.js se démarque en imposant une architecture et des conventions permettant de structurer un projet et de gagner en productivité.
–   : le coût d’apprentissage est un peu plus élevé que d’autres frameworks (malgré les récents efforts de documentation et de stabilisation de l’api).
–   : 67kb minifié-compressé, sans compter les dépendances js obligatoires Handlebars et JQuery.
+ : en privilégiant les conventions à la configuration, le framework nous apporte beaucoup de magie pour plus de productivité.
+ : en utilisant la même recette imposée, tous les projets se ressemblent.

Concepts de base d’Ember.js

Modèle objet riche

Javascript est un langage orienté objet à prototype. Ember.js introduit la notion de classe afin de faciliter l’héritage.

Exemple de définition d’une classe utilisateur et de son instanciation:

App.User = Ember.Object.extend({
   //propriété avec une valeur par défaut
   creationDate: new Date()
});
var cowboy = App.User.create({
   firstName: 'Clint',
   lastName: 'Eastwood'
});

Lire la suite…

Categories: Java EE Tags: , , , , ,

On aime, on partage #2

Bienvenue dans la série « On aime, on partage » d’Objet Direct ! Chaque semaine retrouvez les meilleurs articles du web issues de notre veille technologique.

Web :

Learn CSS layout

Benjamin MARRON – Agence Lyon

Pour toux ceux qui veulent approfondir ou confirmer leurs compétences dans ce domaine, ce joli tutoriel reprend les fondamentaux de ces fonctionnalités utilisées dans tout site web.

http://learnlayout.com/


Comparaison des frameworks JavaScript

Andriy Mandyev – Agence Paris

Comment choisir le framework JavaScript le plus adapté à mes besoins ? Voici la comparaison des 4 frameworks avec lesquels l’auteur a pu travailler : Angular, Backbone, CanJS et Ember. La comparaison est faite selon les critères de fonctionnalité, flexibilité, facilité d’apprentissage et documentation, productivité, communauté, écosystème, taille, performance, maturité et sécurité, avec une note allant de 1 à 5 pour chaque critère.

http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember/


Développement


TDD : une démo en 10′ ?

Clément Plantier – Agence Grenoble

Xavier Nopre à récemment présenté aux Human Talks de Grenoble une démonstration de TDD (Test Driven Development) en 10 minutes. A la suite de cette présentation, il a réalisé une vidéo afin de partager sa démonstration au plus grand nombre. Il y présente brièvement les trois cycles du TDD (écriture des tests, implémentation, refactoring) avec un exemple simple. A regarder par tout novice qui souhaite se familiariser rapidement avec le TDD.

Retrouvez la vidéo sur le blog de Xavier Nopre : TDD : une démo en 10′ ?


Tri par Interclassement Monotone

Benjamin MARRON – Agence Lyon

Cet article présente un algorithme de tri méconnu qui s’adapte particulièrement aux listes partiellement triées. Il a été élaboré au moment où les données étaient encore stockées sur des bandes magnétiques et reste toujours d’actualité pour pallier à certains cas d’utilisation du fameux QuickSort. Une belle leçon d’algorithmie.

http://blog.developpez.com/todaystip/p11899/dev/tri-par-insertion-monotonie

 

 

Agilité :


Scaling Agile At Spotify: An Interview with Henrik Kniberg

Raphaël Brugier – Agence Paris

Henrik Kniberg, l’auteur du très pratique guide “Scrum depuis les tranchées”, revient dans cet interview sur l’organisation chez Spotify.

Ces 3 dernières années, l’entreprise de streaming audio a connu une croissance exceptionnelle non seulement de ses utilisateurs mais aussi de ses développeurs, passant de 30 à 250 personnes. Une telle croissance représente un défi pour garder l’état d’esprit agile que Spotify a résolu en organisant ses équipes sous formes matricielle. Chaque équipe (squad) est dédiée à sa fonctionnalité propre, le partage de connaissance entre les équipes étant assurées par des “chapters”.


En plus de l’interview, Spotify a publié deux documents très intéressants présentant en détail cette organisation. Scaling agile at Spotify et How Spotify builds products


Retrouvez l’interview sur InfoQ : http://www.infoq.com/news/2013/04/scaling-agile-spotify-kniberg


Tribune libre :

how-can-you-program-if-youre-blind

Benoît Parmentier – Agence Paris

Plusieurs développeurs aveugles présentent leur environnement de travail. Leur aisance à travailler avec différents langages et IDE est assez impressionnante !

http://stackoverflow.com/questions/118984/how-can-you-program-if-youre-blind


9 conseils pour être totalement improductif

Benjamin MARRON – Agence Lyon

Un peu d’ironie pour appuyer là où ça fait mal. :)

http://www.presse-citron.net/9-conseils-pour-etre-totalement-improductif


Gmail : 9 ans déjà

Jean-Philippe LETARD – Agence Paris

Vous souvenez-vous du lancement de Gmail ? Il fallait se faire inviter pour pouvoir profiter de ce service de mail qui offrait un espace d’un gigaoctet… Révolutionnaire à l’époque : c’était il y a 9 ans. Souvenons-nous des nombreuses évolutions de ce service à travers une petite infographie proposé par le blog de Gmail.

http://gmailblog.blogspot.fr/2013/04/gmail-9-years-and-counting.html