Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1

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

HTML App Platform
App container
HTML host process
Internet Explorer
Web
platform
TAB
App code
Web platform
Windows
runtime
App code

The development tools are FREE!
If you use a higher SKU, it just works!

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

"Code for touch, get mouse and pen for free!"

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);
}
...
}

Tips & tricks that still work
http://channel9.msdn.com/Events/Build/2012/3-132

function InsertUsername()
{
document.getElementById('user').innerHTML =
userName;
}
User innerHTML to Create your DOM
Use DOM Efficiently

<html>
<head>
<script type="text/javascript">
function helloWorld() {
alert('Hello World!') ;
}
</script>
</head>
<body>
…
</body>
</html>
Avoid Inline JavaScript
Efficiently Structure Markup

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>

Native JSON Methods
var jsObjStringParsed = JSON.parse(jsObjString);
var jsObjStringBack = JSON.stringify(jsObjStringParsed);
Use Native JSON Methods
Write Fast JavaScript

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

Optimize your landing page: Package Locally

Optimize your landing Page: Use Local Data

Internet Internet
5
Fetch Info
From Network
Cache Info
Locally
Fetch Info
From Cache
No Network
Available
AppCache

Internet Internet
HTML 5 AppCache – Update Flow
Fetch Manifest
From Network
If diff Create New
Cache
Fetch Info
From Cache
No Network
Available
AppCache

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
manifest file
PAGE 60

MIME Type: text/cache-manifest

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenPAGE 62

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;
}
};

Optimize landing page: Load only what you need
 <script type="text/javascript" src='file1.js'
defer='defer'></script>

Be lightweight, control your
Resource Usage

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

Manage your resources
URL.revokeObjectURL
 var url = URL.createObjectURL(blob, {oneTimeOnly: true});

// 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"]);

Show you’re listening, process
user inputs

0s 1s 2s 3s
UI thread
Launch User input Animation

Typical Execution Flow on the UI thread
JavaScript
Web Worker
JavaScript
LayoutUpdate View
User Input Event,
Timer,
or Callback
UI Thread
Update App
Logic

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenPAGE 75

xhr
//access a web service, cloud service, local resource
http://www.example.org/somedata.json

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

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

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

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/

Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1

Recommended

More Related Content

What's hot (18)

Similar to Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1 (20)

More from Doris Chen (20)

Recently uploaded (20)

Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1