Yesod and Angular JS (and Fay)
By John Lenz. December 16, 2013.
Recently I have been investigating the best way of integrating AngularJs into a Yesod application. For a while I considered adding the Angular code into Yesod widgets, but I have settled on using the new embedded static subsite so that the Angular code is managed separately from the Yesod handlers and widgets. What I particularly like about this approach is its testability. One of the key design philosophies of Angular is to make testing easy. I was pleasantly surprised how easy it is to use the already developed testing tools with only a little glue code that I had to write.
As of Dec 16, 2013 the code is not yet on Hackage. It can currently be found in the yesod-static-generators package, which includes both the generator and an example application. I plan on sticking it on Hackage soon, once I get some feedback on which final package it should be in.
Several things in Angular can be done in more than one way because Angular supports a whole range of server and framework technologies. For the Angular code to be integrated into a Yesod application by my static generator, the Angular code must be written in a certain style (and these sometimes conflict with example Angular code you find around the web). Therefore, if you are just learning Angular I suggest you experiment with Angular outside of Yesod so that you can follow along with the online examples and the Angular guide directly. Once you get somewhat familiar (don't need to be an expert) you can then start integrating Angular into a Yesod application, keeping in mind that sometimes you must adapt examples from the Angular guide and elsewhere around the web so that they work with this generator.
- The view consists of the Yesod handlers plus the widget hamlet/lucius/cassius. This is normal Yesod code except that these widgets should NOT use any julius! Instead they take advantage of the DSL which is created by the Angular module. These Yesod widgets do not need to know all the internal details of the Angular code, which greatly eases unit testing.
The key in this design is that the Angular static generator manages the Angular code during compile time and that the view in the Yesod handlers can take advantage of the Angular DSL by just referencing a single script file inside the static subsite.
A major goal of Angular is to make the code easy to test (as long as the right tools are in place). Designing the application as mentioned above fits nicely with the available testing tools. I discuss these tools in the next post.