office365 adal, with backbone MVVC and cordova build


Amanda Silver’s talk, at TechEd 2014 USA, was heralded as something to watch out for. So I watched the video. It showed her performing the steps of incrementally improving the default project created on using the new hybrid, multi-platform project types offered by an augmented visual studio 2012 (update 2). Her steps taught us as much about the tools and techniques as the means of formulating the desired output: an HTML app with office365 login screen, running inside a webview on various devices.

So its been quite a journey.

we have learned to read javascript – the kind that uses its native functional programing style. And, since javascript should now be thought of as a virtual machine instruction set for cloud computing, being it a mini-cloud in the browser/app or in a server, we invested time learning how the modern toolchain takes javascript and applied software engineering principles for the masses. And that meant understanding not only software engineering toolchains (bootstrap for layout, backbone for MVVC, underscore for functional programming lib, modularization techniques) but also the role of typescript 1.0 – microsoft macro programming tool that spits out javascript build to the engineering conventions of those toolchains.

Amandas demo didn’t come with a dowbload of the steps, or the files she inserted into her default project. So, we typed in what we saw in the video, working around what we could not see. For example, we learned to add a MainView.ts file to the project source, and reference its compiled MainView.js in the index.html file.

Here is a rough summary enabling one to replicate what we did.

have running the MSDN sample backbone project intended to showcase the tool chain that builds a todo app, based on localstorage, on several phones. This gives us backbone, underscore and the like.

Use the find typings right click action to augment the project with the backbone.d.ts file (and dependencies). This enables us to write MainView.ts (which subclasses backbone MVVC classes)

From her video, type in the model and view subclasses, noting that the Backbone.View has to apply a generic (unlike her code) – given the declarations used in the typings file available to us mere mortals. So use <any>. Similarly, the type of events property requires one prefix the dictionary with an <any> (per the intellisense help).

Don’t forget to use nuget to add bootstrap libraries  and css (and move them to the project files, for the cordova build conventions).

Since the loginview takes over the main element of the logical structure of the page only when initialized, to the index.html we added an inline script – that simply called Woodgrove.Application.initialize() – that duly registers a view building method to be called upon the runtime raising the deviceloaded event.

we also ran the add connected service tool, for our AAD/Office365 tenant.



its quite interesting to see what doesn’t work – on the different platforms. Windows 8 wont load external file (that fortunately the build process as linked and loaded anyways, form local sources). It fires up the office365 login page flow fine, but wont fire the event that resume the async thread waiting to handle the result. On ripple emulator of an android build, the mouse click for the login button fires twice, causing the login sequence to execute twice. Fortunately, the token library pulls the token recorded form the first run from the cache.


All in the all, a course in learning the hard way. But I feel its worth it as we are at a shift point, in which all the old techniques are being re-packaged in all these new forms, ready for a new lease of life.



Computer Programmer who often does network administration with focus on security servers. Very strong in Microsoft Azure cloud!
This entry was posted in cordova. Bookmark the permalink.