Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
8 likes8,816 views
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.
![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/85/Develop-High-Performance-Windows-8-Application-with-HTML5-and-JavaScriptHigh-perfw8appdevv1-26-320.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/85/Develop-High-Performance-Windows-8-Application-with-HTML5-and-JavaScriptHigh-perfw8appdevv1-31-320.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/85/Develop-High-Performance-Windows-8-Application-with-HTML5-and-JavaScriptHigh-perfw8appdevv1-43-320.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/85/Develop-High-Performance-Windows-8-Application-with-HTML5-and-JavaScriptHigh-perfw8appdevv1-49-320.jpg)
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
- 2. 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: [email protected] 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 March 2012, IDC
- 6. PAGE 9
- 7. HTML App Platform App container HTML host process Internet Explorer Web platform TAB App code Web platform Windows runtime App code
- 10. PAGE
- 11. PAGE 15
- 12. PAGE 16
- 14. PAGE 23
- 15. PAGE 24
- 17. The development tools are FREE! If you use a higher SKU, it just works!
- 19. PAGE
- 20. demo
- 22. PAGE
- 24. "Code for touch, get mouse and pen for free!"
- 26. 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); } ... }
- 28. Tips & tricks that still work http://channel9.msdn.com/Events/Build/2012/3-132
- 29. function InsertUsername() { document.getElementById('user').innerHTML = userName; } User innerHTML 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 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>
- 32. Native JSON Methods var jsObjStringParsed = 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 landing page: Package Locally
- 37. Optimize your landing Page: Use Local Data
- 38. Internet Internet 5 Fetch Info From Network Cache Info Locally Fetch Info From Cache No Network Available AppCache
- 39. Internet Internet HTML 5 AppCache – Update Flow Fetch Manifest From Network If diff Create New Cache Fetch Info From Cache No Network Available AppCache
- 40. twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen manifest file PAGE 60
- 42. twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenPAGE 62
- 43. 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; } };
- 44. Optimize landing page: Load only what you need <script type="text/javascript" src='file1.js' defer='defer'></script>
- 46. Be lightweight, control your Resource Usage
- 47. 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
- 48. Manage your resources URL.revokeObjectURL var url = URL.createObjectURL(blob, {oneTimeOnly: true});
- 49. // 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"]);
- 50. Show you’re listening, process user inputs
- 51. 0s 1s 2s 3s UI thread Launch User input Animation
- 52. 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
- 53. twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
- 54. twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenPAGE 75
- 55. xhr //access a web service, cloud service, local resource http://www.example.org/somedata.json
- 56. 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
- 58. PAGE 79
- 59. PAGE 80
- 63. 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
- 65. 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/