Creating a Next Generation JavaScript Application with Aurelia

Originally published at: http://www.sitepoint.com/creating-next-generation-javascript-application-aurelia/
2015 brings with it the finalization of the ECMAScript 6 specification and with that the confidence to build modern, superior applications in JavaScript.

The current landscape of JavaScript frameworks is dominated by the recognizable giants AngularJS and React both of which are aiming in some way, shape or form, to incorporate new ES6 features into their paradigms.

There is however, another player that while new and relatively secretive, looks elegant in its use of modern JavaScript features. I’d like to take a moment to introduce you to Aurelia.

Aureli-who?

Aurelia is a next generation framework that leverages modern concepts like ES6, Web Components, and modularization to help you develop performant, futureproof applications.

Aurelia is the natural progression of Durandal, an AngularJS competitor built by Rob Eisenberg. Aurelia’s history involves a number of encounters with the AngularJS team over the years. It’s for this reason that many aspects of the framework might feel familiar to the AngularJS developers among you.

New Technologies

As I said, Aurelia is a “next generation” framework and as a consequence the tools it uses may be new to some of you. It runs on Node.js, and uses npm but it relies on a few cool new pieces of tech that we’ll look at briefly below:

Gulp

This one isn’t so new but it’s a core part of Aurelia’s setup. We’ll use Gulp to pipe all our files through various tasks to ensure our application is all wired up and ready to go.

ES6 Module Loader Polyfill

The ES6 module loader is a pollyfill for the System dynamic module loader that was part of the original ES6 specification. The System loader is in the process of being written into browser specifications but in the meantime this polyfill provides a futureproof solution that we can use today.
Continue reading this article on SitePoint

I like that Aurelia is a “convention over configuration” type of framework, and I’m glad that they don’t have quite so much logic in the templates (my biggest annoyance with Ember and Angular), but I still think that there’s a little too much logic in there. Sometimes there are developers who work on JavaScript that are separate from the devs who work on HTML and CSS, so templates should avoid logic to allow those markup people to use them without needing to know anything about the app logic or learn all the nuances of the templating language.

Also, I was looking at the GitHub repo and saw the setup instructions, which ask you to install 2 global modules: Gulp and JSPM. I have an article about this: http://www.joezimjs.com/javascript/no-more-global-npm-packages/. Global modules should be avoided, and should instead be installed as dev-dependencies, because then you can store version information and you can use NPM Scripts to handle all the work for you. In your case, you probably should have saved Gulp and JSPM as dev-dependencies and then create an NPM script names “setup” or something that runs “npm install && jspm install -y” and then create an NPM script called “start” or “develop” and have it run “gulp watch”. That way, steps 2-5 are compressed into 1 step and then if the app changes to use a different system (other than Gulp) for starting the app, it can be transparent to the use because they never needed to install the global deps and never had to type “gulp …” into their command line.

Also, try not to view this as a stuck up programmer trying to correct you for doing something “wrong”. I’m just trying to spread the word about what I (and many others) have come to see as a best practice and prevent the spread of what we consider to be bad practice. I hope you’ll consider it.

@joezim007 - could you give some examples of too much logic in the templates?

As far as I am concerned, I need two types of logic. Data binding/replacement and HTML/DOM manipulation. Aurelia does both well and more pragmatic than Angular from what I can tell. But, I am far from an expert in such matters too. So I’d like to know what you think is to much logic. Thanks.

Scott

  1. I think that event handling should be taken out of the DOM (e.g. <form submit.delegate="welcome()">
  2. Loops and other control structures just don’t seem right when used as attributes of an element rather than on their own. (e.g. <li repeat.for="el of collection">) This isn’t about too much logic, just strangely done logic.

It’s not nearly as bad as Angular and Ember who use templates to do a lot more, but I’m used to Backbone and Ampersand where you have more of the logic in the classes rather than in the template. Templates should be dumb so that they can be mostly written by non-JS devs.

Can this only be used in nodejs? Or can be ran on PHP Stack?

Aurelia is a frontend JS framework. It has nothing to do with the server side.

Scott

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.