MVA Course Advanced Windows Store App Development with HTML5 Jump Start Part 2

I finally figured out that I would be able to take much more meaningful notes if I took them as I watched the lectures, much as I do with the MIT OCW stuff. As a result the notes for Module 4 of this class are much long and I felt they deserved their own post.  About half the module was spent on promises, I'm not sure they meant to go so long on it but the second half of the lecture was much quicker.

Here is the note dump:



Module 4
-- Design for and implement UI responsiveness --
5 rules of good UI responsiveness
1. Don't fetch data needlessly
2. Add image scaling correctly
3. Cache data intelligently
4. Implement asynchrony
5. Do things simultaneously
Responsiveness can greatly enhance user experience

Scaling demo - windows allows you to pick multiple image scales with naming conventions, and Windows will automatically pick the appropriate size image.  When windows scales a photo up, the image can be pixelated. When it scales down from a larger image, you are wasting resources and the picture doesn't look as good.  Using scaling produces more efficient and better looking results.

Simulator in Visual Studio gives you a lot of other options for debugging apps.

Promises demo - Promises are used for asynchrony, NOT parallelism. Tells the function "when you are done, get back to me, and do this...".
Synchronous task can lock up the UI, non-Promise asynch task can lead to misleading results (such as saying the task is complete when it really isn't) thus disrupting workflow.

Taskbar a good indicator for determinate tasks (you know how long progress should take) whereas the spinning dots are a good indicator for indeterminate tasks, just to let users know the UI has not locked up.

Consuming a promise:
var method1 = q(".promises #uses .method1");
q("button.start", method1).onclick = function (e) {
longTaskAsyncPromise().then(function () {
q("progress",method1).value = 100;
});
};

.then is what you do once the promise comes back
longTaskAsyncPromise() is a long asynchronous method (database call, network resource, etc.)

Passing a promise
var method2 = q(".promise #uses .method2");
q(button.start", method2).onclick = function (e) {
function myAsyncFunction() {
//blah blah blah
return longTaskAsyncPromise();
}

myAsynchFunction().then(function () {
q("progress", method2).value = 100;
});

The function returns the result of some async function. This method allows you to do some other work before returning the result of the asynchronous function call.

Creating a promise
var method3 = q(".promise #uses .method2");
q(button.start", method3).onclick = function (e) {
function myAsyncFunction() {
return new WinJS.Promise(function (c, e, p) {
//do something that might take longer than 50ms
try {
var a = [];
a.forEach(function (i) {
p(a.workThatGotDone);
});
longTaskAsyncPromise().then(function () {
c({you can pass an object here, say "x"});
});
}
catch (err) {
e(err);
}
});
}

myAsyncFunction()
.then(
function (x) {
q("progress", method3).value = 100;
},
function (err) {
// error function
},
function (wd) {
// progress function
}
};

Promise object is in the WinJS name space, expects you to define a function with three parameters (WinJS.Promises constructor expects a function). Three parameters are also functions. "C" method is what you call with Promise is complete. "E" method is what you call when you have an error. "P" method is what you call to report progress.

Storing of a promise
A promise is an object, and you can ask it about its state.

var method4 = q(".promise #uses .method2");
q(button.start", method4).onclick = function (e) {

var storedPromise = longTaskAsyncPromise();

storedPromise.then(function () {
q("progress", method4).value = 100;
});
};

codeSHOW() app uses promises to build main menu.

Chaining promises
possible to "nest" promises but it is very ugly and hard to maintain.

log.innerHTML += "1<br/>";
longTaskAsyncPromise()
.then(function () {
log.innerHTML += "2<br/>";
return longTaskAsyncPromise();
})
.then(function () {
log.innerHTML += "3<br/>";
return longTaskAsyncPromise();
})
.done(function () {
log.innerHTML += "4<br/>";
})

difference between .then and .done... .then returns a promise, .done does not. You can't chain off of .done.  .done also handles exceptions differently. .then will let errors slide. .done will throw an exception for errors.

Webworkers are how we do parallelism in JS. "Worker" object constructed by pointing constructor to a seperate JS file (at least in DEMO

worker.onmessage is what the worker does when we send the worker a message
worker.postMessage is how we pass a message to the worker so they will do something

message can be string, object, whatever.

webworker does not have access to the DOM
self.onmessage = some function
self.postMessage = send a message back to main UI thread

Tip - use reactive extensions -
instance of reactive extensions for javascript (rxjs)
can make a paintable canvas using JS and HTML5 canvas

-- Implement animations and transitions --
CSS3 Animations and Transitions
-Animations - to enhance user experience
-Transitions - when visual state changes
Animation can be accomplished using keyframes in CSS (@keyframes)
Transition occur when something about the state of an element changes (e.g. a class)

WinJS.UI.Animation is the API to handle desirable animations & transitions
HTML Animation library MSDN sample.

-- Create custom controls --
Use customer control when you find yourself repeating yourself and when you want to share a UI component. Allows you to make code modular.

-- Design apps for globalization and localization --
Multilingual App Toolkit
 - Tools | Extensions and updates
 - Multilingual app toolkit

 Using format template lets you customize display for language differences, uses a demo using the date-time.

 Multilingual tool kit makes it easy to implement this stuff in the real world.