Hackathon

Hackathon Planner & My experience with Aurelia so far

Hakan Tuncer

• 2 min read

~2 months ago I wrote about Hackathon Planner and hustled the idea as a candidate project for the next hackathon at NIPO Software. Then the hackathon day arrived. We formed a team of 6 and spent a day working on it. Rutger shot a time lapse video from that day.

Since then, I continue working on the Hackathon Planner whenever I find some free time here and there. Rutger also occasionally shows up in the commit history contributing with his CSS superpowers.

I use Azure everyday at work and this time I want to experiement with AWS. I've put up an early preview of Hackathon Planner on Amazon S3. I'll keep updating it from this point on. At the time of this writing, it's only a client side preview - actions are only saved on the local storage of the browser. Not very useful yet but it soon will be. Check it out.

Aurelia

Aurelia has been my framework of choice for this
single page application. It truly is a great framework in the sense that it really gets out of your way. After I learned some of the fundamentals of Aurelia, I was basically good to go. Some periods I even forgot that I was using a framework because it is simply not in your face. Let me show you some code samples from the project.

ES6 and ES7 in action

Aurelia takes advantage of the latest javascript standards as much as possible. Take a look at this "nav-bar" component from the Hackathon Planner.

  • First three lines are an example of ES6 module importing. This is how a javascript module can make use of code from external libraries.
  • Line #5 is an example of an ES7 Decorator that is in this case used by Aurelia for dependency injection. Basically we're telling Aurelia to pass those components as constructor arguments to the NavBar component.
  • And the rest of the code is the NavBar class that is written based on the ES6 class specification. See how clean this component is - it's pure javascript.

Dynamic application root

Code below is the entry point to the Hackathon Planner: "main.js".

  • Line #2 imports a custom authentication service that I wrote and it gets resolved as a singleton instance at line #13. In Aurelia all dependencies are registered as singleton by default (unless you specify it otherwise).
  • Based on the authentication status (line #14) aurelia app root is set either to the app or to the login component. The ability to set arbitrary application roots is a powerful feature of Aurelia that enables some interesting scenarios.
  • I borrowed this idea from Matthew James Davis.

Validation

Aurelia also comes with a validation plugin and it's currently undergoing some big refactoring. It still wouldn't hurt to show how it looks like at the moment. Note that the @ensure decorator is recently deprecated (which means I'll also need to adapt this code going forward).

This is a stripped down version of the project class in Hackathon Planner:

  • Line #8 and #10 sets validation rules on those properties and line #20 initializes the validation for this object.

And this event handler in "new-card.js" validates a project before adding or updating it:

Beautiful components

In Aurelia, user interface components are composed of view and view-model pairs. These two are created by Aurelia's dependency injection framework and gets linked to each other via data binding.

Here is one of those pairs from the Hackathon Planner. This is how the overview page is rendered:

  • Notice how a component is required into a template at line #2.
  • And then all projects are looped through and each one is rendered into another component called "idea-card" at line #5.

Thank you for reading and make sure you check out the Hackathon Planner on GitHub and its early preview deployment.

~Hakan