Upload
christopher-bennage
View
546
Download
0
Embed Size (px)
DESCRIPTION
Things that were not obvious to me when I started building Windows Store apps with JavaScript.
Citation preview
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