universal apps development using html 5 and winjs

37
Universal Application Development Using WinJS Alexandre Marreiros 18 – 06 – 2014 Microsoft Lisbon Experience

Upload: alexandre-marreiros

Post on 07-Dec-2014

526 views

Category:

Technology


1 download

DESCRIPTION

Presentation about Windows 8 and Windws phone 8.1 cross development using the Universal APP concept.

TRANSCRIPT

Page 1: Universal Apps Development using HTML 5 and WINJS

Universal Application Development Using WinJSAlexandre Marreiros18 – 06 – 2014 Microsoft Lisbon Experience

Page 2: Universal Apps Development using HTML 5 and WINJS

About

CTO @ Innovagency

Technical Trainer, Speaker & Consultant as Self Employee

Microsoft DevCamp Trainer

Teacher @ EDIT

Software Developer & Architect as Consultant

Tech Writer and Revier as Self Employee

Digital business & UX ConsultantContacts:[email protected] / [email protected]@alexmarreiroshttp://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21www.digitalmindignition.com

Alexandre Marreiros

Page 3: Universal Apps Development using HTML 5 and WINJS

Raise your hand if you’ve built either a Windows Store or

Windows Phone App?

Page 4: Universal Apps Development using HTML 5 and WINJS

Raise your hand if you’ve built Windows Store App using WinJS

and HTML 5?

Page 5: Universal Apps Development using HTML 5 and WINJS

Raise your hand if you’ve almost had to build 2 APPS to grant that you have a Windows Phone and

Windows 8 APP?

Page 6: Universal Apps Development using HTML 5 and WINJS

Raise your hand if you’ve built “things” using JavaScript and

HTML 5?

Raise your hand if you’ve built WEB?

Page 7: Universal Apps Development using HTML 5 and WINJS

Agenda

• Universal APPS

• HTML 5 + WinJS Apps (review)

• HTML 5 Universal APPS Project

Page 8: Universal Apps Development using HTML 5 and WINJS

Windows Store Projects Windows Phone Projects

In a recent past

Page 9: Universal Apps Development using HTML 5 and WINJS

Windows Platform Recent Past

View Technologies:

XAML + C#

HTML5 + WINJS

View Technologies:

XAML + C#

Page 10: Universal Apps Development using HTML 5 and WINJS

Universal Projects

Nowadays

Page 11: Universal Apps Development using HTML 5 and WINJS

Windows Platform Nowadays

Common Suported View TechnologiesHTML 5 Native

Support

XAML Native Support

Some common Control Set

Page 12: Universal Apps Development using HTML 5 and WINJS

Universal Projects

Universal apps should be our way to build apps

Page 13: Universal Apps Development using HTML 5 and WINJS

Universal APPS Wins

• Maintenance

• Code Reuse

• Productivity

• User Experience cross platform

Page 14: Universal Apps Development using HTML 5 and WINJS

HTML 5 + WinJS Apps (review)

Windows Store and Windows Phone 8.1 APP

Rendering engine

WinRT

Windows OS Kernel

WinJS

HTML/CSS/JS

Page 15: Universal Apps Development using HTML 5 and WINJS

HTML 5 + WinJS Apps (review)

• Support the standards;

• Allows the reuse of Web Knowledge;

• Support for WEB Libraries (JQUERY, ANGULAR JS, and other’s);

• Reuse of Web Developments

Page 16: Universal Apps Development using HTML 5 and WINJS

Some Popular CSS 3 Features

2D & 3D transforms

Transforms Animations

Transitions

MotionGrid

Flexbox

LayoutGradients

Filter Effects

Text-shadow

GraphicsMulti-column, hyphenation

Pagination

Position float

Content flow

Page 17: Universal Apps Development using HTML 5 and WINJS

Some Popular HTML 5 Features

Web Sockets Web Workers IndexedDB

Ecmascript 5 File API & Blobs Geolocation

Audio tag Video tag

Touch & keyboard/Mouse SupportPointer events

Zoom regions

Snap Points

Forms

Validation

Input types

Spell checking

Drag & Drop

Page 18: Universal Apps Development using HTML 5 and WINJS

Universal Projects?

DEM

O

1

Page 19: Universal Apps Development using HTML 5 and WINJS

Universal app Project

Page 20: Universal Apps Development using HTML 5 and WINJS

Universal app Project

Page 21: Universal Apps Development using HTML 5 and WINJS

• Style sheets

• Core (promises, class, namespace, etc.)

• App model

• Data binding

WIN JS IS

• Controls

• Animations

• Utilities

A collection of toolkits to make building Windows Store apps fast and easy

Use them when you wish to go a bit further into the OS, or reuse UX standard Windows Controls

Page 22: Universal Apps Development using HTML 5 and WINJS

Universal APPS and be responsiviness

• Like when thinking the web when Thinking an APP many times there are some features that make more or less sense in some device or some layouts that had not just be adjusted but also need to be rethink. The Universal APP Microsoft model allows you to write once and run universal, but also to make some things special for some device based on patterns or user expectations.

Page 23: Universal Apps Development using HTML 5 and WINJS

• Show how to use WinJS Controls in a declarative manner and a imperative manner

Review Demo

<div id="calendar" data-win-control="WinJS.UI.DatePicker"></div> Declarative Way

WinJS controls are divs with atributtes that are processed when the processall method runs.

Page 24: Universal Apps Development using HTML 5 and WINJS

• Show how to use WinJS Controls in a declarative manner and a imperative manner

Review Demo

Imperative Way

In the HTML File<div id="calendarDiv" ></div>

In th JS filevar calendarDiv = document.getElementById("calendar");var calendarctrl = new WinJS.UI.DatePicker(calendarDiv);

Page 25: Universal Apps Development using HTML 5 and WINJS

Universal Projects?DEMO

2

Page 26: Universal Apps Development using HTML 5 and WINJS

Universal app Project

• List of WINJS Controls

http://msdn.microsoft.com/en-us/library/windows/apps/br229782.aspx

Page 27: Universal Apps Development using HTML 5 and WINJS

WINJS Universal app Project

• The HTML platform on Windows Phone does not support a few HTML elements that are supported on Windows. These are the context menu, message dialog, and simple tooltip. Similarly, the file upload and progress ring controls work, but are not officially supported.

• Adopting WinJS 2.1 in a Windows Phone app should feel seamless and familiar as previous work done in a Windows Store app with WinJS 2.0. The primary differences between versions are all about the controls, as befits the deltas between the Windows Phone and Windows user interfaces. Beyond that, the core capabilities and utilities of WinJS are identical, streamlining the development of universal apps for Windows to reach customers across devices.

Page 29: Universal Apps Development using HTML 5 and WINJS

Universal app Project

• List of WINJS Controls

http://msdn.microsoft.com/en-us/library/windows/apps/br229782.aspx

Page 30: Universal Apps Development using HTML 5 and WINJS

Universal Projects?DEMO

3

Page 31: Universal Apps Development using HTML 5 and WINJS

Porting store app to Univ aPP

• Plan well your migration it can be very easy but have to be planed for that

http://msdn.microsoft.com/en-us/library/windows/apps/dn636144.aspx

Page 32: Universal Apps Development using HTML 5 and WINJS

Recap

• Universal APPS have a simple development model in the case of HTML 5 ntive apps

• Building HTML APPS can be made with the reuse of assets we already have at ou development

• Media Queries can be helpful to build shared UI

• We have Javascript debugging

• We are going universal but the possibility to minimize visual inconsistency but with the choice to turn some kind of assets unique for the Phone or the Store app

Page 33: Universal Apps Development using HTML 5 and WINJS

Conclusions

• Universal apps are a primary way to build apps for all of our platforms in the future

• We Love standards and KB/Code reuse so resuse your web KB/code

• We can gain a lot going cross platform

• HTML app development is a equal citizen in the native development approach in Windows Phone 8.1 and Windows 8.1

• You can still use specific development for a device in a universal app

Page 34: Universal Apps Development using HTML 5 and WINJS

Time to build your Windows apps

Page 35: Universal Apps Development using HTML 5 and WINJS

KB

• http://typedmvvm.codeplex.com/ Sample application for hands on lab study

• http://code.msdn.microsoft.com/wpapps/Universal-Windows-app-cb3248c3

Build session

• http://typedmvvm.codeplex.com/ Sample application for hands on lab study

• http://channel9.msdn.com/Events/Build/2014/2-506 Whats new the road ahead

• http://channel9.msdn.com/Events/Build/2014/3-508 HTML 5 from web to apps

• http://channel9.msdn.com/Events/Build/2014/2-540 Universal apps HTML 5

References

Page 37: Universal Apps Development using HTML 5 and WINJS

Thanks