building native win8 apps with yui

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