windows 8 & javascript
DESCRIPTION
Slides from my talk at JSinSA - the first part (all lolcatTRANSCRIPT
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?
Out this year100 000 new & improved features
Big focuses on the futureConsumerisation of ITTablets
ARM support
New development options and tools
Metro
Metro design & “Metro apps” are differentDesign matters
Common language for designCommon UX for Microsoft
XboxWindowsWindows Phone
Not going to be covered in this talk
Benefits of Metro Apps
TrustSandboxedUser is in controlOpt-in for features
Take advantage of Windows RT featuresCross CPU supportBacked by the cloudEasy for users to get, install and migrate apps
MarketplaceWindows Live
Browsers in Windows 8
Internet Explorer 10Metro App & Traditional Desktop Application
Metro is plug in free
Expect it to be better than IE 9, in every wayMicrosoft has a new model for development
Firefox & ChromeMetro App & Traditional Desktop ApplicationMozilla & Google getting special permissions & working with Microsoft
Hardware Accelerated in IE 9 & IE 10
Marketplace
App store, like any otherProcess
SubmissionTesting & Approval by MicrosoftProfit
FreeAdvertsTrials (limited time & limited features)In App Purchases
Windows Runtime (WinRT)
Win32 API is twenty years oldDifferent world & different devices
WinRT built from ground upModern thinking, “stolen” from best of breed
MobileAsync.NET & Java
All languages are first class
WinJS
Project the Windows Runtime into JavaScriptWinJS – implemented as
Core library UI libraryResource librariesStyle sheets
Not portable, even to Windows 8 browsersProjectable to Windows Metadata
Can be consumed in other languages
Your favourite libraries
This is real JavaScriptYour patterns move acrossYour libraries move across
Be careful of cross domain checksSome additional securitySee 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
Do a security review if you bypass host enforcement!