Aurélia, un nouveau Framework Javascript – Part 1
Aurélia est un nouveau Framework Javascript qui va nous permettre de développer des applications web en profitant de nombreuses nouveautés (ES6, WebComponent…) et nous faciliter la vie.
Découvrons donc un peu tout ça.
Les pré-recquis
Aurélia peut être utilisé avec de nombreux outils (on pourra par exemple utiliser du RequireJS, du TypeScript pour l’écriture du JS etc…). Actuellement, l’équipe en charge d’Aurélia préconise d’utiliser jspm/systemJS. On va donc rester là-dessus 🙂 Je ferais un article version Windows/TypeScript/Visual Studio ! Mais pour l’instant c’est ArchLinux and co.
Donc pour les pré-recquis d’Aurélia on va trouver :
Node.js : Les outils que l’on va utiliser sont basés sur node.js. L’installation dépendant de votre environnement je ne vais pas préciser la procédure d’installation. Vous pouvez vous rendre sur le site officiel pour vous aider (Node.js)
Gulp : Gulp est un task runner, un peu comme Grunt. Il permet d’automatiser des tâches de développeurs comme par exemple transformer nos fichiers SASS vers du CSS ?
Pour installer gulp il suffit de passer par npm avec la commande suivante
|
1 |
npm install -g gulp |
Jspm : Jspm est un package manager pour SystemJS.
Pour installer jspm, il fait aussi passer par npm avec la commande suivante
|
1 |
npm install -g jspm |
Un éditeur du style Sublime Text sera aussi le bienvenue pour editer votre js.
Créons la structure des dossiers pour Aurélia
Concernant la structure c’est tout simple. On va juste créer un dossier du nom de l’application que l’on va réaliser et un dossier src et styles.
On va mettre à la racine les fichiers pour jspm et gulp que l’on va pouvoir retrouver respectivement ici et là
|
1 2 3 4 5 |
navigation-app --src --styles gulpfile.js package.json |
Maintenant que la structure est en place on va s’occupe de charger ce qu’il nous manque.
On va se placer au niveau de notre navigation-app dans une console et rentrer la commande suivante
|
1 |
npm install |
Cette commande installe tout ce qui se trouve dans le fichier package.json dans la section devDependencies. En gros on va ramener du gulp, du karma…etc…
|
1 |
jspm install -y |
Cette deuxième commande va installer Aurélia en se basant sur la section jspm/dependencies du fichier package.json.
Voilà la structure et les fichiers pré-recquis sont ok !
Créons notre première page
Nous allons simplement créer un fichier index.html à la racine de notre projet et y insérer le code suivant
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="jspm_packages/github/twbs/bootstrap@3.3.2/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="jspm_packages/npm/font-awesome@4.2.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="styles/styles.css"> </head> <body aurelia-app> <script src="jspm_packages/system.js"></script> <script src="config.js"></script> <script> System.baseUrl = 'dist'; System.import('aurelia-bootstrapper'); </script> </body> </html> |
Alors qu’est-ce qu’on peut voir sur cette page hum ? On s’occupe déjà des css. Jspm ramène déjà bootstrap et font-awesome pour qu’on puisse déjà avoir quelque chose à ressemble à un truc.
Du côté scripts on voit qu’on se base sur system.js. Le couple Systemjs/Jspm va nous permettre d’utiliser la syntaxe de ECMAScript6. ECMAScript est en gros le futur de Javascript. Il amène de nombreuses nouvelles choses qui vont rendre javascript un peu « mieux ». Car oui, quand on fait beaucoup de C# et qu’on regarde le javascript, on peut se dire « beurk ». Dans cette version d’ECMAScript, on va trouver les promises, la gestion des classes, de vrais arguments… etc…
Config.js contient la configuration de notre loader. Il est généré automatiquement et nous n’avons pas vraiment à nous en soucier, il faut juste savoir qu’il est là. Si vous voulez en savoir plus, je vous conseille d’aller voir le github de jspm 🙂
Alors après, qu’est ce qu’on peut voir ? Nous avons l’initialisation de notre application via l’attribut aurelia-app. Le system-import va parcourir notre dom à la recherche de cet attribut aurelia-app (qui se trouve dans le body) et faire partir le dom de notre application à partir de là.
Une fois notre attribut trouvé, aurélia va tenter d’aller chercher nos fichiers app.js et app.html pour pouvoir les charger dans le DOM.
Notre index.html est prêt mais il nous manque les fichiers app.js et app.html. On va donc s’occuper des les écrire 🙂
Aurélia se base sur un pattern MVVM. Chaque « View » possède donc un « ViewModel » associé qui va s’occuper de distribuer les données qui seront affichées dans la vue.
On va d’abord s’occuper d’écrire notre view model
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
export class Welcome{ constructor(){ this.heading = 'Welcome to the Aurelia Navigation App!'; this.firstName = 'John'; this.lastName = 'Doe'; } get fullName(){ return `${this.firstName} ${this.lastName}`; } welcome(){ alert(`Welcome, ${this.fullName}!`); } } |
Le view model est simple. On a un constructeur, une propriété (fullName) qui dépend de 2 autres propriétés (firstName et lastName) et une fonction qui fait afficher une popup.
Maintenant qu’on a un viewmodel, on va écrire la vue correspondante
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<template> <section> <h2>${heading}</h2> <form role="form" submit.delegate="welcome()"> <div class="form-group"> <label for="fn">First Name</label> <input type="text" value.bind="firstName" class="form-control" id="fn" placeholder="first name"> </div> <div class="form-group"> <label for="ln">Last Name</label> <input type="text" value.bind="lastName" class="form-control" id="ln" placeholder="last name"> </div> <div class="form-group"> <label>Full Name</label> <p class="help-block">${fullName}</p> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </section> </template> |
Dans cette vue, on voit comment est déclaré le binding dans aurélia. Concernant les input, on va utiliser l’attribut value.bind= »notre propriéré ». Pour la concaténation du nom dans le paragraphe, nous utilisons ${fullName}. Jusque là rien de bien compliqué.
Pour la validation de notre formulaire, nous allons utiliser un delegate qui va nous permettre d’appeler notre fonction welcome. La déclaration est faite sous la forme submit.delegate= »maFonction() »
Maintenant que tout est ok, il suffit de lancer gulp pour constater que notre page fonctionne.
gulp watch
Vous pouvez maintenant lancer votre navigateur et aller à l’adresse http://localhost:9000/ pour voir votre première page.
Et voilà ! Prochain article on augmente le volume des pages et sa tête de css !
ps : Vous pourrez trouver la documentation ainsi que de nombreuses informations sur le site de Aurélia à cette adresse : http://aurelia.io
Cool