Top Banner
REBOOT REBOOT 2014 MICROSOFT USER GROUP HYDERABAD
28

Windows Store Application Development using HTML5

Dec 06, 2014

Download

Technology

 
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Windows Store Application Development using HTML5

REBOOT

REBOOT 2014MICROSOFT USER GROUP HYDERABAD

Page 2: Windows Store Application Development using HTML5

Windows Store Application Development using HTM5

Page 3: Windows Store Application Development using HTML5

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

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

Page 4: Windows Store Application Development using HTML5

What is Windows 8?

Page 5: Windows Store Application Development using HTML5

Windows reimagined

New fast and fluid Start screen

Everything great about Windows 7 we made even better

Touch, mouse, keyboard

Page 6: Windows Store Application Development using HTML5

Great experience across all hardware

Tablets to laptops to all-in-ones

Highest power to the most efficient chipset

Touch, mouse, keyboard

Page 7: Windows Store Application Development using HTML5

hands-on with Windows 8.1

demo

Page 8: Windows Store Application Development using HTML5

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

Page 9: Windows Store Application Development using HTML5

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

Page 10: Windows Store Application Development using HTML5

the Windows Runtime (WinRT)

Page 11: Windows Store Application Development using HTML5

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

Page 12: Windows Store Application Development using HTML5

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

Page 13: Windows Store Application Development using HTML5

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

Page 14: Windows Store Application Development using HTML5

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

Page 15: Windows Store Application Development using HTML5

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

Page 16: Windows Store Application Development using HTML5

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

Page 17: Windows Store Application Development using HTML5

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

Page 18: Windows Store Application Development using HTML5
Page 19: Windows Store Application Development using HTML5

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

Page 20: Windows Store Application Development using HTML5

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);});

Page 21: Windows Store Application Development using HTML5

Designing a Modern UI App

Page 22: Windows Store Application Development using HTML5

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

Page 23: Windows Store Application Development using HTML5

with HTML/CSS/JavaScript

Hello World

Page 24: Windows Store Application Development using HTML5

Application Lifecycle

Page 25: Windows Store Application Development using HTML5

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

lifetime

Page 26: Windows Store Application Development using HTML5

Process State Transitions

RunningApp

suspending

resuming

Suspended

App

Low Resources

Terminated

App

Page 27: Windows Store Application Development using HTML5

Navigation

Page 28: Windows Store Application Development using HTML5

REBOOT

Thank You