windows 8 app dev with html and javascript dev322
TRANSCRIPT
![Page 1: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/1.jpg)
Windows 8 App Dev
With HTML and JavaScript
DEV322
![Page 2: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/2.jpg)
Me
Aaron PowellReadify Senior Developer & Technical Specialist (Web)IE MVP@slacehttp://www.aaron-powell.comAuthor of Pinboard for Windows 8
![Page 3: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/3.jpg)
This session
Windows 8 development with HTML & JavaScriptHow to approachGotchasLimitations
![Page 4: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/4.jpg)
Approaching development
![Page 5: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/5.jpg)
![Page 6: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/6.jpg)
You are not building a website!
![Page 7: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/7.jpg)
Not a website?
It’s a desktop applicationHTML is the markup languageJavaScript is the ‘code behind’
Many web rules don’t applyTrying to apply them will add complexity
You don’t have network latencyYou don’t have traditional page events
![Page 8: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/8.jpg)
One engine to rule them all
You only have Trident & ChakraDon’t add unnecessary vender prefixes
-ms- when requiredMost features are prefix-free
![Page 9: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/9.jpg)
![Page 10: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/10.jpg)
You don’t need jQuery
![Page 11: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/11.jpg)
Why no jQuery?
jQuery normalizes browser quirksBut you don’t have multiple browsers
Sizzle adds CSS selector queriesThis is native in IE10 (and IE9)WinJS has APIs for this
Most animations can be done with CSS3
![Page 12: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/12.jpg)
Patterns
Like .NET JS patterns are importantWinJS is designed around some of the modern JS patterns
![Page 13: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/13.jpg)
Namespacing
WinJS.Namespace.defineScope your code to a single location
Minimise global variablesStructure your API
![Page 14: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/14.jpg)
Modules
Self-executing anonymous functionPass in what you require inside the functionModule responsible for an isolated piece of functionality
SRP ;)
![Page 15: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/15.jpg)
Modules
(function (Tasks /*, dependencies */) {//do stuff
})(Tasks /*, some dependency */);
![Page 16: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/16.jpg)
Dependency loaders
Require.js & Curl.js are popularThink DI but for JavaScript
//tasks.data.jsdefine([‘jquery’], function ($) {
return { ... };});//tasks.app.jsrequire([‘tasks.data’], function (data) {
//do stuff with our data API});
![Page 17: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/17.jpg)
Dependency loaders and WinJS APIs
Don’t try and script load WinJS APIsWrap them into the loader
define(‘winjs’, function () {return WinJS;
});define(‘class’, [‘winjs’], function (winjs) {
return winjs.Class;});
![Page 18: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/18.jpg)
Classes
JavaScript is prototypalNo class support at the language level
WinJS provides API-based supportWhy classes?
Useful for modelsUseful for unique instance objects
![Page 19: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/19.jpg)
Classes
define([‘class’], function(klass) { 'use strict'; var task = klass.define(function() { this.created = new Date(); }, { name: '', description: '', done: false }); return { Task: task };});
![Page 20: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/20.jpg)
![Page 21: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/21.jpg)
Async all the things!
C# dev’s are raving about the async keywordEverything in JS is async
AJAX requestsAnimationsEvent handlersTimers
![Page 22: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/22.jpg)
Simplifying async programming
Fire off *something* asynchronouslyWait for it to complete
React when it succeeds/ failsShouldn’t care about how to wire that up
![Page 23: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/23.jpg)
AJAX
WinJS.xhrNo need for jQuery!
Little rawer than you might be use toManually control headersSubmitting form data requires manual setupResponse is raw
![Page 24: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/24.jpg)
WinJS.Promise
API for exposing async operationsEg: AJAX
WinJS.xhr({url: ‘http://my-app/my-api’,method: ‘get’
}).then(success, failure);
![Page 25: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/25.jpg)
Storage
Local storageRoaming storageSecurity storageOffline storage
![Page 26: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/26.jpg)
Local or Roaming
Application setting storageEssentially a key/ value store
Local stores on the deviceUninstall and it’s gonePersists across upgrades though
Roaming stores in the cloudAgainst your Live IDUseful to sync multiple devices
![Page 27: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/27.jpg)
var applicationData = Windows.Storage.ApplicationData.current;var localSettings = applicationData.localSettings;var roamingSettings = applicationData.roamingSettings;
localSettings.values.someProperty = ‘hello teched’;
if(roamingSettings.values.someOtherProperty) {//do stuff
}
![Page 28: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/28.jpg)
Security storage
Need to store user credentials?Other secure data?PasswordVault
Access to Windows Web Credentials StoreStore two values
UsernamePassword
![Page 29: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/29.jpg)
var key = ‘My Application’;var passwordVault = new Windows.Security.Credentials.PasswordVault();var user = passwordVault.findAllByResource(key)[0];
var creds = new Windows.Security.Credentials.PasswordCredential(key, username, password);passwordVault.add(creds);
![Page 30: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/30.jpg)
Offline storage
Settings have finite limitsWhat if you need to store lots of data?No SQL serverIndexedDB!
![Page 31: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/31.jpg)
IndexedDB
Part of HTML5Asynchronous storage APISQL-like
KeysIndexes‘Tables’TransactionsCloser to NoSQL
![Page 32: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/32.jpg)
Background processing
Look into Web WorkersGame engine processingNumber crunchingAJAX requests to load unimportant data
var worker = new Worker(‘ms-appx:///js/worker.js’);worker.addEventListener(‘message’, function (evt) {
//handle worker doing stuff});
![Page 33: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/33.jpg)
Tombstoning
Handle it with background processingListen for oncheckpoint
Tell WebWorkers to shut downUse setPromise to make it wait for youDon’t take too long, Windows will kill it anyway
Handle the resume to wake up your processes
![Page 34: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/34.jpg)
Tombstoning
app.oncheckpoint = function (evt) {evt.detail.setPromise(new WinJS.Promise(function (done) {
worker.addEventListener(‘message’, function suspend(e) {if (e.data.shutdown) {
done();}
});
worker.postMessage({ shutdown: true });});
};
![Page 35: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/35.jpg)
Gotcha’s
![Page 36: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/36.jpg)
Don’t look at the DOM
![Page 37: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/37.jpg)
![Page 38: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/38.jpg)
The DOM
Although it’s HTML it’s not as we know it on the webYou’ll find a lot of auto-generated HTML
And it often doesn’t make sense
![Page 39: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/39.jpg)
Controls
Existing JavaScript plugins eitherProduce problematic HTMLBreak Windows 8 UX guides
Stick with shipped controlsGridsListsSemantic Zoom
Or build your own
![Page 40: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/40.jpg)
Watch your CSS
WinJS provides basic “skins”These style OOTB controls
The styles are pretty ridgedDesigned to keep you from making a messHard to work around
Probably shouldn’t do it!
![Page 41: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/41.jpg)
Chakra is FAST
My app failed certification to an unusual bugIn release mode code was executing differently to debugAsync operations were “out of order”
Make sure you wait on async resultsUse Promise where possible
![Page 42: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/42.jpg)
It’s COM wrapped in JavaScript
Many Win8 APIs are COMErgo many WinJS APIs are COMException Driven Development
PasswordVault throws an exception when there are no credentials
APIs are often not JavaScript friendlyTake a look at Tiles!
![Page 43: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/43.jpg)
Limitation
![Page 44: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/44.jpg)
Windows 8 sandbox
You’re limited in device accessNot as big a problem as in .NET
Common tasks may seem overly complex
![Page 45: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/45.jpg)
It’s still technically a browser
You have some browser limitationsWatch out for CORSWatch out for DOM manipulation errors
![Page 46: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/46.jpg)
It’s technically not a browser
Many additional eventsActivatedLoadedUnloadCheckpointResume
It’s statefulNew global objects
![Page 47: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/47.jpg)
Binding
In-the-box binding is one-wayKnockout.js works
Limitations when combining with data source controls
![Page 48: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/48.jpg)
Tooling
VS2012 is a real improvementJavaScript still has some issues
Debugging console sucksStack traces generally work
Except when Promises (async stuff) gets involvedSimulator is no substitute for actual devices
![Page 49: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/49.jpg)
Final thoughts
![Page 50: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/50.jpg)
My opinion
It’s a v1 productMany good thoughtsRadically different mindset to ‘web development’Better than XAML!
![Page 51: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/51.jpg)
![Page 52: Windows 8 App Dev With HTML and JavaScript DEV322](https://reader036.vdocuments.net/reader036/viewer/2022062423/56649cab5503460f9496ce8b/html5/thumbnails/52.jpg)
© 2012 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 presentation. 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.