Building native Win8 apps with YUI
Upcoming SlideShare
Loading in...5
×
 

Building native Win8 apps with YUI

on

  • 2,123 views

Using the YUI App Framework we can build native Windows 8 apps with access to hardware and native APIs while reducing our overall code-base. ...

Using the YUI App Framework we can build native Windows 8 apps with access to hardware and native APIs while reducing our overall code-base.

The views and models that you write for your web app can be re-used for Windows 8.

Statistics

Views

Total Views
2,123
Views on SlideShare
2,116
Embed Views
7

Actions

Likes
2
Downloads
28
Comments
0

2 Embeds 7

https://twitter.com 6
https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Building native Win8 apps with YUI Building native Win8 apps with YUI Presentation Transcript

  • Building nativeWindows 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.
  • YUI 3.7.3 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.
  • Windows 8
  • Win8 vs WinRT Can run traditional Windows apps and theWin8 new Metro apps “Windows 8 Lite” designed primarily for tablets such as the Surface.WinRT 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        <WebView Name="wv" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"Source="http://yuilibrary.com"/> • Similar to web-views on iOS or Android • No access to device APIs, limited HTML5 support
  • 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 HTMLmyDiv.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 WinJS References ui.css default.html base.js ui.js default.js default.css navigator.js
  • A WinJS App WinJS References Basic Shell Native styles ui.css default.html JS Utilities base.js UI Views ui.js default.js default.css Navigation navigator.jsApp Lifecycle Media Code queries
  • Adding Pages Master View Detail View default.html masterview.html detailview.htmlWinJS References masterview.css detailview.cssOther scripts/styles masterview.js detailview.js
  • Pages adopt MVCEach “page” of the app has has it’s ownHTML, CSS, and JS View Defined by page.html and page.css Controller Defined by page.js Defined in default.html and Model available in all pages
  • default.html default.html <div  i contro igator homepage.html        da homepage.css pages/ homepage.js </div> A “wrapper” around different pages.
  • default.html default.html <div  id="contenthost"  data-­‐win-­‐ control="Application.PageControlNav igator" homepage.html        data-­‐win-­‐options="{home:  / homepage.css pages/homepage/homepage}"> homepage.js </div> A “wrapper” around different pages.
  • default.js: Lifecycle events activated When the app is launched. After DOMContentLoaded (HTML parsed, resources loaded not loaded) ready When the app ready for use When the user switches away from your app. Good checkpoint time to save state. unload When app is about to be unloaded
  • Navigation default.html default.html masterView.html detailView.html Single page navigation model provided by navigator.js through WinJS.Navigation.navigate(...)
  • Navigation default.html masterView.html detailView.html This is what happens if you use <a href=”...”>
  • Navigation Where am I? Who am i? What is the meaning of life? default.html masterView.html detailView.html This is what happens if you use <a href=”...”>
  • Navigation groupedMaster.jsWinJS.Navigation.navigate("/pages/itemDetail/itemDetail.html",  {  model:  model});//the  passed  object  can  be  retrieved  in  itemDetail.js Use WinJS.Navigation.navigate() instead of location.href
  • 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.GridViewY.Sights.ShotList
  • Y.Sights.GridViewY.Sights.Shot Y.Sights.ShotList
  • Y.Masonry
  • Y.Sights.GridView
  • Y.Sights.GridViewY.Sights.ShotList
  • Y.Sights.GridViewY.Sights.Shot Y.Sights.ShotList
  • 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 default.html                    <!-­‐-­‐  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>
  • 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 Views Easy 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 environmentsWorks well with YUIAchieving the look and feel of Win 8 is fairly easyNeed 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 WinJSapps• 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