IVAN SIVAK
  • About
  • Blog
  • CV
  • Contact

Animated Heap-Sort with AureliaJS

2/20/2016

0 Comments

 
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.
0 Comments



Leave a Reply.

    About

    Blog about my programming experiments, tests and so on.

    View my profile on LinkedIn

    Categories

    All
    Algorithms
    Angular 2
    ASP.NET
    ASP.NET Core
    Aurelia JS
    Cryptography
    Data Structures
    Gulp
    JavaScript
    Math
    MVC6
    .NET Core
    React JS
    Security
    SQL Server

    Archives

    November 2016
    October 2016
    September 2016
    May 2016
    March 2016
    February 2016
    January 2016
    December 2015
    October 2015

    RSS Feed

Ivan Sivak


Stack overflow

Stack overflow profile

LinkedIn

LinkedIn profile

Email

ivansivak@outlook.com

GitHub

GitHub repository
  • About
  • Blog
  • CV
  • Contact