This document summarizes key topics around HTML, CSS, JavaScript and Windows 8 development. It discusses the Windows Runtime, navigation patterns, asynchronous programming with promises, memory management, unit testing and the file system API. JavaScript threading, blocking vs non-blocking code, and libraries like jQuery are also covered at a high-level.

1. HTML, CSS, JavaScript &
Windows 8
christopher.bennage
@microsoft.com
patterns & practices symposium 2013

2. bennage

3. @bennage
bennage

4. dev.bennage.com
bennage

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

6. Living in a
SandBox

7. Understanding the Application
LifeCycle

8. Navigating the
Landscape
 Windows Runtime
 Windows Library for JavaScript
 DOM
 JavaScript
 Visual Studio Templates

9. Fascinating & Mesmerizing Bits Regarding
JavaScript

11. Responsivene
Strange Things Affecting
ss  JavaScript is Single Thread
 Everything Blocks the UI
 Even Unexpected Things

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

13. function not_blocking() {
var items = getBigArrayOfItems();
var i = items.length - 1;
function processNext() {
doExpensiveComputationOn(items[i]);
i--;
if(i >= 0) {
setImmediate(processNext);
}
}
processNext();
}

14. 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

15. 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();

16. Did I miss
jQuery?
 document.querySelector()
 WinJS.xhr()
 WinJS.Utilities.addClass()

17. Wat? This is JavaScript…
Memory Leaks
 apps are long running
 higher chance of memory
leaks
 URL.createObjectURL(blob)

18. Things to Know about the
Windows
Library for
JavaScript

19. Understand
Promises
 Objects represent a task
 Composable
 Cancellable

20. 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

21. WinJS.UI.Pages.define("some/page", {
ready: function(element, options) {
this.promise =
kickOffAsynProcess();
},
unload: function() {
this.promise.cancel();
}
});

22. _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);

23. Understand the built-in
Navigation
 WinJS.Navigation
 WinJS.UI.Pages
 navigator.js

24. Various & Sundry
miscellania
 use a single AppBar
 built-in message queue
 manually create two-way binding

25. A few things about the
Windows Runtime

26. WinRT
They are not JavaScript, those
Objects Objects originating within
WinRT are not mutable like
plain ol’ JavaScript objects.
WinJS.Binding.as()

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

28. 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";

29. 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

30. An application’s
Structure
 standard, historical
 modules (AMD)
 something new &
magical

32. Sundry Means of Accomplishing
Unit Tests
 how to structure
 frameworks
 functional style makes it easier
 chutzpah.codeplex.com
 visionmedia.github.com/mocha

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