• Entwicklung
  • Methoden
  • Programmiersprachen
• Betrieb
  • Datenbanken
  • Server
  • Sicherheit
  • Speicher
  • Netzwerke
  • Virtualisierung
  • Verfügbarkeit
  • Künstliche Intelligenz
• Management und Recht
  • Projektmanagement
  • Digitalisierung
  • IT-Recht
  • IT-Selbständige
• News
• Termine
• IT-Jobs
• IT-Bücher

☰

• Entwicklung
• Betrieb
• Management und Recht
• News
• IT-Jobs
• IT-Bücher
• Newsletter

Katharina Bähr 28. August 2018

Aurelia – ein standard-basiertes JavaScript-Single-Page-Application-Framework

Web Components

Wie zuvor erwähnt, basiert Aurelia zu großen Teilen auf Web Components, einem Verbund von den vier Web-API-Spezifikationen Custom Elements, HTML Imports, HMTL Templates und Shadow DOM [8]. Diese ermöglichen es, eigene und in sich gekapselte HTML-Tags zu erstellen, die in Webanwendungen beliebig wiederverwendet werden können. 

Ein gutes Beispiel, warum Web Components hilfreich sind, ist das <input type="date">-Element, welches eine UI und Funktionalität zum Auswählen eines Datums bereitstellt. Doch da sich dieses in jedem Browser anders verhält und nicht erweiterbar ist, gibt es Implementierungen von verschiedenen Anbietern wie beispielsweise datepicker von jQuery [9]. Diese bringen aber wiederum oft das Problem mit sich, dass einiges an Code eingebunden werden muss, und der Code sowie das Styling nicht isoliert vom Rest der Anwendung sind. Web Components bieten hierfür die Lösung und versprechen native browser-unabhängige, konfigurierbare Komponenten, welche ihre Umgebung nicht beeinflussen.

Obwohl die Spezifikationen erst vor kurzem fertiggestellt wurden, und diese auch noch nicht von allen Browsern unterstützt werden [10], hat Aurelia auf diesen aufgebaut, fehlende Implementierungen bereitgestellt und so den Browser-Support sichergestellt. In Zukunft wird es dann möglich sein, mit einem Werkzeug von Aurelia Komponenten spezifikationskonform zu exportieren und auch in anderen Webanwendungen zu verwenden [11].

Wo kommt Aurelia her?

Der Visionär und Leiter des Aurelia-Projektes [12] heißt Rob Eisenberg [13] und hat bereits an verschiedenen Frameworks mitgearbeitet. Vor der Entwicklung von Aurelia war er Mitglied im Angular 2-Team und verließ dieses, nachdem es Unstimmigkeiten bezüglich des Framework-Designs gegeben hatte.

Aurelia ist Open Source (MIT License [14]) und wird von Robs Firma Blue Spire [15] entwickelt. Blue Spire beschäftigt sich hauptsächlich mit Software und bietet Beratung, Schulungen und kommerziellen Support an. Bei der Entwicklung nutzt Rob seine Erfahrungen aus der Framework-Entwicklung, um ein standard-basiertes Framework mit einer niedrigen Lernkurve zu entwickeln. Dabei legt er großen Wert auf Kompatibilität zu anderen Frameworks und Stabilität der APIs. Es gibt ein aktives Kernteam, umgeben von einer kleinen aber aktiven Community. Aus meiner Erfahrung hat sich dies bisher nicht nachteilig ausgewirkt.

Quickstart

Um schnell mit Aurelia loslegen zu können, gibt es das Aurelia CLI. Dieses bietet bereits Unterstützung für verschiedene Build-Werkzeuge, CSS-Präprozessoren und Test-Bibliotheken. So ist es einfach möglich, eine Anwendung beispielsweise mit TypeScript, Webpack, SASS, Karma und PhantomJS zu generieren [16].

Alle benötigten Bibliotheken werden über npm (und je nach Konfiguration via jspm) per Kommandozeile installiert [17]. Über Webpack oder Gulp kann ein Webserver gestartet sowie alle weiteren benötigten Aufgaben wie das Transpilieren von TypeScript und SASS oder das Ausführen von Tests erledigt werden.

Entwicklung mit Aurelia in der Praxis

Datenmodellierung

Damit wir neue ToDos anlegen können, erstellen wir eine Model-Klasse todo-model.ts im Ordner todo.

todo/todo-model.ts:

export class TodoModel {
    constructor(private description: string, private deadline: string, private priority: string) {
    }
}

Alle Variablen die wir im Konstruktor mit private bezeichnen, werden automatisch als Klassenvariable gesetzt. Dies ist ein Feature von TypeScript. Unsere ToDos besitzen nun eine Beschreibung, ein Erledigungsdatum und eine Dringlichkeit und können durch den constructor erzeugt werden.

Für die zweite Seite legen wir nun die Add-Komponente im Order todo an, in welcher wir später neue ToDos in Form unseres TodoModel erzeugen.

todo/add.ts:

export class Add {
}

In der todo/add.html definieren wir ein Formular zum Anlegen von neuen ToDos.

todo/add.html:

<template>
    <h3>Todos</h3>
    <h4>Add new todo</h4>
    <form>
        <input type="text">
        <input type="date">
        <select>
            <option>High</option>
            <option>Medium</option>
            <option>Low</option>
        </select>
        <button type="submit">Add todo</button>
    </form>
</template>

Wir haben zwei Input-Felder für die Beschreibung und das Erledigungsdatum des anzulegenden ToDos, sowie eine Selectbox für das Auswählen der Dringlichkeit hinzugefügt. Hierbei handelt es sich bisher noch um einfaches HTML. Um unsere ToDos zu speichern, erstellen wir einen TodoService. Dieser stellt eine Liste von TodoModel-Objekten bereit.

todo/todo-service.ts:

import { TodoModel } from "./todo-model";

export class TodoService {
    todos: Array<TodoModel> = [];
    constructor() {
    }
}

Diesen Service wollen wir in unser todo/todo.ts und der todo/add.ts verwenden. Mithilfe des autoinject-Decorators können wir uns den TodoService per Dependency Injection in unsere Klassen hineinreichen lassen [22]. Damit dies funktioniert, müssen wir unsere Klassen mit @autoinject() auszeichnen und den Service im constructor hinzufügen.
 
todo/add.ts:

import { TodoService } from "./todo-service";
import { autoinject } from "aurelia-framework";

@autoinject()
export class Add {
    constructor(private todoService: TodoService) {
    }
}

Der autoinject-Decorator ist TypeScript-spezifisch. Ohne TypeScript müssten wir @inject(TodoService) schreiben und jeden verwendeten Service explizit nennen. In Aurelia sind Services nichts weiter als exportierte Klassen und standardmäßig Singletons. Bei Bedarf kann dies jedoch mithilfe des Dependency-Injection-Containers umkonfiguriert werden [23].

In der todo/todo.html fügen wir noch einen Link hinzu und bieten hiermit die Möglichkeit, auf die Add-Komponente zu navigieren.

todo/todo.html:

<template>
    <h3>Todos</h3>
    <a route-href="route: add-todo">Add new todo</a>
</template>

Wir identifizieren die Route, auf die wir verlinken wollen, durch den Namen add-todo, den wir zuvor in der configureRouter-Funktion vergeben haben.

Daten- und Event-Handling

Als Nächstes schauen wir uns an, wie Views mit ViewModel verknüpft und Daten zwischen diesen ausgetauscht werden können. Hierfür verwenden wir Data und Event Binding. Die Syntax von Aurelias Data Binding erinnert dabei ein wenig an die von Knockout [24]. Statt eines data-bind wird allerdings der Attribut- oder Event-Name gefolgt von einem Punkt und einer Binding Expression verwendet.

Nun verbinden wir das Formular in der todo/add.html mit dem ViewModel.

todo/add.html:

<template>
    <h3>Todos</h3>
    <h4>Add new todo</h4>
    <form submit.delegate="addTodo()">
        <input type="text" value.bind="description">
        <input type="date" value.bind="deadline">
        <select value.bind="priority">
            <option>High</option>
            <option>Medium</option>
            <option>Low</option>
        </select>
        <button type="submit">Add todo</button>
    </form>
</template>

Über den Eventhandler submit.delegate="addTodo()" haben wir uns auf das Form-Event onSubmit abonniert und delegieren (mit dem binding .delegate) das Abhandeln des Events an eine addTodo()-Funktion im ViewModel. Bei den Inputfeldern und der Selectbox binden wir mit dem Schlüsselwort .bind den Wert (value) an eine entsprechende Variable im ViewModel.

Wird die Binding Expression .bind verwendet, wird der passende Binding-Mode automatisch von Aurelia ausgewählt [25]. Meistens ist dies .one-way. Nur für bestimmte Elemente, unter anderem Formelemente, wählt Aurelia ein .two-way-binding. Möchte man den Binding-Mode selbst wählen, verwendet man stattdessen ein binding explizit und schreibt beispielsweise value.one-way.

In der todo/add.ts fügen wir die referenzierten Variablen und Funktion addTodo() hinzu.

todo/add.ts:

import { TodoModel } from "./todo-model";

export class Add {

    description: string;
    priority: string;
    deadline: Date;

    constructor(private todoService: TodoService) {
        this.description = "";
        this.priority = "Medium";
        /*Small hack to bring the date into a format
        the input type="date" element can handle*/
        this.deadline = new Date().toISOString().substring(0, 10);
    }

    addTodo() {
        const todo = new TodoModel(this.description, this.deadline, this.priority);
        this.todoService.todos.push(todo);
    }
}

In der addTodo()-Funktion erstellen wir ein neues TodoModel und fügen es der Liste von ToDos in unserem TodoService hinzu. Nachdem wir ein ToDo erstellt haben, fügen wir noch einen Redirect-Link ein, um nach dem Erstellen eines neuen ToDos direkt zur Übersicht aller ToDos zurückzukehren.

todo/add.ts:

import { Router } from "aurelia-router";
...
...
constructor(private todoService: TodoService, private router: Router) {
    ...
}
...
addTodo() {
    ...
    this.router.navigateToRoute("todo-list");
}

Unsere Komponente zum Hinzufügen von ToDos ist hiermit komplett. Wir können neue ToDos über ein Formular anlegen und speichern diese im TodoService. Als Nächstes werden wir diese gespeicherten ToDos in einer Liste anzeigen.

Für die Ansicht der ToDos fügen wir in der todo/todo.html eine HTML-Liste hinzu, welche über alle vorhandenen ToDos iteriert und diese darstellt.

todo/todo.html:

<template>
    <h3>Todos</h3>
    <a route-href="route: add-todo">Add new todo</a>
    <ul>
        <li repeat.for="todo of todos">
            ${todo.description} - ${todo.deadline} - ${todo.priority}
        </li>
    </ul>
</template>

Zum Iterieren über die Liste verwenden wir repeat.for, was für Arrays, Objekte und andere iterierbare Datentypen wie Map und Set angewandt werden kann. Um auf die Liste von ToDos zugreifen zu können, legen wir in der todo/todo.ts eine Getter-Methode an, welcher uns die ToDos aus dem TodoService liefert.

todo/todo.ts:

...
get todos() {
    return this.todoService.todos;
}
...

Bei Getter-Methoden erkennt das Binding-System automatisch, wenn es sich wie bei todos() nicht um eine Variable handelt, sondern um einen Wert, der von einer Funktion berechnet wird. Um Änderungen an diesem Wert mitzubekommen, wird der Wert periodisch auf Änderungen überprüft, das sogenannte "dirty checking". Um dirty checking zu vermeiden, kann der @computedProperties(todoService.todos)-Decorator verwendet werden, um dem Binding-System mitzuteilen, dass ein Listener für todoService.todo aufgesetzt werden soll.

Custom Web Components

Wir können nun in unserer Anwendung ToDos anzeigen und neue erstellen. Um ToDos auch als erledigt markieren zu können, erstellen wir eine eigene Komponente. Diese wird das HTML für eine ToDo kapseln und den Zustand, ob sie erledigt wurde, speichern. Wir ersetzen dann einen Teil des HTML-Markup in der todo/todo.html mit der Komponente.

Unter resources/elements/todo-item.ts erstellen wir unser TodoItemCustomElement, welches anschließend als <todo-item></todo-item> im HTML verwendet werden kann. Der Tag-Name ergibt sich dabei durch den Namen der Klasse. An diesen CustomElement zu hängen, ist eine optionale Konvention, um hervorzuheben, worum es sich bei dieser Klasse handelt.

resources/elements/todo-item.ts:

import { bindable } from "aurelia-framework";

export class TodoItemCustomElement {
    @bindable item;

    constructor() {
        this.item = {};
    }

    done() {
        this.item.done = true;
    }
}

Wir übergeben der Komponente ein TodoModel, um es im HTML anzuzeigen und dessen Zustand zu manipulieren. Hierfür verwenden wir @bindable item, wodurch wir definieren, dass Daten über das Attribut "item", also <todo-item item.bind="">, in die Komponente hereingereicht werden können.
 
Im HTML zeigen wir die Datenfelder des TodoModels an und definieren einen Button, mit dem wir das ToDo auf erledigt setzen.

resources/elements/todo-item.html:

<template>
    ${item.description} - ${item.deadline} - ${item.priority}
    <button click.delegate="done()">Done</button>
</template>

Sobald der Button geklickt und das onclick-Event auslöst, wird die done()-Funktion auf dem ViewModel ausgeführt und das ToDo als erledigt markiert. In der todo/todo.html ersetzen wir nun das Anzeigen der ToDo-Details durch die neue TodoItem-Komponente. Hierfür müssen wir die Komponente zuerst mit dem <require>-Tag referenzieren.

todo/todo.html:

<template>
    <require from="resources/elements/todo-item"></require>
    ...
     <ul>
        <li repeat.for="todo of todos">
            <todo-item item.bind="todo"></todo-item>
        </li>
    </ul>
    ...

Über das Attribut "item" binden wir das jeweilige Todo an das neue <todo-item>. Bei Custom Elements wird für .bind standardmäßig ein .two-way-binding verwendet. Hierdurch können wir innerhalb der Komponente die Property item.done auf true setzen und diese Änderung wird in dem entsprechenden TodoModel im Service persistiert.

Damit für den Benutzer sichtbar wird, wenn eine ToDo bereits erledigt wurde, fügen wir als letztes noch etwas CSS hinzu.

resources/elements/todo-item.css:

.done {
    text-decoration: line-through;
}

In der TodoItem-Komponente müssen wir noch die CSS-Datei im HTML referenzieren und die erstellte .done-Klasse in Abhängigkeit davon, ob das ToDo bereits erledigt wurde oder nicht, anwenden.

resources/elements/todo-item.html:

<template>
    <require from="./todo-item.css"></require>
    <span class="${item.done ? "done" : ""}">
        ${item.description} - ${item.deadline} - ${item.priority}
    </span>
    <button show.bind="!item.done" click.delegate="done()">Done</button>
</template>

Hierfür können wir den ternären Operator direkt im CSS-Attribut verwenden.

Autorin