Démarrer un projet Aurelia

Il existe des tas de façons de démarrer un projet Aurelia. Historiquement, la façon la plus simple pendant toute la phase de beta du projet était de copier le projet skeleton-navigation qui proposait quatre versions d'une application prête à l'emploi avec quelques routes et quelques composants. Quatre versions car il était déjà possible de coder avec TypeScript ou ESNext, mais aussi en utilisant JSPM ou Webpack. Aujourd'hui, un nouvel outil est arrivé : aurelia-cli. À terme, il s'agira de l'outil officiellement supporté même s'il reste possible d'utiliser les autres méthodes existantes. Il fonctionne avec requirejs mais il sera possible dans le futur de choisir l'outil de son choix. Nous allons voir comment il est possible de créer un nouveau projet avec aurelia-cli.

Installation

Pour commencer, il faut installer aurelia-cli à l'aide de npm. Je pars du principe que vous avez déjà installé nodejs et npm sur votre machine, sinon, nous partons sur de très mauvaises bases tous les deux.

$ npm install -g aurelia-cli

Une fois fait, vous obtenez une nouvelle commande dans votre terminal : au. Cette commande sera capable de créer un nouveau projet, puis ensuite, d'exécuter des tâches.

Créons donc notre nouvelle application !

Nouveau projet

Nous allons utiliser la commande :

$ au new

À laquelle vous pourrez adjoindre l'attribut --here si vous voulez créer l'application dans le dossier courant.

La commande va vous poser quelques questions auxquelles vous pourrez répondre selon vos besoins. Elle vous demandera d'abord le nom du projet, puis le langage que vous voulez utiliser entre TypeScript et ESNext, mais aussi si vous voulez utiliser un pré-processeur css. Attardons nous un peu sur la différence entre les deux languages.

ESNext

ESNext, c'est la version la plus récente de ECMAScript, autrement dit, Javascript. Actuellement en version 2015, grâce à Babel, il nous est possible d'écrire du code en ES2016 avant que ça soit cool. Vous pourrez donc utiliser des classes, des fonctions fléchées, des fonctions asynchrones et tout pleins de choses qui vont vous faire regretter d'avoir fait du javascript avant. Son avantage c'est que c'est le standard et qu'il est donc compatible avec tout, en grande partie avec NodeJS et les navigateurs les plus récents. Son point faible, c'est qu'il est faiblement typé. Ce qui nous emmène à TypeScript.

TypeScript

TypeScript est une extension de ESNext. C'est donc bien du javascript mais avec des fonctionnalités supplémentaires optionnelles. Ça veut dire qu'on peut choisir d'utiliser TypeScript sans jamais utiliser la moindre de ses caractéristiques. Ça n'a pas grand intérêt, mais c'est bon de le faire remarquer par rapport à d'autres langages qui compilent du javascript comme coffeescript ou dart, mais qui nécessitent d'apprendre un tout nouveau langage. Le principale avantage du Typescript est d'ajouter un typage fort permettant de vérifier qu'on n'a pas codé n'importe quoi lors de la compilation.

Démarrage

Notre projet est prêt à démarrer. C'est le moment !

au run --watch  

run est la commande qui lance le serveur. Avec l'attribut --watch, on lui indique de recharger automatiquement l'application lors qu'on édite un fichier. Vous pouvez vous rendre sur http://localhost:9000 et admirer ce magnifique "Hello World" qui n'attend que d'être modifié par vos soins.

Structure du projet

Jetons un œil aux différents dossiers que la commande nous a installé.

/aurelia_project

Ce premier dossier contient toutes les informations relatives au projet. Il sera important de l'éditer au fil de la vie de votre projet. Les fichiers les plus importants sont :

  • aurelia.json qui contient toutes les informations relative au projet et ses dépendances. Nous en reparlerons longuement dans un prochain article.
  • les fichiers contenus dans le dossier environments. Ceux-ci vous seront très utile pour paramétrer des valeurs spécifique à un environnement. L'objet que contient le fichier correspondant à l'environnement demandé sera copié dans src/environement.js qui pourra donc être importé et lu n'importe où dans votre application. Mais nous aurons l'occasion d'en reparler aussi plus tard.

/scripts

Ce dossier ne doit pas être touché, sauf dans quelques rares occasion. C'est ici que les fichiers seront compilés et construits. À part les fichiers installés par défaut (require.js et text.js), vous avez tout intérêt à mettre tout ses fichiers dans votre .gitignore puisqu'ils seront reconstruits à chaque fois que vous lancerez votre script de développement ou de déploiement.

/src

LE dossier que tout le monde attend. Il contient le code source de votre application.

Un premier fichier, le plus important, main.js. Ici, nous configurerons tout ce qu'il faut pour démarrer correctement notre application : plugins, fonctionnalités, paramètres, etc.

app.js sera le premier custom element qui sera instancié dans votre page web. C'est donc là que tout démarre. Il est accompagné d'un fichier app.html comme quasiment tous les custom element comme nous le verrons dans un article dédié.

Puis nous avons un dossier resources qui nous sera bien utile pour ranger des custom elements, des custom attributes, des value converters et autres joyeusetés qui auront pour vocation d'être utilisés n'importe où dans votre application.

/test

Et pour finir, les tests. Les tests fonctionnent avec Karma et Jasmine, un couple assez classique si vous avez l'habitude de faire des tests unitaires en javascript.

Quelques commandes

La particularité de aurelia-cli est qu'il est capable de lancer très facilement des commandes personnalisées. En fait, le mot clé que vous placerez à sa suite correspondra à un script éponyme rangé dans le dossier aurelia_project/tasks. Ainsi, la commande au pwet cherchera à lancer le script aurelia_project/tasks/pwet.js s'il existe. C'est très pratique pour créer vos propres commandes. Mais il faut d'abord découvrir les commandes dont vous disposez par défaut.

  • au run. Cette commande lance donc un serveur de développement après avoir compilé votre code source. Avec l'attribut --watch, le navigateur sera rechargé automatiquement, et avec l'attribut --env <env>, vous pourrez changer d'environnement. Ainsi, si vous voulez voir comment fonctionnera votre site en prod, vous pourrez lancer sur votre machine locale : au run --env prod.
  • au test : lance les tests. Avec l'attribut --watch, le serveur de test reste ouvert et se relance à chaque changement de fichier.
  • au build : permet de reconstruire le projet. Pratique si vous voulez faire un déploiement et que vous avez donc besoin de reconstuire le projet avec l'environnement voulu. Par exemple, si je veux déployer en staging, je lancerais d'abord au build --env stage.

Nous voilà désormais prêt à coder notre première application Aurelia !

Hadrien Lanneau

Développeur de guichet, expert ESNext pile complète

Toulouse, France https://hadrien.eu

Subscribe to Aurelia Framework pour les frenchies

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!