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)
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);
26. WinRT
They are not JavaScript, those
Objects Objects originating within
WinRT are not mutable like
plain ol’ JavaScript objects.
WinJS.Binding.as()
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";
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
Notes de l'éditeur
Just like Alice’s adventure, my adventure will feature many items of different size.Some topics will be small and some large. We ramble shall between seemingly disconnected episodes, yet in the end we will arrive at a happy place.Let me begin by assuming that you don’t know a lot about developing Windows Store Apps. Oh, BTW, that’s what they are called.
Wonderland is a special place, and so are Windows Store Apps.WSAs cannot do everything that traditional desktop apps can do there. There is a limit to the API. These limits are there in order to provider a better experience.Example of a really good restaurant with a limited selection, as opposed to the mediocre one that tries to serve everything.More trust, less dangerConsistencyMy dad wondered if tablets were inherently “more safe” with respected to viruses. Sand boxed environments are.
WinRT is common across platforms. It’s the core Windows API.WinJS is a library built in JavaScript. It provides some wrappers for WinRT, controls, html+js specific utilities, helpers for async in js.DOM or Document Object Model, is the same one (more or less) that you are familiar with in IE10. It’s a JS API that allows you to query and manipulate all of the elements that result from your markup + css. We can use newer APIs without fear of browser compatibility.JavaScript in Windows 8 is liberated since we’d don’t have to worry about browser compatibility. Newer language features can be used freely.There is functionality implemented in the VS templates that you can use if you like.Newer DOM/JS features:XHR2Web WorkersTyped ArraysWeb SocketsFileReaderPointer events (IE only currently)Blob URLsrequestAnimationFrameindexedDBcss grid layout
There are wonders and dangers unique to JavaScript.What should we look for and what should we avoid?
Books to consider:JavaScript: The Good Parts by Douglas CrockfordJavaScript Patterns by StoyanStephanovHigh Performance JavaScript by Nicholas C. Zakas
This never yields . It is unrelenting!
Read “High Performance JavaScript” by Nicholas C. ZakassetImmediate is currently an IE-only functionhttps://developer.mozilla.org/en-US/docs/DOM/window.setImmediateif (!window.setImmediate) {window.setImmediate = function(func, args){ return window.setTimeout(func, 0, args); };window.clearImmediate = window.clearTimeout;}
Demonstrate from a Node consolehttp://msdn.microsoft.com/en-us/library/ff841995(v=VS.94).aspxhttps://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind
Personally, I mostly use jQuery for selecting elements, also some ajax requests.Given that, I didn’t really miss jQuery all that much. Of course, you can use jQuery.
http://msdn.microsoft.com/en-us/library/windows/apps/hh700330.aspxhttp://dev.bennage.com/blog/2012/08/21/winjs-unpacking-promises/Promises are important for when you are dealing withasync operations. They are aptly named.Cancellable, except when they are not.
I found this to be a source of confusion, both for myself and other experienced devs.Out of the box, WinJS includes WinJS.Navigation.It providers “navigation” methods such as back, forward, and navigate.As well as “state” members such as history, canGoBack, canGoForward.It also includes WinJS.UI.Pages.It primarily provides a way to define page controls. A page control is an object implementing IPageControlMembers. The interface is mostly about defining steps in a lifecycle.The Pages object also provides a way to “render” a defined page by providing its id (uri) and a DOM element.navigator.js comes in new project templates (not all of them). It listens to the event emitted from Navigation, handles the DOM manipulation, and invokes the related Pages bits.
http://code.msdn.microsoft.com/windowsapps/App-bar-sample-a57eeae9WinJS.Application.queueEvent({ type: "custom-event-name" });WinJS.Application.addEventListener(“custom-event-name", function(){ });For info about custom bindings, lookup binding initializers
varboolean = storageFolder.areQueryOptionsSupported(queryOptions);new Date().toISOString();You can use AQS to query the file system. Great. So what is AQS?http://msdn.microsoft.com/en-us/library/windows/desktop/bb266512(v=vs.85).aspx
The list of system properties (partially displayed above):http://msdn.microsoft.com/en-us/library/ff521735(v=vs.85).aspxTable of Properties, arranged into groups:http://msdn.microsoft.com/en-us/library/dd561977(v=vs.85).aspx
standard/historical,what you get with file | new projectsimple & straight forward, but takes some continued manual effortdirectly linked files are cached bytecodehttp://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh849088.aspxAMD – asynchronous module definitionusing requireJSsimilar to NodeJS or CommonJS modulesOther options for modularityrequires a bootstrapper (or compiler)This space is growing, changing, maturing.