JavaScript for Line of Business Applications

In my day job, I work on appear.in, a video chat service built with AngularJS and WebRTC. Recently, our application has become more complex, and our HTML templates ended up having a lot of state in them. We could no longer just use unit testing to verify our application logic, we also needed to test the state in our templates.

For our unit testing, we landed on using Jasmine and Karma, and this has worked fairly well for us. So when we wanted to test our templates, we wanted to use the same tools.

Hungry for some file templates to get you started in the morning? Well now you can fill up on a set of web template packs for Visual Studio 2012 and 2013. SideWaffle is an open source project that creates a Visual Studio extension containing a set of file templates you can use for web projects.
SideWaffle currently has several templates including 10 I contributed for Angular, Durandal, and creating a JavaScript IIFE. One of the best parts is that SideWaffle will be frequently updated with new and useful templates (they do check for high quality templates). I expect that in the near term we’ll see a lot of additions.
* Angular Controller (using Controller As syntax)
* Angular Controller (using $scope)
* Angular Directive (creates a skeleton for a directive)
* Angular Factory (great for data, logging, and other services)
* Angular Module (sets up a module)
* Durandal ViewModel
* Durandal Service
* Durandal main.js (common creation syntax for kicking off Durandal)
* JavaScript IIFE (Basic IIFE using vanilla.js)
I use the Angular templates in my upcoming course at Pluralsight on using Angular and Breeze to build a powerful SPA.

I really enjoy using block-style template inheritance in Jade and Handlebars. From my understanding, this pattern was popularized by Django.

AngularJS rocks, but it relies on template inclusion to define layouts. This means the a layout context is spread across several templates. With block-style template inheritance, layouts are defined within a single template. Moreover, multiple layouts can be DRY’ed up with inheritance.

So I set out to build angular-blocks, an AngularJS module, to support template blocks.

My least favourite part in Angular is their templating syntax. Angular uses plain HTML with custom DOM attributes attributes for control flow (ng-hide, ng-show, ng-repeat). Whereas Ember uses Handlebars which supports more familiar control flow statements (if, else, each). Personally I prefer the Ember approach as it’s similar to most templating languages I have used (erb, haml, etc) and it’s easier for my CPU (aka brain) to scan and parse.

Lets look at a couple of examples.