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