develop an app for windows 8 using html5
DESCRIPTION
The slides for our presentation during the HTML5 dev conf in San FranciscoTRANSCRIPT
![Page 1: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/1.jpg)
![Page 2: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/2.jpg)
![Page 3: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/3.jpg)
![Page 4: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/4.jpg)
AGENDA
![Page 5: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/5.jpg)
of my page.
I’m a Web developer, I don’t know (at all) Microsoft technologies.
I already developed an HTML5 web page.
I want to create the
Windows 8app
![Page 6: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/6.jpg)
My existing web page: home.dollon.net
![Page 7: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/7.jpg)
Compatible with all last browsers on PC and tablets.Works with HTML5 and CSS3 features, knockout.js, jQuery, less (and node.js web service)
![Page 8: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/8.jpg)
DEMO
![Page 9: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/9.jpg)
![Page 10: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/10.jpg)
So now, please Microsoft, where is the right button click
“Transform this website as a metro style app for Windows8”?
![Page 11: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/11.jpg)
It does not exist. And it’s normal.
Because you are working for a specific kind of tablet with native call (new API, new controls…) and NEW design style (metro).
You are not designing a web page. You are developing a
native app.
![Page 12: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/12.jpg)
9 things to migrate your HTML5 app on
Windows 8 environment.
![Page 13: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/13.jpg)
0 – which kind of tools I need?**this point is not included on the counter ☺
![Page 14: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/14.jpg)
DEMO
![Page 15: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/15.jpg)
![Page 16: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/16.jpg)
1 - what is a package?
![Page 17: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/17.jpg)
a package is a ZIP file
It’s the ‘executable’ of your project
It contains everything (HTML, JS, Manifest..)
Don’t forget to obfuscate your code
After installation, the app is located here c:\Program Files\WindowsApps
![Page 18: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/18.jpg)
You can use PowerShellto deploy it
And all packages are signed with certificates
![Page 19: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/19.jpg)
2 – what happens in runtime?
![Page 20: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/20.jpg)
The process that hosts/executes a Metro style app using JavaScript is called WWAHost.exe
Your app ‘live’ inside a sandbox without all privileges of the current user
![Page 21: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/21.jpg)
Process state transitions
A user
launch an
app
App is
runningSuspended Terminated
An app gets 5 secondes to handle suspend and is notified when it has been resumedApp is not notified before a termination caused by low resources
![Page 22: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/22.jpg)
3 – Differences between Metro style app
And traditional HTML5 web page
![Page 23: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/23.jpg)
ALL*HTML5/CSS3 features are supported
*if IE10 “trident” layout engine support it
![Page 24: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/24.jpg)
ALL*JavaScript features are supported
*if IE10 “Chakra” engine support it
![Page 25: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/25.jpg)
DOM EventsNative APIs
NamespacesControls Enumerations
Some ActiveX controls are disabled
No Java, Silverlight, Flash and other embedded components
![Page 26: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/26.jpg)
have the same support of web APIsthan IE 10
So, HTML5, CSS3 and JavaScript
+
API from WinRT
![Page 27: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/27.jpg)
seriously
And you have to know that
ROCKS!
![Page 28: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/28.jpg)
This isn’t just a container like PhoneGap
It doesn’t run in a browser
![Page 29: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/29.jpg)
REUSE THE SAME CODEJust to see if it works ☺
![Page 30: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/30.jpg)
![Page 31: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/31.jpg)
4 – what is WinRT?
![Page 32: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/32.jpg)
Windows RT != WinRT(Windows RT is the Windows 8 version for ARM)
![Page 33: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/33.jpg)
WinRTResides directly on the top of the kernel
just like the Win32 API
WinRT APIs are written in unmanaged C++ and designed to be object-oriented
![Page 34: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/34.jpg)
5 – what is WinJS?
![Page 35: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/35.jpg)
WinJS is the orange layer
![Page 36: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/36.jpg)
A language projection exists for .NET and C++ too
![Page 37: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/37.jpg)
Windows library for JSHelpers
AnimationsTemplates Styles
Navigation
Data Binding
Controls
App Model
![Page 38: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/38.jpg)
Base.js
Wwaap.jsUi.js
Binding.js
Controls.jsAnimation.js
![Page 39: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/39.jpg)
6 – Windows Controls
![Page 40: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/40.jpg)
Built-in ControlsMetro-UI Styles
Touch enabledNative Customizable
Same in XAMLControls
All basic controls
![Page 41: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/41.jpg)
AppBarUseful to bring up commands on demand
Don’t forget to use Charms for some entry points
![Page 42: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/42.jpg)
MODIFY THE APPWith Windows 8 controls
![Page 43: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/43.jpg)
![Page 44: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/44.jpg)
![Page 45: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/45.jpg)
7 – Multiple Views andResolutions
![Page 46: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/46.jpg)
The principal screen can be at minimum 1024x768
It exists widescreen (1366x768+)
Two other modes: snapview and portait
![Page 47: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/47.jpg)
Use three kind of image size (100%, 140% and 180%).
Depending on the resolutions, images are loaded automatically
Image.jpg � Image.scale-180.jpg
![Page 48: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/48.jpg)
Use of CSS media queries
![Page 49: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/49.jpg)
MODIFY THE APPScreens
![Page 50: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/50.jpg)
![Page 51: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/51.jpg)
7 – Use Contracts
![Page 52: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/52.jpg)
Share to export the current content
Search to find content
File Picker to allow user to access content from outside
Settings to configure the app
![Page 53: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/53.jpg)
MODIFY THE APPContracts
![Page 54: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/54.jpg)
![Page 55: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/55.jpg)
8 – Use Tiles
![Page 56: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/56.jpg)
Tiles is the “link” to open your appIt could be a “secondary tiles”Can provide a lot of information (icons, notifications, counter)
![Page 57: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/57.jpg)
MODIFY THE APPWith Tiles and Splash
![Page 58: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/58.jpg)
![Page 59: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/59.jpg)
9 – Debugging and Performances
![Page 60: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/60.jpg)
PerformanceTips & tricks that still work:For safe dynamic content, use innerHTMLLink CSS stylesheets at the top of the pageAvoid inline JavaScript and inline CSS stylesDon’t parse JSON by hand, use JSON.parse
![Page 61: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/61.jpg)
A Metro style app using HTML5is more than a web page …
![Page 62: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/62.jpg)
Rely on packaged content and local dataUse local images scaled to the right sizeUse WinJS fragments to load parts of your app on demand
Defer parsing of unneeded HTML contentDelays JavaScriptKeeps your DOM small: look-up and manipulations are quicker
Optimize your landing page
![Page 63: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/63.jpg)
Defer some initialization to after the splash screenStart network downloads after initializationDelay loading databases
Consolidate small JS files that are related into larger filesIf you need more time, use an extended splash screen
Further optimizations
![Page 64: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/64.jpg)
Keep a lightweight DOMRelease expensive content, such as media elements, as soon as they are no longer neededHelp the garbage collector
Avoid circular references between your elements and JavaScript codeReview how you use your Object URLs
Manage your resources
![Page 65: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/65.jpg)
On suspend, free resources that are easy to recreateUse media content from the user at the screen resolutionTune your app launch time to create great first impressionsKeep your app alive by minimizing your memory footprintBe responsive, don’t block the UI thread
![Page 66: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/66.jpg)
Debugging JavaScript apps is !@#$%^ hard!
![Page 67: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/67.jpg)
Debugging with Visual Studio
Launch with debuggingdebugger keywordDebug.enableFirstChanceException(true);JavaScript consoleDOM explorer
![Page 68: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/68.jpg)
Debugging with BlendUnderstand your CSS with the Winning Rule and Show Set Properties modeDebug device-state issues with the Platform and Styles PanesCatch grid layout issuesFind parser-generated elements with the Live DOMDiagnose post-interaction problems with Interactive Mode
![Page 69: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/69.jpg)
10 – DeploymentBut no info now, it still not possible to publish app
![Page 70: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/70.jpg)
Result
![Page 71: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/71.jpg)
ConclusionSkydrive with all samples / slides / videos:
Webcast of this session on YouTube:
http://sdrv.ms/KsoFUq
![Page 72: Develop an app for Windows 8 using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022051514/54bb86824a7959372d8b4571/html5/thumbnails/72.jpg)
Q&A(Don’t hesitate to give us feedbacks on twitter @juliendollon/ @soumow)