Sencha touch in the wild

39
SENCHA TOUCH IN THE WILD

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 of Sencha touch in the wild

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