React, Angular2, and Aurelia implementations of the Gentelella Dashboard Template

 

For the start of a personal project I’m working on, I was needing to have a halfway decent looking web UI.  Not having a lot of web UI design experience, as a first step I started searching for available bootstrap templates, which led me to a great site here.

I looked through them all, but found the first one in the list, Gentelella, is particularly attractive to my UI sensibilities.  From a technical standpoint, Gentelella, and the rest of the UI’s from the site, are basically implemented as a combination of Bootstrap, JQuery, along with a brew of Javascript/CSS libraries.

For my work, I’m needing to have these elements embedded into a Javascript UI framework of some kind.  Anyone familiar with modern Web UI development knows that there are a *lot* of frameworks, and seemingly a new “hot” one comes to the forefront every year.  (There’s a great summary of most of the last decade here, and as it was written in 2015, is fittingly about React).   

This year, with Angular 2 finally out of it’s long beta, and React continuing strong, there’s a battle for framework of the moment.  But there’s also another newcomer, Aurelia, that is showing some promise.  I decided it would be useful to try to implement Gentelella in each of these three frameworks - React, Angular 2, and Aurelia.  

React

Anyone familiar with React knows that it has a unique approach to the problem of how to update the DOM.  It has it’s own Virtual DOM that is kept up to date internally by the react framework, and then used to apply only changes back to the real DOM.  This, combined with popular use of a state management library like Flux or Redux, makes it a fundamentally different way of writing web applications.  It also, unfortunately, makes it quite difficult to work with anything that is written in existing technologies.

Anyway, I pulled down a seed project, and got going.  And then about an hour later, I stopped. It took me about this long to realize, with the time I was willing to invest, that this was not going work.  The first thing I ran into was problems in mapping css classes to the “className” equivalent in React.  React has it’s own approach to encapsulating HTML, which includes moving class behavior into it’s own custom className variable that more closely matches the DOM.  The idea being that in react you’re not really working with HTML - and instead are working more closely analogous to the DOM itself.  

But this customized approach to HTML markup, and the fact that a lot of the built in logic in Gentelella is using JQuery to manipulate classes, led me to conclusion that this would need to be a complete rewrite.  Generally, it seems this would be the best approach when trying to incorporate code with a dependency on JQuery into React - are you sure you can’t rewrite it?   

Angular 2

Since I was not excited about the prospect of a complete rewrite, I moved on to Angular 2.  As I briefly mentioned above regarding React, when starting development on any of these frameworks you generally begin with some form of seed project.  There is no official seed project available from the Angular 2 team, and instead two community driven projects have become quite popular.  The angular2-seed is based on a Gulp/SystemJs build, and the angular2-webpack-starter is using Webpack.  The subject of build tools in JS frameworks is worthy of entire separate discussion, but I chose to go Webpack route, which seems to be gaining traction at the moment as de facto standard.  

The end result of this work I’ve made available here.  This is currently not a complete implementation of all the Gentelella functionality, as the majority of the the links are still not mapped into Angular 2 routes.  However, at its core is a functional implementation using Angular 2 UI components, navigation, and events.

Aurelia

Finally, Aurelia is a new JS framework project, led by Rob Eisenberg, who worked for a time on the Angular 2 implementation.  Aurelia is his own take on what a modern JS framework should be, and makes some different design choices than Angular 2.  A major focus in Aurelia is using convention to help remove boilerplate code, and generally attempting as best as possible to follow standards.  This can be seen quite clearly in the view template syntax.  The end result of the whole approach is less code, which is easier to read.  

Rob has an excellent review of where the various JS frameworks are in 2016 here.  If you have an hour, and are interested in JS Frameworks, it’s definitely worth watching.  While he admits to personal bias, I actually think he’s spot on in terms of where the various frameworks stack up.  And my experience in these conversion projects has backed this up.

To start the Aurelia implementation, I was able to use one of the official Aurelia seed projects, in this case using the one based on Typescript and Webpack (here) to align as closely as possible to the Angular 2 version. Unlike Angular2 and React, Aurelia publishes its own seed projects, which is very helpful for people just starting out.

The current product is here.  In general I was able to more quickly pull in existing pages, and needed to write less code to implement the equivalent pages in Aurelia.  You can also see that on a number of the script files there’s actually no reference to Aurelia code at all.  Finally, there was no need to import and inject all the controls into the core application, which is an extra step currently needed for Angular 2 which has no equivalent in Aurelia.

Conclusion

In general, I found Aurelia to be superior framework for building out the Gentelella UIs. It wasn't even possible to do in a reasonable amount of effort with React.  And Aurelia resulted in less work and cleaner code than Angular 2.  You could say as a framework Aurelia is unobtrusive and lets you do things with less work.  I’m planning to write a more in depth comparison of the results of the work in a future post, where I will get into more specifics on the differences.  For people who would like to start using one of these new frameworks, being able to see examples that are a little more involved than the basic examples typically provided is a useful thing.  

The Gentelella example is a particularly interesting one, I think, because it involves trying to fit these frameworks into an existing application, instead of a greenfield project or doing a complete re-write, which is sometimes not something you’re wanting, or able, to do.