Animated Heap-Sort with AureliaJS

If you're not aware about AureliaJS it's time to be aware about this amazing framework. Like Angular, Meteor, Polymer, Knockout and others it is a MV* framework for building the next generation web applications. To quote the authors:

Aurelia is a next generation UI framework. Whether you're building apps for the browser, mobile or desktop, Aurelia can enable you to not only create amazing UI, but do it in a way that is maintainable, testable and extensible.

..and not only that. It gets even more interesting here:

Aurelia is just JavaScript. However, it's not yesterday's JavaScript, but the JavaScript of tomorrow. By using modern tooling we've been able to write Aurelia from the ground up in ECMAScript 2016. This means we have native modules, classes, decorators and more at our disposal...and you have them too.

You can find more interesting facts and docs on the official page. This article shows how to present the Heap-Sort algorithm in an animated way in JavaScript built upon the AureliaJS framework.

Heap Sort

I believe I don't have to introduce the heap sort. It is notoriously known sorting algorithm. The wikipedia page speaks for all and if you're a beginner I would recommend you the MIT course about Heaps and Heap Sort which is very nicely explained:

Nice thing about heap sort is that it's relative fast and runs in O(n + n*log(n)) = O(n*log(n)).

In our example it's being implemented inside the engine.js file. Notice the ES6 way of defining the module where we export only those parts we want to:

..which is later on imported by calling the:

In the current ES5 way you would write something like this instead:

The animation itself is being done using CSS3 transitions. It is easy and very fast way how to animate css properties. The key here are the following css lines:

The main application class is pretty straightforward. We have just a constructor that initializes the properties and then two methods generate and heapSort that corresponds with buttons on view layer. The heap sort itself with a bunch of helper functions is located in the engine module.

Result

Now the funny part. See and play with the result. As usual you can play with Plunker and see the complete sources on GitHub.