Post on 12-May-2015
description
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
As of March 2012, IDC
PAGE 9
HTML App Platform
App container
HTML host process
Internet Explorer
Web
platform
TAB
App code
Web platform
Windows
runtime
App code
PAGE
14
PAGE 15
PAGE 16
PAGE 23
PAGE 24
The development tools are FREE!
If you use a higher SKU, it just works!
PAGE
29
demo
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
PAGE
35
"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 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
MIME Type: text/cache-manifest
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 62
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;
}
};
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
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
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
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
PAGE 79
PAGE 80
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
86
PAGE
87
• 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/