apps for the multi-device world

53
“Apps for the multi- device world.” Lee Boonstra @ladysign

Upload: fitc

Post on 11-May-2015

443 views

Category:

Design


1 download

DESCRIPTION

Apps for the Multi-Device World with Lee Boonstra Presented live at FITC Amsterdam 2014 on Feb 24-25, 2014 More details can be found at www.FITC.ca We live in a multi-device world of phones, tablets, TVs, in-car navs, smart watches….And there is one thing all these devices have in common: HTML5. In this session Lee Boonstra, technical trainer at Sencha, will discuss some of the challenges and opportunities of developing for a multi-device world and how Sencha can help you create better experiences. She will also provide some inspiring client examples and case studies.

TRANSCRIPT

Page 1: Apps for the Multi-Device World

“Apps for the multi-device world.”

Lee Boonstra @ladysign

Page 2: Apps for the Multi-Device World

Lee BoonstraTechnical Trainer @ Sencha [email protected] ladysign leeboonstra http://www.ladysign-apps.com

Page 3: Apps for the Multi-Device World
Page 4: Apps for the Multi-Device World

“As a technical trainer I teach Sencha Touch and

Ext JS. I write documentation and speak at events.”

Page 5: Apps for the Multi-Device World

Author of: Hands-On Sencha Touch 2 !April 2014 ISBN:978-1-4493-6652-0

Page 6: Apps for the Multi-Device World

Apps for the multi-device world.

!

“The challenges and opportunities of developing for a multi-device world

and how Sencha can help you create better experiences.”

Page 7: Apps for the Multi-Device World

“How many devices did you bring with you

today?”

Page 8: Apps for the Multi-Device World

What’s in my bag…

Page 9: Apps for the Multi-Device World

‣ Laptop

What’s in my bag…

Page 10: Apps for the Multi-Device World

‣ Laptop

‣ Tablet

What’s in my bag…

Page 11: Apps for the Multi-Device World

‣ Laptop

‣ Tablet

‣ E-reader

What’s in my bag…

Page 12: Apps for the Multi-Device World

‣ Laptop

‣ Tablet

‣ E-reader

‣ Game console

What’s in my bag…

Page 13: Apps for the Multi-Device World

‣ Laptop

‣ Tablet

‣ E-reader

‣ Game console

‣ Camera

What’s in my bag…

Page 14: Apps for the Multi-Device World

‣ Laptop

‣ Tablet

‣ E-reader

‣ Game console

‣ Camera

‣ Phone

‣ …

What’s in my bag…

Page 15: Apps for the Multi-Device World
Page 16: Apps for the Multi-Device World

Different devices, different…Multi device design challenges

Page 17: Apps for the Multi-Device World

‣ Operating System & Browser

Different devices, different…Multi device design challenges

Page 18: Apps for the Multi-Device World

‣ Operating System & Browser

‣ Screen size

Different devices, different…Multi device design challenges

Page 19: Apps for the Multi-Device World

‣ Operating System & Browser

‣ Screen size

‣ User input

Different devices, different…Multi device design challenges

Page 20: Apps for the Multi-Device World

‣ Operating System & Browser

‣ Screen size

‣ User input

‣ Features set

Different devices, different…Multi device design challenges

Page 21: Apps for the Multi-Device World

‣ Operating System & Browser

‣ Screen size

‣ User input

‣ Features set

!

‣ (…and what about data?)

Different devices, different…Multi device design challenges

Page 22: Apps for the Multi-Device World

“There is one thing, all these devices have in common…”

Page 23: Apps for the Multi-Device World
Page 24: Apps for the Multi-Device World
Page 25: Apps for the Multi-Device World
Page 26: Apps for the Multi-Device World

Where a multi device app fits in

Database Server

SQL Server Oracle Sybase MySql

...

Application Server

Java PHP

ColdFusion .NET

Ruby on Rails ...

Web Server

IIS Apache Tomcat

Websphere ...

JSON/XML Transport Layer

Internet / Intranet

Page 27: Apps for the Multi-Device World

“So, what’s the best approach to build an app for

the multi device world?”

Page 28: Apps for the Multi-Device World
Page 29: Apps for the Multi-Device World
Page 30: Apps for the Multi-Device World
Page 31: Apps for the Multi-Device World
Page 32: Apps for the Multi-Device World
Page 33: Apps for the Multi-Device World
Page 34: Apps for the Multi-Device World
Page 35: Apps for the Multi-Device World

“Serious App development: Maintainability, Scalability

and Flexibility.”

Page 36: Apps for the Multi-Device World

“A good framework, makes the life

of a developer easier.”

Page 37: Apps for the Multi-Device World
Page 38: Apps for the Multi-Device World

“Let’s review the design challenges:

How can we solve our problems with Sencha Touch ?”

Page 39: Apps for the Multi-Device World

Sencha Touch runs in any modern browser. This includes the browsers on: iOS, Android, BlackBerry, Windows, Tizen…

Also, it’s possible to package apps as hybrid apps, for example with Cordova integration.

OS / BrowserMulti device design challenges

Page 40: Apps for the Multi-Device World

Check out the tutorial: http://bit.ly/1nuhS1B

https://vimeo.com/84073941

Page 41: Apps for the Multi-Device World

The viewport takes the size of a full screen.

Device profiles can differentiate views between multi devices.

Screen sizeMulti device design challenges

Page 42: Apps for the Multi-Device World

Read the case study: http://bit.ly/Lvx0NC

https://vimeo.com/33026515

Page 43: Apps for the Multi-Device World

Sencha Touch has built-in touch and gesture support. (tap, drag, swipe, pinch and rotate…)

Sencha Touch is all JavaScript! Include JavaScript APIs (Leap Motion Controller: Leap.js + Sencha integration: Leap Cursor Lib)

User inputMulti device design challenges

Page 44: Apps for the Multi-Device World

Check out the tutorial: http://bit.ly/1lpdJO3

http://www.youtube.com/watch?v=iR4qLfvHaII

Page 45: Apps for the Multi-Device World

Build a hybrid app, to support device specific features.

Sencha Touch ships with a native device API. (Accelerometer, Camera, Contacts, Connection, File System, Push, Purchases and many more…)

Or use Adobe PhoneGap / Apache Cordova integration with community-driven plugins.

Features setMulti device design challenges

Page 46: Apps for the Multi-Device World

Or use Adobe PhoneGap / Apache Cordova integration with community-driven plugins. !

Features setMulti device design challenges

Page 47: Apps for the Multi-Device World

Read the case study: http://bit.ly/1j2AO41

https://vimeo.com/32773806

Page 48: Apps for the Multi-Device World

!

!

!

The browser can contain sensitive data, a direct gateway for cyber-criminals.

!

About data…Multi device design challenges

Page 49: Apps for the Multi-Device World

Sencha Space

- Easily deploy apps to a encrypted mobile workspace - Remotely revoke access / wipe data - Monitor, audit & report on app, device or user activity - Let the apps within Sencha Space communicate with each other

About data…Multi device design challenges

Page 50: Apps for the Multi-Device World

Sencha Space: http://bit.ly/1cvyXjJ

https://vimeo.com/70443725

Page 51: Apps for the Multi-Device World

Summary !

“When you are building apps for the multi-device world, you probably want to look into

HTML5, because that’s language every modern device understands.”

!

Page 52: Apps for the Multi-Device World

!

“At Sencha, we want to make the life of an app developer easier. We do a lot to help

you, to build better multi device apps, enabling customer success…”

!

HTML5 frameworks, tools, training programs and support.

!

Page 53: Apps for the Multi-Device World

Create amazing apps built on web standards

Lee Boonstra @ladysign !

http://www.speakerdeck.com/savelee