Windows 8 JavaScript (Wonderland)

HTML, CSS, JavaScript &
Windows 8

christopher.bennage
@microsoft.com

patterns & practices symposium 2013

Welcome to

WonderL
and
“Curiouser and curiouser!”
Cried Alice (she was so
much surprised, that for the
moment she quite forgot how

Understanding the Application

LifeCycle

Navigating the

Landscape
 Windows Runtime
 Windows Library for JavaScript
 DOM
 JavaScript
 Visual Studio Templates

Fascinating & Mesmerizing Bits Regarding

JavaScript

Windows 8 JavaScript (Wonderland)

Responsivene
Strange Things Affecting

ss  JavaScript is Single Thread
 Everything Blocks the UI
 Even Unexpected Things

function blocking() {

var items = getBigArrayOfItems();

for(var i = items.length - 1; i >= 0; i--) {
doExpensiveComputationOn(items[i]);
}

}

A very useful thing is

bind
 Partial Application function add(x, y) {
return x + y;
 Returns a Function }
 1st arg resolves to this
var add7 = add.bind(null, 7);

var sum =add7(3); // sum is 10

Did I miss

jQuery?
 document.querySelector()
 WinJS.xhr()
 WinJS.Utilities.addClass()

Wat? This is JavaScript…

Memory Leaks
 apps are long running
 higher chance of memory
leaks
 URL.createObjectURL(blob)

Things to Know about the

Windows
Library for
JavaScript

Understand

Promises
 Objects represent a task
 Composable
 Cancellable

Be sure to Cancel

Async
 Be aware of what’s happening
 A common scenario is
Navigating Away
 Custom promises probably need to
be cancelled too

WinJS.UI.Pages.define("some/page", {

ready: function(element, options) {
this.promise =
kickOffAsynProcess();
},

unload: function() {
this.promise.cancel();
}

});

_createViewModels: function (files) {
var count = files.length;
var results = new Array(count);
var index = count - 1;
var proceed = true;

function onCancellation() {
proceed = false;
}

return new WinJS.Promise(function
(complete, error) {

function processNextFile() {
var file = files[index];
results[index] = new Hilo.Picture(file);
index--;

if (index < 0) {
complete(results);
} else if (!proceed) {
error("Cancel");
} else {
setImmediate(processNextFile);
}
}

processNextFile();

}, onCancellation);

Understand the built-in

Navigation
 WinJS.Navigation
 WinJS.UI.Pages
 navigator.js

Various & Sundry

miscellania
 use a single AppBar
 built-in message queue
 manually create two-way binding

A few things about the

Windows Runtime

WinRT
They are not JavaScript, those

Objects Objects originating within
WinRT are not mutable like
plain ol’ JavaScript objects.

WinJS.Binding.as()

var fileQuery =
Windows.Storage.KnownFolders.picturesLibrary.createFileQuery();
fileQuery.getFilesAsync(0, 2).then(function (results) {
var storageFile = results[0];
var observable = WinJS.Binding.as(storageFile); // sad panda
});

Tips about the

File System
 some queries behave differently
for different folders
 Advanced Query Syntax
 file properties

queryOptions.applicationSearchFilter =
"System.ItemDate:2013-01-01T00:00:00Z..2013-01-
01T00:00:00Z";

Some of the Properties Available
 System.AcquisitionID  System.FindData  System.IsRead
 System.ApplicationName  System.FlagColor  System.IsSearchOnlyItem
 System.Author  System.FlagColorText  System.IsSendToTarget
 System.Capacity  System.FlagStatus  System.IsShared
 System.Category  System.FlagStatusText  System.ItemAuthors
 System.Comment  System.FreeSpace  System.ItemClassType
 System.Company  System.FullText  System.ItemDate
 System.ComputerName  System.Identity  System.ItemFolderNameDisplay
 System.ContainedItems  System.Identity.Blob  System.ItemFolderPathDisplay
 System.ContentStatus  System.Identity.DisplayName  System.ItemFolderPathDisplayNarrow
 System.ContentType  System.Identity.IsMeIdentity  System.ItemName
 System.Copyright  System.Identity.PrimaryEmailAddress  System.ItemNameDisplay
 System.DateAccessed  System.Identity.ProviderID  System.ItemNamePrefix
 System.DateAcquired  System.Identity.UniqueID  System.ItemParticipants
 System.DateArchived  System.Identity.UserName  System.ItemPathDisplay
 System.DateCompleted  System.IdentityProvider.Name  System.ItemPathDisplayNarrow
 System.DateCreated  System.IdentityProvider.Picture  System.ItemType
 System.DateImported  System.ImageParsingName  System.ItemTypeText
 System.DateModified  System.Importance  System.ItemUrl
 System.DueDate  System.ImportanceText  System.Keywords
 System.EndDate  System.IsAttachment  System.Kind
 System.FileAllocationSize  System.IsDefaultNonOwnerSaveLocation  System.KindText
 System.FileAttributes  System.IsDefaultSaveLocation  System.Language
 System.FileCount  System.IsDeleted  System.LayoutPattern.ContentViewModeForBrowse
 System.FileDescription  System.IsEncrypted  System.LayoutPattern.ContentViewModeForSearch
 System.FileExtension  System.IsFlagged  System.MileageInformation
 System.FileFRN  System.IsFlaggedComplete  System.MIMEType
 System.FileName  System.IsIncomplete  System.Null
 System.FileOwner  System.IsLocationSupported  System.OfflineAvailability
 System.FileVersion  System.IsPinnedToNameSpaceTree  System.OfflineStatus

An application’s

Structure
 standard, historical
 modules (AMD)
 something new &
magical

Sundry Means of Accomplishing

Unit Tests
 how to structure
 frameworks
 functional style makes it easier

 chutzpah.codeplex.com
 visionmedia.github.com/mocha

The End
• hilojs.codeplex.com
• github.com/NobleJS/WinningJS

Windows 8 JavaScript (Wonderland)

Recommended

More Related Content

What's hot (19)

Viewers also liked (7)

Similar to Windows 8 JavaScript (Wonderland) (20)

More from Christopher Bennage (9)

Recently uploaded (20)

Windows 8 JavaScript (Wonderland)

Editor's Notes