~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 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
- 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.
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.
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:
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.