twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischenWho am I? Developer Evangelist at Mi...
As of March 2012, IDC
PAGE 9
HTML App PlatformApp containerHTML host processInternet ExplorerWebplatformTABApp codeWeb platformWindowsruntimeApp code
PAGE
PAGE 15
PAGE 16
PAGE 23
PAGE 24
The development tools are FREE!If you use a higher SKU, it just works!
PAGE
demo
http://blogs.msdn.com/b/dorischen/archive/2012/10/02/transform-your-html-css-javascript-apps-into-windows-8-application.as...
PAGE
"Code for touch, get mouse and pen for free!"
function onLoad() {...var workSpaces = document.getElementsByClassName("workspace");for (i = 0; i < workSpaces.length; i++...
Tips & tricks that still workhttp://channel9.msdn.com/Events/Build/2012/3-132
function InsertUsername(){document.getElementById(user).innerHTML =userName;}User innerHTML to Create your DOMUse DOM Effi...
<html><head><script type="text/javascript">function helloWorld() {alert(Hello World!) ;}</script></head><body>…</body></ht...
JSON Always Faster than XML for DataJSON Representation"glossary":{"title": "example glossary", "GlossDiv":{"title": "S", ...
Native JSON Methodsvar jsObjStringParsed = JSON.parse(jsObjString);var jsObjStringBack = JSON.stringify(jsObjStringParsed)...
Loading andparsingofHTML, JS, CSSNew hostprocessTile click"DOMContentLoaded" eventWindows Runtime"activated" eventSplash s...
Optimize your landing page: Package Locally
Optimize your landing Page: Use Local Data
Internet Internet5Fetch InfoFrom NetworkCache InfoLocallyFetch InfoFrom CacheNo NetworkAvailableAppCache
Internet InternetHTML 5 AppCache – Update FlowFetch ManifestFrom NetworkIf diff Create NewCacheFetch InfoFrom CacheNo Netw...
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenmanifest filePAGE 60
MIME Type: text/cache-manifest
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenPAGE 62
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenvar oRequestDB = window.indexedDB...
Optimize landing page: Load only what you need <script type="text/javascript" src=file1.jsdefer=defer></script>
Further optimizations
Be lightweight, control yourResource Usage
App gets 5s to handlesuspendApp is not notifiedbefore terminationApps are notified whenthey have been resumedUserLaunchesA...
Manage your resourcesURL.revokeObjectURL var url = URL.createObjectURL(blob, {oneTimeOnly: true});
// Pick an image filepicker.pickSingleFileAsync().then(function (file) {var properties = Windows.Storage.FileProperties.Th...
Show you’re listening, processuser inputs
0s 1s 2s 3sUI threadLaunch User input Animation
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenTypical Execution Flow on the UI ...
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenPAGE 75
xhr//access a web service, cloud service, local resourcehttp://www.example.org/somedata.json
Activation time Memory leaksUI responsiveness Idle state CPU usageLayout passes Successful suspendSynchronous XMLHttpReque...
PAGE 79
PAGE 80
http://bit.ly/2000Cash Publish your app to the WindowsStore and/or Windows Phone StoreMarch 8, 2013 through June 30, 2013...
http://bit.ly/HTML5Wins8Camphttp://bit.ly/CampInBoxhttp://msdn.microsoft.com/en-us/library/windows/apps/hh465194.aspxhttp:...
PAGE• Responsive Web Design and CSS3• http://bit.ly/CSS3Intro• HTML5, CSS3 Free 1 Day Training• http://bit.ly/HTML5DevCamp...
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Upcoming SlideShare
Loading in...5
×

Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1

8,023

Published on

Creating high performance apps is crucial for every developer. Come to learn How to make your HTML5 apps fast and responsive on Windows 8 platform. In this session, first we will start with the overview of Windows 8 and then introduce how to develop Windows 8 using HTML5 and JavaScript. We will explore the best practices and performance tricks to make your Windows 8 applications running faster.

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

No Downloads
Views
Total Views
8,023
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
89
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1

  1. 1. twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischenWho am I? Developer Evangelist at Microsoft based in Silicon Valley, CA Blog: http://blogs.msdn.com/b/dorischen/ Twitter @doristchen Email: doris.chen@microsoft.com Office Hours http://ohours.org/dorischen Has over 15 years of experience in the software industry focusingon web technologies Spoke and published widely at JavaOne, OReilly, Silicon ValleyCode Camp, SD West, SD Forum and worldwide User Groupsmeetings Doris received her Ph.D. from the University of California at LosAngeles (UCLA)PAGE 2
  2. 2. As of March 2012, IDC
  3. 3. PAGE 9
  4. 4. HTML App PlatformApp containerHTML host processInternet ExplorerWebplatformTABApp codeWeb platformWindowsruntimeApp code
  5. 5. PAGE
  6. 6. PAGE 15
  7. 7. PAGE 16
  8. 8. PAGE 23
  9. 9. PAGE 24
  10. 10. The development tools are FREE!If you use a higher SKU, it just works!
  11. 11. PAGE
  12. 12. demo
  13. 13. http://blogs.msdn.com/b/dorischen/archive/2012/10/02/transform-your-html-css-javascript-apps-into-windows-8-application.aspxhttp://github.com/appendto/jquery-win8interoperability@Microsoft bloghttp://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx
  14. 14. PAGE
  15. 15. "Code for touch, get mouse and pen for free!"
  16. 16. function onLoad() {...var workSpaces = document.getElementsByClassName("workspace");for (i = 0; i < workSpaces.length; i++) {workSpaces[i].addEventListener("MSPointerDown", pointerDownHandler, false);workSpaces[i].addEventListener("MSPointerMove", pointerMoveHandler, false);workSpaces[i].addEventListener("MSPointerUp", pointerUpHandler, false);workSpaces[i].addEventListener("MSManipulationStateChanged",resetInteractions, false);}...}
  17. 17. Tips & tricks that still workhttp://channel9.msdn.com/Events/Build/2012/3-132
  18. 18. function InsertUsername(){document.getElementById(user).innerHTML =userName;}User innerHTML to Create your DOMUse DOM Efficiently
  19. 19. <html><head><script type="text/javascript">function helloWorld() {alert(Hello World!) ;}</script></head><body>…</body></html>Avoid Inline JavaScriptEfficiently Structure Markup
  20. 20. JSON Always Faster than XML for DataJSON Representation"glossary":{"title": "example glossary", "GlossDiv":{"title": "S", "GlossList": {"GlossEntry": {"ID": "SGML","SortAs": "SGML","GlossTerm": "Markup Language","Acronym": "SGML","Abbrev": "ISO 8879:1986","GlossDef": {"para": "meta-markup language","GlossSeeAlso": ["GML", "XML"] },"GlossSee": "markup" }}}}XML Representation<!DOCTYPE glossary PUBLIC "DocBook V3.1"><glossary><title>example glossary</title><GlossDiv><title>S</title><GlossList><GlossEntry ID="SGML" SortAs="SGML"><GlossTerm>Markup Language</GlossTerm><Acronym>SGML</Acronym><Abbrev>ISO 8879:1986</Abbrev><GlossDef><para>meta-markup language</para><GlossSeeAlso OtherTerm="GML"><GlossSeeAlso OtherTerm="XML"></GlossDef><GlossSee OtherTerm="markup"></GlossEntry></GlossList></GlossDiv></glossary>
  21. 21. Native JSON Methodsvar jsObjStringParsed = JSON.parse(jsObjString);var jsObjStringBack = JSON.stringify(jsObjStringParsed);Use Native JSON MethodsWrite Fast JavaScript
  22. 22. Loading andparsingofHTML, JS, CSSNew hostprocessTile click"DOMContentLoaded" eventWindows Runtime"activated" eventSplash screenReady foruserNavigationApp visible
  23. 23. Optimize your landing page: Package Locally
  24. 24. Optimize your landing Page: Use Local Data
  25. 25. Internet Internet5Fetch InfoFrom NetworkCache InfoLocallyFetch InfoFrom CacheNo NetworkAvailableAppCache
  26. 26. Internet InternetHTML 5 AppCache – Update FlowFetch ManifestFrom NetworkIf diff Create NewCacheFetch InfoFrom CacheNo NetworkAvailableAppCache
  27. 27. twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenmanifest filePAGE 60
  28. 28. MIME Type: text/cache-manifest
  29. 29. twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenPAGE 62
  30. 30. twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenvar oRequestDB = window.indexedDB.open(“Library”);oRequestDB.onsuccess = function (event) {db1 = oRequestDB.result;if (db1.version == 1) {txn =db1.transaction([“Books”],IDBTransaction.READ_ONLY);var objStoreReq = txn.objectStore(“Books”);var request = objStoreReq.get("Book0");request.onsuccess = processGet;}};
  31. 31. Optimize landing page: Load only what you need <script type="text/javascript" src=file1.jsdefer=defer></script>
  32. 32. Further optimizations
  33. 33. Be lightweight, control yourResource Usage
  34. 34. App gets 5s to handlesuspendApp is not notifiedbefore terminationApps are notified whenthey have been resumedUserLaunchesAppSplashscreen
  35. 35. Manage your resourcesURL.revokeObjectURL var url = URL.createObjectURL(blob, {oneTimeOnly: true});
  36. 36. // Pick an image filepicker.pickSingleFileAsync().then(function (file) {var properties = Windows.Storage.FileProperties.ThumbnailMode;return file.getThumbnailAsync(properties.singleItem, 1024);}).then(function (thumb) {var imgTag = document.getElementById("imageTag");imgTag.src = URL.createObjectURL(thumb, false);});// Pick an image filepicker.pickSingleFileAsync().then(function (file) {var imgTag = document.getElementById("imageTag");imgTag.src = URL.createObjectURL(file, false);});Manage your Resources:// Open File Pickervar picker = new Windows.Storage.Pickers.FileOpenPicker();picker.fileTypeFilter.replaceAll([".jpg", ".png"]);
  37. 37. Show you’re listening, processuser inputs
  38. 38. 0s 1s 2s 3sUI threadLaunch User input Animation
  39. 39. twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenTypical Execution Flow on the UI threadJavaScriptWeb WorkerJavaScriptLayoutUpdate ViewUser Input Event,Timer,or CallbackUI ThreadUpdate AppLogic
  40. 40. twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  41. 41. twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenPAGE 75
  42. 42. xhr//access a web service, cloud service, local resourcehttp://www.example.org/somedata.json
  43. 43. Activation time Memory leaksUI responsiveness Idle state CPU usageLayout passes Successful suspendSynchronous XMLHttpRequest on UIthreadMemory reduction when suspendedImage scaling App memory growthMemory footprint Runtime broker memory growthRuntime broker memory reference set
  44. 44. PAGE 79
  45. 45. PAGE 80
  46. 46. http://bit.ly/2000Cash Publish your app to the WindowsStore and/or Windows Phone StoreMarch 8, 2013 through June 30, 2013 Submit up to 10 published apps perStore and get a $100 Virtual Visa® More: http://bit.ly/2000Cash
  47. 47. http://bit.ly/HTML5Wins8Camphttp://bit.ly/CampInBoxhttp://msdn.microsoft.com/en-us/library/windows/apps/hh465194.aspxhttp://Aka.ms/brockschmidtbook http:/dev.windows.comPAGE
  48. 48. PAGE• Responsive Web Design and CSS3• http://bit.ly/CSS3Intro• HTML5, CSS3 Free 1 Day Training• http://bit.ly/HTML5DevCampDownload• Using Blend to Design HTML5 Windows 8 Application (Part II): Style,Layout and Grid• http://bit.ly/HTML5onBlend2• Using Blend to Design HTML5 Windows 8 Application (Part III): StyleGame Board, Cards, Support Different Device, View States• http://bit.ly/HTML5onBlend3• Feature-specific demos• http://ie.microsoft.com/testdrive/• Real-world demos• http://www.beautyoftheweb.com/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×