Aorelha

Good parts

•  Javascript (ES2015/2016), not a "special language", like Angular and React

• Some good patterns: HTML template

• Small learning curve for "Angular developers"

• Some nice bind helpers: router.isNavigating

• Lifecycles

Sad parts

• Starter package = 60MB / Todo = 227MB

• Use of class (the horror!)

export class MyService {  
  constructor() {

  }

  mySpecialMethod() {

  }
}

import {inject} from 'aurelia-framework';  
import {MyService} from './my-service';

@inject(MyService)
export class HelloVM {  
  constructor(myService) {

  }
}

Service

ViewModel

export class GithubValueConverter {  
  toView(value) {
    return "@" + value;
  }

  fromView(value) {
    return value.replace("@", '');
  }
}

<template>

    <input type="text" value.bind="inputValue | github"/>  
    <p>${ inputValue }</p>  

</template>

Value Converter

Template

import {DataService} from './services';
import {inject} from 'aurelia-framework'

@inject(DataService)
export class Form {

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

    activate() {
      return this.dataService.getData().then( (data) => {
        this.firstName = data.firstName;
        this.lastName = data.lastName;
      });
    }
}

Navigation Lifecycle

export class Form {
    canDeactivate() {
      if(!this.isPristine()) {
          var result = confirm('Do you really want to discard your changes?');
          return result;
      }
    };
}

Navigation Lifecycle

<template>
  <require from="./sort"></require>
  <require from="./take"></require>

  <label for="column">Sort By:</label>
  <select id="column" ref="column">
    <option value="stargazers_count">Stars</option>
    <option value="forks_count">Forks</option>
    <option value="open_issues">Issues</option>
  </select>

  <select ref="direction">
    <option value="descending">Descending</option>
    <option value="ascending">Ascending</option>
  </select>

  <table class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Stars</th>
        <th>Forks</th>
        <th>Issues</th>
      </tr>
    </thead>
    <tbody>
      <tr repeat.for="repo of repos | sort:column.value:direction.value | take:10">
        <td>${repo.name}</td>
        <td>${repo.stargazers_count}</td>
        <td>${repo.forks_count}</td>
        <td>${repo.open_issues}</td>
      </tr>
    </tbody>
  </table>
</template>

Bindings - Value Converters 

<template>
  <require from="./sort"></require>
  <require from="./take"></require>

  <label for="column">Sort By:</label>
  <select id="column" ref="column">
    <option value="stargazers_count">Stars</option>
    <option value="forks_count">Forks</option>
    <option value="open_issues">Issues</option>
  </select>

  <select ref="direction">
    <option value="descending">Descending</option>
    <option value="ascending">Ascending</option>
  </select>

  <table class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Stars</th>
        <th>Forks</th>
        <th>Issues</th>
      </tr>
    </thead>
    <tbody>
      <tr repeat.for="repo of repos | sort:column.value:direction.value | take:10">
        <td>${repo.name}</td>
        <td>${repo.stargazers_count}</td>
        <td>${repo.forks_count}</td>
        <td>${repo.open_issues}</td>
      </tr>
    </tbody>
  </table>
</template>

Bindings - Value Converters 

Questions?