Aurelia - Next generation web apps

AureliaWeb ontwikkeling heeft de afgelopen jaren grote veranderingen door gemaakt. In het bijzonder m.b.t. het renderen van web content. Was het zo dat in het verleden voornamelijk server-side technologieën (APS.NET, PHP, ...) werden gebruikt om web content te genereren, tegenwoordig zie je dat steeds meer client-side Javascript frameworks (AngularJS, EmberJS, ReactJS) worden gebruikt voor het renderen van web content. De reden hiervoor is o.a. dat hedendaagse browsers meer gestandaardiseerd zijn en beter en sneller geworden zijn in het renderen en uitvoeren van client-side Javascript. Dit alles om de gebruikservaring van webapplicaties te verbeteren.

Introductie Aurelia

Met de komst van Javascript libraries als. KnockoutJS, AngularJS en ReactJS is de populariteit van dit soort frameworks alleen maar toegenomen. Een van de nieuwere SPA frameworks, dat veel aandacht krijgt en snel aan populariteit wint, is Aurelia. Dit vanwege zijn robuustheid, eenvoud en gebruikersgemak. Aurelia is ontwikkeld door Rob Eisenberg, ontwikkelaar van o.a. DurandalJS en Angular 2.0 en is volledig geschreven in Ecmascript 2016, de nieuwe Javascript standaard. Het is een z.g.n. conventie over configuratie framework d.w.z. dat het out-of-the-box al een aantal beslissingen maakt zonder dat deze geconfigureerd hoeven te worden. Het is daardoor relatief eenvoudig in gebruik. Door een aantal conventies te volgen worden bepaalde zaken door het framework automatisch afgehandeld waardoor je als ontwikkellaar minder code hoeft te schrijven. Van deze conventies kan echter eenvoudig worden afgeweken indien noodzakelijk. Aurelia helpt je als ontwikkelaar om productiever te zijn bij het bouwen van (SPA) webapplicaties. Het maakt gebruik van de kracht van de moderne browsers en volgt zoveel mogelijk de hedendaagse en toekomstige web standaarden.

Enkele kenmerken van het framework:
• Modulaire en pluggable architectuur
• Dependency injection
• Eenvoudige en intuïtieve 2-weg data binding
• Client-side routing en navigatie
• Ondersteuning van het Model-View-Viewmodel  (MVVM) pattern
• HTML templating
•  Unittest integratie
• Gebruik van enkel HTML, Javascript en CSS
• Ondersteuning van TypeScript en EcmaScript2016 (ES6)
• Voldoet aan de meeste van de W3C standaarden

Voor het renderen van UI content zul je als ontwikkelaar voornamelijk bezig zijn met het schrijven van HTML views en Javascript viewmodels. Standaard gaat Aurelia er vanuit dat een view (.html) en het bijbehorende viewmodel (.js) dezelfde naam hebben en zal deze automatisch aan elkaar linken. Als bijvoorbeeld viewmodel app.js wordt geladen door het framework, zal het standaard opzoek gaan naar de view app.html in de folder van de viewmodel, tenzij anders gespecificeerd.

Hieronder een voorbeeld van een simpele Aurelia Todo List applicatie, welke bestaat uit de volgende onderdelen:

index.html                                                                                                                                                                                                                                                         Aurelia, index.html
 
Index.html is de start van applicatie en de enige HTML pagina binnen de applicatie.
Toelichting code:
Regel 6

Attribuut aurelia-app op de body tag vertelt de aurelia-bootstrapper welke module (src/main.js) de Aurelia configuratie bevat en welk HTML element, in dit geval de body-tag, als host dient waarbinnen de applicatie zal worden gerenderd.

Regel 7 
Hier wordt de Javascript module loader system.js geladen. Deze wordt gebruikt voor het laden van modules en bijbehorende afhankelijkheden die worden gebruikt binnen een Aurelia applicatie.
Regel 8
Geeft aan welke programmeertaal gebruikt moet worden, in dit geval ESNext of te wel EcmaScript 2016 (ES6). Indien TypeScript de gewenste voorkeur heeft dient library config-esnext.js te vervangen worden door  config-typescript.js .
Regel 9
Dit betreft het Aurelia framework zelf en dient als vanzelfsprekend geladen te worden.
Regel 11
M.b.v  de import methode op het System object wordt de aurelia-bootstrapper module geladen. De bootstrapper is verantwoordelijk voor het opstarten van het framework en de applicatie.


main.js                                                                                                                                                                                                                                                                  Aurelia, main.js
 
Dit betreft de hoofd module en de plek waar Aurelia geconfigureerd kan worden.

Toelichting code:
Regel 1
Indien er een functie configure is gedefinieerd zal deze door het framework worden aangeroepen met als parameter een instantie van het Aurelia object (aurelia).
Regel 2
In dit geval wordt voor de basis configuratie van Aurelia gekozen. Dit is de plek om extra configuraties toe te voegen in wenselijk.
Regel 3
Hier wordt het framework gestart en wordt de root van de applicatie gezet. Indien de root niet expliciet is opgegeven, zoals in dit voorbeeld, zal het framework op zoek gaan naar de default root. Dit is standaard module app.js.

Todo Class                                                                                                                                                                                                                                                       
 Aurelia, Todo.js
Dit betreft een eenvoudig ES6 class voor een individueel Todo-item. Het bevat 2 properties, te weten de omschrijving van het Todo-item (description) en een property om aan te geven of een Todo-item is klaar of niet (done).


app.js                                                                                                                                                                                                                                                                   Aurelia, App.js 

Dit is de default module die wordt aangeroepen door het framework indien deze bij de aanroep van setRoot niet nader is gespecifieerd.
Toelichting code:
Regel  1
M.b.v. het import statement kunnen externe modules worden gelden. In dit geval wordt de Todo class geladen vanuit todo.js.
Regel 3
Dit betreft de definitie van de App class. Zoals eerder aangegeven is dit de viewmodel die standaard wordt geladen door Aurelia, tenzij anders gespecificeerd.
Regel 4 t/m 8
Dit is de constructor van de App class en wordt gebruikt voor de initialisatie van de diverse properties waaronder een array van Todo-items (todos).
Regel 10 t/m 15
De addTodo functie is verantwoordelijk voor het toevoegen van Todo-items en wordt aangeroepen vanuit view app.html bij het drukken op knop Add Todo.
Regel 17 t/m/ 22
Met de removeTodo functie kunnen Todo-itens worden verwijderd. Deze viewmodel functie wordt eveneens aangeroepen vanuit view app.html. In dit geval bij het drukken op knop Remove.


app.html                                                                                                                                                                                                                                                             Aurelia, app.html
 
Dit betreft de default view.
Toelichting code:
Regel 1
Iedere view in Aurelia begint met de HTML5 template-tag.
Regel 2
Via string interpolatie (${}) wordt de waarde van property heading afkomstig van de viewmodel weergegeven.
Regel 3
Hier wordt aan het submit-event van het form een trigger binding toegepast die, in het geval het submit-event afgaat, de functie addTodo aanroept.
Regel 4
Het toevoegen van binding bind aan attribuut value zorgt ervoor dat property todoDescription op het viewmodel wordt gebind aan het invoerveld op het formulier. Dit betreft een 2-weg databinding, wat wil zeggen dat een wijziging van property todoDescription op het viemodel resulteert in een update van het invoerveld en andersom.
Regel 8
De repeat.for binding wordt gebruikt om door over collectie heen te loopen. In dit geval de array todos met Todo-items.
Regel 9
Net als regel 4 betreft het hier een value-binding. Echter nu op een checkbox en wel met property done  van het viewmodel. Door het aan- of uitklikken van de checkbox kan men aangeven of een item is afgerond of niet.
Regel 10
Middels string interpolatie (${} syntax)  wordt dynamisch de CSS opmaak van een HTML element geregeld. In dit specifieke geval wordt het Todo-item doorgestreept indien het klaar is.
Regel 13
Tot slot wordt  een trigger binding op het click-event van de verwijder knop toegepast wat resulteert in aanroep van functie removeTodo op het viewmodel  Als paramter wordt het te verwijderen Todo-item (todo) doorgegeven.

Hieronder een schermafdruk van het resultaat van de applicatie in de browser:

Aurelia, todos
 
Uitgebreidere details m.b.t. dit voorbeeld zijn hier te vinden.

Door de modulaire architectuur van Aurelia is het eenvoudig om andere Javascript libraries te integreren binnen Aurelia mocht dit nodig zijn. Sinds de officiële release van versie 1.0 van  juli jl. is Aurelia productierijp en kan het ingezet worden als alternatief voor frameworks als AngularJS en ReactJS voor het bouwen van professionele (mobiele) web applicaties. Aurelia is compatible met alle hedendaagse browsers zoals Chrome, Firefox, Safari 8+, Internet Explorer 11 en Microsoft Edge.

Voor meer informatie omtrent Aurelia zie onderstaande referenties:
http://aurelia.io/

https://scotch.io/tutorials/build-a-mini-instagram-app-with-aurelia

http://tutaurelia.net/

Marcel Trijselaar, Senior Developer