Elad Katz senior architect @ sela Introduction to Win8 HTML5 Programming

Agenda Application anatomy WinJS jQuery & third parties WinRT Blend 5

Application Anatomy

Hello World Disclaimer: Alpha demoes ahead. Demo

App on disc to running

HTML app platform

HTML, CSS, JS HTML5 Indexed DB App Cache Web Workers Canvas SVG FormData CSS3 animations & transitions XHR FileAPI Web Sockets Geolocation PostMessage

Single HTML5 DOCTYPE Standards web, plug-in free Single window Access to Windows Runtime

RSS reader #1 Xhr, WinJS, templating & css Demo

WinJS

WinJS WinJS is the main JavaScript library for Windows8, which consists of several files. It adds support for: Controls DataBinding Animations Make your apps look and feel great Matches the Windows Metro design style Controls for common user experiences Designed for touch as well as traditional input Scales across form factors

WinJS WinJS in itself is regular JavaScript, but it has dependencies on WinRT and MS specific features Porting browser applications to Metro applications is pretty straight forward Creating cross platform application is not possible, but the code-base sharing is very good.

Third party libraries Metro applications are fully compatible with libraries such as jQuery and KnockoutJS Many best practices that are in use in winJS comes from these libraries. Use jQuery if you’re planning on making it cross-platform later on. Otherwise it’s probably not worth it. KnockoutJS is more sophisticated than WinJS at this stage, but this will probably change in future builds

WinJS Controls Demo

Control Library

Control Library

Application lifetime

sessionState in Windows Library for JavaScript (WinJS) can help. Use Windows.Storage.ApplicationData to save app state.

WinRT

WinRT The namespace windows is reserved to WinRT WinRT let us have direct access to the new windows API Useful mostly for windows contracts, or in scenarios where we don’t care about other platforms

WinRT – Harnessing the power of Windows Search Contract Share Contract Demo

Blend 5 The excellent XAML authoring tool is now for HTML5 as well. HTML designers in the world of jQuery plugins become less and less relevant – it’s a very hard task to style a jQueryUI control, and it’s done manually. Blend5 has the IE10 engine inside, and can run our JS to allow us perfect design-time experience

Blend 5 HTML can be stronger than compiled languages Demo

We barely scraped the surface APIs WinRT full API WinJS full control API Important features Navigation and fragments List controls Animations

Summary Win8 HTML5 applications are first and foremost “Single page” HTML applications Porting from web apps to win8 is pretty straightforward. Not so much the other way around WinRT is purely for Windows WinJS is de-facto purely for Windows Large code base can be shared.

Summary Win8 HTML application uses best practices for: Control library Databinding and templating Single-Page practices WinRT integration is as simple as it is from other languages

Elad Katz Twitter: @eladkt http://blogs.microsoft.co.il/blogs/eladkatz thank you