Julien Kosinski





Javascript et angular

Catégorie : Non classé · par jan 4th, 2015

Javascript est et restera encore un certain temps une technologie particulièrement utilisée mais surtout particulièrement puissante. J’ai alors eu l’opportunité au sein de la licence Développeur Web et Web mobile de me pencher sur la mise en place d’une application basée sur Angular. Angular est un framework qui permet de gérer l’ensemble d’une application côté front. En d’autres termes, on se rend vite compte que la seule chose qu’Angular ne va pas pouvoir faire c’est gérer les données stockées en base de donnée. Rendre disponible ces données et les ramener jusqu’à Angular c’est le travail de la couche back-end d’une application. En l’occurrence, dans des cas simple comme celui sur lequel j’ai travaillé il n’y en a même pas besoin car la donnée est générée à la volée mais rein n’est stocké.

Au cours de se projet un des points réellement intéressant sur lequel j’ai pu me pencher au delà de la mise en place de la technologie en elle-même sur laquelle on a toute la documentation que l’on souhaite sur internet (bien évidemment ce n’est jamais simple malgré tout) c’est que j’ai utilisé une base applicative à l’aide de Yeoman. Il s’agit vraiment de simplifier la vie, c’est un outil de scaffolding. En d’autre terme, on choisi un template d’application et il nous génère une application vide et il ne nous reste plus qu’a l’utiliser. Cela à pour avantage d’accélérer la mise en place de l’environnement et de se poser moins de questions une fois que l’on maîtrise son modèle.
Par exemple, j’utilise grunt et yeoman-angular me fournit directement toutes les tâches dont j’ai besoin tel que la minification, la concaténation, même le live-relod, etc…

Evidemment un des points important c’est l’adaptation à ce scaffold. Et, concernant ce point, voici une anecdote, Yeoman utilise grunt-usemin. Yeoman est configuré pour lancer la tâche qui lui est associée sous le nom useminPrepare, elle se lance notamment lorsque l’on exécute la tâche grunt enregistrée sous le nom build (crée les fichier de notre environnement de production) ou serve (lance notre serveur pour l’application dotée d’un live-reload). Cette tâche vient lire le contenu entre commentaire dans l’index.html.
Nos script se retrouvent concaténée et minifiée. On peut utiliser les commentaires pour définir les différents chemins de fichiers.
Cidessous un exemple pour générer mon script angular concaténé et minifié

<!-- build:js({.tmp,src}) scripts/scripts.js -->
    <!-- Mes scripts à concaténés sont placés ici. -->
<!-- endbuild -->

L’instruction entre parenthèse n’est utile que lorsque l’on utilise du coffeescript. Car sa compilation se fait avant useminPrepare et les fichiers compilés se trouvent dans le dossier .tmp. Il faut donc dire à Yeoman de regarder dans ce dossier en priorité si il existe en tant que source pour sa minification et sa concaténation.

 

PARTAGER :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Chargement...