sencha touch in the wild

39
SENCHA TOUCH IN THE WILD

Upload: carr

Post on 26-Jun-2015

1.616 views

Category:

Technology


2 download

DESCRIPTION

My presentation from SourceDevCon 2011 (www.sourcedevcon.eu) about our experiences with Sencha Touch and mobile web development for touch devices in general.

TRANSCRIPT

Page 1: Sencha touch in the wild

SENCHA TOUCH IN THE WILD

Page 2: Sencha touch in the wild

INFINUMSoftware developmentMobile Development

Ruby on RailsAndroidiPhoneiPad

www.infinumdigital.com

Page 3: Sencha touch in the wild

WON $100.000Samsung Global Developer Challenge

Page 4: Sencha touch in the wild

MY BACK HISTORY

Know who you’re dealing with

Business20%

Development60%

Design20%

Page 5: Sencha touch in the wild

STUFF WE INVENTED IN EARLY 2010

Templating

Layouting

Proxies

Dataviews

Event Handling

mobile web app development

Page 6: Sencha touch in the wild

USING SENCHA SINCE 0.9.XBuggy, worked really bad on Android

Page 7: Sencha touch in the wild

VC FUNDING$14M

Page 8: Sencha touch in the wild

SENCHA TOUCH & INFINUMWe’ve been friends for a long time...

Page 9: Sencha touch in the wild

WHAT WE LOVE ABOUT SENCHA

TOUCH

XTemplateLearning

curve

Listeners

Layout Managers

Data Stores

Page 10: Sencha touch in the wild

IPHONE & IPADgenerally works fine

Page 11: Sencha touch in the wild

ANDROIDTop level (HDPI) Androids work almost fine

Page 12: Sencha touch in the wild

WHAT’S CAUSING

PERFORMANCE ISSUES?

Scrolling

AnimationsGradients

Rounded cornersBunch of elements

Input elements

Page 13: Sencha touch in the wild

COMMUNICATE TO CLIENTS“It won’t work everywhere”

Page 14: Sencha touch in the wild

ANDROID SEGMENTATION

High Density (HDPI)480x854

Medium Density (MDPI)320x480

Low Density (LDPI)240x320

~Android 2.2

Page 15: Sencha touch in the wild

BEWAREiPhone 3G, crappy Androids

(low CPU, lack of GPU acceleration)

Page 16: Sencha touch in the wild

ANDROID VERSIONS>=2.1 95%

Page 17: Sencha touch in the wild

KINETIC SCROLLING & BOUNCEturn it off if scrolling is slow

Page 18: Sencha touch in the wild

UNSUPPORTED PLATFORMSNokia, bada, Blackberry (not any more actually)

Page 19: Sencha touch in the wild

FIRST EXPERIENCENot good, needs work

Page 20: Sencha touch in the wild

NOKIANative Browser != QT Webkit

Page 21: Sencha touch in the wild

NOKIAdocument.querySelectorAll non existent (use Sizzle)scrolling doesn’t work, most cool things don’t work

Page 22: Sencha touch in the wild

SENCHA TOUCH ON QTDidn’t manage to get it to work properly

Page 23: Sencha touch in the wild

LO-FI VERSION?any point?

Page 24: Sencha touch in the wild

BADAdolphin webkit, works rather well, on par with Android

Page 25: Sencha touch in the wild

BADA PROBLEMSdrop shadows don’t work, native browser UI, smaller screen

Page 26: Sencha touch in the wild

IMPROVING SENCHA TOUCHlet’s talk about that

Page 27: Sencha touch in the wild

STACKABLE PANELLike UINavigationController on iPhone - manages screen stacks

Page 28: Sencha touch in the wild

GRID COMPONENTvery common pattern

Page 29: Sencha touch in the wild

OPEN SOURCEbut with community submissions

Page 30: Sencha touch in the wild

“REAL” NATIVE LOOK AND FEELthe Cupertino theme helps but...

Page 31: Sencha touch in the wild

“REAL” NATIVE LOOK AND FEELiOS <> Sencha Touch

Page 32: Sencha touch in the wild

LISTENERSwe’ve had problems

(show, activate...)

Page 33: Sencha touch in the wild

INLINE HTML TEMPLATEShard to mantain

Page 34: Sencha touch in the wild

OUR SOLUTIONDedicated folder for templates

Page 35: Sencha touch in the wild

ONE FILE PER TEMPLATESyntax highlighting, easier maintenance

Page 36: Sencha touch in the wild

CODE DECOUPLINGExtract specific components

Page 37: Sencha touch in the wild

ALTERNATIVES?jQuery mobile

Page 38: Sencha touch in the wild

BEST SOLUTIONeven for small applications

Page 39: Sencha touch in the wild

THANK YOU!

Questions?

Tomislav Cartwitter.com/tomislav_car

www.infinumdigital.com