Transcript Windows 8 Metro / HTML5 JS “First Blood” Peter Kellner http://peterkellner.net Microsoft MVP, ASP.NET ASPInsider Primary Organizer Silicon Valley Code Camp October 6th and 7th 2012

Windows 8 Metro / HTML5 JS
“First Blood”
Peter Kellner
http://peterkellner.net
Microsoft MVP, ASP.NET
ASPInsider
Primary Organizer
Silicon Valley Code Camp October 6th and 7th 2012
The Plan
•
•
•
•
Intro To Windows 8 And Interface
JavaScript Patterns In Windows 8
WinRT Basics
Silicon Valley Code Camp Speaker Viewer
IE10 Discusson
•
•
•
•
Cut The Rope (runs Metro and Broswer)
IE10 Browser
IE10 Metro
Strict mode required for Metro
The New UI
•
•
•
•
•
•
The Lost Start Button (Win Logo Key)
Charms (Search and Settings) (from left)
The app bar (from top or bottom)
Keyboard shortcuts
Mouse Shortcuts
Tablet Not Necessary
JavaScript Patterns For Windows 8
Fundamentals of JavaScript
Libraries
Tools
Best Practices
Variable Scope
• JavaScript has:
– Global scope (if forget var keyword)
– Function scope
– Defaults to global (Greedy)
• Metro style apps use single script context for
the app
– Doesn’t do page navigation – scopes don’t reset
– Each “page” will need different scripts
– Global scope can get really busy
Module Patten
Defines annoymous function, execute immediately. Variables
pulled into function scope. Still access global scope
(WinJS.Navigation…)
(function() {
var x = 100;
function attachListenersToStuffForExample() {
zz = 10;
}
WinJS.Navigation.navigate(“/html/myapp1.html”);
})();
Using Objects as Namespaces
Helper in base.js
WinJS.Namespace.define
Example Usage:
WinJS.Namespace.define(“MyNameSpace”,{
myUsefulFunction: function() { alert(‘hi’); }
});
MyNameSpace.myUsefulFunction();
Defining Objects with WinJS
Always put objects on Prototype (use WinJS
helper methods, big perf increase)
Example:
var myObj = WinJS.Class.define(
function() { },
{
method1: function() {alert(‘hi’);}
});
JavaScript Libraries
Microsoft says: “JQuery Just works!”
You can use other libraries! (test it yourself
though)
Exceptions: XHR differences, Host
Enforcements, etc. (IE10 does not support
cores, single domain not enforced, cores request
fails)
Security Issues
Host Enforcements
Prevents “bad” HTML from getting inserted
(script blocks,iframes,event handler,etc.)
Reason is because JavaScript has full WinRT
Parses innerHTML; outerHTML;
setAdjacentHTML (data- are not on whitelist)
Contexts (you choose)
Local Context (My Appointments)
Full access to WinRT (all your code)
Web Context (bing app with map)
Full access to Web
Pull Scripts
No Calls to WinRT
(window.PostMessage To Send Data Between (need
to marshal data because string))
WinJS Basics
Helpers for NS/Constructor Definitions
Promises
Nav/App Model
Page Fragments
Data Binding
Controls
Animations
And More
App Model
•
•
•
•
•
Page Loads
Scripts Loads
Script Executes
Hookup to Events
Page Shows
Promises / Async Processing
Object that says: “I want you to do something
and tell me later” Hence “Then” with 3 callback
functions. (success,failure,error)
Very similar to other frameworks
WinJS.xhr({url:
“http://…}).then(success(),failure(),error()…
In-box controls for Metro style apps
DataBinding Engine
Oneway only (Data to UI)
Async (coalescing, just one change)
The SV Code Camp App
Off to the Demo…
References
• BUILD Videos
Windows Libraries for JavaScript (WinJS)
Building Metro Style Apps With JavaScript
Questions
Peter Kellner
• Mobile Web Developer / Server Side & Client Side
Consultant/Architect (looking for clients!)
• 2007-2012 MVP, ASP.NET
• Development including publishing 4 MSDN Articles on ASP.NET 2.0
• Organized 2006-2012 Silicon Valley Code Camps
• Complete Custom Insurance Co. Management s/w to run $200M
business.
• 1986 – 2001 President Tufden Inc. Built and Delivered: 500 doctor
office turnkey computer systems; University Clinic Scheduling System;
• . Cornell University BS,MS Engineering
[email protected]
http://peterkellner.net