Aurelia, premiers pas

Il semblerait que tout nouveau framework javascript qui sorte se doive d’avoir le plus de dĂ©pendances et d’outils possibles, ce qui fait que pour Ă©crire un simple “Hello World!”, vous allez souvent rĂ©cupĂ©rer plusieurs centaines de megas de fichiers et autres outils pour minifier, tester, dĂ©ployer, 
 AprĂšs, il faut juste comprendre comment cela fonctionne (ou pourquoi cela ne fonctionne pas), et si vous ne connaissez pas Grunt, Gulp, npm, Less, Sass, 
 vous ne serez pas capable d’écrire et de dĂ©marrer votre simple “Hello World!”. Heureusement, il y a des gens sympas qui “fabriquent” des “quicks tarters”. C’est dĂ©jĂ  le cas pour Angular2 en ce moment. Je vous conseille ces 2 lĂ :

Bon, revenons Ă  nos moutons:

Ces derniers jour, j’ai voulu commencer Ă  qualifier Aurelia (globalement, Aurelia a la mĂȘme vocation qu’Angular: fournir tous les outils nĂ©cessaires pour faire une webapp). Je trouve que le tutorial de dĂ©part fait installer Ă©normĂ©ment de choses inutiles dans le cadre d’un apprentissage de dĂ©part. Je vous ai donc crĂ©Ă© un “quick starter” pour Aurelia, que vous trouverez ici https://github.com/k33g/aurelia-discovery pour dĂ©marrer rapidement.

Installation

git clone https://github.com/k33g/aurelia-discovery.git
npm install
jspm install

DĂ©marrage

C’est une application Express qui fait office de serveur http:

cd aurelia-discovery
node app.js

Structure du “quick starter”

La structure de notre projet ressemble Ă  ceci:

aurelia-discovery/
├── public/ 
|   ├── css/   
|   |   └─── main.css/
|   ├── index.html     
|   ├── app.html 
|   ├── app.js          
|   └── config.js (configuration pour jspm - ne pas toucher)
├── app.js
├── config.js (configuration du serveur http)

Ouvrir index.html

index.htm est notre point de dĂ©part, il n’y a pas grand chose dedans, tout se jouera dans app.html et app.js.

<html>
<head>
  <meta charset="UTF-8">
  <title>Hello from Aurelia</title>
  <link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<body aurelia-app>

  <script src="jspm_packages/system.js"></script>
  <script src="config.js"></script>
  <script>
    System.import("aurelia-bootstrapper");
  </script>
</body>
</html>

Donc ne touchez à rien. Remarquez l’attribut du tag body: <body aurelia-app> indispensable pour “expliquer” à Aurelia que votre application commence ici.

Ouvrir app.html et app.js

app.html et app.js représentent le coeur de votre application (le composant principal).

app.html

<template>
  <h1>${message}</h1>
</template>

app.js

export class App {

  constructor() {
    this.message = "...";
  }
  activate() {
    this.message = "Playing with Aurelia and Express";
  }
}

Donc:

  • Un composant Aurelia se compose donc de 2 fichiers, un avec votre template html et l’autre avec le code javascript associĂ© (mon-composant.html et mon-composant.js)
  • Une application Aurelia commence par un composant principal qui va contenir dans son template le contenu de <body> (souvenez vous de <body aurelia-app>)
  • Le composant “Application” possĂšde une mĂ©thode activate qui dĂ©clenchĂ©e une fois le document chargĂ© dans le navigateur. Donc dans notre cas ${message}sera remplacĂ© par "Playing with Aurelia and Express" au moment de l’activation.
  • Dans le code javascript, vous faites rĂ©fĂ©rence aux variables dĂ©crites dans le template, en les utilisant comme une propriĂ©tĂ© du composant (donc pour ${message} nous aurons this.message)

Vous pouvez tester:

Ouvrez http://localhost:8080/ avec votre navigateur (ce sera un peu long car tout est fait dynamiquement)

Il est temps maintenant de faire notre 1er composant (custom component)

1er composant

J’aimerais pouvoir faire un composant de type <hello-world mytext="yo"></hello-world>, que je pourrais utiliser comme un tag html de base et qui afficherait le contenu de mon attribut mytext.

  • CrĂ©ez un rĂ©pertoire public/components
  • CrĂ©ez un fichier hello-world.html (dans components)
  • CrĂ©ez un fichier hello-world.js (dans components)

DĂ©claration du composant dans app.html

Nous allons modifier le code de app.html pour référencer notre futur composant:

app.html

<template>
  <require from='./components/hello-world'></require>
  
  <h1>${message}</h1>
  
  <hello-world mytext="yo"></hello-world>
  <hello-world mytext="hi"></hello-world>
  <hello-world mytext="hello"></hello-world>
  
</template>
  • Vous notez donc l’utilisation du tag <require from='...'></require> pour rĂ©fĂ©rencer un composant
  • Et nous allons utiliser 3 fois notre composant

Ecriture de notre composant

Commençons par le plus simple:

hello-world.html

<template>
  <h2>${helloWorldTitle}</h2>
</template>

Et ensuite:

hello-world.js

import {inject} from 'aurelia-framework';

@inject(Element)
export class HelloWorld {
  constructor(element) {
    this.helloWorldTitle = "Hello World: " + element.getAttribute("mytext");
  }

}

Donc:

  • import {inject} from 'aurelia-framework'; nous permet d’utiliser le “decorateur” @inject(Element) pour injecter element Ă  notre constructeur et avoir accĂšs ainsi aux propriĂ©tĂ©s des Ă©lĂ©ments du composant
  • ainsi, pour rĂ©cupĂ©rer la valeur de l’élĂ©ment, nous pouvons maintenant utiliser element.getAttribute("mytext")

Et ça se teste:

Faites un “refresh” dans votre navigateur, et vous obtiendrez ceci:

Un 2Ăšme composant pour la route

Je voudrais un composant qui m’affiche une liste Ă  partir d’un tableau de valeurs, et pouvoir ajouter un Ă©lĂ©ment Ă  la liste lorsque je clique sur un lien:

  • CrĂ©ez un fichier my-list.html (dans components)
  • CrĂ©ez un fichier my-list.js (dans components)

my-list.html

<template>

  <ul>
    <li repeat.for="item of items">
      <template replaceable>
        ${item}
      </template>
    </li>
  </ul>

  <a href="# " click.trigger="updateList()">updateList</a>

</template>
  • Pour parcourir une liste d’items, utiliser repeat.for
  • l’item est lui mĂȘme “rendu” dans un template : <template replaceable>
  • capturer un Ă©vĂšnement : utiliser le mot clĂ© trigger, dans notre cas click.trigger
  • la mĂ©thode updateList() est une mĂ©thode du composant dĂ©finie dans my-list.js

my-list.js

export class MyList {
  constructor() {
    this.items = ["Clark Kent", "Peter Parker", "Bob Morane"];
  }
  updateList() {
    this.items.push("John Doe")
  }
}

Pas grand chose Ă  dire, le code parle de lui mĂȘme.

Pensez à déclarer et inclure le composant dans app.html:

app.html

<template>
  <require from='./components/hello-world'></require>
  <require from='./components/my-list'></require>

  <h1>${message}</h1>

  <hello-world mytext="yo"></hello-world>
  <hello-world mytext="hi"></hello-world>
  <hello-world mytext="hello"></hello-world>

  <hr>

  <my-list></my-list>

</template>

Testez Ă  nouveau:

Faites un “refresh” dans votre navigateur, et vous obtiendrez ceci (cliquez pour tester):

Voilà. C’est tout simple. A suivre.

Ressources

blog comments powered by Disqus

Related posts