Sencha touch in the wild

Post on 26-Jun-2015

1,618 views 2 download

Tags:

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

SENCHA TOUCH IN THE WILD

INFINUMSoftware developmentMobile Development

Ruby on RailsAndroidiPhoneiPad

www.infinumdigital.com

WON $100.000Samsung Global Developer Challenge

MY BACK HISTORY

Know who you’re dealing with

Business20%

Development60%

Design20%

STUFF WE INVENTED IN EARLY 2010

Templating

Layouting

Proxies

Dataviews

Event Handling

mobile web app development

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

VC FUNDING$14M

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

WHAT WE LOVE ABOUT SENCHA

TOUCH

XTemplateLearning

curve

Listeners

Layout Managers

Data Stores

IPHONE & IPADgenerally works fine

ANDROIDTop level (HDPI) Androids work almost fine

WHAT’S CAUSING

PERFORMANCE ISSUES?

Scrolling

AnimationsGradients

Rounded cornersBunch of elements

Input elements

COMMUNICATE TO CLIENTS“It won’t work everywhere”

ANDROID SEGMENTATION

High Density (HDPI)480x854

Medium Density (MDPI)320x480

Low Density (LDPI)240x320

~Android 2.2

BEWAREiPhone 3G, crappy Androids

(low CPU, lack of GPU acceleration)

ANDROID VERSIONS>=2.1 95%

KINETIC SCROLLING & BOUNCEturn it off if scrolling is slow

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

FIRST EXPERIENCENot good, needs work

NOKIANative Browser != QT Webkit

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

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

LO-FI VERSION?any point?

BADAdolphin webkit, works rather well, on par with Android

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

IMPROVING SENCHA TOUCHlet’s talk about that

STACKABLE PANELLike UINavigationController on iPhone - manages screen stacks

GRID COMPONENTvery common pattern

OPEN SOURCEbut with community submissions

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

“REAL” NATIVE LOOK AND FEELiOS <> Sencha Touch

LISTENERSwe’ve had problems

(show, activate...)

INLINE HTML TEMPLATEShard to mantain

OUR SOLUTIONDedicated folder for templates

ONE FILE PER TEMPLATESyntax highlighting, easier maintenance

CODE DECOUPLINGExtract specific components

ALTERNATIVES?jQuery mobile

BEST SOLUTIONeven for small applications

THANK YOU!

Questions?

Tomislav Cartwitter.com/tomislav_car

www.infinumdigital.com