The slides for our presentation during the HTML5 dev conf in San Francisco

4. AGENDA

5. 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 8
app
of my page.

6. My existing web page: home.dollon.net

7. Compatible with all last browsers on PC and
tablets.
Works with HTML5 and CSS3 features,
knockout.js, jQuery, less (and node.js web service)

8. DEMO

10. So now, please Microsoft, where is the right
button click
“Transform this website as a metro style app for Windows8”?

11. 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.

12. 9 things to migrate your HTML5 app on
Windows 8 environment.

13. 0 – which kind of tools I need?*
*this point is not included on the counter ☺

14. DEMO

16. 1 - what is a package?

17. a package is a ZIP file Don’t forget to obfuscate your code
It’s the ‘executable’ of your project
It contains everything (HTML, JS, Manifest..)
After installation, the app is located here c:Program FilesWindowsApps

18. You can use PowerShell
to deploy it
And all packages are signed with certificates

19. 2 – what happens in runtime?

20. 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

21. Process state transitions
A user
App is
launch an Suspended Terminated
running
app
An app gets 5 secondes to handle suspend and is
notified when it has been resumed
App is not notified before a termination caused by
low resources

22. 3 – Differences between Metro style app
And traditional HTML5 web page

23. ALL*
HTML5/CSS3 features are supported
*if IE10 “trident” layout engine support it

24. ALL*
JavaScript features are supported
*if IE10 “Chakra” engine support it

25. Native APIs
DOM Events
Namespaces
Controls Enumerations
No Java, Silverlight, Flash and other embedded components
Some ActiveX controls are disabled

26. So, HTML5, CSS3 and JavaScript
have the same support of web APIs
than IE 10
+
API from WinRT

27. And you have to know that
seriously
ROCKS!

28. This isn’t just a container
like PhoneGap
It doesn’t run in a browser

29. REUSE THE SAME CODE
Just to see if it works ☺

31. 4 – what is WinRT?

32. Windows RT != WinRT
(Windows RT is the Windows 8 version for ARM)

33. WinRT
Resides 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

34. 5 – what is WinJS?

35. WinJS is the orange layer

36. A language projection exists for .NET and C++ too

37. Windows library for JS
Helpers
Animations
Templates Styles
App Model Data Binding
Controls
Navigation

38. Binding.js Wwaap.js
Ui.js
Base.js
Controls.js
Animation.js

39. 6 – Windows Controls

40. Built-in Controls
Metro-UI Styles
Touch enabled
Native Customizable
All basic controls
Controls
Same in XAML

41. AppBar
Useful to bring up commands
on demand
Don’t forget to use Charms
for some entry points

42. MODIFY THE APP
With Windows 8 controls

45. 7 – Multiple Views and
Resolutions

46. The principal screen can be at minimum
1024x768
It exists widescreen (1366x768+)
Two other modes: snapview and portait

47. Use three kind of image size (100%,
140% and 180%).
Depending on the resolutions, images
are loaded automatically
Image.jpg Image.scale-180.jpg

48. Use of CSS media queries

49. MODIFY THE APP
Screens

51. 7 – Use Contracts

52. 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

53. MODIFY THE APP
Contracts

55. 8 – Use Tiles

56. Tiles is the “link” to open your app
It could be a “secondary tiles”
Can provide a lot of information (icons,
notifications, counter)

57. MODIFY THE APP
With Tiles and Splash

59. 9 – Debugging and Performances

60. Performance
Tips & tricks that still work:
For safe dynamic content, use innerHTML
Link CSS stylesheets at the top of the page
Avoid inline JavaScript and inline CSS styles
Don’t parse JSON by hand, use JSON.parse

61. A Metro style app using HTML5
is more than a web page …

62. Optimize your landing page
Rely on packaged content and local data
Use local images scaled to the right size
Use WinJS fragments to load parts of your app on demand
Defer parsing of unneeded HTML content
Delays JavaScript
Keeps your DOM small: look-up and manipulations are
quicker

63. Further optimizations
Defer some initialization to after the splash screen
Start network downloads after initialization
Delay loading databases
Consolidate small JS files that are related into larger files
If you need more time, use an extended splash screen

64. Manage your resources
Keep a lightweight DOM
Release expensive content, such as media elements, as soon
as they are no longer needed
Help the garbage collector
Avoid circular references between your elements and
JavaScript code
Review how you use your Object URLs

65. On suspend, free resources that are easy to recreate
Use media content from the user at the screen resolution
Tune your app launch time to create great first
impressions
Keep your app alive by minimizing your memory footprint
Be responsive, don’t block the UI thread

66. Debugging JavaScript apps is
!@#$%^ hard!

67. Debugging with Visual Studio
Launch with debugging
debugger keyword
Debug.enableFirstChanceException(true);
JavaScript console
DOM explorer

68. Debugging with Blend
Understand your CSS with the Winning Rule and Show Set
Properties mode
Debug device-state issues with the Platform and Styles
Panes
Catch grid layout issues
Find parser-generated elements with the Live DOM
Diagnose post-interaction problems with Interactive Mode

69. 10 – Deployment
But no info now,
it still not possible to publish app

70. Result

71. Conclusion
Skydrive with all samples / slides / videos:
http://sdrv.ms/KsoFUq
Webcast of this session on YouTube:

72. Q&A
(Don’t hesitate to
give us feedbacks on
twitter @juliendollon
/ @soumow)