0
AGENDA
I’m a Web developer, I don’t know (atall) Microsoft technologies.                  I already developed                 an ...
My existing web page: home.dollon.net
Compatible with all last browsers on PC andtablets.Works with HTML5 and CSS3 features,knockout.js, jQuery, less (and node....
DEMO
So now, please Microsoft, where is the rightbutton click“Transform this website as a metro style app for Windows8”?
It does not exist. And it’s   normal.Because you are working for a specific kind of tabletwith native call (new API, new c...
9 things to migrate your HTML5 app on       Windows 8 environment.
0 – which kind of tools I need?*         *this point is not included on the counter ☺
DEMO
1 - what is a package?
a package is a ZIP file            Don’t forget to obfuscate your code                   It’s the ‘executable’ of your pro...
You can use PowerShell               to deploy it And all packages are signed with certificates
2 – what happens in runtime?
The process that hosts/executes a Metro style appusing JavaScript is called WWAHost.exe Your app ‘live’ inside a sandbox w...
Process state transitions    A user               App is  launch an                   Suspended      Terminated           ...
3 – Differences between Metro style app  And traditional HTML5 web page
ALL*HTML5/CSS3 features are supported     *if IE10 “trident” layout engine support it
ALL*JavaScript features are supported     *if IE10 “Chakra” engine support it
Native APIs  DOM Events                                   Namespaces            Controls          Enumerations   No Java, ...
So, HTML5, CSS3 and JavaScripthave the same support of web APIs                                 than IE 10                ...
And you have to know thatseriouslyROCKS!
This isn’t just a container       like PhoneGap        It doesn’t run in a browser
REUSE THE SAME CODE            Just to see if it works ☺
4 – what is WinRT?
Windows RT != WinRT (Windows RT is the Windows 8 version for ARM)
WinRT         Resides directly on the top of the kernel                           just like the Win32 APIWinRT APIs are wr...
5 – what is WinJS?
WinJS is the orange layer
A language projection exists for .NET and C++ too
Windows library for JS   Helpers                           Animations      Templates         Styles App Model    Data Bind...
Binding.js        Wwaap.jsUi.js               Base.js Controls.js                Animation.js
6 – Windows Controls
Built-in ControlsMetro-UI Styles                          Touch enabled          Native     CustomizableAll basic controls...
AppBarUseful to bring up commandson demandDon’t forget to use Charmsfor some entry points
MODIFY THE APP            With Windows 8 controls
7 – Multiple Views and     Resolutions
The principal screen can be at minimum1024x768It exists widescreen (1366x768+)Two other modes: snapview and portait
Use three kind of image size (100%,140% and 180%).Depending on the resolutions, imagesare loaded automaticallyImage.jpg   ...
Use of CSS media queries
MODIFY THE APP            Screens
7 – Use Contracts
Share to export the current contentSearch to find contentFile Picker to allow user to access content fromoutsideSettings t...
MODIFY THE APP            Contracts
8 – Use Tiles
Tiles is the “link” to open your appIt could be a “secondary tiles”Can provide a lot of information (icons,notifications, ...
MODIFY THE APP            With Tiles and Splash
9 – Debugging and Performances
PerformanceTips & tricks that still work:For safe dynamic content, use innerHTMLLink CSS stylesheets at the top of the pag...
A Metro style app using HTML5  is more than a web page …
Optimize your landing pageRely on packaged content and local dataUse local images scaled to the right sizeUse WinJS fragme...
Further optimizationsDefer some initialization to after the splash screen    Start network downloads after initialization ...
Manage your resourcesKeep a lightweight DOMRelease expensive content, such as media elements, as soonas they are no longer...
On suspend, free resources that are easy to recreate Use media content from the user at the screen resolution Tune your ap...
Debugging JavaScript apps is      !@#$%^ hard!
Debugging with Visual StudioLaunch with debuggingdebugger keywordDebug.enableFirstChanceException(true);JavaScript console...
Debugging with BlendUnderstand your CSS with the Winning Rule and Show SetProperties modeDebug device-state issues with th...
10 – Deployment But no info now, it still not possible to publish app
Result
ConclusionSkydrive with all samples / slides / videos:          http://sdrv.ms/KsoFUq   Webcast of this session on YouTube:
Q&A(Don’t hesitate togive us feedbacks ontwitter @juliendollon/ @soumow)
Develop an app for Windows 8 using HTML5
Develop an app for Windows 8 using HTML5
Develop an app for Windows 8 using HTML5
Develop an app for Windows 8 using HTML5
Develop an app for Windows 8 using HTML5
Develop an app for Windows 8 using HTML5
Develop an app for Windows 8 using HTML5
Develop an app for Windows 8 using HTML5
Develop an app for Windows 8 using HTML5
Develop an app for Windows 8 using HTML5
Develop an app for Windows 8 using HTML5
Upcoming SlideShare
Loading in...5
×

Develop an app for Windows 8 using HTML5

15,534

Published on

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

Published in: Technology
1 Comment
9 Likes
Statistics
Notes
No Downloads
Views
Total Views
15,534
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
286
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "Develop an app for Windows 8 using HTML5"

  1. 1. AGENDA
  2. 2. I’m a Web developer, I don’t know (atall) Microsoft technologies. I already developed an HTML5 web page. I want to create the Windows 8 app of my page.
  3. 3. My existing web page: home.dollon.net
  4. 4. Compatible with all last browsers on PC andtablets.Works with HTML5 and CSS3 features,knockout.js, jQuery, less (and node.js web service)
  5. 5. DEMO
  6. 6. So now, please Microsoft, where is the rightbutton click“Transform this website as a metro style app for Windows8”?
  7. 7. It does not exist. And it’s normal.Because you are working for a specific kind of tabletwith native call (new API, new controls…) and NEWdesign style (metro).You are not designing a web page. You are developing anative app.
  8. 8. 9 things to migrate your HTML5 app on Windows 8 environment.
  9. 9. 0 – which kind of tools I need?* *this point is not included on the counter ☺
  10. 10. DEMO
  11. 11. 1 - what is a package?
  12. 12. 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
  13. 13. You can use PowerShell to deploy it And all packages are signed with certificates
  14. 14. 2 – what happens in runtime?
  15. 15. The process that hosts/executes a Metro style appusing JavaScript is called WWAHost.exe Your app ‘live’ inside a sandbox without all privileges of the current user
  16. 16. Process state transitions A user App is launch an Suspended Terminated running appAn app gets 5 secondes to handle suspend and isnotified when it has been resumedApp is not notified before a termination caused bylow resources
  17. 17. 3 – Differences between Metro style app And traditional HTML5 web page
  18. 18. ALL*HTML5/CSS3 features are supported *if IE10 “trident” layout engine support it
  19. 19. ALL*JavaScript features are supported *if IE10 “Chakra” engine support it
  20. 20. Native APIs DOM Events Namespaces Controls Enumerations No Java, Silverlight, Flash and other embedded componentsSome ActiveX controls are disabled
  21. 21. So, HTML5, CSS3 and JavaScripthave the same support of web APIs than IE 10 + API from WinRT
  22. 22. And you have to know thatseriouslyROCKS!
  23. 23. This isn’t just a container like PhoneGap It doesn’t run in a browser
  24. 24. REUSE THE SAME CODE Just to see if it works ☺
  25. 25. 4 – what is WinRT?
  26. 26. Windows RT != WinRT (Windows RT is the Windows 8 version for ARM)
  27. 27. WinRT Resides directly on the top of the kernel just like the Win32 APIWinRT APIs are written in unmanaged C++and designed to be object-oriented
  28. 28. 5 – what is WinJS?
  29. 29. WinJS is the orange layer
  30. 30. A language projection exists for .NET and C++ too
  31. 31. Windows library for JS Helpers Animations Templates Styles App Model Data Binding Controls Navigation
  32. 32. Binding.js Wwaap.jsUi.js Base.js Controls.js Animation.js
  33. 33. 6 – Windows Controls
  34. 34. Built-in ControlsMetro-UI Styles Touch enabled Native CustomizableAll basic controls Controls Same in XAML
  35. 35. AppBarUseful to bring up commandson demandDon’t forget to use Charmsfor some entry points
  36. 36. MODIFY THE APP With Windows 8 controls
  37. 37. 7 – Multiple Views and Resolutions
  38. 38. The principal screen can be at minimum1024x768It exists widescreen (1366x768+)Two other modes: snapview and portait
  39. 39. Use three kind of image size (100%,140% and 180%).Depending on the resolutions, imagesare loaded automaticallyImage.jpg Image.scale-180.jpg
  40. 40. Use of CSS media queries
  41. 41. MODIFY THE APP Screens
  42. 42. 7 – Use Contracts
  43. 43. Share to export the current contentSearch to find contentFile Picker to allow user to access content fromoutsideSettings to configure the app
  44. 44. MODIFY THE APP Contracts
  45. 45. 8 – Use Tiles
  46. 46. Tiles is the “link” to open your appIt could be a “secondary tiles”Can provide a lot of information (icons,notifications, counter)
  47. 47. MODIFY THE APP With Tiles and Splash
  48. 48. 9 – Debugging and Performances
  49. 49. 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
  50. 50. A Metro style app using HTML5 is more than a web page …
  51. 51. Optimize your landing pageRely 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 content Delays JavaScript Keeps your DOM small: look-up and manipulations are quicker
  52. 52. Further optimizationsDefer some initialization to after the splash screen Start network downloads after initialization Delay loading databasesConsolidate small JS files that are related into larger filesIf you need more time, use an extended splash screen
  53. 53. Manage your resourcesKeep a lightweight DOMRelease expensive content, such as media elements, as soonas they are no longer neededHelp the garbage collector Avoid circular references between your elements and JavaScript code Review how you use your Object URLs
  54. 54. 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 firstimpressions Keep your app alive by minimizing your memory footprint Be responsive, don’t block the UI thread
  55. 55. Debugging JavaScript apps is !@#$%^ hard!
  56. 56. Debugging with Visual StudioLaunch with debuggingdebugger keywordDebug.enableFirstChanceException(true);JavaScript consoleDOM explorer
  57. 57. Debugging with BlendUnderstand your CSS with the Winning Rule and Show SetProperties modeDebug device-state issues with the Platform and StylesPanesCatch grid layout issuesFind parser-generated elements with the Live DOMDiagnose post-interaction problems with Interactive Mode
  58. 58. 10 – Deployment But no info now, it still not possible to publish app
  59. 59. Result
  60. 60. ConclusionSkydrive with all samples / slides / videos: http://sdrv.ms/KsoFUq Webcast of this session on YouTube:
  61. 61. Q&A(Don’t hesitate togive us feedbacks ontwitter @juliendollon/ @soumow)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×