Slides from my talk at JSinSA - the first part (all lolcat

1. Building Windows 8 applications
with JavaScript
 JavaScript
by Robert MacLean

2. Hi 

3. Today
Tomorrow

4. Windows 8?

5. Metro Design vs. Metro Apps

6. Why a Metro App?

7. Browsers in Windows 8

8. Marketplace

9. Windows Runtime

10. WinJS

11. Your tools & knowledge

12. Summary
Windows 8 is coming
Modern way for users to work,
modern way for developers to build
JavaScript & HTML 5 is FIRST CLASS
Questions?

13. Contact Details
Robert MacLean
robert@sadev.co.za
073 142 5422
@rmaclean
http://www.sadev.co.za

14. Out this year
100 000 new & improved features
Big focuses on the future
Consumerisation of IT
Tablets
ARM support
New development options and tools

15. Metro
Metro design & “Metro apps” are different
Design matters
Common language for design
Common UX for Microsoft
Xbox
Windows
Windows Phone
Not going to be covered in this talk

16. Benefits of Metro Apps
Trust
Sandboxed
User is in control
Opt-in for features
Take advantage of Windows RT
features
Cross CPU support
Backed by the cloud
Easy for users to get, install and
migrate apps
Marketplace
Windows Live

17. Browsers in Windows 8
Internet Explorer 10
Metro App & Traditional Desktop
Application
Metro is plug in free
Expect it to be better than IE 9, in every
way
Microsoft has a new model for
development
Firefox & Chrome
Metro App & Traditional Desktop
Application
Mozilla & Google getting special
permissions & working with Microsoft

18. Hardware Accelerated in IE 9 & IE 10

19. Marketplace
App store, like any other
Process
Submission
Testing & Approval by Microsoft
Profit
Free
Adverts
Trials (limited time & limited features)
In App Purchases

20. Windows Runtime (WinRT)
Win32 API is twenty years old
Different world & different
devices
WinRT built from ground up
Modern thinking, “stolen”
from best of breed
Mobile
Async
.NET & Java
All languages are first class

21. WinJS
Project the Windows Runtime into
JavaScript
WinJS – implemented as
Core library
UI library
Resource libraries
Style sheets
Not portable, even to Windows 8
browsers
Projectable to Windows Metadata
Can be consumed in other
languages

22. Your favourite libraries
This is real JavaScript
Your patterns move across
Your libraries move across
Be careful of cross domain
checks
Some additional security
See hidden slides

23. jQuery, XHR and local context
• jQuery xhr does a cross-domain check (in > v1.6)
– In local context, your origin is “ms-
wwa://{something}”
– Cross domain check fails
• Workarounds
– Use WinJS XHR
– Tell jQuery to bypass the check
• $.support.cors = true;
• http://api.jquery.com/jQuery.support/

24. Host Enforcement
• Prevents potentially “bad” HTML from getting
inserted
– Script blocks, iframes, event handlers, etc.
• Kicks in when setting strings
– innerHTML
– outerHTML
– setAdjacentHTML
• “data-” attributes in general not on the allowed
list
– WinJS specific ones are ok

25. Host Enforcement Escape Hatches
• Can work around when needed:
– toStaticHTML method
– Use DOM creation APIs
– Use WinJS.Utilities.setInnerHTMLUnsafe
– Use msWWA.execUnsafeLocalFunction