Building Windows 8 applications with JavaScript  JavaScript by Robert MacLean
Hi 
Today Tomorrow
Windows 8?
Metro Design vs. Metro Apps
Why a Metro App?
Browsers in Windows 8
Marketplace
Windows Runtime
WinJS
Your tools & knowledge
Summary Windows 8 is coming Modern way for users to work, modern way for developers to build JavaScript & HTML 5 is FIRST CLASS Questions?
Contact Details Robert MacLean robert@sadev.co.za 073 142 5422 @rmaclean http://www.sadev.co.za
Out this year 100 000 new & improved features Big focuses on the future Consumerisation of IT Tablets ARM support New development options and tools
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
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
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
Hardware Accelerated in IE 9 & IE 10
Marketplace App store, like any other Process Submission Testing & Approval by Microsoft Profit Free Adverts Trials (limited time & limited features) In App Purchases
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
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
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
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/
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
Host Enforcement Escape Hatches • Can work around when needed: – toStaticHTML method – Use DOM creation APIs – Use WinJS.Utilities.setInnerHTMLUnsafe – Use msWWA.execUnsafeLocalFunction

Windows 8 & JavaScript

  • 1.
    Building Windows 8applications with JavaScript  JavaScript by Robert MacLean
  • 2.
  • 3.
  • 4.
  • 5.
    Metro Design vs.Metro Apps
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
    Your tools &knowledge
  • 12.
    Summary Windows 8 iscoming 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 073142 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 MetroApps 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 Windows8 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.
  • 19.
    Marketplace App store, likeany other Process Submission Testing & Approval by Microsoft Profit Free Adverts Trials (limited time & limited features) In App Purchases
  • 20.
    Windows Runtime (WinRT) Win32API 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 WindowsRuntime 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 Thisis 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 andlocal 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 • Preventspotentially “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 EscapeHatches • Can work around when needed: – toStaticHTML method – Use DOM creation APIs – Use WinJS.Utilities.setInnerHTMLUnsafe – Use msWWA.execUnsafeLocalFunction