0
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 thes...
Windows 8
Win8 vs WinRT        Can run traditional Windows apps and theWin8    new Metro apps        “Windows 8 Lite” designed prima...
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, Silverl...
IE10 “Metro”     • More restrictive than IE10 Desktop     • Minimal support for plugins (ActiveX,           Flash, Silverl...
Webview                    	  	  	  	  <WebView Name="wv" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"Source=...
WinJS
WinJS• A restricted IE10 runtime with access to  native APIs• Allows developers to create WinRT apps  using HTML/CSS/JS• A...
WinJS• A restricted IE10 runtime with access to  native APIs• Allows developers to create WinRT apps  using HTML/CSS/JS• A...
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 W...
Injecting HTMLmyDiv.innerHTML	  =	  ‘<script>function	  test()	  {	  alert("Testing,	  Testing,	  123...");	  }</script><s...
A WinJS App                                      WinJS References                                            ui.css       ...
A WinJS App                                                       WinJS References                 Basic Shell            ...
Adding Pages                        Master View       Detail View   default.html        masterview.html   detailview.htmlW...
Pages adopt MVCEach “page” of the app has has it’s ownHTML, CSS, and JS    View       Defined by page.html and page.css  Co...
default.html                 default.html                                         <div	  i                                ...
default.html   default.html                        <div	  id="contenthost"	  data-­‐win-­‐                        control=...
default.js: Lifecycle events   activated   When the app is launched.               After DOMContentLoaded (HTML parsed, re...
Navigation   default.html                      default.html masterView.html                   detailView.html   Single pag...
Navigation   default.html masterView.html                detailView.html  This is what happens if you use <a   href=”...”>
Navigation                            Where am I?                                       Who am i?                         ...
Navigation  groupedMaster.jsWinJS.Navigation.navigate("/pages/itemDetail/itemDetail.html",	  {	  model:	  model});//the	  ...
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 ...
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...
Including YUI• Pull down necessary modules using the  Configurator• Clone YUI and include build/ and src/• Clone YUI and in...
Including YUI       default.html                            	  	  	  	  	  	  	  	  	  	  <!-­‐-­‐	  WinJS	  references	  ...
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...
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 o...
Y.ViewCode once, re-use in different environmentsWorks well with YUIAchieving the look and feel of Win 8 is fairly easyNee...
Native Views vs.Y.View• Depends on the app• Over the long term, Y.View probably  offers greater benefits• Try using both an...
Controllers• Haven’t experimented with Y.Router in  this environment yet• Page navigation done through  WinJS.Navigation.n...
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-...
Debugging WinJSapps• Breakpoints and JavaScript console for  standard debugging• Windows Simulator• View the DOM while the...
Thanks!Questions or comments? Fire away.@tilomitrahttp://github.com/tilomitra/Sights
Building native Win8 apps with YUI
Building native Win8 apps with YUI
Building native Win8 apps with YUI
Building native Win8 apps with YUI
Building native Win8 apps with YUI
Building native Win8 apps with YUI
Building native Win8 apps with YUI
Building native Win8 apps with YUI
Building native Win8 apps with YUI
Building native Win8 apps with YUI
Building native Win8 apps with YUI
Building native Win8 apps with YUI
Upcoming SlideShare
Loading in...5
×

Building native Win8 apps with YUI

1,701

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,701
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Building native Win8 apps with YUI"

  1. 1. Building nativeWindows 8 appsusing YUI 3@tilomitra // YUI Engineer
  2. 2. About this talk
  3. 3. About this talk • A bit about Windows 8 and IE10
  4. 4. About this talk • A bit about Windows 8 and IE10 • WinJS
  5. 5. About this talk • A bit about Windows 8 and IE10 • WinJS • WinJS + YUI (with Demo)
  6. 6. About this talk • A bit about Windows 8 and IE10 • WinJS • WinJS + YUI (with Demo) • Questions & Discussion
  7. 7. Not really focussing on...• In-app purchases• Packaging and submission process• Visual Studio (I’m a VS n00b)
  8. 8. Apps. Opportunity.
  9. 9. Apps. Opportunity.
  10. 10. 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.
  11. 11. Windows 8
  12. 12. 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
  13. 13. 4 different JS runtimes• IE10 Desktop• IE10 Start Screen (Metro)• Webview inside a C# app• WinJS
  14. 14. 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.
  15. 15. 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.
  16. 16. 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
  17. 17. WinJS
  18. 18. 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
  19. 19. 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
  20. 20. WinJSWhat’s different about it?
  21. 21. Overview
  22. 22. Overview• Uses IE10 to process HTML/CSS/JS
  23. 23. Overview• Uses IE10 to process HTML/CSS/JS• Stylesheets and scripts bundled locally
  24. 24. Overview• Uses IE10 to process HTML/CSS/JS• Stylesheets and scripts bundled locally• No JSONP, safe innerHTML
  25. 25. Overview• Uses IE10 to process HTML/CSS/JS• Stylesheets and scripts bundled locally• No JSONP, safe innerHTML• Access to Windows and WinJS namespaces
  26. 26. 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
  27. 27. A WinJS App WinJS References ui.css default.html base.js ui.js default.js default.css navigator.js
  28. 28. 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
  29. 29. Adding Pages Master View Detail View default.html masterview.html detailview.htmlWinJS References masterview.css detailview.cssOther scripts/styles masterview.js detailview.js
  30. 30. 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
  31. 31. default.html default.html <div  i contro igator homepage.html        da homepage.css pages/ homepage.js </div> A “wrapper” around different pages.
  32. 32. 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.
  33. 33. 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
  34. 34. Navigation default.html default.html masterView.html detailView.html Single page navigation model provided by navigator.js through WinJS.Navigation.navigate(...)
  35. 35. Navigation default.html masterView.html detailView.html This is what happens if you use <a href=”...”>
  36. 36. 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=”...”>
  37. 37. 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
  38. 38. WinJS + YUILeveraging YUI to build Win 8 apps
  39. 39. 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?
  40. 40. Y.Sights.GridView
  41. 41. Y.Sights.GridViewY.Sights.ShotList
  42. 42. Y.Sights.GridViewY.Sights.Shot Y.Sights.ShotList
  43. 43. Y.Masonry
  44. 44. Y.Sights.GridView
  45. 45. Y.Sights.GridViewY.Sights.ShotList
  46. 46. Y.Sights.GridViewY.Sights.Shot Y.Sights.ShotList
  47. 47. Y.DetailView
  48. 48. demo
  49. 49. Including YUI• Pull down necessary modules using the Dependency Configurator• Clone YUI and include build/ and src/• Clone YUI and include build/
  50. 50. Including YUI• Pull down necessary modules using the Configurator• Clone YUI and include build/ and src/• Clone YUI and include build/
  51. 51. 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>
  52. 52. Let’s re-visit MVC MVC, you say? Reminds me of the YUI App Framework.
  53. 53. Let’s re-visit MVC Model Defined by Y.Model/Y.ModelList View Defined by Y.View Controller Defined by {page}.js
  54. 54. Models• Should be environment agnostic• Y.Model/Y.ModelList + Y.YQL• Work on the browser and on WinJS
  55. 55. Views Should we use native WinJS UI Views, or leverage Y.View?
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 59. Controllers• Haven’t experimented with Y.Router in this environment yet• Page navigation done through WinJS.Navigation.navigate(...)• Navigation history maintained by navigator.js
  60. 60. UI/UX Won’t user experience suffer if we don’t use native APIs?
  61. 61. 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
  62. 62. Debugging WinJSapps• Breakpoints and JavaScript console for standard debugging• Windows Simulator• View the DOM while the app is running with the DOM Explorer
  63. 63. Thanks!Questions or comments? Fire away.@tilomitrahttp://github.com/tilomitra/Sights
  1. A particular slide catching your eye?

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

×