Aurelia

Ah, so you want to know what Aurelia is yea? Well, today is your lucky day because I am going to talking about just that! Aurelia is an awesome JavaScript framework that I personally just recently came across. I looked into it a bit and thought I would come here and tell you all a little bit about it and why you should totally use it!

Aurelia is really interesting because of how powerful and intuitive it is. You are able to build components comprised entirely of vanilla JavaScript. Even complex apps look easy with this framework. Let's get right into the meat of this and breakdown a couple of nice examples today!

So the first example will be a simple counter/timer app.

export class App {
  seconds = 0;

  constructor() {
    setInterval(() => this.seconds++, 1000);
  }
}

<template>
  <h1>A total of ${seconds} seconds have elapsed.</h1>
</template>

When I say this can get simple, I mean it! Aurelia is super interesting because it knows exactly what changes and when it changes. It uses this knowledge to update your UI in the most efficient way possible.

So the example today will be a simple todo application to get you introduced to this nifty framework. The todo app will hold a text box that will be used to add new todos and those todos can be removed just as easy as they were added.

So here is what our app.js file example will look like.

 export class App {
    constructor() {
      this.heading = 'Todos';
      this.todos = [];
      this.todoName= '';
    }

    addTodo() {
      if (this.todoName) {
        this.todos.push({
          description: this.todoName,
          done: false
        });
        this.todoName= '';
      }
    }

    removeTodo(todo) {
      let index = this.todos.indexOf(todo);
      if (index !== -1) {
        this.todos.splice(index, 1);
      }
    }
  }

You can easily create a fully functioning application with simple classes that have properties and methods. This here uses a vanilla JavaScript array to keep track of our todos.

Here is what our HTML might look like

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

    <form submit.trigger="addTodo()">
      <input type="text" value.bind="todoName">
      <button type="submit" disabled.bind="!todoName">Add Todo</button>
    </form>

    <ul>
      <li repeat.for="todo of todos">
        <input type="checkbox" checked.bind="todo.done">
        <span css="text-decoration: ${todo.done ? 'line-through' : 'none'}">
          ${todo.description}
        </span>
        <button click.trigger="removeTodo(todo)">Remove</button>
      </li>
    </ul>
  </template>

Together these will create our fully functioning Todo application. I like to think that the HTML here somewhat resembles AngularJS. Here you can see that in order to map out our array of todos, the HTML here uses repeat.for="todo of todos". That syntax is derived from the 'for of' loop of ES Next. Above we are generating one li for every todo element. As for adding and removing todos, they use '.trigger' in order to 'trigger' the function that either adds or removes a todo.

It's pretty awesome and super enjoyable once you get the hang of it. Aurelia was designed to be simple, easy to use, and highly customizable. Coding is almost effortless with Aurelia. I hope you will give it a try!

I hope you at least learned something here today. Happy coding hackers!

P.S
Please forgive me for any typos or how sloppy this may be. I wrote this on very little steam left in me. I hope to see you all in the next blog real soon!