Sencha Touch for Rubyists

James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com

Sencha Touch

Sencha Touch is......a JavaScript framework for buildingrich mobile apps with web standards

Why should I be buildingrich mobile apps with withQ1 web standards? Q2

Q1: Mobile New users New relationships New contexts New business models New channels“The future of human communication”

Q2: Mobile Web Cross-platform* Existing skills & tools No approval required Native APIs* Easy updates“The next era of the web as we know it” * YMMV!

“HTML5” The Web is Evolving... Documents ApplicationsDeclarative HTML Programmatic DOM Templates APIs URLs ArgumentsRequest/Response Synchronization

Introducing Sencha Touch Let’s start with some demos...

Coming Soon: BlackBerry 6 & Meego

US Mobile Smartphone Traffic 39% iOS Android RIM47% WebOS Winmo Other 7% 3% 2%2% http://metrics.admob.com January 2010

WebKit Rocks!HTML5 + CSS3Transforms, Transitions, & AnimationsCanvasSQLiteCache ManifestGeo-Location

What’s in Sencha Touch?Layouts & componentsTouch events & scrollerData packageMVC frameworkOrientation & animationTheming & icons...and more

ComponentsLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & ﬁeldsToolbars & buttonsHTML5- Audio- Video- GeoLocation

Touch EventsBuilt on native eventsAbstracted for performanceAdditional events- Tap- Double tap- Tap and hold- Swipe- Rotate- Drag & drop

ScrollingMomentum/bounce physicsHardware acceleratedThroughout all components:- Lists- Carousel- Pickers

Data PackageModels, Stores, and Proxies- Associations- Validation- Local & server storageEasily consume web services- JSON/P- XML- YQL

“The Kitchen Sink” http://sencha.com/x/5e

ThemingCSS3, SASS & Compass- Flexible themes- Highly optimized300+ Pre-included iconsRobust AnimationsResolution Independent

Appliﬁcation

Working with the Web

Evolving sites for mobile Views HTML, CSS... Controllers Models

Evolving sites for mobile DesktopSwitcher HTML, CSS... Mobile Controllers Models

Mobile Fuclass ApplicationController < ActionController::Base has_mobile_fuend*.mobile.erbis_mobile_device?in_mobile_view? https://github.com/brendanlim/mobile-fu

An application approach DesktopSwitchers Mobile REST Controllers JSO N Models

The stack of the present req/resUser interface RenderingBusiness logic Storage

The stack of the future User interface syncSecurity Business logicStorage Storage

Let’s build an app

A few other considerations

Thematic consistencyw3c-speak http://mysite.com/posts/123 http://mysite.com/#!/posts/123

Smart detection & user choice“Switch to our desktop site” http://mobiforge.com/

Brand consistency

Mobile devices are di erent Geolocation Telephony Camera MessagingAnd mobile usersare different too!

Good luck!http://sencha.com/products/touch/

James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com

http://lanyrd.com	69
http://twitter.com	2
http://www.techgig.com	2
http://www.mefeedia.com	1

Sencha Touch for Rubyists

by James Pearce

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 74

Statistics

Sencha Touch for Rubyists Presentation Transcript