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
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