Presentation is loading. Please wait.

Presentation is loading. Please wait.

Patterns & practices symposium 2013 HTML, CSS, JavaScript & Windows 8

Similar presentations


Presentation on theme: "Patterns & practices symposium 2013 HTML, CSS, JavaScript & Windows 8"— Presentation transcript:

1 patterns & practices symposium 2013 HTML, CSS, JavaScript & Windows 8

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

10

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: T00:00:00Z T00: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.Primary Address  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

31

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


Download ppt "Patterns & practices symposium 2013 HTML, CSS, JavaScript & Windows 8"

Similar presentations


Ads by Google