Windows Store Application Development using HTML5

REBOOT

REBOOT 2014MICROSOFT USER GROUP HYDERABAD

Windows Store Application Development using HTM5

Your Presenter Shravan Kumar Kasagoni Senior Mobile Web Software Engineer - Thomson Reuters

Microsoft MVP - ASP.NET/IIS http://theshravan.net @techieshravan

What is Windows 8?

Windows reimagined

New fast and fluid Start screen

Everything great about Windows 7 we made even better

Touch, mouse, keyboard

Great experience across all hardware

Tablets to laptops to all-in-ones

Highest power to the most efficient chipset

Touch, mouse, keyboard

hands-on with Windows 8.1

demo

MailCalendarSkyDrivePhotosPeople Messaging

All the apps you want

Apps are the heart of Windows 8

The apps you need are built right in

Apps work together and make each other better

What did we see? Fast and fluid user experience Immersive and full-screen Modern UI apps Touch-first with full keyboard and mouse Experience for all PC devices and architectures

Web of applications working together

the Windows Runtime (WinRT)

Windows 8 Platform

Modern UI Apps

HTMLJavaScri

pt

CC++

C#VB

Desktop Apps

Win32

.NET / SL

Internet Explore

r

Communication

& Data

Application Model

Devices & Printing

WinRT APIsGraphics &

Media

Syst

em

Serv

ices

JavaScript(Chakra)

CC++

C#VB

XAML HTML / CSSVie

wM

odel

Contr

olle

r

Windows Core OS ServicesCore

Windows Runtime APIs

FundamentalsApplication

Services Threading/Timers Memory Management Authentication Cryptography Globalization

Devices

Geolocation Portable Sensors NFC

User Interface

SVG Tiles Input Accessibility Printing

HTML5/CSS XAML DirectX Controls Data Binding

Communications & Data

Memory Management XML Networking SMS

Notifications Streams

Contracts Local & Cloud Storage Web

Media

Playback Capture PlayTo Visual Effects

Language projections

WindowsRuntime

Object(or Component)

Writtenin C++, C#, VB

Windows Metadata

C++ App

Pro

jecti

on

CLR

C#/VB App

Pro

jecti

on

HTML AppCh

akra

Pro

jecti

on

Using the Windows Runtime feels natural and familiar from JavaScript and HTML

HTML5Web Sockets

Web Workers

IndexedDB

Ecmascript 5

File API & Blobs

Geolocation

Audio tag

Video tag

Touch-first

Pointer events

Zoom regions

Snap Points

Forms

Validation

Input types

Spell checking

CSS3

2D & 3D transforms

Transforms Animations

Transitions

MotionGrid

Flexbox

Layout

Gradients

Text-shadow

GraphicsMulti-column, hyphenation

Pagination

Position float

Content flow

Windows hardware acceleration makes these beautiful and fast

Windows Library for JavaScript (WinJS)library for building Modern UI apps using JavaScript

Web technologies you’re already familiar with

Modern patterns for responsive, reliable apps

Use interactive design tools

Build your apps fast and with high quality

Matches the Windows Modern UI design style

Controls for common user experiences

Designed for touch as well as traditional input

Scales across form factors

Make your apps look and feel great

Promises Object that is a promise for a later value Hook up to completion with then() method

then(completion, error, progress)

then() returns another promise Implementation in base.js: WinJS.Promise

Common.js promises/A spec http://wiki.commonjs.org/wiki/Promises/A

Promise// Object that is a promise for a later value

WinJS.xhr({ url:"http://www.example.org/somedata.json"}).then(function (response) { updateDisplay( JSON.parse(response.responseText));}, function (ex) { reportXhrError(ex);});

Designing a Modern UI App

8 Traits of a Modern UI App

1. Modern UI design2. Fast and fluid3. Snap and scale beautifully4. Use the right contracts5. Invest in a great Tile6. Feel connected & alive7. Roam to the cloud8. Embrace Modern UI principles

with HTML/CSS/JavaScript

Hello World

Application Lifecycle

When Do Apps Run? Windows 8 System manages app lifetimeWindows 7 User manages app

lifetime

Process State Transitions

RunningApp

suspending

resuming

Suspended

App

Low Resources

Terminated

App

Navigation

REBOOT

Thank You