Using React Instead of Dijit with Dojo Toolkit

I love expressing my opinion and then having a healthy discussion about it so this article will be no different. Right now, I simply don’t have enough knowledge about React and have forgotten too much about Dojo to make it an objective analysis. This part will come later — after I have tested it in a side project.

I am currently a full stack developer at 10Clouds and since nobody wants to use my beloved Dojo, I have been slowly transitioning towards becoming strictly a Python developer. If wondering why I am a fan of Dojo, I had a pleasure (or misery) of learning Dojo as my first JavaScript library. After using it in a side project for almost a year, I definitely liked what I found.

At some point I learned that React is just the View part of MVC and should not obstruct with the Models and Controllers. I even toyed with the idea of using it with/instead of Dijit (Dojo’s View layer) to make Dojo more accessible to the general public. Well… the day finally came to put the idea into action.

I have no experience whatsoever with React or modern (2015+) front-end development ideas so things got out of hand very fast. Today, I will stick to explaining the pros and cons of Dojo as I know it, why I would want to mix it with React and finally — share my proof of concept.

However, learning Dojo was not a land flowing with milk and honey because it has a very steep learning curve. It is for this reason that it is not possible to make a quick and easy start guide for it. In fact, it took me 2 weeks to even begin writing my Single Page Application.

In retrospect, I think the vast knowledge of ES5 standard that I obtained from using Dojo proved to be well worth the effort.

What exactly is Dojo Toolkit?

You may or may not have heard about it before but the Dojo Toolkit is one of the oldest JavaScript libraries and is a pioneer of JavaScript itself. Sure, it may be getting old and is notoriously hard to get started with. However I still think it is one of the best written and most complete JavaScript libraries in existence today.

A library, not a framework

I can’t stress it enough but, toolkit is the keyword here. You can’t really compare the Dojo Toolkit to AngularJS or Backbone.js as they are whole frameworks. If you really want to compare it to something, look at Underscore.js or jQuery.

Putting it another way — comparing Dojo to Angular is like comparing a well equipped car workshop to a full blown car factory. The former lets you do anything you could imagine, while the latter only lets you do the stuff it was designed for, but a lot faster.

It lets you do whatever you want, however you want…

Dojo makes an art of not being opinionated about anything as opposed to Angular, which is as opinionated about everything as they get. Start with Angular, you can hardly add anything else. To some (including me) it is Dojo’s greatest feature.

…but for the most it is Dojo’s downfall

Dojo has all the bolts and screws you would need in front-end development and still nobody tells you how they fit together. Figuring it out by yourself is the hardest and most disgusting part of Dojo.
Actually, making a framework on top of Dojo requires so little effort that people do it all the time without even realising it. What is missing is a definitive guide on how it should be used in a real world project or a good software architect supervising it.

Dojo 2

In recent years, Dojo started falling behind the frantically developing world of JavaScript pending a full rewrite in form of Dojo 2. I have had the pleasure to use some of the new modules (dstore anddgrid) in their infancy and sincerely hope that the rewrite will give Dojo an entirely new life.

Dojo’s structure

Dojo is split into 3 official modules:

• dojo – core of the library, you can build pretty much anything with it,
• dijit – most of the User Interface related code lives here,
• dojox – community contributions not deemed stable enough to be pulled into dijit or dojo, still it is very useful,

I also know of 3 future modules which will be incorporated into Dojo 2 release:

• dstore – replaces dojo/store, the Data Storage implementation of Dojo,
• dmodel – specifically Data Modelling tool extracted from dstore,
• dgrid – Dojo’s grid implementation, call it whatever you want: I absolutely love it for displaying tabular data/extending it with whatever feature I might dream of.

Random games comparisons

Using Dojo and Angular feels like playing:

• Defense of the Ancients and League of Legends/Heroes of the Storm,
• Counter Strike and Quake/Team Fortress,
• Starcraft and Warcraft.

The latter provides more immediate fun but the former, provides feelings of accomplishment and confidence that once you get the hang of things, it will just work.

DotA taught me enough about the genre (well, there wasn’t any genre yet when I played it the most) to immediately jump into mid-to-high level LoL/HotS games just as Dojo taught me enough about JavaScript internals to easily grasp Angular concepts.

Why React?

Basically, Dijit lacks an easy to use templating system while it is React’s JSX’s, greatest feature. It is as simple as that.

Some people love Dijit, I am not one of them. While stock implementation is a lot closer to Angular in terms of opinionation and ease of use, the Dijit’s core _WidgetBase is more difficult to customize. It’s kind of like Java: well defined and structured, but requires a lot of boilerplate code and initial effort.

Proof of concept

Great, you are still here. So let’s get to the proof of concept example. You can see the fully working comparison of React vs Dijit here.

What are we doing?

I tried something more ambitious, but my lack of knowledge of React told me…

So here we are: displaying a list of messages and getting the personalized alert() upon clicking them.

Development setup

• PyCharm IDE,
• Jetbrains’s Babel File Watcher to transpile JSX + ES6 to ES5, it is by far the simplest to set up (as compared to those crazy grunt/gulp/webpack/browserify wombo-combo Starter Kits floating around the Internet nowadays),
• gulp-serve as a simple HTTP server hosting code,

Issues and insights worth mentioning

• AMD is subset of Dojo’s asynchronous modules implementation, Dojo had them long before it became standard and has extra loaders that didn’t make it into the final standard. It is kind of like a square is a rectangle, but not the other way around,
• Dojo’s inheritance model is incompatible with JavaScript strict mode, but otherwise should work fine with ES2015 transpilers,
• Personally, I did not figure out how to circumvent automatic inclusion of ‘use strict’; in Babel for just the Dojo files, so I stick to the ES5,

index.html

Dumbed down version of index.html:

The entry point (main.jsx)

Custom Dijit widget code:

Yeah, creating custom Dijit widget is cumbersome.

EntryList.js

Entry.js

ReactEntry.jsx

Yeah exactly, this is all there is:

Conclusions

I am not sure how it will work out in my Today I learned app, but for now using React instead of custom Dijit looks very promising in solving the problem of Dojo being too complicated for the average mortal.