Downloaded 92 times
![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); } ... }](https://image.slidesharecdn.com/highperfw8appdevv1-130426183307-phpapp02/75/Develop-High-Performance-Windows-8-Application-with-HTML5-and-JavaScriptHigh-perfw8appdevv1-26-2048.jpg)
![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>](https://image.slidesharecdn.com/highperfw8appdevv1-130426183307-phpapp02/75/Develop-High-Performance-Windows-8-Application-with-HTML5-and-JavaScriptHigh-perfw8appdevv1-31-2048.jpg)
![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; } };](https://image.slidesharecdn.com/highperfw8appdevv1-130426183307-phpapp02/75/Develop-High-Performance-Windows-8-Application-with-HTML5-and-JavaScriptHigh-perfw8appdevv1-43-2048.jpg)
![// 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"]);](https://image.slidesharecdn.com/highperfw8appdevv1-130426183307-phpapp02/75/Develop-High-Performance-Windows-8-Application-with-HTML5-and-JavaScriptHigh-perfw8appdevv1-49-2048.jpg)
Uploaded byDoris Chen
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Doris Chen is a developer evangelist at Microsoft based in Silicon Valley. She has over 15 years of experience in the software industry focusing on web technologies. She regularly speaks at conferences and publishes content to help developers. Doris received her Ph.D. from UCLA. The document provides links and resources for developing HTML5 apps for Windows 8.
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
- 2. twitter #wins8camp http://bit.ly/wins8cheatsheetBlog 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
- 4. As of March2012, IDC
- 6.
- 7. HTML App Platform Appcontainer HTML host process Internet Explorer Web platform TAB App code Web platform Windows runtime App code
- 10.
- 11.
- 12.
- 14.
- 15.
- 17. The development toolsare FREE! If you use a higher SKU, it just works!
- 19.
- 20.
- 21.
- 22.
- 24. "Code for touch,get mouse and pen for free!"
- 26. function onLoad() { ... varworkSpaces = 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); } ... }
- 28. Tips & tricksthat still work http://channel9.msdn.com/Events/Build/2012/3-132
- 29. function InsertUsername() { document.getElementById('user').innerHTML = userName; } UserinnerHTML to Create your DOM Use DOM Efficiently
- 30. <html> <head> <script type="text/javascript"> function helloWorld(){ alert('Hello World!') ; } </script> </head> <body> … </body> </html> Avoid Inline JavaScript Efficiently Structure Markup
- 31. JSON Always Fasterthan 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>
- 32. Native JSON Methods varjsObjStringParsed = JSON.parse(jsObjString); var jsObjStringBack = JSON.stringify(jsObjStringParsed); Use Native JSON Methods Write Fast JavaScript
- 35. 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
- 36. Optimize your landingpage: Package Locally
- 37. Optimize your landingPage: Use Local Data
- 38. Internet Internet 5 Fetch Info FromNetwork Cache Info Locally Fetch Info From Cache No Network Available AppCache
- 39. Internet Internet HTML 5AppCache – Update Flow Fetch Manifest From Network If diff Create New Cache Fetch Info From Cache No Network Available AppCache
- 40. twitter #devcamp labsetup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen manifest file PAGE 60
- 41.
- 42. twitter #devcamp labsetup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenPAGE 62
- 43. twitter #devcamp labsetup: 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; } };
- 44. Optimize landing page:Load only what you need <script type="text/javascript" src='file1.js' defer='defer'></script>
- 45.
- 46. Be lightweight, controlyour Resource Usage
- 47. App gets 5sto handle suspend App is not notified before termination Apps are notified when they have been resumed User Launches App Splash screen
- 48. Manage your resources URL.revokeObjectURL var url = URL.createObjectURL(blob, {oneTimeOnly: true});
- 49. // Pick animage 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"]);
- 50. Show you’re listening,process user inputs
- 51. 0s 1s 2s3s UI thread Launch User input Animation
- 52. twitter #devcamp labsetup: 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
- 53. twitter #devcamp labsetup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
- 54. twitter #devcamp labsetup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenPAGE 75
- 55. xhr //access a webservice, cloud service, local resource http://www.example.org/somedata.json
- 56. Activation time Memoryleaks 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
- 58.
- 59.
- 63. http://bit.ly/2000Cash Publish yourapp 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
- 64.
- 65. PAGE • Responsive WebDesign 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/