Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
JavaScript Basic
JavaScript Basic
Wird geladen in …3
×

Hier ansehen

1 von 65 Anzeige

Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1

Herunterladen, um offline zu lesen

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.

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.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Ähnlich wie Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1 (20)

Anzeige

Weitere von Doris Chen (20)

Aktuellste (20)

Anzeige

Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1

  1. 1. twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen Who 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 focusing on web technologies  Spoke and published widely at JavaOne, O'Reilly, Silicon Valley Code Camp, SD West, SD Forum and worldwide User Groups meetings  Doris received her Ph.D. from the University of California at Los Angeles (UCLA) PAGE 2
  2. 2. As of March 2012, IDC
  3. 3. PAGE 9
  4. 4. HTML App Platform App container HTML host process Internet Explorer Web platform TAB App code Web platform Windows runtime App 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.aspx http://github.com/appendto/jquery-win8 interoperability@Microsoft blog http://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 work http://channel9.msdn.com/Events/Build/2012/3-132
  18. 18. function InsertUsername() { document.getElementById('user').innerHTML = userName; } User innerHTML to Create your DOM Use DOM Efficiently
  19. 19. <html> <head> <script type="text/javascript"> function helloWorld() { alert('Hello World!') ; } </script> </head> <body> … </body> </html> Avoid Inline JavaScript Efficiently Structure Markup
  20. 20. JSON Always Faster than XML for Data JSON 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 Methods var jsObjStringParsed = JSON.parse(jsObjString); var jsObjStringBack = JSON.stringify(jsObjStringParsed); Use Native JSON Methods Write Fast JavaScript
  22. 22. Loading and parsing of HTML, JS, CSS New host process Tile click "DOMContentLoaded" event Windows Runtime "activated" event Splash screen Ready for user Navigation App visible
  23. 23. Optimize your landing page: Package Locally
  24. 24. Optimize your landing Page: Use Local Data
  25. 25. Internet Internet 5 Fetch Info From Network Cache Info Locally Fetch Info From Cache No Network Available AppCache
  26. 26. Internet Internet HTML 5 AppCache – Update Flow Fetch Manifest From Network If diff Create New Cache Fetch Info From Cache No Network Available AppCache
  27. 27. twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen manifest file PAGE 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/dorischen var 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.js' defer='defer'></script>
  32. 32. Further optimizations
  33. 33. Be lightweight, control your Resource Usage
  34. 34. App gets 5s to handle suspend App is not notified before termination Apps are notified when they have been resumed User Launches App Splash screen
  35. 35. Manage your resources URL.revokeObjectURL  var url = URL.createObjectURL(blob, {oneTimeOnly: true});
  36. 36. // Pick an image file picker.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 file picker.pickSingleFileAsync() .then(function (file) { var imgTag = document.getElementById("imageTag"); imgTag.src = URL.createObjectURL(file, false); }); Manage your Resources: // Open File Picker var picker = new Windows.Storage.Pickers.FileOpenPicker(); picker.fileTypeFilter.replaceAll([".jpg", ".png"]);
  37. 37. Show you’re listening, process user inputs
  38. 38. 0s 1s 2s 3s UI thread Launch User input Animation
  39. 39. twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen Typical Execution Flow on the UI thread JavaScript Web Worker JavaScript LayoutUpdate View User Input Event, Timer, or Callback UI Thread Update App Logic
  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 resource http://www.example.org/somedata.json
  43. 43. Activation time Memory leaks UI responsiveness Idle state CPU usage Layout passes Successful suspend Synchronous XMLHttpRequest on UI thread Memory reduction when suspended Image scaling App memory growth Memory footprint Runtime broker memory growth Runtime broker memory reference set
  44. 44. PAGE 79
  45. 45. PAGE 80
  46. 46. http://bit.ly/2000Cash  Publish your app to the Windows Store and/or Windows Phone Store March 8, 2013 through June 30, 2013  Submit up to 10 published apps per Store and get a $100 Virtual Visa®  More: http://bit.ly/2000Cash
  47. 47. http://bit.ly/HTML5Wins8Camp http://bit.ly/CampInBox http://msdn.microsoft.com/en-us/library/windows/apps/hh465194.aspx http://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): Style Game 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/

×