DevoxxFR 2024 Reproducible Builds with Apache Maven
Mihai Tataran - Building Windows 8 Applications with HTML5 and JS
1. Building Windows 8 Applications
with HTML5 and JS
Mihai Tătăran
General Manager, Avaelgo
Microsoft MVP
mihai.tataran@hpc-consulting.ro
www.codecamp.ro
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
2. About
• Owner, GM – Avaelgo (ex H.P.C.
Consulting)
– Custom software development
– Consulting / training
• Microsoft MVP
• .NET community: www.codecamp.ro
http://itcamp.ro
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
3. Objectives
• Download and play with Windows
8 and VS 2011 Previews and SDK
• Understand what you need to add
upon your HTML 5 skills to build
Windows 8 Metro apps
– Migrating apps
– New apps
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
4. Agenda
• Basic Metro apps
• WinJS, Controls
• Windows 8 platform
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
5. HTML 5 and Javascript
• HTML5
• Indexed DB
• App Cache
• Web Workers
• Canvas
• SVG
• FormData
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
7. Metro apps
• Only the HTML5 DOCTYPE
• Single window
• All the device’s screen
• Access to Windows Runtime
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
8. Metro apps: runtime
HTML Host Process
App Code
App Container
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
9. Demo
• Simple app from scratch
• Anatomy of an HTML5 app
• Packaging and execution environment
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
10. Agenda
• Basic Metro apps
• WinJS, Controls
• Windows 8 platform
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
11. WinJS
• The library for Metro style apps
• Matches the Windows Metro design style
• Designed for touch as well as traditional
input
• Scales across form factors
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
12. UI Controls
• Designed for touch, mouse, keyboard
• Everyday widgets
• Text editing
• Scrolling content
• Presenting data
• Commanding surfaces
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
13. Everyday widgets - custom styled
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
14. Text editing controls - behaviors
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
17. Demo (SDK)
• UI Animation Sample
• ListView interaction model sample
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
18. Agenda
• Basic Metro apps
• WinJS, Controls
• Windows 8 platform
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
19. Process states
App
launch
Splash
screen
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
20. Suspend state
• No CPU, Disk or Network consumed
• All threads are suspended
• Apps remain in memory
• Apps instantly resumed from suspend
when brought to foreground
• Exception: Background tasks
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
21. Termination
• System needs more memory
• User switch occurs
• System shutdown
• Apps crash
• Application is not notified
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
22. Saving state
• sessionState in WinJS
• Windows.Storage.ApplicationData to save
application state
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
23. Saving / restoring state
Scenario You should….
User is using your App Save user data incrementally
App switched away from Save where the user is – what screen they are
(Suspending) on, for example
Not running App launched Bring the user back and restore their session as
by user (Activated) if they never left
Suspended App launched Do nothing
by user (Resuming)
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
24. Charms
• Some kind of Start Bar
• Ideal manner to use device’s settings
• Or any other app specific settings
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
25. Share contracts
• Predefined contracts in Metro
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
26. Demo
• App Bar (from SDK)
• Windows 8 application states
• Charms (Printing; Custom: Application Setting)
• Share contracts (Share Dest app from SDK)
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
27. Web Workers(*)
Document Object
(HTML Elements, CSS)
Objects Attached To The
Objects Attached To The Window Window
(XMLHttpRequest, Navigator, (XMLHttpRequest, Navigator,
Location Location
Indexed Database, Web Sockets) Indexed Database, Web
Sockets)
Worker Global Scope Object Window Object
JavaScript Engine JavaScript Engine
Web Worker UI Thread
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
28. Demo
• Web Workers
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
29. Resources
• Build Conference:
http://www.buildwindows.com/
• Metro Style applications resources:
http://msdn.microsoft.com/en-
us/windows/apps/
• Windows 8 Developer Preview:
http://msdn.microsoft.com/en-
us/windows/apps/br229516/
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
30. Objectives
• Download and play with Windows
8 and VS 2011 Previews and SDK
• Understand what you need to add
upon your HTML 5 skills to build
Windows 8 Metro apps
– Migrating apps
– New apps
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
31. Misc
• ITCamp 2012: www.itcamp.ro
• Cursuri / Workshops
– Publice
– Azure, HTML 5, ASP.NET MVC, Silverlight,
Entity Framework, etc
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
