Download - Develop an app for Windows 8 using HTML5
AGENDA
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
My existing web page: home.dollon.net
Compatible with all last browsers on PC and tablets.Works with HTML5 and CSS3 features, knockout.js, jQuery, less (and node.js web service)
DEMO
So now, please Microsoft, where is the right button 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 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.
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
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
You can use PowerShellto deploy it
And all packages are signed with certificates
2 – what happens in runtime?
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
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
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
DOM EventsNative APIs
NamespacesControls Enumerations
Some ActiveX controls are disabled
No Java, Silverlight, Flash and other embedded components
have the same support of web APIsthan IE 10
So, HTML5, CSS3 and JavaScript
+
API from WinRT
seriously
And you have to know that
ROCKS!
This isn’t just a container like PhoneGap
It doesn’t run in a browser
REUSE THE SAME CODEJust to see if it works ☺
4 – what is WinRT?
Windows RT != WinRT(Windows RT is the Windows 8 version for ARM)
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
5 – what is WinJS?
WinJS is the orange layer
A language projection exists for .NET and C++ too
Windows library for JSHelpers
AnimationsTemplates Styles
Navigation
Data Binding
Controls
App Model
Base.js
Wwaap.jsUi.js
Binding.js
Controls.jsAnimation.js
6 – Windows Controls
Built-in ControlsMetro-UI Styles
Touch enabledNative Customizable
Same in XAMLControls
All basic controls
AppBarUseful to bring up commands on demand
Don’t forget to use Charms for some entry points
MODIFY THE APPWith Windows 8 controls
7 – Multiple Views andResolutions
The principal screen can be at minimum 1024x768
It exists widescreen (1366x768+)
Two other modes: snapview and portait
Use three kind of image size (100%, 140% and 180%).
Depending on the resolutions, images are loaded automatically
Image.jpg � Image.scale-180.jpg
Use of CSS media queries
MODIFY THE APPScreens
7 – Use Contracts
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
MODIFY THE APPContracts
8 – Use Tiles
Tiles is the “link” to open your appIt could be a “secondary tiles”Can provide a lot of information (icons, notifications, counter)
MODIFY THE APPWith 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 pageAvoid inline JavaScript and inline CSS stylesDon’t parse JSON by hand, use JSON.parse
A Metro style app using HTML5is more than a web page …
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
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
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
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
Debugging JavaScript apps is !@#$%^ hard!
Debugging with Visual Studio
Launch with debuggingdebugger keywordDebug.enableFirstChanceException(true);JavaScript consoleDOM explorer
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
10 – DeploymentBut no info now, it still not possible to publish app
Result
ConclusionSkydrive with all samples / slides / videos:
Webcast of this session on YouTube:
http://sdrv.ms/KsoFUq
Q&A(Don’t hesitate to give us feedbacks on twitter @juliendollon/ @soumow)