Windows 8 Windows Core OS Services JavaScript (Chakra) C C++ C# VB Windows Store Apps Communication...

50 Performance Tricks to Make your HTML5 apps and sites Faster

Jatinder MannInternet Explorer Program Manager3-132

Windows 8

Windows Core OS Services

JavaScript(Chakra)

Windows Store Apps

Communication & Data

Application Model

Devices & Printing

WinRT APIs

Graphics & Media

XAML HTML / CSS

HTMLJavaScrip

Desktop Apps

.NET / SL

Internet Explore

Windows 8

JavaScript(Chakra)

Windows Store Apps

Application Model

Devices & Printing

WinRT APIs

Graphics & Media

XAML HTML / CSS

HTMLJavaScrip

Desktop Apps

.NET / SL

Internet Explore

Windows 8

JavaScript(Chakra)

Windows Store Apps

Application Model

Devices & Printing

WinRT APIs

Graphics & Media

XAML HTML / CSS

HTMLJavaScrip

Desktop Apps

.NET / SL

Internet Explore

Windows 8

JavaScript(Chakra)

Windows Store Apps

Application Model

Devices & Printing

WinRT APIs

Graphics & Media

XAML HTML / CSS

HTMLJavaScrip

Desktop Apps

.NET / SL

Internet Explore

You’ll leave with…Understanding of what makes a site/app fast.Specific things to improve your performance today.

How much do you know about performance?

Size (k)Number

ElementsCSS

RulesImageFiles

ScriptLines (F)

ScriptLibraries

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

jQuery Prototype ExtJS OtherScriptaculous

Size (k)Number

ElementsCSS

RulesImageFiles

ScriptLines (F)

ScriptLibraries

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

Size (k)Number

ElementsCSS

RulesImageFiles

ScriptLines (F)

ScriptLibraries

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

Size (k)Number

ElementsCSS

RulesImageFiles

ScriptLines (F)

ScriptLibraries

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

Size (k)Number

ElementsCSS

RulesImageFiles

ScriptLines (F)

ScriptLibraries

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

Size (k)Number

ElementsCSS

RulesImageFiles

ScriptLines (F)

ScriptLibraries

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

Size (k)Number

ElementsCSS

RulesImageFiles

ScriptLines (F)

ScriptLibraries

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

Which is the fastest website?

Size (k)Number

ElementsCSS

RulesImageFiles

ScriptLines (F)

ScriptLibraries

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

Size (k)Number

ElementsCSS

RulesImageFiles

ScriptLines (F)

ScriptLibraries

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

Which is the slowest website?

Size (k)Number

ElementsCSS

RulesImageFiles

ScriptLines (F)

ScriptLibraries

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

Size (k)Number

ElementsCSS

RulesImageFiles

ScriptLines (F)

ScriptLibraries

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

What is web performance?

Core 1 Core 2

Core 3 Core 4

Windows Performance Toolkit: http://msdn.microsoft.com/en-us/performance/default.aspxMeasuring Browser Performance: http://blogs.msdn.com/b/ie/archive/2010/06/21/measuring-browser-performance-with-the-windows-performance-tools.aspx?utm_medium=Twitter&utm_source=Shared

Initial DocumentRequested

Waiting ForInitial

Document

ProcessingInitial

Document

Waiting ForSub-

Downloads

ProcessingContent

Waiting ForXHR

ProcessingContent (again)

Page DisplayedTo Screen

Page FinishedLoading

Page UpdatesScreen

ProcessingContent

Elapsed Page Load Time (1.81 seconds)

Time to Glass (1.14 seconds)

CPU Time (1.39 seconds)

Idle CPU Time (0.42 seconds)

Elapsed Page Load Time (1.81 seconds)

Time to Glass (1.14 seconds)

CPU Time (1.39 seconds)

Idle CPU Time (0.42 seconds)

Where does the CPU time go?

JavaScr

Layout

Renderi

JavaScr

Layout

Renderi

JavaScr

Layout

Renderi

JavaScr

Layout

Renderi

JavaScr

Layout

Renderi

JavaScr

Layout

Renderi

JavaScr

Layout

Renderi

JavaScr

Layout

Renderi

JavaScr

Layout

Renderi

JavaScr

Layout

Renderi

JavaScr

Layout

Renderi

JavaScr

Layout

Renderi

Networking

HTML Parsing

CSS Parsing

Collections

JavaScript

Marshalling

Native OM

Formatting

BlockBuilding

Layout

Rendering

Networking

HTML Parsing

CSS Parsing

Collections

JavaScript

Marshalling

Native OM

Formatting

BlockBuilding

Layout

Rendering

50 Performance Tricks

Six Principles to Remember1) Quickly Respond to Network Requests2) Minimize Bytes Downloaded3) Efficiently Structure Markup4) Optimize Media Usage5) Write Fast JavaScript6) Know What Your Application is Doing

Principle #1:Quickly Respond to Network Requests

Avoid 3xx RedirectionQuickly Respond to Network Requests

RequestGET / HTTP/1.1Host: www.news.com

ResponseHTTP/1.1 303 See OtherLocation: http://homepage.news.com/

RequestGET / HTTP/1.1Host: www.news.com

63% of top 1000 websites

worldwide contain 3xx redirect

Avoid Meta Refresh TagQuickly Respond to Network Requests

Avoid Meta Refresh TagQuickly Respond to Network Requests

14% of worldwide URL’s contain meta-

refresh

Minimize Server Time for RequestsQuickly Respond to Network Requests

WebApplication

WebServer

WebApplication

WebServer

UserDatabase

WebApplication

WebServer

UserDatabase

BusinessInformatio

WebApplication

WebServer

UserDatabase

BusinessInformatio

Use Content Distribution Networks (CDN’s)Quickly Respond to Network Requests

Maximize Concurrent ConnectionsQuickly Respond to Network Requests

WebApplication

Domain

WebApplication

Domain

WebApplication

Domain

HTTP ResponseHTTP/1.1 200 OKContent-Type: application/javascriptContent-Length: 230848Connection: close

Reuse ConnectionsQuickly Respond to Network Requests

HTTP ResponseHTTP/1.1 200 OKContent-Type: application/javascriptContent-Length: 230848Connection: close

Reuse ConnectionsQuickly Respond to Network Requests

Know Your ServersQuickly Respond to Network Requests

WebApplication

Domain

Understand Your Network TimingQuickly Respond to Network Requests

Unload RedirectApp

CacheDNS TCP Request Processing onLoadResponse

Principle #2:Minimize Bytes Downloaded

Download Fewer Resources and BytesMinimize Bytes Downloaded

average number of bytes downloaded

Download Fewer Resources and BytesMinimize Bytes Downloaded

Images (474k)Scripts (128k)Flash (84k)HTML (35k)Style Sheets (27k)Other (29k)

RequestGET / HTTP/1.1Accept: */*Accept-Language: en-usUA-CPU: x86Accept-Encoding: gzip, deflateHost: www.live.com

ResponseHTTP/1.1 200 OKContent-Length: 3479Expires: -1Date: Sun, 14 Mar 2010 21:30:46 GMTPragma: no-cacheContent-Encoding: gzip

GZIP Compress Network TrafficMinimize Bytes Downloaded

Persist App Resources Locally in PackageMinimize Bytes Downloaded

WebApplication

Domain

Package

Persist App Resources Locally in PackageMinimize Bytes Downloaded

WebApplication

Domain

Package

Cache Dynamic Resources in App CacheMinimize Bytes Downloaded

HTML5App

WebApplication

Domain

WebApplication

Domain

HTML5App

WebApplication

Domain

HTML5App

WebApplication

Domain

HTML5App

RequestGET /images/banner.jpg HTTP/1.1Host: www.microsoft.com

ResponseHTTP/1.1 200 OKContent-Type: image/jpegExpires: Fri, 20 Apr 2011 00:00:00 GMT

Provide Cacheable ContentMinimize Bytes Downloaded

RequestGET /images/banner.jpg HTTP/1.1Host: www.microsoft.com

ResponseHTTP/1.1 200 OKContent-Type: image/jpegExpires: Fri, 20 Apr 2011 00:00:00 GMT

Provide Cacheable ContentMinimize Bytes Downloaded

RequestGET /images/banner.jpg HTTP/1.1Host: www.microsoft.comIf-Modified-Since:Sun, 10 Apr 2011 21:30:46 GMT

ResponseHTTP/1.1 304 Not ModifiedContent-Type: image/jpegLast-Modified: Sun, 1 Mar 2011 21:30:46 GMT

Send Conditional RequestsMinimize Bytes Downloaded

jQuery Data RequestjQuery.ajax({ url: url, dataType: 'json', data: data, success: callback});

Cached jQuery Data RequestjQuery.ajax({ url: url, dataType: 'json', data: data, cache: true, success: callback});

Cache Data RequestsMinimize Bytes Downloaded

jQuery Data RequestjQuery.ajax({ url: url, dataType: 'json', data: data, success: callback});

Cached jQuery Data RequestjQuery.ajax({ url: url, dataType: 'json', data: data, cache: true, success: callback});

Cache Data RequestsMinimize Bytes Downloaded

Lower Case<img src="icon.png" />

Title Case<img src="Icon.png" />

Careless Developer<img src="ICon.png" />

Standardize File Capitalization ConventionMinimize Bytes Downloaded

Principle #3:Efficiently Structure Markup

Load Pages in Latest Browser Mode (HTML5)Efficiently Structure Markup

Quirks Mode (Legacy IE)

IE7 Standards Mode

IE8 Standards Mode

IE9 Standards Mode (HTML5)

Load Pages in Latest Browser Mode (HTML5)Efficiently Structure Markup

Quirks Mode (Legacy IE)

IE7 Standards Mode

IE8 Standards Mode

Page Meta Tag<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

Use HTTP Header to Specify Legacy IE ModesEfficiently Structure Markup

HTTP HeaderHTTP/1.1 200 OKDate: Sun, 14 Mar 2010 21:30:46 GMTX-UA-Compatible: IE=EmulateIE7

Link Style Sheets at Top of PageEfficiently Structure Markup

<title>Test</title><link rel="stylesheet"

type="text/css"href="class.css" /></head><body>

………

</body></html>

Link Style Sheets at Top of PageEfficiently Structure Markup

<title>Test</title><link rel="stylesheet" type="text/css"

href="class.css" /></head><body>

………

</body></html>

………

</body><link rel="stylesheet" type="text/css"

href="styles.css"/></html>

Never Link Style Sheets at Bottom of PageEfficiently Structure Markup

………

</body><link rel="stylesheet" type="text/css"

href="styles.css"/></html>

Never Link Style Sheets at Bottom of PageEfficiently Structure Markup

@import url(/stylesheets/one.css);@import url(/stylesheets/two.css);

MyHeading{

color: red; font-family: 'New Century Schoolbook', serif;background: white;

Avoid Using @import for Hierarchical StylesEfficiently Structure Markup

@import url(/stylesheets/one.css);@import url(/stylesheets/two.css);

MyHeading{

color: red; font-family: 'New Century Schoolbook', serif;background: white;

Avoid Using @import for Hierarchical StylesEfficiently Structure Markup

</style><div class=‘item’>MyItem</div>

</body></html>

Avoid Embedded and Inline StylesEfficiently Structure Markup

</style><div class=‘item’>MyItem</div>

</body></html>

Avoid Embedded and Inline StylesEfficiently Structure Markup

/* These styles are for the home page. */HomePage{color: red;

/* These styles are for the content page. */ContentPage{color: green;

Only Include Necessary StylesEfficiently Structure Markup

………<script src="myscript.js" … ></script>

</body></html>

Always Link JavaScript at End of FileEfficiently Structure Markup

………<script src="myscript.js" … ></script>

</body></html>

Always Link JavaScript at End of FileEfficiently Structure Markup

</head><body>

………

</body></html>

Avoid Linking JavaScript In HeadEfficiently Structure Markup

</head><body>

………

</body></html>

Avoid Linking JavaScript In HeadEfficiently Structure Markup

alert('Hello World!') ;}

</script> </head> <body>

… </body>

</html>

Avoid Inline JavaScriptEfficiently Structure Markup

alert('Hello World!') ;}

</script> </head> <body>

… </body>

</html>

Avoid Inline JavaScriptEfficiently Structure Markup

</head><body>

………

</body></html>

Use the Defer Tag When Head Only OptionEfficiently Structure Markup

</head><body>

………

</body></html>

Use the Defer Tag When Head Only OptionEfficiently Structure Markup

………<script async src="myscript.js"></script>

</body></html>

Asynchronously Download ScriptEfficiently Structure Markup

………<script async src="myscript.js"></script>

</body></html>

Asynchronously Download ScriptEfficiently Structure Markup

…<script src="jquery.js" … ></script><script src="myscript.js" … ></script> <script src="navigation.js" … ></script><script src="jquery.js" … ></script>

</body></html>

Remove Duplicate CodeEfficiently Structure Markup

…<script src="jquery.js" … ></script><script src="myscript.js" … ></script> <script src="navigation.js" … ></script><script src="jquery.js" … ></script>

</body></html>

Remove Duplicate CodeEfficiently Structure Markup

52%of the pages on the web

have duplicate code

Standardize on a Single FrameworkEfficiently Structure Markup

Don’t Include Script To Be CoolEfficiently Structure Markup

Principle #4:Optimize Media Usage

Minimize Number of ImagesOptimize Media Usage

Images (474k)Scripts (128k)Flash (84k)HTML (35k)Style Sheets (27k)Other (29k)

Minimize Number of ImagesOptimize Media Usage

58average number of media

resources on the top 100,000 web sites

Avoid Death by 1,000 ImagesOptimize Media Usage

<img src="twitter.png" width="40" height="40" /><img src="facebook.png" width="40" height="40" /><img src="linkedin.png" width="40" height="40" /><img src="slashdot.png" width="40" height="40" /><img src="digg.png" width="40" height="40" /><img src="livemocha.png" width="40" height="40" /><img src="last.png" width="40" height="40" /><img src="meetin.png" width="40" height="40" /><img src="eharmony.png" width="40" height="40" /><img src="mog.png" width="40" height="40" /><img src="myspace.png" width="40" height="40" /><img src="nexopia.png" width="40" height="40" />…

Avoid Death by 1,000 ImagesOptimize Media Usage

Use Image SpritesOptimize Media Usage

Scenario #1 – Multiple Files

Scenario #2 - Image Sprite

6 Images6 Connections96k Download

1 Image1 Connection21k Download

40px40px40px40px40px40px

Create Your Sprites by HandOptimize Media Usage

Image Formats: PNG, JPEG, JPEG-XROptimize Media Usage

PNG (Default)Website Elements, Logos

JPEGPhotographs

JPEG-XRHigh Resolution Photographs

Don’t Get DistractedGIF, TIFF, BMP, WebP, etc.

Use Native Image ResolutionsOptimize Media Usage

-ms-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666), color-stop(.3,#333333))-webkit-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666), color-stop(.3,#333333))-moz-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666), color-stop(.3,#333333))

Replace Images with CSS3 GradientsOptimize Media Usage

border-radius:18px;-webkit-border-radius: 100px;-moz-border-radius: 100px;

Replace Images with CSS3 Border RadiusOptimize Media Usage

Leverage CSS3 TransformsOptimize Media Usage

-ms-transform: translate(75px, 100px) scaleY(.75) skewY(10deg);-webkit-transform: translate(75px, 100px) scaleY(.75) skewY(10deg);-moz-transform: translate(75px, 100px) scaleY(.75) skewY(10deg);-o-transform: translate(75px, 100px) scaleY(.75) skewY(10deg);

Element Rotate SkewMove

</html>

Use DataURI’s for Small Single View ImagesOptimize Media Usage

</html>

</html>

</html>

Avoid Complex SVG PathsOptimize Media Usage

Video: User Preview ImagesOptimize Media Usage

Minimize Media Plugin UsageOptimize Media Usage

Proactively Download Future MediaOptimize Media Usage

Principle #5:Write Fast JavaScript

C, C++, C# (Static Language)static int DoMath(int value) { int result = 0; for (int i = 0; i < 10000; i++) { for (int j = 0; j < 10000; j++) { result = i + j + value; } } return result;}

JavaScript (Dynamic Language)function DoMath(value) { for (var i = 0; i < 10000; i++) { for (var j = 0; j < 10000; j++) { var result = i + j + value; } } return result;}

Stick to Integer MathWrite Fast JavaScript

C++ JavaScript

DoMath(999);

200ms (~5x)

DoMath(999/2);

1600ms (~40x)

0x005e22a0Pointer

01Type Tag

449.4999999………

02Type Tag

“Hello World”Value

0x005e4148Pointer

DoMath(Math.floor(999 / 2));

var b = Math.ceil((p[i].r + p[i].g + p[i].b) / 3);

Minify Your JavaScriptWrite Fast Loading JavaScript

Initial (66 Characters)function Sum(number1, number2) { return (number1 + number2);}

Characters Removed (54 Characters)function Sum(number1,number2){return number1+number2;}

Compacted (30 Characters)function Sum(a,b){return a+b;}

Initialize JavaScript on DemandWrite Fast Loading JavaScript

var userTileScriptsLoaded = false;function CustomizeUserTile(){

if (userTileScriptsLoaded == false){

var head = document.getElementsByTagName("head")[0];script = document.createElement('script');script.type = 'text/javascript';script.src = 'upload.js';head.appendChild(script);

Minimize DOM InteractionsUse DOM Efficiently

function CalculateSum() { var leftSide = document.body.all.lSide.value; var rightSide = document.body.all.rSide.value;

document.body.all.result.value = leftSide + rightSide;}

15 lookups

function LoopChildren(elm) {

var node = elm.firstChild;

while (node != null) {

node = node.nextSibling;

Built in DOM Methods Always More EfficientUse DOM Efficiently

function doValidation() {

var reqs = document.querySelectorAll(".required");

var missingRequiredField = false;

for (var i = 0; i < reqs.length; i++) {

if (reqs[i].value == "")

missingRequiredField = true;

Use Selectors API for Collection AccessUse DOM Efficiently

function doValidation() {

var reqs = document.querySelectorAll(".required");

var missingRequiredField = false;

for (var i = 0; i < reqs.length; i++) {

if (reqs[i].value == "")

missingRequiredField = true;

Use Selectors API for Collection AccessUse DOM Efficiently

function InsertUsername(){

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

User .innerHTML to Construct Your PageUse DOM Efficiently

function InsertUsername(){

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

User .innerHTML to Construct Your PageUse DOM Efficiently

function BuildUI() { var elm = document.getElementById('ui'); var contents = BuildTitle() + BuildBody() + BuildFooter(); elm.innerHTML = contents;}

Batch Markup ChangesUse DOM Efficiently

Maintain a Small and Healthy DOMUse DOM Efficiently

Document HTML Body

ElementElement

Element

ElementElement

Element

ElementElement

Element

JSON Always Faster than XML for DataJSON 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 Methodsvar jsObjStringParsed = JSON.parse(jsObjString); var jsObjStringBack = JSON.stringify(jsObjStringParsed);

Use Native JSON MethodsWrite Fast JavaScript

Use Regular Expressions SparinglyWrite Fast JavaScript

var foo = ^(?:\$\s*)?(?:(?:\d{0,3}(?:[, ]\d{0,3})*(?:\s*\$)\\;

Principle #6:Know What Your Application is Doing

setTimeoutsetTimeout(callback, ms);

setIntervalvar test = setInterval(callback, ms);clearInterval(test);

Understand JavaScript TimersKnow What Your Application is Doing

n n n n nn

Combine Application TimersKnow What Your Application is Doing

10 10 10 10 1010

6 6 6 6 6 6 6 6 6 6 6

Align Timers to the Display Frame (16.7)Know What Your Application is Doing

setInterval(renderLoop, 16.7);setInterval(renderLoop, 33.4);

16.7 16.716.7

Use requestAnimationFrame for AnimationsKnow What Your Application is Doing

window.requestAnimationFrame(renderLoop);

16.7 16.716.7

Know When Your App is VisibleKnow What Your Application is Doing

Page Visibility APIdocument.hidden (property)Visibilitychange (event)

Six Principles to Remember1) Quickly Respond to Network Requests2) Minimize Bytes Downloaded3) Efficiently Structure Markup4) Optimize Media Usage5) Write Fast JavaScript6) Know What Your Application is Doing

Windows Performance Toolkit: http://msdn.microsoft.com/en-us/performance/default.aspxMeasuring Browser Performance: http://blogs.msdn.com/b/ie/archive/2010/06/21/measuring-browser-performance-with-the-windows-performance-tools.aspx?utm_medium=Twitter&utm_source=Shared

Core 1 Core 2

Core 3 Core 4

«««««

• Develop: http://msdn.microsoft.com/en-US/windows/apps/br229512

• Design: http://design.windows.com/

• Samples: http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples

• Videos: http://channel9.msdn.com/Windows

Resources

Please submit session evals by using the Build Windows 8 appor at http://aka.ms/BuildSessions

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Windows 8 Windows Core OS Services JavaScript (Chakra) C C++ C# VB Windows Store Apps Communication...

Documents

Transcript of Windows 8 Windows Core OS Services JavaScript (Chakra) C C++ C# VB Windows Store Apps Communication...

‘Metro’ / Modern – ‘WinRT’

D2xx WinRT Guide · Application Note AN_271D2xx WinRT Guide Version 1.0 Clearance No.: FTDI# 395 Document Reference No.: FT_000928 { { {.....

The Windows Runtime (WinRT) is the shared runtime and API space used by store apps across the Windows platform (phone and client) 5 Common WinRT.

Asynchronous Programming with C# and WinRT

Windows Core OS Services JavaScript (Chakra) C C++ C# VB Metro style apps Communication & Data Application Model Devices & Printing WinRT APIs Graphics.

Mastering Windows 8 C++ App Development - Packt · Mastering Windows 8 C++ App Development . ... from Windows internals, ... discusses one of the most powerful WinRT features that

WinRT 8.1: speech API e NUI in Windows 8.1

C++ Component Extension for WinRT...Windows Runtime (WinRT) •The Windows Runtime is the solid, efficient foundation for building Windows 8 Metro style apps •A new API surface which

C++Builder 10 Seattle - Moonsoft · and FMX applications to Windows 10 with the new Windows 10 VCL Controls, Styles and WinRT/UWP services components. Ride the Windows 10 Wave Windows

ITCamp 2012 - Raffaele Rialdi - Introduction to WinRT

What You Learn - 1105 Mediadownload.1105media.com/vslive/lasvegas2012/VSLive_Las Vegas 20… · 1 Windows 8, WinRT Silverlight / WPF Web Visual Studio 2010+ / .NET 4.0+ Cloud Computing

Universe 2013 - CodeView · WinRT XAML/.NET Windows Store SDK Notiﬁcation Extensions.WinRT p&p Prism for Windows Runtime WnsRecipe p&p Unity for Windows Store Apps S OSS S OSS S

RAD StudioTM 10 Seattle - Embarcadero...easily update VCL and FMX applications to Windows 10 with the new Windows 10 VCL Controls, Styles and WinRT/UWP services components. Ride the

New WinRT · 2016. 1. 11. · Programming Windows 8 With WinRT Saves the day. Windows reimagined What's WinRT? Windows Runtime (WinRT) is the ... Ruby and JavaScript. ... Cleanup

Windows Store Apps and WinRT - SDD Conferencesddconf.com/brands/sdd/...apps_in_XAML_and_CSharp.pdf · . Package Full Name ... XAML runtime contains numerous controls for building

Programming windows store apps with JavaScript and WinRT

Windows 8 and WinRT from a C++ perspective

RAD StudioTM 10 Seattle - Embarcadero · easily update VCL and FMX applications to Windows 10 with the new Windows 10 VCL Controls, Styles and WinRT/UWP services components. Ride

Ciklum .NET Saturday Relationship between .Net and WinRT

D2xx WinRT Guide - FTDI