RequireJS, Windows 8/WinJS, and Cross Platform
Overview
So I have seen a few blog posts talking about RequireJS usage with Windows 8/WinJS, however I had not seen any with working samples or they were "incomplete". I want to take this blog article a step further and provide a fully functioning sample.
Why RequireJS with Windows 8?
I see the acceptance of JavaScript as a class A citizen in Windows now as a big jump 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 maintain a smaller code base. You just need to structure your code correctly.
Structuring your code for Cross Platform
The code sample I have included is my first stab at how you should structure your code for cross platform. This is one approach, so see what you think, I think its pretty slick, but let the community decide :). What I did is define an entry point module for each state that a Windows 8 app can start from. 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", which is what JavaScript is ideal for. Looking at the code sample you can see my html view has different tags of ids, and my viewmodels define click handlers and other logic that should be wired up for those id's and my native modules do the wiring up and can intercept and manipulate code anywhere in the middle. This is the idea behind it. 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 like the gyroscope.
HTML/CSS - define id's and classes appropriately. You will probably have a unique version of each one per platform
Native Modules - intercepts code as necessary to add in native functionality and wires up handlers to HTML and choses the id's that everything is wired to.
Common Modules - defines the logic that happens when actions are performed during your application. Maybe defines your viewmodels, your business logic, your ajax calls etc.
What about iOS and Android?
Well, I still don't have a perfect answer here yet. I'll have to do some playing around. My first thoughts are create an app that launches a browser to view your web app. At least following the above pattern you can hit windows 8, windows phone, surface, and the web, while allowing access (but not native functionality) to iOS and Android. So not ideal, but maybe one day.
Summary
So 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 do so, so please check back to see how it is going. I will field questions and post tips and tricks as I find them and time.
Comments
Anonymous
March 18, 2014
Very nice to finally see MSFT embracing a proper module pattern. Keep it up!Anonymous
April 08, 2015
could you please provide any sample or example for windows 8.1 tablet app using angularjs,winjs and reuirejs ?