Using React Instead of Dijit with Dojo Toolkit
03.03.2016 | 5 min read
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.
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?
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 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.
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.
- 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,
- 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,
Dumbed down version of index.html:
The entry point (main.jsx)
Custom Dijit widget code:
Yeah, creating custom Dijit widget is cumbersome.
Yeah exactly, this is all there is:
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.