RequireJS, Windows 8/WinJS, and Cross Platform

Overview

I have been seeing a few blog posts which are discussing RequireJS usage with Windows 8/WinJS; however, I have not seen any posts with working samples so far. I want to take this blog article a step further and provide a fully functioning sample.

Why RequireJS with Windows 8?

The acceptance of JavaScript as a class-A citizen in Windows is a big leap forward in cross-platform compatibility.  Using RequireJS in your Windows 8 app now allows you the ability to easily port modern web apps to Windows with ease and to maintain a smaller code base.  You just need to structure your code correctly.

Structuring your code for crossing platforms

The code sample I have included is my first stab at how you should structure your code for cross-platform.  This is only one approach, so let me know what you think. [It seems pretty slick to me, but I’ll  let the community decide 🙂 ].
My initial step was to define an entry point module for each state that a Windows 8 app could use as a starting spot.  From there, you load and use Windows 8 specific wrappers that allow access into your platform.  The view models and down the stack would be considered common code.  Everything in this structure relies on “loose contracts”, for which JavaScript is ideal.  Looking at the code sample you can see that my html view has different tags of id’s, and my view models define click handlers and other logic that should be wired up for those id’s. My native modules do the wiring up and can intercept and manipulate code anywhere in the middle.  If you follow the same UI naming conventions across all platforms, all you need to do is use your platform-specific modules to define the specific view and handling of things, such as the gyroscope.

HTML/CSS – define id’s and classes appropriately.  You will probably have a unique version of each one per platform.

Native Modules – intercept code as necessary to add in native functionality, wire-up handlers to HTML, and chose the id’s to which everything is wired.

Common Modules – define the logic that happens when actions are performed during your application.  Also can define your viewmodels, your business logic, your ajax calls etc.

What about iOS and Android?

Well, I still don’t have a perfect answer here just yet.  I’ll have to do some playing around.  My first thoughts are to create an app that launches a browser to view my web app.  Following the above pattern, you can hit Windows 8, the Windows phone, the Surface, and the web while allowing access (but not native functionality) to iOS and Android.  So not ideal, but maybe one day it will be.

Summary

I hope the sample project is helpful for you.  I will continue to develop this code base and put it on all platforms using this basic architecture and idea.  I’ll post some more stuff as I work on this, so please continue to check and see how it’s going.  I will field questions and post tips and tricks as I find them.

Download: http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-components-postattachments/00-10-49-05-92/SchedulerApp.zip

Leave a Reply

Your email address will not be published. Required fields are marked *