Archive

Articles taggués ‘ember’

On aime, on partage #44

Bienvenue dans la série « On aime, on partage » de Viseo Technologies ! Chaque semaine retrouvez les meilleurs articles du web issus de notre veille technologique.

E-learning

MOOC Effectuation

La 3ème édition du MOOC Effectuation par l’EMLyon Business School démarre la semaine prochaine, avis aux intrapreneurs.

Guide for Technical Development par Google Education

Ce guide vise les étudiants, mais je pense que tout professionnel de l’IT devrait s’y attarder (encore plus celui qui voudrait rejoindre l’un des GAFA).

Agilité

Partage de représentations et ritualisation au sein d’une équipe de développement logiciel agile

Matti Schneider (connu en principe de ceux qui ont participé à l’une des deux dernières éditions d’Agile France) a récemment publié sa thèse.

iObeya : Digital Visual Management

iObeya® est un logiciel unique édité depuis 2 ans par KAP IT qui révolutionne “la réunion de post-it” à travers le monde. Il permet aux équipes distantes de pratiquer leur management visuel et est le plus souvent adopté dans le contexte du Lean Management.

Big Data

L’Equipe explore la Data Révolution

Lire la suite…

Applications web grand public en JavaScript : REX sur Ember

Voilà maintenant 2 ans que j’utilise Ember pour les développements front d’une application web grand public. Ember fait partie des pionniers des frameworks basés sur le Design Pattern model-view-controller (MVC), faits pour gérer complètement l’interface utilisateur d’une application en Javascript (JS) et sans rechargement. Il sera donc question dans ce billet, de vous faire un retour d’expérience sur l’intégration d’un framework MVC Javascript next gen dans un projet d’entreprise.

Lire la suite…

Categories: Web Tags: , , ,

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: , , , , ,