This document summarizes key points about developing Windows 8 JavaScript apps using WinJS. It discusses why to use WinJS, getting started, differences from web development, third party controls, testing, using C# libraries, asynchronous programming, storage options, debugging, and common gotchas. The document provides an overview of concepts and best practices for WinJS app development.

1. Windows 8 JavaScript Apps –
getting it right
brendan.kowitz@readify.net http://www.kowitz.net @brendankowitz

2. 1 • Introduction
• WinJs
• Testing
2 • TypeScript
• Using C# Libraries
• Debugging
3 • Wrapup

3. Why use WinJS?
• Can still use C# libraries
• Power of CSS3 and HTML5
• WinJS’s bindings to native controls and
also has many JS-only extensions for Win8
• JavaScript was always ASYNC
• Better than XAML

4. Introducing “Sorty”

5. Elo

6. Getting started with WinJs
• VS2012 (duh)
– VS 2012 Web Essentials
– Blend for Visual Studio
• Online: Roadmap for Windows Store apps
using JavaScript
– http://is.gd/ClIOax

7. So it’s like making a web site?…
• Its HTML5, JS and CSS
• Can use a large number of existing JS libs
• You have some browser limitations
• Watch out for DOM manipulation errors

8. …but not
• COM Wrapped in JavaScript
• Exception driven development
• You don’t have network latency to load
resources
• You don’t have traditional page events
• Tombstoning
• You don’t _need_ jQuery

9. 3rd Party JS Controls
• Existing JavaScript plugins _can_
– Produce problematic HTML
– Break Windows 8 UX guides
• Stick with shipped controls
• Or build your own
• Use those specifically created via a vendor
(Telerik etc)

10. Testing
• C# code can take advantage of built-in
Visual Studio Testing framework
• JS can use Mocha or other JS testing
libraries

11. Testing demo

12. Using C# Libraries
• Can only reference WinMD libraries
• WinMD libraries can reference portable
and Windows Store libraries
• Unit testing supported
• WinMD libraries CAN reference other
Windows Store and Portable Libraries

13. Async
• You will need to make use of the Promise
pattern
WinJS.xhr({
url:"http://www.example.org/somedata.json"
}).done(function (response) {
updateDisplay(
JSON.parse(response.responseText));
});
http://wiki.commonjs.org/wiki/Promises/A

14. Libraries
• Portable libraries
• WinMD libraries
• Windows Store Libraries

15. Consuming C# from WinJS

16. Typescript for WinJs?
• Yes.
• Windows 8 & VS2012
• Download the TypeScript plugin:
http://go.microsoft.com/fwlink/?LinkID=26
6563
• VS 2012 Web Essentials:
http://visualstudiogallery.msdn.microsoft.c
om/07d54d12-7133-4e15-becb-
6f451ea3bea6

17. TypeScript in WinJS

18. Storage
• Local storage
• Roaming storage
• Offline storage
– IndexDB

19. Debugging
• You can debug in JS
• You can debug in C#
• No, you can’t debug across both (yet)

20. Gotchas
• DEBUGGING. – If using C# Libraries with JS
• WinJS adds crazy inline stuff to the DOM

21. Getting it together

22. Discussion
• Do you currently have a WinJS app?
• Would you consider writing a WinJS app?
• Any other questions?

23. brendan.kowitz@readify.net
Thank you. http://www.kowitz.net
@brendankowitz
http://hg.kowitz.net/ddd/2012-Brisbane