Angelo Chan Kamran Bilgrami

Agenda ● WinJS - What and Why ● Modern Apps ● WinRT Architecture ● Demos o Controls o Data Bindings o 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. 

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 Guidelines o Available out of box ● You can use other JS frameworks for creating Windows store Apps o 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 ● Visual Studio 2013 o Express Edition is a free download o 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 Templates Introduction to Simulator

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 Declarative o Programmatic

WinJS Controls

WinJS Data Bindings ● Mechanism to connect JS data source to HTML elements o 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

Apps Activations

PLM - Activation Kinds LaunchprotocolcontactPicker SearchfileOpenPickerdevice shareTargetfileSavePicker printTaskSettings file cachedFileUpdater cameraSettings

PLM – Execution States CosedByUser 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