patterns & practices symposium 2013

HTML, CSS, JavaScript &Windows 8

christopher.bennage@microsoft.com

bennage

@bennagebennage

dev.bennage.combennage

WonderLand

Welcome to

“Curiouser and curiouser!” Cried Alice (she was so much surprised, that for the moment she quite forgot how to speak good English).

SandBoxLiving in a

LifeCycleUnderstanding the Application

LandscapeNavigating the

Windows Runtime Windows Library for JavaScript DOM JavaScript Visual Studio Templates

JavaScriptFascinating & Mesmerizing Bits Regarding

Responsiveness

Strange Things Affecting

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]); }

}

function not_blocking() {

var items = getBigArrayOfItems(); var i = items.length - 1;

function processNext() { doExpensiveComputationOn(items[i]); i--; if(i >= 0) { setImmediate(processNext); } }

processNext();}

bindA very useful thing is

function add(x, y) { return x + y;}

var add7 = add.bind(null, 7);

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

Partial Application Returns a Function 1st arg resolves to this

function pretendToBeAsync(adder) { var sum = adder(); console.log(sum);}

var someObject = {

someNumber: 10,

add: function() { return this.someNumber + 1; },

problem: function() { pretendToBeAsync(this.add); }

};

someObject.problem();

jQuery?Did I miss

document.querySelector() WinJS.xhr() WinJS.Utilities.addClass()

Memory Leaks

Wat? This is JavaScript…

apps are long running higher chance of

memory leaks URL.createObjectURL(bl

ob)

Windows Library for JavaScript

Things to Know about the

PromisesUnderstand

Objects represent a task Composable Cancellable

AsyncBe sure to Cancel

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);}

NavigationUnderstand the built-in

WinJS.Navigation WinJS.UI.Pages navigator.js

miscellaniaVarious & Sundry

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

binding

Windows RuntimeA few things about the

WinRT Objects

They are not JavaScript, those

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});

File SystemTips about the

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

some queries behave differently for different folders

Advanced Query Syntax file properties

Some of the Properties Available System.AcquisitionID System.ApplicationName System.Author System.Capacity System.Category System.Comment System.Company System.ComputerName System.ContainedItems System.ContentStatus System.ContentType System.Copyright System.DateAccessed System.DateAcquired System.DateArchived System.DateCompleted System.DateCreated System.DateImported System.DateModified System.DueDate System.EndDate System.FileAllocationSize System.FileAttributes System.FileCount System.FileDescription System.FileExtension System.FileFRN System.FileName System.FileOwner System.FileVersion System.FindData

System.FlagColor System.FlagColorText System.FlagStatus System.FlagStatusText System.FreeSpace System.FullText System.Identity System.Identity.Blob System.Identity.DisplayName System.Identity.IsMeIdentity System.Identity.PrimaryEmailAddress System.Identity.ProviderID System.Identity.UniqueID System.Identity.UserName System.IdentityProvider.Name System.IdentityProvider.Picture System.ImageParsingName System.Importance System.ImportanceText System.IsAttachment System.IsDefaultNonOwnerSaveLocation System.IsDefaultSaveLocation System.IsDeleted System.IsEncrypted System.IsFlagged System.IsFlaggedComplete System.IsIncomplete System.IsLocationSupported System.IsPinnedToNameSpaceTree System.IsRead System.IsSearchOnlyItem

System.IsSendToTarget System.IsShared System.ItemAuthors System.ItemClassType System.ItemDate System.ItemFolderNameDisplay System.ItemFolderPathDisplay System.ItemFolderPathDisplayNarrow System.ItemName System.ItemNameDisplay System.ItemNamePrefix System.ItemParticipants System.ItemPathDisplay System.ItemPathDisplayNarrow System.ItemType System.ItemTypeText System.ItemUrl System.Keywords System.Kind System.KindText System.Language System.LayoutPattern.ContentViewModeForB

rowse System.LayoutPattern.ContentViewModeForS

earch System.MileageInformation System.MIMEType System.Null System.OfflineAvailability System.OfflineStatus

StructureAn application’s

standard, historical

modules (AMD) something new &

magical

Unit TestsSundry Means of Accomplishing

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