This document discusses building native Windows 8 apps using the YUI 3 framework. It begins with an overview of Windows 8, Internet Explorer 10, and the WinJS framework. It then discusses including YUI in a WinJS app and leveraging YUI concepts like the MVC pattern and reusable views. Specifically, it suggests using YUI models and controllers while either using native WinJS views or YUI views. It also addresses questions around user experience, debugging, and reusing code across platforms.

2. Building native
Windows 8 apps
using YUI 3
@tilomitra // YUI Engineer

4. About this talk

5. About this talk
• A bit about Windows 8 and IE10

6. About this talk
• A bit about Windows 8 and IE10
• WinJS

7. About this talk
• A bit about Windows 8 and IE10
• WinJS
• WinJS + YUI (with Demo)

8. About this talk
• A bit about Windows 8 and IE10
• WinJS
• WinJS + YUI (with Demo)
• Questions & Discussion

9. Not really focussing on...
• In-app purchases
• Packaging and submission process
• Visual Studio (I’m a VS n00b)

12. Apps. Opportunity.

13. Apps. Opportunity.

14. 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.

15. Windows 8

16. Win8 vs WinRT
Can run traditional Windows apps and the
Win8 new Metro apps
“Windows 8 Lite” designed primarily for
tablets such as the Surface.
WinRT
Can only run Metro apps

17. 4 different JS runtimes
• IE10 Desktop
• IE10 Start Screen (Metro)
• Webview inside a C# app
• WinJS

18. 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.

19. 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.

20. 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

21. WinJS

22. 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

23. 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

24. WinJS
What’s different about it?

25. Overview

26. Overview
• Uses IE10 to process HTML/CSS/JS

27. Overview
• Uses IE10 to process HTML/CSS/JS
• Stylesheets and scripts bundled locally

28. Overview
• Uses IE10 to process HTML/CSS/JS
• Stylesheets and scripts bundled locally
• No JSONP, safe innerHTML

29. Overview
• Uses IE10 to process HTML/CSS/JS
• Stylesheets and scripts bundled locally
• No JSONP, safe innerHTML
• Access to Windows and WinJS
namespaces

30. 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

31. A WinJS App
WinJS References
ui.css
default.html
base.js
ui.js
default.js default.css
navigator.js

32. 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.js
App Lifecycle Media
Code queries

33. Adding Pages
Master View Detail View
default.html masterview.html detailview.html
WinJS References
masterview.css detailview.css
Other scripts/styles
masterview.js detailview.js

34. Pages adopt MVC
Each “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
Defined in default.html and
Model
available in all pages

35. default.html
default.html
<div
i
contro
igator
homepage.html
da
homepage.css pages/
homepage.js </div>
A “wrapper” around different pages.

36. 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.

37. 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

38. Navigation
default.html default.html
masterView.html detailView.html
Single page navigation model provided by
navigator.js through WinJS.Navigation.navigate(...)

39. Navigation
default.html
masterView.html detailView.html
This is what happens if you use <a href=”...”>

40. 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=”...”>

41. Navigation
groupedMaster.js
WinJS.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

42. WinJS + YUI
Leveraging YUI to build Win 8 apps

43. 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?

46. Y.Sights.GridView

47. Y.Sights.GridView
Y.Sights.ShotList

48. Y.Sights.GridView
Y.Sights.Shot
Y.Sights.ShotList

51. Y.Masonry

53. Y.Sights.GridView

54. Y.Sights.GridView
Y.Sights.ShotList

55. Y.Sights.GridView
Y.Sights.Shot
Y.Sights.ShotList

57. Y.DetailView

58. demo

59. Including YUI
• Pull down necessary modules using the
Dependency Configurator
• Clone YUI and include build/ and src/
• Clone YUI and include build/

60. Including YUI
• Pull down necessary modules using the
Configurator
• Clone YUI and include build/ and src/
• Clone YUI and include build/

61. 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>

62. Let’s re-visit MVC
MVC, you say?
Reminds me of the YUI App Framework.

63. Let’s re-visit MVC
Model Defined by Y.Model/Y.ModelList
View Defined by Y.View
Controller Defined by {page}.js

64. Models
• Should be environment agnostic
• Y.Model/Y.ModelList + Y.YQL
• Work on the browser and on WinJS

65. Views
Should we use native WinJS UI Views, or
leverage Y.View?

68. 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

69. Y.View
Code 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

70. 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

71. Controllers
• Haven’t experimented with Y.Router in
this environment yet
• Page navigation done through
WinJS.Navigation.navigate(...)
• Navigation history maintained by
navigator.js

72. UI/UX
Won’t user experience suffer if we
don’t use native APIs?

73. 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

74. Debugging WinJS
apps
• Breakpoints and JavaScript console for
standard debugging
• Windows Simulator
• View the DOM while the app is running
with the DOM Explorer

75. Thanks!
Questions or comments? Fire away.
@tilomitra
http://github.com/tilomitra/Sights