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

2. bennage

3. @bennagebennage

4. dev.bennage.combennage

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

6. SandBox Living in a

7. LifeCycle Understanding the Application

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

9. JavaScript Fascinating & Mesmerizing Bits Regarding

11. Responsivene ss Strange Things Affecting  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. bind A 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  1 st arg resolves to this

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. jQuery? Did I miss  document.querySelector()  WinJS.xhr()  WinJS.Utilities.addClass()

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

18. Windows Library for JavaScript Things to Know about the

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

20. Async Be sure to Cancel  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. Navigation Understand the built-in  WinJS.Navigation  WinJS.UI.Pages  navigator.js

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

25. Windows Runtime A few things about the

26. WinRT Objects They are not JavaScript, those 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. File System Tips 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

29. 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.ContentViewModeForBrowse  System.LayoutPattern.ContentViewModeForSearch  System.MileageInformation  System.MIMEType  System.Null  System.OfflineAvailability  System.OfflineStatus

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

32. Unit Tests Sundry Means of Accomplishing  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