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: [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

http://t.co/ubFAuwKd

http://blogs.msdn.com/b/dorischen/

mailto:[email protected]

http://ohours.org/dorischen

As of March 2012, IDC

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

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

http://aka.ms/jQueryOnWinRT


"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

http://channel9.msdn.com/Events/Build/2012/3-132

function InsertUsername()

{

document.getElementById('user').innerHTML = userName;

}

User innerHTML to Create your DOMUse DOM Efficiently

<html>

<head>

<script type="text/javascript">function helloWorld() {

alert('Hello World!') ;}

</script>

</head>

<body>

…

</body>

</html>

Avoid Inline JavaScriptEfficiently 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 MethodsWrite 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

LocallyFetch Info

From Cache

No Network

Available

AppCache

Internet Internet

HTML 5 AppCache – Update Flow

Fetch Manifest

From Network

If diff Create New

CacheFetch Info

From CacheNo Network

Available

AppCache

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

manifest file

PAGE 60

http://go.microsoft.com/fwlink/p/?LinkId=228543

MIME Type: text/cache-manifest

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 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>

Further optimizations

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 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 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/dorischen PAGE 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/2000Cash

http://bit.ly/HTML5Wins8Camp

http://bit.ly/CampInBox


http://Aka.ms/brockschmidtbook

http:/dev.windows.comPAGE

86

http://bit.ly/HTML5Wins8Camp

http://bit.ly/CampInBox


http://aka.ms/brockschmidtbook

• 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/

http://bit.ly/CSS3Intro

http://bit.ly/HTML5DevCampDownload

http://bit.ly/HTML5onBlend2

http://bit.ly/HTML5onBlend3

http://ie.microsoft.com/testdrive/

http://www.beautyoftheweb.com/

develop high performance windows 8 application with html5 and javascripthigh perfw8appdevv1

Technology

wins8camp http

lyhtml5setup blog http

lywins8cheatsheet blog

comdorischen page

office hours http

landing page

msdn insertusername

comdorischen var orequestdb