Aurelia Getting Started

Dive into Aurelia codebase: Getting started

Aurelia’s name is buzzing in the tech world for about a year. A JavaScript library which has gained popularity in a really short period of time. So what is so special about Aurelia? Why is this framework gaining so much of interest from developers? And as they claim, is it really a next generation client framework? Let’s dive deep and start with the key features it goes with.

• Highly modularized code, so you can always use only what you need.
• Walks in lockstep with a time and supports ES6/ES7.
• Has a first of its kind “adaptive” data-binding engine allowing rich two-way data-binding between vanilla JavaScript and DOM.
• Ability to extend HTML with custom elements and attributes.
• Implemented an advanced client-side router, based on Durandal 2.x’s router.
• Possibility to use your own libraries to build traditional web sites.

?This post serves as an introduction on how to set up Aurelia and start to build components using some of its core functionality. So before we start building anything meaningful, let’s go through base concepts first.

# Getting started
The easiest way to start hacking on Aurelia is to download its pre-configured skeleton package from here. This skeleton project has been taken from Aurelia GitHub repo, but modified to be able to start building the app from the very beginning. It uses the Babel transpiler so that you can write your application in ES 2016 code, JSPM for package management and SystemJS for loading and bundling. 

As the age-old way of getting started in learning most of the development features, we will create the "Hello World" app.

To start, let’s configure the recommend development environment, and basic setup.

1. You need to have Node.js installed on your computer (run 'node -v' in the command line to check). This provides the platform on which the build tooling runs.
    
2. From the project folder, execute the following command: "npm install"
    
3. Ensure that Gulp is installed globally (run 'gulp -v' in the command line). Gulp is a tool that helps you out with several tasks like spinning up a web server, reloading the browser automatically whenever a file is saved, optimizing assets like Javascript, CSS and images, and others. If you need to install it, use the following command: "npm install -g gulp"
    
4. Check if jspm is installed globally ('jspm -v'). To install it, use the following command: "npm install -g jspm"
    
5. Install the client-side dependencies with jspm: "jspm install -y"
    
6. To run the app, execute: "gulp watch"
    
7. Now you can navigate to http://localhost:9000 to see the app. At this point of time, you should be able to see just a simple “Hello world” message in the browser, but let us dive deeper and see how this app has been built. Cool, hah?

# How does it work?

• Firstly, let’s take a look at index.html file. 

• By going gradually, system.js loads Aurelia library as well as your own code and config.js – contains configuration for the loader. 
   
• With a call to System.import, we also load aurelia-bootstrapper module, which further inspects body for aurelia-app attribute.
   
• The aurelia-app directive is responsible for bootstrapping your app defining it’s scope and forces to load app.js file for app view-model to provide behavior and app.html for its view, and later compose them as Aurelia app in the DOM.
   
• The app.js file is for keeping all the app logic and maintaining your application. You can later add navigation here, import other files your app needs to run etc. For now, we are being pretty straight-forward and just create a simple App class to store our message.

• The app.html file will store our markup to display the view. 

• Every view should be enclosed within a <template> tag. In the example above, ${message} stands for string interpolation. It's a one-way binding from the view-model into the view that is automatically converted to a string and interpolated into the document.

# Conclusion
Now that we have reviewed the basics of Aurelia, in the next posts we are going to expand our app with additional capabilities of Aurelia.

Stay tuned!