Frontend JavaScript TypeScript

Meet Aurelia & CLI

As we all know, JavaScript world is one of the fastest growing. New frameworks appear and soon after die because of capabilities or outdated solutions. The example here is knockout.js (which I really loved by the way) – an excellent MVVM framework with dependency injection, two-way data binding e.t.c which was eaten by Google’s child called Angular. In the meantime React JS happened and all these great frameworks like Ember or Polymer. In early 2016, all frontend geeks waited for the new awesome framework that would replace the old ones – Angular 2. I was one of these geeks, fascinated about new Angular which turned out to be entirely different from what I’d known before. I was disappointed. But soon after I read some article that Rob Eisenberg (Angular 2 team former) quit after almost a year and decided to create his interpretation of next generation JavaScript framework – Aurelia. I checked the project’s page, and 5 minutes later I fall in love completely. It was awesome!

 

What is Aurelia?

Before we introduce the CLI, it’s worthwhile to write a few words about the framework itself. In a nutshell, Aurelia is a modern JavaScript framework which supports:

 

  • Two-Way data binding
  • Routing and UI composition
  • Dependency injection
  • Both TypeScript and ES2016
  • Reusable components
  • MV* architecture
  • Unit testing

 

But what I love the most about that framework is simplicity. I mean in some scenarios you can write pure TS/ES2016 code to implement your app’s functionalities. In more complex cases when you need to use dependency injection, interceptors or something else, it’s still super easy to learn that and understand. Now, I guess that some of you might think that I’m going to present some basics of Aurelia, but I won’t. That’s because I did it a few months ago (it’s written in Polish) and to be honest; those articles were awful. But besides the fact that I just don’t want to repeat myself on the blog, there’s already an excellent introduction to Aurelia on aurelia.io presented by Rob. So for all of you who are interested, I recommend watching that. If you need more detailed introduction here the Objectivity’s webinar with Rob:

 

 

If you’re still not convinced, check the video below from NDC Oslo 馃槈 Besides the technology, it’s worth mentioning that Aurelia’s community is impressive right now. Back in February 2016, it was a really hard to find some solutions on StackOverflow or even a good article about that framework. Now, everything looks completely different including GitHub stars (about 8.1k) or number of Aurelia’s contributor’s number.

 

Creating Aurelia project using the CLI

After this longish entry let’s start with the titled CLI. First thing we need to do is to get that from the NPM using the following command:

 

npm install aurelia-cli -g

 

Now, open a Command Prompt (I’ll use ConEmu instead) and type:

 

au new

 

You should be asked about project’s name:

 

cli-start

 

After that you have three options to create your project:

 

cli-1

 

I’ll select the third one just to present what options do we have to configure. Next, we’re asked about the transpiler. Since I want to write my spplication in TypeScript I’m gonna select second option here:

 

cli-2

 

Our next step is to choose the proper CSS processor. To be honest, CSS is not my forte, even though I did some code in SASS. That’s why I’m choosing the third option here:

 

 

Now comes the „fun” part. The unit testing configuration in the app’s project using Jasmine and Karma. Alternatively, we can treat our code as state of the art without any bugs (the description made me laugh). Therefore I’m selecting first options…

 

cli-4

 

Last but not least, we have to select a code editor for coding the Aurelia:

 

cli-5

 

I’ll choose the VSC for that purpose. In the last step, we should observe the summary with all selected options. All we need to do is to confirm our creation and install project dependencies!聽Now if you’d like to check whether it’s working, go to project’s root folder and type the following command:

 

au run

 

After few seconds you should be able to see the „Hello world!” text served on localhost:9000. What’s more adding a –watch flag to your „run” command will run your app with BrowserSync which refresh your application every time you save changes in the editor. So, that’s it, super easy, right?

 

Combining Aurelia & ASP.NET Core

Every Webb application needs the backend. As you probably guessed (based on my previous posts) I’m also a .NET developer. That’s why in this section I’m going to present the way to combine Aurelia with new ASP.NET Core. First, you need to create new ASP.NET Core application (I used standard VS wizard but you can choose Yeoman if it suits you more). After creation, navigate to Web project’s folder (project_name/src/project_name) using command prompt and type the following spell:

 

au new --here

 

You’ll be asked about platform targeting. Select ASP.NET Core:

 

cli-6

 

Next steps are identical to those passed in the previous section. The screen below presents the entire solution after the whole process (Web API):

 

cli-7

 

Yes, it’s really that simple!

Summary

So that was a short introduction for those who have never heard of Aurelia. Next post will be also dedicated to the CLI. We’ll use that for creating a code generator for ViewModels/Views and Services 馃檪 So, if you don’t want to miss that I encourage you to follow me on Twitter and Facebook where I post every new article!