Introduction à EmberJs


Technique

Développez des applications ambitieuses avec EmberJS

 

EmberJS est un framework écrit en javascript dont le but est de construire des applications en « single page application », ce qui leur permet d’évoluer en fonction des interactions des utilisateurs.

Par ailleurs, Ember utilise le pattern MVC afin de mieux séparer les couches métiers.

 

Pourquoi utiliser EmberJS

 

EmberJS a mis un peu de temps à se faire connaître et a souvent été critiqué pour son manque de stabilité mais il est aujourd’hui stable en version 1.7 .
Le framework a été conçu pour des applications web ambitieuses, ce qui est un des gros avantage du framework en compararaison de ses homologues cf (AngularJs).
Ember permet de développer des applications robustes sur le long terme en se basant sur des conventions similaires à celles du framework Ruby On Rails et oblige chaque développeur du projet à suivre les mêmes principes de développement.

Il y a bien évidemment d’autre avantages plus techniques mais commençons par les bases !

 

Les principaux concepts d’Ember

Les  classes :

User = Ember.Object.extend({

firstName: null,

lastName: null,

});

Instancier une classe :


var user = User.create({

firstName: "Dupont",

lastName: "Dupont"

});

Les computed properties :


User = Ember.Object.extend({

firstName: null,

lastName: null,

fullName: function() {

return this.get(‘firstName’) + ‘ ’  + this.get(‘lastName’);

}.property(‘firstName’,  ‘lastName’)

});

user.get(‘fullName’);

 

A noter que la valeur de fullName sera automatiquement mise à jour si firstName ou lastName sont modifiés.

Comme dit plus haut Ember est un Framework MVC (Model View Controller). Nous retrouvons donc ses principes.

Mais pour construire une application web avec Ember il est important de comprendre sa structure.

La première chose à faire est de créer notre Application.

App = Ember.Application.create(); 

Ensuite il faut définir les routes. Dans notre exemple nous allons créer une route pour lister des utilisateurs.

 

App.Router.map(function() {

this.resource('users’);

}); 

 

Nous venons de définir une ressource users qui aura pour effet de créer une route UsersRoute accessible via l’url /users.

Notez bien le pluriel sur le nom de notre route. Le nommage est très important car le fait de définir une route Users sous entend que nous allons gérer une liste d’utilisateurs.

 

Par convention Ember aura donc besoin :

  • d’une route qui portera le nom UsersRoute
  • d’un controller UsersController de type ArrayController
  • d’un template users pour l’affichage

 

Le code de ces trois éléments est généré en mémoire par Ember, c’est donc à vous de créer les fichiers correspondants pour ajouter votre propre logique.

 

Commençons par notre fichier de route :


App.UsersRoute = Ember.Route.extend({

model: function() {

return User.find();

}

}); 

Dans Ember c’est notre fichier de route qui est responsable de récupérer nos données et non notre controller.

Les données vont être accessibles dans notre controller :


App.UsersController = Ember.ArrayController.extend({

users: Ember.computed.alias("controllers.users")

 

});

et enfin notre template :


<section class="users">

{{#each user in users}}

{{user.firstName}}
{{user.lastName}}

{{/each}}

</section>

Chacune de vos applications devra suivre ces concepts de base pour créer des pages.

EmberJs n’est pas un Framework simple à appréhender, mais une fois compris il est possible de développer des applications puissantes et maintenables.
Si vous souhaitez en apprendre plus nous vous invitons à visiter les sites suivants:
– La documentation officiel de EmberJs
– Introduction à ember-data

Laisser un commentaire