Date post: | 07-Nov-2014 |
Category: |
Technology |
Upload: | tilo-mitra |
View: | 2,233 times |
Download: | 0 times |
Building native Windows 8 appsusing YUI 3@tilomitra // YUI Engineer
About this talk
About this talk
• A bit about Windows 8 and IE10
About this talk
• A bit about Windows 8 and IE10
• WinJS
About this talk
• A bit about Windows 8 and IE10
• WinJS
• WinJS + YUI (with Demo)
About this talk
• A bit about Windows 8 and IE10
• WinJS
• WinJS + YUI (with Demo)
• Questions & Discussion
Not really focussing on...
• In-app purchases
• Packaging and submission process
• Visual Studio (I’m a VS n00b)
Apps. Opportunity.
Apps. Opportunity.
We gave ourselves 10 days (which included weekends) to get the job done…We were able to add support for all these new environments very quickly because of YUI’s architecture.
-Eric F.
YUI 3.7.3
Windows 8
Win8 vs WinRTWin8 Can run traditional Windows apps and the
new Metro apps
WinRT“Windows 8 Lite” designed primarily for tablets such as the Surface.
Can only run Metro apps
4 different JS runtimes
• IE10 Desktop
• IE10 Start Screen (Metro)
• Webview inside a C# app
• WinJS
IE10 “Metro”
• More restrictive than IE10 Desktop
• Minimal support for plugins (ActiveX, Flash, Silverlight, etc.)*
* Metro IE10 does have Flash support but only sites that are on the Compatibility List can play Flash content.
IE10 “Metro”
• More restrictive than IE10 Desktop
• Minimal support for plugins (ActiveX, Flash, Silverlight, etc.)*
* Metro IE10 does have Flash support but only sites that are on the Compatibility List can play Flash content.
Webview
• Similar to web-views on iOS or Android
• No access to device APIs, limited HTML5 support
<WebView Name="wv" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="http://yuilibrary.com"/>
WinJS
WinJS• A restricted IE10 runtime with access to
native APIs
• Allows developers to create WinRT apps using HTML/CSS/JS
• All scripts/styles must be available on device
WinJS• A restricted IE10 runtime with access to
native APIs
• Allows developers to create WinRT apps using HTML/CSS/JS
• All scripts/styles must be available on device
WinJSWhat’s different about it?
Overview
Overview
• Uses IE10 to process HTML/CSS/JS
Overview
• Uses IE10 to process HTML/CSS/JS
• Stylesheets and scripts bundled locally
Overview
• Uses IE10 to process HTML/CSS/JS
• Stylesheets and scripts bundled locally
• No JSONP, safe innerHTML
Overview
• Uses IE10 to process HTML/CSS/JS
• Stylesheets and scripts bundled locally
• No JSONP, safe innerHTML
• Access to Windows and WinJS namespaces
Injecting HTML
myDiv.innerHTML = ‘<script>function test() { alert("Testing, Testing, 123..."); }</script><span onclick="test()">Click Me</span>’
//results in <span>Click me</span>
List of all filtered elements
A WinJS App
default.html
default.js default.css
base.js
ui.js
navigator.js
WinJS References
ui.css
A WinJS App
default.html
default.js default.css
base.js
ui.js
navigator.js
WinJS References
ui.css
Basic Shell
App Lifecycle Code
Native styles
JS Utilities
UI Views
NavigationMedia queries
Adding Pages
default.html
WinJS References
Other scripts/styles
Master View
masterview.html
masterview.css
masterview.js
Detail View
detailview.html
detailview.css
detailview.js
Pages adopt MVCEach “page” of the app has has it’s own HTML, CSS, and JS
View Defined by page.html and page.css
Controller Defined by page.js
Model Defined in default.html and available in all pages
default.html
A “wrapper” around different pages.
default.html
homepage.htmlhomepage.csshomepage.js
<div idcontroligator" data-‐win-‐optionspages/homepage/homepage'}"></div>
default.html
A “wrapper” around different pages.
default.html
homepage.htmlhomepage.csshomepage.js
<div id="contenthost" data-‐win-‐control="Application.PageControlNavigator" data-‐win-‐options="{home: '/pages/homepage/homepage'}"></div>
default.js: Lifecycle eventsactivated When the app is launched.
loadedAfter DOMContentLoaded (HTML parsed, resources not loaded)
ready When the app ready for use
checkpointWhen the user switches away from your app. Good time to save state.
unload When app is about to be unloaded
Navigation
Single page navigation model provided by navigator.js through WinJS.Navigation.navigate(...)
default.html
masterView.html
default.html
detailView.html
Navigation
This is what happens if you use <a href=”...”>
default.html
masterView.html detailView.html
Navigation
This is what happens if you use <a href=”...”>
default.html
masterView.html detailView.html
Where am I?Who am i?
What is the meaning of life?
Navigation
Use WinJS.Navigation.navigate() instead of location.href
WinJS.Navigation.navigate("/pages/itemDetail/itemDetail.html", { model: model});
//the passed object can be retrieved in itemDetail.js
groupedMaster.js
WinJS + YUILeveraging YUI to build Win 8 apps
It’s all about reusing code
• Re-use your existing web code-base when making Win 8 apps
• Use existing concepts - don’t re-invent the wheel
• But what about UI/UX?
Y.Sights.GridView
Y.Sights.GridView
Y.Sights.ShotList
Y.Sights.GridView
Y.Sights.ShotList
Y.Sights.Shot
Y.Masonry
Y.Sights.GridView
Y.Sights.GridView
Y.Sights.ShotList
Y.Sights.GridView
Y.Sights.ShotList
Y.Sights.Shot
Y.DetailView
demo
Including YUI• Pull down necessary modules using the
Dependency Configurator
• Clone YUI and include build/ and src/
• Clone YUI and include build/
Including YUI• Pull down necessary modules using the
Configurator
• Clone YUI and include build/ and src/
• Clone YUI and include build/
Including YUI
<!-‐-‐ WinJS references -‐-‐> <link href="//Microsoft.WinJS.1.0.RC/css/ui-‐dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script> <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script> <script> YUI_config = { ... }; </script> <script src="/js/lib/yui3/build/yui/yui-‐min.js"></script>
default.html
Let’s re-visit MVC
MVC, you say? Reminds me of the YUI App Framework.
Let’s re-visit MVC
Model Defined by Y.Model/Y.ModelList
View Defined by Y.View
Controller Defined by {page}.js
Models
• Should be environment agnostic
• Y.Model/Y.ModelList + Y.YQL
• Work on the browser and on WinJS
Views
Should we use native WinJS UI Views, or leverage Y.View?
Native ViewsEasy to get it to look “right”
It’s the WinJS way (documentation, code samples, etc.)
Code can’t be re-used outside this environment
Need to figure out how to organize native code and YUI code
No performance gain for using native views
Y.ViewCode once, re-use in different environments
Works well with YUI
Achieving the look and feel of Win 8 is fairly easy
Need to code and determine markup and styles
Native Views vs. Y.View• Depends on the app
• Over the long term, Y.View probably offers greater benefits
• Try using both and see what you are comfortable with
Controllers
• Haven’t experimented with Y.Router in this environment yet
• Page navigation done through WinJS.Navigation.navigate(...)
• Navigation history maintained by navigator.js
UI/UX
Won’t user experience suffer if we don’t use native APIs?
UI/UX• Everything is HTML, CSS, and JS, whether it’s
native or not.
• CSS3 transitions are supported
• Easy to leverage ui-*.css styles to get the right look and feel
• Remember, Win 8 UI !== Web UI
Debugging WinJS apps• Breakpoints and JavaScript console for
standard debugging
• Windows Simulator
• View the DOM while the app is running with the DOM Explorer
Thanks!Questions or comments? Fire away.
@tilomitrahttp://github.com/tilomitra/Sights