Leap from Web-developer to Windows Store developer

Angelo ChanKamran Bilgrami

Agenda● WinJS - What and Why● Modern Apps● WinRT Architecture● Demos

o Controlso Data Bindingso Program LifeCycle Management (PLM)

What is WinJS?● Windows Library for JavaScript● Used for creating Windows Store Apps● Rapidly Evolving

o Universal Windows Apps (UWAs) Can target Tablet, Desktop, Phone, XBox

o Open Source (in Beta). Can be used across Browsers. http://try.buildwinjs.com/

What does WinJS offer● Coding Patterns

o Promises, Mixins, Modules● Navigation Framework● Utilities

o Animations, DOM Selector● Rich Library of Controls● XHR API (Ajax)

Why bother to learn WinJS?● Two primary advantages

o Optimized for Microsoft Design Guidelineso Available out of box

● You can use other JS frameworks for creating Windows store Appso Will require more work to comply Modern

Apps Design guidelines

Why bother to learn WinJS?● Microsoft putting lot of weight behind it

● Not many 3rd party Apps built using WinJS yet● A separate MCSD track for JS developers

Requirements● Windows 8.1

o Download built-in VMs for various OS http://goo.gl/hhxz0V

● Visual Studio 2013o Express Edition is a free downloado You need Update 2 RC for UWAs

What are Modern Apps● Previously known as “Metro style apps”● Focus is Content consumption

● Content before Chrome● Follows Modern Design Guidelines● Use new Windows Runtime (WinRT)● Follows Program Life Cycle Management (PLM)

Legacy Apps

Modern Apps

What is WinRT

Visual Studio TemplatesIntroduction to

Simulator

WinJS Controls

WinJS Controls● Consists of a container element

o Typically a div element● Set type of control using data-win-control● Set any options using data-win-options● WinJS.UI.processAll() to instantiate controls● Two ways of creation

o Declarativeo Programmatic

WinJS Controls

WinJS Data Bindings● Mechanism to connect JS data source to

HTML elementso Allows separation of view and model

● data-win-bind attribute is used to connect source to target

● WinJS.Binding.processAll ties UI element with data

● UI elements could be notified of any data changes by using observable objects

WinJS Data Bindings

Program Lifecycle Management

Program Lifecycle Management

Apps Activations

PLM - Activation Kinds

Launch protocolcontactPicke

r

SearchfileOpenPick

erdevice

shareTargetfileSavePick

erprintTaskSettin

gs

file cachedFileUpdater cameraSettings

PLM – Execution StatesCosedByUse

r

Running

NotRunning

Suspended

Terminated

Program LifeCycle Management

Key Differences● Stateful

● Not a typical http client server architecture● Different life cycle management● Cannot use any browser based functions.● Debugging differnces

o No View Source or F12 Developer Tools● Native device Access