REBOOT REBOOT 2014 MICROSOFT USER GROUP HYDERABAD
Dec 06, 2014
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