HTML5 / JavaScript Windows 8 / WinRT

Windows 8 Loves Web Developers
Lauri Svan, SC5 | 5.3.2013
©2012 Microsoft Corporation. All rights reserved.
What Windows 8 Means for Me?
• Fast, HTML5 compliant browser engine
• Growing and potentially huge ecosystem of
consumer and enterprise users
• Access to system services like a native app
• New conventions I need to learn and live with
#td2013fi
HTML5 and Windows 8 – Best of the Both Worlds?
Windows 8 – a Holistic Developer Offering
• It feels a bit overwhelming at start
• But you will soon start seeing familiar patterns
• It is HTML5, CSS and JavaScript after all
• Your skills will transfer
• But your existing coding patterns might not
#td2013fi
Demo: Hacking a
bit with Visual
Studio & Blender
Régis
Laurent
Director of Operations,
Global Knowledge
Competencies include:
Gold Learning
Silver System Management
Browser Runtime
WinJS.UI
WinJS API
Utility Libraries
Page Specific
Logic
Pages
Data Sources
Utility Libraries
Backbone.js
jQuery
Misc. Code
Templates
Views
Models
Anatomy of a Windows 8 HTML5 App
What do I Mean by Different? Tools.
Windows 8
Elsewhere
NuGet
Bower, NPM
WinRT
Cordova (ex. PhoneGap)
Git (soon integrated into Visual Studio)
Git
Visual Studio + Expression Blend
Eclipse
Node.js (+ CygWin)
Node.js
Windows 8 on Parallels on OS/X
OS/X
What do I Mean by Different? Frameworks.
Windows 8
Elsewhere
WinJS UI
Bootstrap, jQuery Mobile
WinJS.UI
Backbone.js
-ms-grid styles
Semantic.gs
none (not needed)
Modernizr
none (a lot of need)
jQuery
none (no need yet)
Require.js
WinJS APIs (HTML5?)
HTML5 APIs, Cordova API
Windows 8 Specific vs. Common
It is silly to reinvent the wheel if it already works
Grid – it is better than the one you are used to
Your existing CSS code will likely be wasted
XHRs work both normal way and with WinJS
Implement WinJS UI specific interfaces/adapters
for your API (some reuse possible!)
You will need to learn the conventions of
packaging Windows 8 apps, including splash
screens, tiles etc.
Nothing stops you adding a Windows 8 subproject
into your project.
e.g. RequireJS and Grunt, Git work all fine
A good list of alternatives when you cannot use
the 3rd party libraries
As long as they don’t break the security sandbox,
they should be fine.
My App in Windows 8 - It the Same Anymore?
• Your application will be a separate entity, not a
result of a build parametrization
• You will have a separate UI skeleton with different
HTML, and CSS
• You may share non-UI (and some UI) libraries
#td2013fi
Demo: Using
RequireJS, jQuery
and D3 Libraries in
Windows 8 App
Régis
Laurent
Director of Operations,
Global Knowledge
Competencies include:
Gold Learning
Silver System Management
Q&A
t
Thank you for coming!
Feedback can be given via mobile
or laptop through techdays.fi
seminar schedule.
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational
purposes only and represents the current view of Microsoft Corporation as of the date of this presentations. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft,
and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
#td2013fi