Archive

Articles taggués ‘js’

Créez vos tâches personnalisées avec Grunt

Introduction

Dans les deux précédents articles de cette série, nous avons effectué un tour théorique de Grunt et nous avons ensuite mis en place un workflow personnalisé du build d’un projet en utilisant des plugins (ou tâches) Grunt déjà existants. Nous allons maintenant aller plus loin dans la prise en main de Grunt et créer nos propres tâches personnalisées !

Attention ! Dans l’article précédent, nous avions créé des tâches (notamment la tâche build), mais celles-ci n’étaient alors qu’un alias pour exécuter plusieurs autres tâches. Ce que je vous propose à présent, c’est de pouvoir mettre en place de nouvelles tâches lorsque vous ne trouvez pas de plugin pouvant répondre à votre besoin. Comme fil rouge de cet article, nous allons réaliser une tâche Grunt qui servira à définir des variables de configuration suivant l’environnement sur lequel nous souhaitons livrer notre projet.

Imaginons en effet que nous ayons deux environnements sur lesquels nous souhaitons livrer, par exemple un environnement de pré-production et un environnement de production. Imaginons que, pour une raison quelconque, l’adresse courante ait besoin d’être renseignée dans un fichier de configuration. Comme les différents environnements sont situés à des adresses différentes, il peut être intéressant d’automatiser le remplacement de ces paramètres dans une tâche Grunt.

A travers cet exemple, nous allons voir deux façons de déclarer des tâches Grunt, une simple puis une plus évoluée. Lire la suite…

Categories: Web Tags: , , ,

Configurer Grunt pour votre premier build en javascript

Introduction

Dans le précédent article, je présentais Grunt d’un point de vue fonctionnel, sans rentrer dans les détails techniques. Ce second article va donc s’intéresser plus directement à l’installation et à la configuration de Grunt pour parvenir à réaliser ses tâches et workflows personnalisés afin de faciliter au mieux le développement du projet. Plus tard, un troisième article vous apprendra comment définir vos propres tâches complexes.

Pour des raisons pratiques, nous allons utiliser comme fil rouge la mise en place des workflows d’une application web présente sous la forme d’une unique page index.html avec du javascript et du CSS.

 

Mise en place

Prérequis

Pour ceux qui n’ont jamais eu l’occasion de travailler avec Node.js / npm, nous allons voir comment les installer. Le mieux serait de l’installer en téléchargeant la dernière version sur le site officiel. Cependant, vous pouvez également l’installer rapidement via votre gestionnaire de paquets si vous être sous un OS Debian-like (pour les autres, voir ce tutoriel), même s’il ne s’agira pas forcément de la version la plus à jour :

Le package npm sera installé automatiquement avec. Il s’agit du gestionnaire de paquets de Node.js. Il va nous permettre d’installer très simplement des tâches Grunt qui sont pour la quasi-totalité référencées sur npm. Il faut savoir qu’il existe deux façons d’installer un package :

  • en global avec npm install -g nomDuPackage, ce qui le rend accessible partout sur votre ordinateur
  • en local avec npm install nomDuPackage, ce qui va l’installer dans un sous-dossier node_modules.

Pour exécuter un fichier javascript avec Node.js, il suffit d’utiliser la commande node monFichier.js.

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