Learning Mayhem

So a couple of months ago, I was minding my own business at the Esri Developer Summit when I first heard of Mayhem. I had no idea this was even in the works. I then had the chance to attend a small meetup at the developer summit where Dylan from Sitepen and founder of Dojo talked about it some more. He not only talked about Mayhem, he talked about progress on Dojo 2 and just recently Dojo updated the look of their site and added a roadmap for Dojo 2. This is probably the most activity I have ever seen on Dojo 2 in this short of a timespan, so hopefully from here things can progress quickly.

But back to Mayhem. First things first, it is still very early stages. The docs are also pretty extensive and still not complete. One of the main things is the fact that it is built using TypeScript, which also seems to be the focus for Dojo 2. There’s a few advantages here, 1, you get the static typing in your code, which is yay. 2, you can compile TypeScript to ES6 modules or ES5. You could even compile it to either commonjs or amd, which is a very convenient feature. Also, TypeScript is also probably one of the only language to JavaScript languages I don’t know very well. It’s really a superset of JavaScript, which just means you can write regular JavaScript in a TypeScript file.

So despite all the experimental warnings, I decided to go through the docs and see if I could get a Mayhem app up and running. I was thusly kicked in the nads and had to sit in the corner. Some of this was my lack of TypeScript knowledge, some of this was just the fact that Mayhem is young, in development and not all the pieces are there and docs are still maturing with changes. I took a break and came back to it later.

Hey I just met you, and this is crazy

First thing I did was tried to build the branch of Mayhem with the yeoman generator. I had no luck here, but I was able to look at the templates for the generator to just quickly see what it was trying to do and copied them for my sample. This is like a mega-cheat, but it helped.

I decided to install Mayhem via bower, via the instructions in the docs, which worked great, except that the compiled files are not included. So you’ll need to go in the bower_components/mayhem and run npm install and grunt build. That actually worked fine, so let’s just chalk that up to a work in progress.

Then I had to install various grunt modules which you can see here. I copied the Gruntfile from the generator branch, with a few tweaks. I haven’t used Grunt in while, but it’s as solid as ever. Now it was time to try my hand at some TypeScript.

Call me Mayhem

I had to set up a dojoConfig to point to the bower_components folder for all the dojo and mayhem bits along with a couple of other libraries. I found it curious that Mayhem is using esprima somewhere. I thought that would be more for tooling, but I haven’t dug in too heavily in the source for Mayhem yet. gist

With that all set, I needed a main file. gist

So what we’re doing here is setting up the WebApplication with a route called index. My assumption was that when I went that route (look like http://localhost/src/#index), it would show the appropriate HTML file, but this is where I am running into issues at the moment. I’m still working on it, but as of right now, it’s only bringing in the default Application.html. Again, I think this is just that Mayhem is still in the process of changing and there is a note that the generator branch doesn’t work with the master branch, so if I figure this out, I’ll send a pull-request. But, this is the farthest I have been able to get with Mayhem, so I was pretty jazzed about that.

Next steps

As of right now, I have a semi-working sample available in this github repo. During your testing with compiling the TypeScript files, you may need to go to the bower_components/mayhem/dist directory you compiled earlier and rename the _typings folder to typings. For the end result, I don’t think this mattered, but while I was in the process of testing, this was causing me errors. I also still get errors that when compiling to TypeScript that it cannot find the external modules for the Mayhem bits, but like most life problems, if I ignore them everything still works anyway. If anything, my interest in Mayhem and Dojo 2 are definitely going to be pushing my eagerness to learn TypeScript. I’m always willing to try and learn something new.

If you are interested in contributing to Mayhem or Dojo, check out the guidelines for each.