1. Windows 8 for Web Developers

2. The nextperience!

3. Cross competence...
...not cross platform.

4. Yes, you can use your favourite js library…
…but find out what the “integration story” is.

5. Anatomy of an HTML5 Metro app
HTML5
CSS
Javascript + client frameworks HTML5
WinJS
WinRT
WinJS
C# Libraries (Win8)
WinRT

6. Demo
Basic solution

7. App package - appx
- Package (zip)
- Folders and files
- Manifest Host
AppContainer
- Application Folder

8. App package .appx

9. WinJS – A Windows JavaScript library
Controls with themed styling
Application model
Navigation
Utils & helpers
Promises WinJS
WinJS namespace

10. WinJS – JavaScript files
<!-- WinJS JavaScript files -->
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

11. WinJS - Controls
Controls are touch enabled and metro styled

12. ListView, grouping, Semantic Zoom
• “Contract” for grouping your data
• Semantic zoom adds to user experience

13. “ListView CRUD”
- Need to implement a “big” contract….
- …but you will be rewarded!

14. WinJS – Application model
WinJS.UI.processAll();
The Application object
Life time management
Queueing of events
WinJS
Navigation

15. WinJS - processAll
// Simplified..
app.onactivated = function(e){
...
WinJS.UI.processAll();
...
};
-----------
// Equivalent to, for each node with data-win-control:
var object = new WinJS.UI.SomeMetroControl(element, options););

16. The Application object
- var app = WinJS.Application;
- Creating a placeholder for your application
object
- Callbacks
- onloaded, onactivated, onready
- onunloaded, oncheckpoint
- Starting the app
- app.start();

17. Queueing of events
- Encapsulation still important!
- Eventing enables async integration of
modules
- Simple interface
- addEventListener(“eventName”, callback)
- queueEvent(eventRecord)
- removeEventListener(“eventName”, callback)

18. Demo
Application start

19. CSS

20. CSS3 Grid!

21. CSS Grid
- Web standard under construction
- May change
- No longer “float hell”
- “As easy as using tables”
- New unit: fragment (fr)
- Uses “remaining part of page”

22. CSS Grid

23. CSS Grid
#container {
display: -ms-grid;
-ms-grid-columns: 300px 1fr 300px;
-ms-grid-rows: 100px 1fr 100px;
}
#header {
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row: 1;
}

24. WinJS - CSS
...
@media screen and (-ms-view-state: fullscreen-landscape)
{}
@media screen and (-ms-view-state: snapped)
{}
@media screen and (-ms-view-state: filled)
{}
@media screen and (-ms-view-state: fullscreen-portrait)
{}

25. WinJS – CSS
<!-- WinJS style sheets--only include one. -->
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css"
rel="stylesheet">
<link href="//Microsoft.WinJS.0.6/css/ui-light.css"
rel="stylesheet">
CODE!
All prefixed win

26. WinJS – Utils And helpers
Promises
xhr (AJAX)
Namespaces
Constructing objects
Mixins
WinJS

27. WinJS – Promises - Async
promise.then(completeHandler,
errorHandler,
progressHandler)
.done()

28. WinJS – xhr
WinJS.xhr({
url: "http://www.example.org/somedata.json"
}).then(function(response){
updateDisplay(JSON.parse(response.responseText));
})
.done();

29. WinRT - Windows Runtime
• Recap (?)
• Windows Namespace
• (Accessing C# code possible)
WinRT

30. Metro HTML5 Contexts - Security
- Local Context
- Default, secure, cross-domain
ms-wwa://
- Web Context
- No WinRT ms-wwa- http:// and
web:/// https://

31. Metro HTML5 Contexts – Security, xhr

32. Demo
Feed reader

33. Our experience
Large templates
Need Blend
Wrapper classes, pros/cons
WinRT is written for C# and C++ too!

34. Advices
Encapsulation is still important. (No scopes in HTML) Use events.
Start to use Blend.
Learn the CSS Grid.
Put media queries in the bottom of a file.

35. Improvements..
Unit tests
Two-way data binding
No “larger app” architecture template/help
“Blend mode” debugging in VS === killer tool

36. Resources
Dev Center/msdn
Build/conference videos
blog.jayway.com

37. Thank you!

39. Bonus slides...

40. WinJS - Namespaces

41. WinJS – Utils, scoping
performance
a = 5;
(function(global, WinJS) {
var q = WinJS.Utilities.query;
WinJS.UI.processAll().then(function() {
q(".output").forEach(function(e) {
e.innerText = a;
});
});
})(window, WinJS);

42. WinJS – Utils
var MyThing = WinJS.Class.define(
function(){ },
{
somethingUseful: function(){ }
});

43. WinJS - Mixins
var MyControl = WinJS.Class.mix(
function(element, options){
this._domElement = element;
// your code here..
},
WinJS.UI.DOMEventMixin,
WinJS.Utilities
.createEventProperties({swizzle: 0, spin: 0})
);
var c = new MyControl(element);
c.onswizzle = function(){ }
c.addEventListener("spin", function(){ }, false);