Aurelia in 20 minutes

A short presentation of the Aurelia javascript framework.

Links to GistRuns / code samples:
bootstrapper: https://gist.run/?id=c9c53c0fb022681d5383657d97070a49
hello world: https://gist.run/?id=54910c7e5b0c0de41236ae7477c513ae
datepicker custom attribute: https://gist.run/?id=6959cfa7bb1ee3f382d889bf864c5fb1

Transcript

1. aurelia next-gen javascript framework whangarei web dev meetup | 25/07/17 | thomas@ksytek.com
2. Who is Aurelia? According to Google …
3. Meet Aurelia!  MV* self-sufficient JavaScript client framework  Suited to single page applications  Main features  Routing  UI composition  Templating & rendering  Data binding / observation  API communication Model View * Controller, Presenter or View-Model MV*
4. An MV* framework like all other?
5. An MV* framework like all other? easy Vanilla JS and plain HTML Stays out of the way Gentle learning curve freedom Use all of it or part of it Plug-in any 3rd party library Produce easily reusable code x no aurelia = Only real competitor =
6. Vanilla JS, but modern JS ‘old school’ JavaScript modern JavaScript (ES6+)
7. ES6/ES7/TypeScript modules and module loaders promises classes arrow functions generators … ES6 + async / await ES7 + static typing import {fetchTextFromServer} from './api'; export class MyApp { text = ''; async fetchText() { await fetchTextFromServer().then( response => this.text = response.text ); } showText() { this.fetchText().then( () => alert(app.text) ) } }
8. Hello World! (powered by aurelia!) direct links: bootstrapper hello world
9. Modularity aurelia-framework aurelia-templating aurelia-fetch-client aurelia-router aurelia-* react aurelia-validation aurelia-dialog aurelia-auth aurelia-i18n … …
10. Let’s add a date picker direct link: datepicker custom attribute
11. The great stuff  Simple and unobtrusive  No new language to learn  Convention over configuration, sensible defaults  Simple apps are up in no time  Flexible  Integrate any other library (or framework)  Lends itself well to advanced customization  Self-sufficient and feature-rich out of the box  Fast (up to 2x faster than Angular and React)  Future-ready (ES6+, Web components)  Package managers support (aurelia- cli, jspm, webpack)  Commercial support available
12. The few weaknesses  Still relatively new (v1.1) compared to other frameworks  No server-side rendering yet (WIP)  Could do with more books / resources  Lack of IDE / browser integration and tools (but are they really needed?!)
13. aurelia.io/hub