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.

Post One!

 

As I approach the middle of my fifth decade on the planet, I realize that if I intend to do some things I’ve wanted to do for a while, I better get at it.  One of those things is, strangely enough, writing a blog about my various software-related interests and experiences.

 

In my years of heretofore dedicated lurking, I’ve learned so much from other people’s blogs, GitHub projects, and stack overflow answers, that I hope that what I share can be of  at least some value to others in return.  I expect most of my posts will be relatively mundane, and focused on my effectively narrow experience in "line-of-business" software, but I wanted an interesting name for the blog.

 

What’s in a Name?

 

What exactly does the name of the blog, “software defined universe”, mean?  First, as we continue into the 21st century software is becoming the core of everything we do. Or, as it was famously said, software is eating the world.  We can see it in many of the companies that have come to permeate the way we live our lives.  At their core, Amazon, Uber, and Netflix are essentially software companies

 

But it's beyond that.  The survival of pretty much any business is dependent on software that runs it. Digital Transformation has become a buzzword across the business world, and there's general acceptance of the idea that any company that doesn't drive innovation through software will inevitably be disrupted and lose share in the market.

 

In the broader scope, our technology are inseparable from the software that is driving it.  Advances in hardware are driven by the software that runs it.  Software runs the drones that will be transforming our skies.  Software runs the robots that operate our factories.  And software drives the AI's that will increasingly handle many tasks currently done by humans.

 

It's all Information

 

The core of our dependence on software can be traced back to Information Theory, and leads to the present where increasingly we treat everything as information.  Taken to its logical extreme, the fundamental thing to the universe isn't matter, it's information.  Basically, there nothing that can't be broken down into a stream of 1's and 0's.  And the thing that processes those 1's and 0's is software.

 

So after software finishes gobbling up the world, what next?  The logical conclusion is that, eventually, it will eat the universe.  It doesn’t even have to be us taking our software to the stars (or maybe the other way around).  You can be certain that if there are technologically advanced aliens somewhere out there, they already have some pretty impressive software of their own.  At some point they too would have realized how much easier it was to shop, find rides, and entertain themselves with the help of software.

 

The Software Defined Universe

 

But what if software doesn’t need to eat the world (or universe), because it already has?  Recently, there’s been increasing discussion around the possibility of whether our universe actually *is* software.  Perhaps, as initially popularized by The Matrix, our “reality” is just a very, very good computer simulation.  The formal theory behind this, known as the Simulation Hypothesis, addresses the likelihood that this is true.  Depending on assumptions one makes about advanced civilizations and their propensity for running simulations, it could be almost certain.   

 

In the end, though, it doesn't really matter whether the universe is going to be taken over by software, or already *is* software.  We have to live our lives the same, either way.  But, I think it does make sense, while we are all here using - or running as - software, to spend some time talking (or in my case, writing) about it!