SlideShare a Scribd company logo
Building native Win8 apps with YUI
Building native
Windows 8 apps
using YUI 3
@tilomitra // YUI Engineer
Building native Win8 apps with YUI
About this talk

Recommended for you

Vue.js
Vue.jsVue.js
Vue.js

The document provides an overview of Vue.js, including: - Vue.js is a progressive framework for building user interfaces that focuses only on the view layer. - It is easy to integrate Vue.js into existing projects or with other libraries. - Vue.js allows developers to progressively adopt capabilities as needed rather than requiring adoption of the entire framework upfront like some other frameworks. - The document then covers various Vue.js concepts like directives, components, routing, communication between components, and connecting Vue.js to a backend.

vuevue.jsjavascript
Contextual jQuery
Contextual jQueryContextual jQuery
Contextual jQuery

This session dives deep into the DOM traversal methods of the jQuery API where you will learn the difference between brittle and fluid traversal methods, strategies for structuring your HTML, and how to leverage some of the more obscure jQuery selectors.

jQuery Comes to XPages
jQuery Comes to XPagesjQuery Comes to XPages
jQuery Comes to XPages

Whether you want to add some serious eye candy to your XPages Applications or just want to do more with less code, jQuery, the world’s most popular JavaScript framework can help you. Come to this webinar and find out how you can use some of the thousands of jQuery plugins, in harmony with Dojo, within your XPages applications to create a better experience not only for your users, but for you as a developer. In this webinar, we'll look at how jQuery works, how to add it to your XPages, and how a complete JavaScript beginner can take advantage of its power. We'll demonstrate many working examples -- and a sample database will be provided.

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

Recommended for you

jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise

Last year, AOL adopted a new content strategy and has positioned itself as a premier destination for original content. Core to this strategy is having reusable, highly efficient and optimized common code and experiences at scale, which is where jQuery comes in. Check in with Dave Artz to see how jQuery has helped his front-end standards team tackle unique challenges like optimizing 3rd party widget performance, overriding plugin functionality, and managing dependencies and updates across 100+ sites spanning multiple back-end platforms.

jquery javascript jscon jqcon webdesign webdevelop
Vue JS Intro
Vue JS IntroVue JS Intro
Vue JS Intro

@ IBTI Palu fiddle: Todo jQuery: https://jsfiddle.net/eezhal92/maahzty2/ Todo Vue: https://jsfiddle.net/eezhal92/u7g26x2s/ Comment Box: https://jsfiddle.net/eezhal92/sc5qdoah/1/ repo: https://github.com/eezhal92/mangande

frontendjavascriptwebapp
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.jsVue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js

- Vue.js Tokyo v-meetup="#1" http://vuejs-meetup.connpass.com/event/31139/ - JS Night at Bizreach http://connpass.com/event/34014/

vue.js
Not really focussing on...

• In-app purchases
• Packaging and submission process
• Visual Studio (I’m a VS n00b)
Building native Win8 apps with YUI
Building native Win8 apps with YUI
Apps. Opportunity.

Recommended for you

An introduction to Vue.js
An introduction to Vue.jsAn introduction to Vue.js
An introduction to Vue.js

An introduction to Vue.js. Why would you need something like Vue.js? What is Vue.js? How do you develop with Vue.js?

vue.jsfront-endvuex
Dynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and MobileDynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and Mobile

The document discusses responsive design techniques for desktop and mobile interfaces. It covers: - Adapting layouts using AlloyUI Viewport and media queries to target different screen sizes. - Dynamically retrieving data using the Pjax utility and ScrollInfo plugin. - The future potential of CSS Flexbox layout for complex responsive designs.

flexiblecssinterfaces
Real World Web components
Real World Web componentsReal World Web components
Real World Web components

The document discusses web components, which include HTML templates, custom elements, shadow DOM, and HTML imports. Web components allow the creation of reusable custom elements with their own styles and DOM structure. They provide encapsulation and help avoid issues with global namespaces. While browser support is still emerging for some features, polyfills exist and frameworks like Polymer make web components accessible today. Web components represent an important evolution of the web that will improve how code is structured and shared.

polymerangularweb-components
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 the
Win8    new Metro apps


        “Windows 8 Lite” designed primarily for
        tablets such as the Surface.
WinRT
        Can only run Metro apps

Recommended for you

The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js

An introduction to Vue.js (from an online webinar for Certified Fresh Events - http://certifiedfreshevents.com).

vuevuejsvue overview
Doctype html public
Doctype html publicDoctype html public
Doctype html public

The document is a HTML code for a website landing page from 123website.co.id. It includes metadata tags with keywords, descriptions and canonical URL. It also includes links to various CSS style sheets and JavaScript files to style and add interactivity to the page. The body contains a form to start the website creation wizard.

Meet VueJs
Meet VueJsMeet VueJs
Meet VueJs

Vue.js is a lightweight, reactive component-based library for building modern web interfaces. It provides simple and flexible APIs for building reactive components and applications using templates and reusable components. Key features include: - Reactive components using templates and data binding - Lightweight at only 24kb minified and gzipped - Flexible options for building full single page applications or enhancing existing projects - Reusable components using global or local registration

web developmentjavascriptsoftware development
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

Recommended for you

Vue.js Getting Started
Vue.js Getting StartedVue.js Getting Started
Vue.js Getting Started

This document provides an introduction and overview of Vue.js, including: - What Vue.js is and how it compares to other frameworks - The basic concepts of single file components and getting started quickly - How to create a development environment in one minute - Core Vue.js features like directives, computed properties, binding styles and classes, and list rendering - Links to additional resources on using Vue.js for routing and the latest news

vuevuejsjavascript
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road aheadWhat’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead

This document provides an overview and roadmap for WinJS. It discusses new features in WinJS 2.1 for phone, improvements to existing controls, and new building blocks. It outlines the past and future direction of WinJS, including consolidation across devices and web views, improved theming, and creating adaptive apps. The document concludes by mentioning where to get started with WinJS and next steps.

windows phone 8.1windows phone
SEE 2009: Improving Mobile Web Developer Experience
SEE 2009: Improving Mobile Web Developer ExperienceSEE 2009: Improving Mobile Web Developer Experience
SEE 2009: Improving Mobile Web Developer Experience

This talk will provide strategies to identify common developer pitfalls for web developers developing on a mobile platform. It will include code fragments for implementing AJAX requests for a social networking application and how to avoid frequent developer pitfalls when displaying the data retrieved on the mobile device. It will further provide coding strategies for improving performance and reducing footprint when developing on a mobile device utilizing Web technologies such as JavaScript, CSS and HTML. This talk will conclude highlighting the activities of the Symbian Foundation including a roadmap of how the Symbian tools are being evolved to further improve and enhance the mobile Web developer experience.

web 20mobile websymbian
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
WinJS
What’s different about it?

Recommended for you

Room with a Vue - Introduction to Vue.js
Room with a Vue - Introduction to Vue.jsRoom with a Vue - Introduction to Vue.js
Room with a Vue - Introduction to Vue.js

The document provides an introduction to Vue.js, a progressive framework for building user interfaces. It discusses Vue's core concepts like the Vue instance, templates, components, and the ecosystem of libraries that support Vue like Vuex for state management and Vue Router for routing. The document compares Vue to Angular and React, noting Vue aims for a balance between rich features and clean code. It promotes Vue as a good option for both beginners and experienced developers looking for a new view on single-page apps.

vuevue.jsreact
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile

jQuery Mobile is a framework for building mobile web sites and apps. It uses progressive enhancement to work across mobile device platforms. Key components include pages for content, navigation via AJAX, and widgets like lists, forms, buttons. Formatting options allow for grids, collapsibles. Events support touch and orientation changes. The framework configures default styles and provides methods to programmatically control pages and components.

jquery mobile
YUI3 - IIT Madras HackU
YUI3 - IIT Madras HackU YUI3 - IIT Madras HackU
YUI3 - IIT Madras HackU

The document discusses the YUI library, which provides a set of JavaScript and CSS utilities and widgets for building rich interactive web applications. It is free, scalable, fast, robust, and well-documented. The document provides information on how to include YUI in a webpage using a script tag, and gives examples of using the core Node and event utilities to modify DOM elements and add event listeners. It also briefly mentions some widgets like carousel and lists additional examples on the YUI website.

hackuyui3
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

Recommended for you

Understanding progressive enhancement - yuiconf2010
Understanding progressive enhancement - yuiconf2010Understanding progressive enhancement - yuiconf2010
Understanding progressive enhancement - yuiconf2010

The document discusses the principles of progressive enhancement and provides examples of how to implement it. Progressive enhancement involves building web applications that provide basic functionality to all users and then enhance the experience for those with newer browsers and capabilities. It emphasizes testing for support before applying enhancements and avoiding the need to degrade functionality. This approach allows web applications to work for all users while taking advantage of newer features where available.

淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践

淘宝移动端Web开发最佳实践

移动开发web appweb design
Preview of YUI3 Treeview
Preview of YUI3 TreeviewPreview of YUI3 Treeview
Preview of YUI3 Treeview

YUICONF 2010 Preview of YUI3 Treeview

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

Recommended for you

Attribute
AttributeAttribute
Attribute

This document discusses attributes in YUI and their advantages over plain object properties. It explains that attributes provide encapsulation of state and configuration through features like getters, setters, default values, and change events. It describes how attributes are implemented using the Y.AttributeCore and Y.AttributeObservable modules to provide this magic functionality. The document addresses some costs of using attributes, like additional processing during object initialization and property access compared to plain properties. It provides guidance on when it may make sense to use attributes versus properties.

yuiyui3javascript
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUIGetting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUI

This document provides an overview of YUI3 and AlloyUI frameworks. It discusses how YUI3 offers modules for DOM manipulation, events, effects, AJAX requests and more. AlloyUI is introduced as a set of UI components built on YUI3, including calendars, tabs and buttons. Examples are given of building a character counter and scheduler using AlloyUI. The benefits of YUI3 like performance, maintainability and loading from CDNs are also highlighted.

alloyuiyuiyui3
Creating Hybrid mobile apps with YUI
Creating Hybrid mobile apps with YUICreating Hybrid mobile apps with YUI
Creating Hybrid mobile apps with YUI

The document discusses considerations for building hybrid mobile applications using native and web technologies, noting that native should be used for hardware access or app store distribution while web technologies allow for writing code once and reusing it across platforms, and highlighting challenges faced in their early hybrid app including unreliable web features and the immaturity of some web standards at the time.

yuiyui mobilejavascript
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
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
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.

Recommended for you

Going Offline with JS
Going Offline with JSGoing Offline with JS
Going Offline with JS

The document discusses JavaScript application development for both server-side and client-side environments. It covers dependency management with tools like Node.js Package Manager, common patterns like MVC with Spine.js, and Windows 8 development with WinJS. Code examples demonstrate using Node.js, Railway.js, Spine.js, and WinJS for asynchronous operations, navigation, and fragments. The talk encourages leveraging common JavaScript tools and patterns for building cross-platform applications.

spine.jsnode.hsjavascript
Going offline with JS (DDD Sydney)
Going offline with JS (DDD Sydney)Going offline with JS (DDD Sydney)
Going offline with JS (DDD Sydney)

The document discusses JavaScript application development for both server-side and client-side applications. It covers dependency management with Node.js Package Manager, using MVC frameworks like Railway.js and Spine.js, testing with tools like QUnit and Tobi.js, and developing Windows 8 Metro apps with WinJS for navigation and fragments. Common patterns like namespaces, modules, and promises are also discussed.

node.jsjavascriptmobile web
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox

A talk given at Appspirina workshop on March 29th, 2012 organized by http://mobiledeveloper.pl/. Event page: https://www.facebook.com/events/296799847060237/

webdevuxresponsive web design
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=”...”>

Recommended for you

jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages

This document discusses using jQuery with XPages. It begins with an introduction to jQuery, explaining that it is a popular JavaScript library that simplifies document manipulation, events, animation, and AJAX. It then compares jQuery to Dojo and provides guidance on when each should be used. The document demonstrates how jQuery works via its API and methods. It also explains how to add jQuery to an XPages application either directly in code or via a theme. Finally, it discusses jQuery plugins and how they can provide ready-made functionality to solve requirements.

xpagesjqueryjavascript
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want itUse html5 to build what you want, where you want it
Use html5 to build what you want, where you want it

This document discusses how to build Windows 8 apps using existing HTML, CSS, and JavaScript skills. It recommends learning common Windows 8 features like tiles, WinJS controls, and supporting different device states and orientations. The document demonstrates turning an existing website into a Windows 8 Store app in 3 steps: using existing HTML/CSS skills, adding WinJS and controls, and deploying the app. It also covers contracts, tiles, and dynamic tile updates.

Developing JavaScript Widgets
Developing JavaScript WidgetsDeveloping JavaScript Widgets
Developing JavaScript Widgets

Tips on developing self-contained JavaScript applications that can be added to a page; especially useful in content management systems

javascript angular widget
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
WinJS + YUI
Leveraging 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?
Building native Win8 apps with YUI

Recommended for you

Seven Versions of One Web Application
Seven Versions of One Web ApplicationSeven Versions of One Web Application
Seven Versions of One Web Application

These are the presentation slides demonstratingseven versions of the UI of same HTML5 application using various libraries and frameworks. This application is described in detail in the O'Reilly book "Enterprise Web Development"

html5. rwdwebjquery
Android Introduction
Android IntroductionAndroid Introduction
Android Introduction

Android is an open source software platform and operating system for mobile devices based on the Linux kernel. It allows developers to write managed code in the Java programming language. The Android platform was developed by Google and the Open Handset Alliance. The document discusses the Android platform, software development tools, key components and APIs, building blocks like activities and services, different layouts, and the activity lifecycle.

vipulandroidoha
Windows 8 for Web Developers
Windows 8 for Web DevelopersWindows 8 for Web Developers
Windows 8 for Web Developers

Windows 8 for Web Developers discusses using JavaScript and HTML5 to build Metro style apps for Windows 8. Key points include: - HTML5, CSS, JavaScript, and client frameworks like WinJS can be used to build the app experience. WinJS provides Metro styled controls and utilities. - Apps are packaged and distributed using the .appx package format. This contains the app code and manifest. - WinJS provides a library of controls, utilities for navigation, and an application model to manage the app lifecycle. Controls are touch enabled and styled for Metro. - CSS3 Grid Layout can be used for page layout, replacing floats. Media queries allow styling for different device states.

csshtml5javascript
Building native Win8 apps with YUI
Y.Sights.GridView
Y.Sights.GridView




Y.Sights.ShotList
Y.Sights.GridView




Y.Sights.Shot




                Y.Sights.ShotList

Recommended for you

jQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FuturejQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and Future

The document discusses jQuery 1.9, 2.0, and the future of jQuery, noting that jQuery 2.0 drops support for older browsers like IE6-8 but is 12% smaller, and introduces 12 optionally excludable modules; it promises that jQuery 1.X will be supported as long as older IE browsers are relevant and that API equivalence will be maintained between 1.X and 2.X versions; and it invites attendees to join and contribute to the jQuery community.

Toronto User groups workshop - 2013-03-10 - HTML5 & Windows 8, friends with b...
Toronto User groups workshop - 2013-03-10 - HTML5 & Windows 8, friends with b...Toronto User groups workshop - 2013-03-10 - HTML5 & Windows 8, friends with b...
Toronto User groups workshop - 2013-03-10 - HTML5 & Windows 8, friends with b...

What would you say if I told you that you can use your actual HTML, CSS, and JavaScript skills to create an amazing Windows 8 application? That all the lovely features that you like so much about HTML5, can be used to create your next masterpiece? That you can use the magical JavaScript libraries you use everyday to get in the game more quickly? Be honest, you would say that I'm crazy... Maybe, or maybe not, only the attendees to this session will know!

htmlvisual studiohtml5
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010

This document compares native applications, web applications, and widgets for mobile devices. Native applications have direct access to device features but must be developed for each platform. Web applications can be written once and deployed anywhere but run inside the browser without direct device access. Widgets combine the cross-platform capabilities of web applications with the ability to access device features and run standalone like native applications.

html5 css3 widget widgets mobile
Building native Win8 apps with YUI
Building native Win8 apps with YUI
Y.Masonry
Building native Win8 apps with YUI

Recommended for you

Developing large scale JavaScript applications
Developing large scale JavaScript applicationsDeveloping large scale JavaScript applications
Developing large scale JavaScript applications

Developing large scale JavaScript applications 24/11/11 @ Front end meetup, Budapest (Hungary) www.milankorsos.com www.twitter.com/korsosm www.sowink.com

large scale applicationjquerysowink.com
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateevWin j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev

This document provides an overview and comparison of WinJS and PhoneGap for developing Windows Store apps. It discusses the key components of WinJS like controls, layouts, animations and styling. It also explains how PhoneGap allows developing Windows Store apps using web technologies by providing access to native device APIs via a native web view. While WinJS and PhoneGap differ in their APIs, the document emphasizes they can both be used to create valid Windows Store apps and developers should choose based on preference and code portability needs. It encourages mixing frameworks freely as long as platform guidelines are followed.

Windows 8 app template feedback
Windows 8 app template feedbackWindows 8 app template feedback
Windows 8 app template feedback

Advice about the creation of a Windows 8 app using Javascript. We created a content-based application template for the Joshfire Factory (http://factory.joshfire.com/)

templatesjoshfire factorywindows store
Y.Sights.GridView
Y.Sights.GridView




Y.Sights.ShotList
Y.Sights.GridView




Y.Sights.Shot




            Y.Sights.ShotList
Building native Win8 apps with YUI

Recommended for you

Mobile app with sencha touch
Mobile app with sencha touchMobile app with sencha touch
Mobile app with sencha touch

This document discusses mobile app development using Sencha Touch. It begins with an introduction to the author and their experience. It then outlines different mobile app development modes including WAP, webview, hybrid, and native. Webview and hybrid approaches are noted to have disadvantages like increased memory usage and performance issues. The document proceeds to discuss Sencha Touch, highlighting its object-oriented architecture, class loading, widgets, and support for HTML5, CSS3, and MVC. It provides an example of an Android app called Poseidon developed with Sencha Touch and outlines its project organization and use of Sencha Touch libraries. It concludes with recommendations for organizing a cross-platform mobile development team using the webview approach.

sencha touch
Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022

The document discusses browser internals and trends related to mobile browsers. It provides an overview of the major rendering engines including WebKit, Blink, and Chromium. It then focuses on specifics of Android's WebView and how it has transitioned to using the Chromium engine. Finally, it describes the multi-process architecture of Chromium which separates rendering and browser components across multiple processes for improved stability.

Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1 Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1

A presentation that take place in a Microsoft Portugal Event, The main propouse of this session was to show the development model of Windows 8.1 store apps in HTML for the ones who already know Windows 8 HTML dev and for the one who never had developed a HTML based Windows store app.

1; microsoft techrefreshhtml5 win 81; microsoft techrefresh
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/

Recommended for you

Mobile applications in a new way with React Native
Mobile applications in a new way with React NativeMobile applications in a new way with React Native
Mobile applications in a new way with React Native

React Native allows developing mobile apps using JavaScript and React principles instead of traditional languages like Java and Objective-C. It supports iOS and Android and uses components like View, Text, Image and more to build interfaces without HTML or CSS. Setting up a React Native project requires installing Node.js, Watchman, and the React Native CLI to transpile code and debug apps in a similar way to building React web apps.

reactnative ios
Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack...
Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack...Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack...
Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack...

React Native allows developing mobile apps using JavaScript and React principles instead of traditional languages like Java and Objective-C. It supports iOS and Android and uses components like View, Text, Image and more to build interfaces without HTML or CSS. Setting up a React Native project requires installing Node.js, Watchman, and the React Native CLI to transpile code and debug apps in a similar way to building React web apps.

#javascript#hack_n_tell#mobile
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference

We are honored to launch and host this event for our UiPath Polish Community, with the help of our partners - Proservartner! We certainly hope we have managed to spike your interest in the subjects to be presented and the incredible networking opportunities at hand, too! Check out our proposed agenda below 👇👇 08:30 ☕ Welcome coffee (30') 09:00 Opening note/ Intro to UiPath Community (10') Cristina Vidu, Global Manager, Marketing Community @UiPath Dawid Kot, Digital Transformation Lead @Proservartner 09:10 Cloud migration - Proservartner & DOVISTA case study (30') Marcin Drozdowski, Automation CoE Manager @DOVISTA Pawel Kamiński, RPA developer @DOVISTA Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 09:40 From bottlenecks to breakthroughs: Citizen Development in action (25') Pawel Poplawski, Director, Improvement and Automation @McCormick & Company Michał Cieślak, Senior Manager, Automation Programs @McCormick & Company 10:05 Next-level bots: API integration in UiPath Studio (30') Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 10:35 ☕ Coffee Break (15') 10:50 Document Understanding with my RPA Companion (45') Ewa Gruszka, Enterprise Sales Specialist, AI & ML @UiPath 11:35 Power up your Robots: GenAI and GPT in REFramework (45') Krzysztof Karaszewski, Global RPA Product Manager 12:20 🍕 Lunch Break (1hr) 13:20 From Concept to Quality: UiPath Test Suite for AI-powered Knowledge Bots (30') Kamil Miśko, UiPath MVP, Senior RPA Developer @Zurich Insurance 13:50 Communications Mining - focus on AI capabilities (30') Thomasz Wierzbicki, Business Analyst @Office Samurai 14:20 Polish MVP panel: Insights on MVP award achievements and career profiling

#uipathcommunity#automation#automationdeveloper
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

Recommended for you

20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf

Support en anglais diffusé lors de l'événement 100% IA organisé dans les locaux parisiens d'Iguane Solutions, le mardi 2 juillet 2024 : - Présentation de notre plateforme IA plug and play : ses fonctionnalités avancées, telles que son interface utilisateur intuitive, son copilot puissant et des outils de monitoring performants. - REX client : Cyril Janssens, CTO d’ easybourse, partage son expérience d’utilisation de notre plateforme IA plug & play.

genaicloudrgpd
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf

Profile portofolio

Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world

The presentation showcases the diverse real-world applications of Fused Deposition Modeling (FDM) across multiple industries: 1. **Manufacturing**: FDM is utilized in manufacturing for rapid prototyping, creating custom tools and fixtures, and producing functional end-use parts. Companies leverage its cost-effectiveness and flexibility to streamline production processes. 2. **Medical**: In the medical field, FDM is used to create patient-specific anatomical models, surgical guides, and prosthetics. Its ability to produce precise and biocompatible parts supports advancements in personalized healthcare solutions. 3. **Education**: FDM plays a crucial role in education by enabling students to learn about design and engineering through hands-on 3D printing projects. It promotes innovation and practical skill development in STEM disciplines. 4. **Science**: Researchers use FDM to prototype equipment for scientific experiments, build custom laboratory tools, and create models for visualization and testing purposes. It facilitates rapid iteration and customization in scientific endeavors. 5. **Automotive**: Automotive manufacturers employ FDM for prototyping vehicle components, tooling for assembly lines, and customized parts. It speeds up the design validation process and enhances efficiency in automotive engineering. 6. **Consumer Electronics**: FDM is utilized in consumer electronics for designing and prototyping product enclosures, casings, and internal components. It enables rapid iteration and customization to meet evolving consumer demands. 7. **Robotics**: Robotics engineers leverage FDM to prototype robot parts, create lightweight and durable components, and customize robot designs for specific applications. It supports innovation and optimization in robotic systems. 8. **Aerospace**: In aerospace, FDM is used to manufacture lightweight parts, complex geometries, and prototypes of aircraft components. It contributes to cost reduction, faster production cycles, and weight savings in aerospace engineering. 9. **Architecture**: Architects utilize FDM for creating detailed architectural models, prototypes of building components, and intricate designs. It aids in visualizing concepts, testing structural integrity, and communicating design ideas effectively. Each industry example demonstrates how FDM enhances innovation, accelerates product development, and addresses specific challenges through advanced manufacturing capabilities.

fdmffffused deposition modeling
Views



  Should we use native WinJS UI Views, or
             leverage Y.View?
Building native Win8 apps with YUI
Building native Win8 apps with YUI
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

Recommended for you

Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf

As a popular open-source library for analytics engineering, dbt is often used in combination with Airflow. Orchestrating and executing dbt models as DAGs ensures an additional layer of control over tasks, observability, and provides a reliable, scalable environment to run dbt models. This webinar will cover a step-by-step guide to Cosmos, an open source package from Astronomer that helps you easily run your dbt Core projects as Airflow DAGs and Task Groups, all with just a few lines of code. We’ll walk through: - Standard ways of running dbt (and when to utilize other methods) - How Cosmos can be used to run and visualize your dbt projects in Airflow - Common challenges and how to address them, including performance, dependency conflicts, and more - How running dbt projects in Airflow helps with cost optimization Webinar given on 9 July 2024

apache airflowdbtdbt-core
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf

These fighter aircraft have uses outside of traditional combat situations. They are essential in defending India's territorial integrity, averting dangers, and delivering aid to those in need during natural calamities. Additionally, the IAF improves its interoperability and fortifies international military alliances by working together and conducting joint exercises with other air forces.

air force fighter planebiggest submarinezambia port
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides

If you’ve ever had to analyze a map or GPS data, chances are you’ve encountered and even worked with coordinate systems. As historical data continually updates through GPS, understanding coordinate systems is increasingly crucial. However, not everyone knows why they exist or how to effectively use them for data-driven insights. During this webinar, you’ll learn exactly what coordinate systems are and how you can use FME to maintain and transform your data’s coordinate systems in an easy-to-digest way, accurately representing the geographical space that it exists within. During this webinar, you will have the chance to: - Enhance Your Understanding: Gain a clear overview of what coordinate systems are and their value - Learn Practical Applications: Why we need datams and projections, plus units between coordinate systems - Maximize with FME: Understand how FME handles coordinate systems, including a brief summary of the 3 main reprojectors - Custom Coordinate Systems: Learn how to work with FME and coordinate systems beyond what is natively supported - Look Ahead: Gain insights into where FME is headed with coordinate systems in the future Don’t miss the opportunity to improve the value you receive from your coordinate system data, ultimately allowing you to streamline your data analysis and maximize your time. See you there!

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

Recommended for you

Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection

Cybersecurity is a major concern in today's connected digital world. Threats to organizations are constantly evolving and have the potential to compromise sensitive information, disrupt operations, and lead to significant financial losses. Traditional cybersecurity techniques often fall short against modern attackers. Therefore, advanced techniques for cyber security analysis and anomaly detection are essential for protecting digital assets. This blog explores these cutting-edge methods, providing a comprehensive overview of their application and importance.

cybersecurityanomaly detectionadvanced techniques
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf

Presented at Gartner Data & Analytics, London Maty 2024. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Join this session to hear their story, the lessons they learned along the way and how their future innovation plans include the exploration of uses of EKG + Generative AI.

neo4jneo4j webinarsgraph database
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck

YOUR RELIABLE WEB DESIGN & DEVELOPMENT TEAM — FOR LASTING SUCCESS WPRiders is a web development company specialized in WordPress and WooCommerce websites and plugins for customers around the world. The company is headquartered in Bucharest, Romania, but our team members are located all over the world. Our customers are primarily from the US and Western Europe, but we have clients from Australia, Canada and other areas as well. Some facts about WPRiders and why we are one of the best firms around: More than 700 five-star reviews! You can check them here. 1500 WordPress projects delivered. We respond 80% faster than other firms! Data provided by Freshdesk. We’ve been in business since 2015. We are located in 7 countries and have 22 team members. With so many projects delivered, our team knows what works and what doesn’t when it comes to WordPress and WooCommerce. Our team members are: - highly experienced developers (employees & contractors with 5 -10+ years of experience), - great designers with an eye for UX/UI with 10+ years of experience - project managers with development background who speak both tech and non-tech - QA specialists - Conversion Rate Optimisation - CRO experts They are all working together to provide you with the best possible service. We are passionate about WordPress, and we love creating custom solutions that help our clients achieve their goals. At WPRiders, we are committed to building long-term relationships with our clients. We believe in accountability, in doing the right thing, as well as in transparency and open communication. You can read more about WPRiders on the About us page.

web development agencywpriderswordpress development
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.

@tilomitra
http://github.com/tilomitra/Sights

More Related Content

What's hot

An introduction to Vue.js
An introduction to Vue.jsAn introduction to Vue.js
An introduction to Vue.js
Pagepro
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
Monika Piotrowicz
 
JClouds at San Francisco Java User Group
JClouds at San Francisco Java User GroupJClouds at San Francisco Java User Group
JClouds at San Francisco Java User Group
Marakana Inc.
 
Vue.js
Vue.jsVue.js
Contextual jQuery
Contextual jQueryContextual jQuery
Contextual jQuery
Doug Neiner
 
jQuery Comes to XPages
jQuery Comes to XPagesjQuery Comes to XPages
jQuery Comes to XPages
Teamstudio
 
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
Dave Artz
 
Vue JS Intro
Vue JS IntroVue JS Intro
Vue JS Intro
Muhammad Rizki Rijal
 
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.jsVue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
Takuya Tejima
 
An introduction to Vue.js
An introduction to Vue.jsAn introduction to Vue.js
An introduction to Vue.js
Javier Lafora Rey
 
Dynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and MobileDynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and Mobile
peychevi
 
Real World Web components
Real World Web componentsReal World Web components
Real World Web components
Jarrod Overson
 
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
Holly Schinsky
 
Doctype html public
Doctype html publicDoctype html public
Doctype html public
Eddy_TKJ
 
Meet VueJs
Meet VueJsMeet VueJs
Meet VueJs
Mathieu Breton
 
Vue.js Getting Started
Vue.js Getting StartedVue.js Getting Started
Vue.js Getting Started
Murat Doğan
 
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road aheadWhat’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
Nguyên Phạm
 
SEE 2009: Improving Mobile Web Developer Experience
SEE 2009: Improving Mobile Web Developer ExperienceSEE 2009: Improving Mobile Web Developer Experience
SEE 2009: Improving Mobile Web Developer Experience
Tasneem Sayeed
 
Room with a Vue - Introduction to Vue.js
Room with a Vue - Introduction to Vue.jsRoom with a Vue - Introduction to Vue.js
Room with a Vue - Introduction to Vue.js
Zachary Klein
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
mowd8574
 

What's hot (20)

An introduction to Vue.js
An introduction to Vue.jsAn introduction to Vue.js
An introduction to Vue.js
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
 
JClouds at San Francisco Java User Group
JClouds at San Francisco Java User GroupJClouds at San Francisco Java User Group
JClouds at San Francisco Java User Group
 
Vue.js
Vue.jsVue.js
Vue.js
 
Contextual jQuery
Contextual jQueryContextual jQuery
Contextual jQuery
 
jQuery Comes to XPages
jQuery Comes to XPagesjQuery Comes to XPages
jQuery Comes to XPages
 
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
 
Vue JS Intro
Vue JS IntroVue JS Intro
Vue JS Intro
 
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.jsVue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
 
An introduction to Vue.js
An introduction to Vue.jsAn introduction to Vue.js
An introduction to Vue.js
 
Dynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and MobileDynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and Mobile
 
Real World Web components
Real World Web componentsReal World Web components
Real World Web components
 
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
 
Doctype html public
Doctype html publicDoctype html public
Doctype html public
 
Meet VueJs
Meet VueJsMeet VueJs
Meet VueJs
 
Vue.js Getting Started
Vue.js Getting StartedVue.js Getting Started
Vue.js Getting Started
 
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road aheadWhat’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
 
SEE 2009: Improving Mobile Web Developer Experience
SEE 2009: Improving Mobile Web Developer ExperienceSEE 2009: Improving Mobile Web Developer Experience
SEE 2009: Improving Mobile Web Developer Experience
 
Room with a Vue - Introduction to Vue.js
Room with a Vue - Introduction to Vue.jsRoom with a Vue - Introduction to Vue.js
Room with a Vue - Introduction to Vue.js
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 

Viewers also liked

YUI3 - IIT Madras HackU
YUI3 - IIT Madras HackU YUI3 - IIT Madras HackU
YUI3 - IIT Madras HackU
Jayasurian Makkoth
 
Understanding progressive enhancement - yuiconf2010
Understanding progressive enhancement - yuiconf2010Understanding progressive enhancement - yuiconf2010
Understanding progressive enhancement - yuiconf2010
Christian Heilmann
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
Du Yamin
 
Preview of YUI3 Treeview
Preview of YUI3 TreeviewPreview of YUI3 Treeview
Preview of YUI3 Treeview
Gonzalo Cordero
 
Attribute
AttributeAttribute
Attribute
Luke Smith
 
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUIGetting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUI
Zeno Rocha
 
Creating Hybrid mobile apps with YUI
Creating Hybrid mobile apps with YUICreating Hybrid mobile apps with YUI
Creating Hybrid mobile apps with YUI
Gonzalo Cordero
 

Viewers also liked (7)

YUI3 - IIT Madras HackU
YUI3 - IIT Madras HackU YUI3 - IIT Madras HackU
YUI3 - IIT Madras HackU
 
Understanding progressive enhancement - yuiconf2010
Understanding progressive enhancement - yuiconf2010Understanding progressive enhancement - yuiconf2010
Understanding progressive enhancement - yuiconf2010
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
 
Preview of YUI3 Treeview
Preview of YUI3 TreeviewPreview of YUI3 Treeview
Preview of YUI3 Treeview
 
Attribute
AttributeAttribute
Attribute
 
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUIGetting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUI
 
Creating Hybrid mobile apps with YUI
Creating Hybrid mobile apps with YUICreating Hybrid mobile apps with YUI
Creating Hybrid mobile apps with YUI
 

Similar to Building native Win8 apps with YUI

Going Offline with JS
Going Offline with JSGoing Offline with JS
Going Offline with JS
brendankowitz
 
Going offline with JS (DDD Sydney)
Going offline with JS (DDD Sydney)Going offline with JS (DDD Sydney)
Going offline with JS (DDD Sydney)
brendankowitz
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
Wojtek Zając
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
Mark Roden
 
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want itUse html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Kevin DeRudder
 
Developing JavaScript Widgets
Developing JavaScript WidgetsDeveloping JavaScript Widgets
Developing JavaScript Widgets
Bob German
 
Seven Versions of One Web Application
Seven Versions of One Web ApplicationSeven Versions of One Web Application
Seven Versions of One Web Application
Yakov Fain
 
Android Introduction
Android IntroductionAndroid Introduction
Android Introduction
aswapnal
 
Windows 8 for Web Developers
Windows 8 for Web DevelopersWindows 8 for Web Developers
Windows 8 for Web Developers
Gustaf Nilsson Kotte
 
jQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FuturejQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and Future
Richard Worth
 
Toronto User groups workshop - 2013-03-10 - HTML5 & Windows 8, friends with b...
Toronto User groups workshop - 2013-03-10 - HTML5 & Windows 8, friends with b...Toronto User groups workshop - 2013-03-10 - HTML5 & Windows 8, friends with b...
Toronto User groups workshop - 2013-03-10 - HTML5 & Windows 8, friends with b...
Frédéric Harper
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010
Patrick Lauke
 
Developing large scale JavaScript applications
Developing large scale JavaScript applicationsDeveloping large scale JavaScript applications
Developing large scale JavaScript applications
Milan Korsos
 
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateevWin j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Mihail Mateev
 
Windows 8 app template feedback
Windows 8 app template feedbackWindows 8 app template feedback
Windows 8 app template feedback
Steren Giannini
 
Mobile app with sencha touch
Mobile app with sencha touchMobile app with sencha touch
Mobile app with sencha touch
fch415
 
Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022
NAVER D2
 
Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1 Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1
Alexandre Marreiros
 
Mobile applications in a new way with React Native
Mobile applications in a new way with React NativeMobile applications in a new way with React Native
Mobile applications in a new way with React Native
Eugene Zharkov
 
Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack...
Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack...Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack...
Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack...
Intersog
 

Similar to Building native Win8 apps with YUI (20)

Going Offline with JS
Going Offline with JSGoing Offline with JS
Going Offline with JS
 
Going offline with JS (DDD Sydney)
Going offline with JS (DDD Sydney)Going offline with JS (DDD Sydney)
Going offline with JS (DDD Sydney)
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
 
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want itUse html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
 
Developing JavaScript Widgets
Developing JavaScript WidgetsDeveloping JavaScript Widgets
Developing JavaScript Widgets
 
Seven Versions of One Web Application
Seven Versions of One Web ApplicationSeven Versions of One Web Application
Seven Versions of One Web Application
 
Android Introduction
Android IntroductionAndroid Introduction
Android Introduction
 
Windows 8 for Web Developers
Windows 8 for Web DevelopersWindows 8 for Web Developers
Windows 8 for Web Developers
 
jQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FuturejQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and Future
 
Toronto User groups workshop - 2013-03-10 - HTML5 & Windows 8, friends with b...
Toronto User groups workshop - 2013-03-10 - HTML5 & Windows 8, friends with b...Toronto User groups workshop - 2013-03-10 - HTML5 & Windows 8, friends with b...
Toronto User groups workshop - 2013-03-10 - HTML5 & Windows 8, friends with b...
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010
 
Developing large scale JavaScript applications
Developing large scale JavaScript applicationsDeveloping large scale JavaScript applications
Developing large scale JavaScript applications
 
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateevWin j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
 
Windows 8 app template feedback
Windows 8 app template feedbackWindows 8 app template feedback
Windows 8 app template feedback
 
Mobile app with sencha touch
Mobile app with sencha touchMobile app with sencha touch
Mobile app with sencha touch
 
Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022
 
Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1 Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1
 
Mobile applications in a new way with React Native
Mobile applications in a new way with React NativeMobile applications in a new way with React Native
Mobile applications in a new way with React Native
 
Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack...
Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack...Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack...
Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack...
 

Recently uploaded

UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 

Recently uploaded (20)

UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 

Building native Win8 apps with YUI

  • 2. Building native Windows 8 apps using YUI 3 @tilomitra // YUI Engineer
  • 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)
  • 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.
  • 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
  • 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?
  • 48. Y.Sights.GridView Y.Sights.Shot Y.Sights.ShotList
  • 55. Y.Sights.GridView Y.Sights.Shot Y.Sights.ShotList
  • 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