HTML, CSS, JavaScript &                                Windows 8                                      christopher.bennage ...
bennage
@bennage bennage
dev.bennage.com    bennage
Welcome to WonderL and“Curiouser and curiouser!”Cried Alice (she was somuch surprised, that for themoment she quite forgot...
Living in a SandBox
Understanding the Application LifeCycle
Navigating the Landscape                    Windows Runtime                    Windows Library for JavaScript           ...
Fascinating & Mesmerizing Bits RegardingJavaScript
ResponsiveneStrange Things Affecting ss                  JavaScript is Single Thread                     Everything Bloc...
function blocking() {    var items = getBigArrayOfItems();    for(var i = items.length - 1; i >= 0; i--) {        doExpens...
function not_blocking() {    var items = getBigArrayOfItems();    var i = items.length - 1;    function processNext() {   ...
A very useful thing is bind  Partial Application        function add(x, y) {                                  return x + ...
function pretendToBeAsync(adder) {    var sum = adder();    console.log(sum);}var someObject = {     someNumber: 10,     a...
Did I miss jQuery?              document.querySelector()              WinJS.xhr()              WinJS.Utilities.addClass()
Wat? This is JavaScript… Memory Leaks  apps are long running  higher chance of memory   leaks  URL.createObjectURL(blob)
Things to Know about theWindowsLibrary forJavaScript
Understand Promises  Objects represent a task  Composable  Cancellable
Be sure to Cancel Async  Be aware of what’s happening  A common scenario is   Navigating Away  Custom promises probably...
WinJS.UI.Pages.define("some/page", {    ready: function(element, options) {        this.promise =kickOffAsynProcess();    ...
_createViewModels: function (files) {    var count = files.length;    var results = new Array(count);    var index = count...
Understand the built-in Navigation  WinJS.Navigation  WinJS.UI.Pages  navigator.js
Various & Sundry miscellania                use a single AppBar                built-in message queue                ma...
A few things about theWindows Runtime
WinRTThey are not JavaScript, those Objects                 Objects originating within                         WinRT are n...
var fileQuery =Windows.Storage.KnownFolders.picturesLibrary.createFileQuery();fileQuery.getFilesAsync(0, 2).then(function ...
Tips about the File System  some queries behave differently   for different folders  Advanced Query Syntax  file proper...
Some of the Properties Available    System.AcquisitionID           System.FindData                           System.IsR...
An application’s Structure  standard, historical  modules (AMD)  something new &   magical
Sundry Means of Accomplishing Unit Tests  how to structure  frameworks  functional style makes it easier  chutzpah.cod...
The End•   hilojs.codeplex.com•   github.com/NobleJS/WinningJS
Windows 8 JavaScript (Wonderland)
Windows 8 JavaScript (Wonderland)
Upcoming SlideShare
Loading in …5
×

Windows 8 JavaScript (Wonderland)

622 views
534 views

Published on

Things that were not obvious to me when I started building Windows Store apps with JavaScript.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
622
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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.
  • http://blogs.msdn.com/b/windowsappdev/archive/2012/04/10/managing-app-lifecycle-so-your-apps-feel-quot-always-alive-quot.aspx
  • 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/ie/hh772302(v=vs.85).aspxhttps://developer.mozilla.org/en-US/docs/DOM/window.URL.createObjectURL
  • 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.
  • Windows 8 JavaScript (Wonderland)

    1. 1. HTML, CSS, JavaScript & Windows 8 christopher.bennage @microsoft.compatterns & practices symposium 2013
    2. 2. bennage
    3. 3. @bennage bennage
    4. 4. dev.bennage.com bennage
    5. 5. Welcome to WonderL and“Curiouser and curiouser!”Cried Alice (she was somuch surprised, that for themoment she quite forgot how
    6. 6. Living in a SandBox
    7. 7. Understanding the Application LifeCycle
    8. 8. Navigating the Landscape  Windows Runtime  Windows Library for JavaScript  DOM  JavaScript  Visual Studio Templates
    9. 9. Fascinating & Mesmerizing Bits RegardingJavaScript
    10. 10. ResponsiveneStrange Things Affecting ss  JavaScript is Single Thread  Everything Blocks the UI  Even Unexpected Things
    11. 11. function blocking() { var items = getBigArrayOfItems(); for(var i = items.length - 1; i >= 0; i--) { doExpensiveComputationOn(items[i]); }}
    12. 12. function not_blocking() { var items = getBigArrayOfItems(); var i = items.length - 1; function processNext() { doExpensiveComputationOn(items[i]); i--; if(i >= 0) { setImmediate(processNext); } } processNext();}
    13. 13. 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
    14. 14. 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();
    15. 15. Did I miss jQuery?  document.querySelector()  WinJS.xhr()  WinJS.Utilities.addClass()
    16. 16. Wat? This is JavaScript… Memory Leaks  apps are long running  higher chance of memory leaks  URL.createObjectURL(blob)
    17. 17. Things to Know about theWindowsLibrary forJavaScript
    18. 18. Understand Promises  Objects represent a task  Composable  Cancellable
    19. 19. 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
    20. 20. WinJS.UI.Pages.define("some/page", { ready: function(element, options) { this.promise =kickOffAsynProcess(); }, unload: function() { this.promise.cancel(); }});
    21. 21. _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);
    22. 22. Understand the built-in Navigation  WinJS.Navigation  WinJS.UI.Pages  navigator.js
    23. 23. Various & Sundry miscellania  use a single AppBar  built-in message queue  manually create two-way binding
    24. 24. A few things about theWindows Runtime
    25. 25. WinRTThey are not JavaScript, those Objects Objects originating within WinRT are not mutable like plain ol’ JavaScript objects. WinJS.Binding.as()
    26. 26. 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});
    27. 27. 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";
    28. 28. 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
    29. 29. An application’s Structure  standard, historical  modules (AMD)  something new & magical
    30. 30. Sundry Means of Accomplishing Unit Tests  how to structure  frameworks  functional style makes it easier  chutzpah.codeplex.com  visionmedia.github.com/mocha
    31. 31. The End• hilojs.codeplex.com• github.com/NobleJS/WinningJS

    ×