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 ch...
Q2:     Mobile Web           Cross-platform*         Existing skills & tools         No approval required             Nati...
“HTML5”     The Web is Evolving...   Documents          ApplicationsDeclarative HTML    Programmatic DOM   Templates      ...
Introducing Sencha Touch            Let’s start with some demos...
Coming Soon: BlackBerry 6 & Meego
US Mobile Smartphone Traffic                                     39%                                           iOS        ...
WebKit Rocks!HTML5 + CSS3Transforms, Transitions, & AnimationsCanvasSQLiteCache ManifestGeo-Location
What’s in Sencha Touch?Layouts & componentsTouch events & scrollerData packageMVC frameworkOrientation & animationTheming ...
ComponentsLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5- Audio- Video- G...
Forms
Touch EventsBuilt on native eventsAbstracted for performanceAdditional events- Tap- Double tap- Tap and hold- Swipe- Rotat...
ScrollingMomentum/bounce physicsHardware acceleratedThroughout all components:- Lists- Carousel- Pickers
Data PackageModels, Stores, and Proxies- Associations- Validation- Local & server storageEasily consume web services- JSON...
“The Kitchen Sink”                     http://sencha.com/x/5e
ThemingCSS3, SASS & Compass- Flexible themes- Highly optimized300+ Pre-included iconsRobust AnimationsResolution Independent
Applification
Working with the Web
Evolving sites for mobile   Views               HTML, CSS... Controllers  Models
Evolving sites for mobile           DesktopSwitcher                     HTML, CSS...            Mobile  Controllers       ...
Mobile Fuclass ApplicationController < ActionController::Base    has_mobile_fuend*.mobile.erbis_mobile_device?in_mobile_vi...
An application approach            DesktopSwitchers             Mobile             REST  Controllers         JSO          ...
The stack of the present                 req/resUser interface             RenderingBusiness logic   Storage
The stack of the future                  User interface           syncSecurity          Business logicStorage             ...
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       Messag...
Good luck!http://sencha.com/products/touch/
James Pearce Director, Developer Relations @ jamespearce   jamesp@sencha.com
Sencha Touch for Rubyists
Sencha Touch for Rubyists
Sencha Touch for Rubyists
Sencha Touch for Rubyists
Upcoming SlideShare
Loading in...5
×

Sencha Touch for Rubyists

2,766

Published on

An overview of Sencha Touch, presented to the Silicon Valley Ruby Meetup Group, January 2011

Published in: Technology

Sencha Touch for Rubyists

  1. 1. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com
  2. 2. Sencha Touch
  3. 3. Sencha Touch is......a JavaScript framework for buildingrich mobile apps with web standards
  4. 4. Why should I be buildingrich mobile apps with withQ1 web standards? Q2
  5. 5. Q1: Mobile New users New relationships New contexts New business models New channels“The future of human communication”
  6. 6. 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!
  7. 7. “HTML5” The Web is Evolving... Documents ApplicationsDeclarative HTML Programmatic DOM Templates APIs URLs ArgumentsRequest/Response Synchronization
  8. 8. Introducing Sencha Touch Let’s start with some demos...
  9. 9. Coming Soon: BlackBerry 6 & Meego
  10. 10. US Mobile Smartphone Traffic 39% iOS Android RIM47% WebOS Winmo Other 7% 3% 2%2% http://metrics.admob.com January 2010
  11. 11. WebKit Rocks!HTML5 + CSS3Transforms, Transitions, & AnimationsCanvasSQLiteCache ManifestGeo-Location
  12. 12. What’s in Sencha Touch?Layouts & componentsTouch events & scrollerData packageMVC frameworkOrientation & animationTheming & icons...and more
  13. 13. ComponentsLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5- Audio- Video- GeoLocation
  14. 14. Forms
  15. 15. Touch EventsBuilt on native eventsAbstracted for performanceAdditional events- Tap- Double tap- Tap and hold- Swipe- Rotate- Drag & drop
  16. 16. ScrollingMomentum/bounce physicsHardware acceleratedThroughout all components:- Lists- Carousel- Pickers
  17. 17. Data PackageModels, Stores, and Proxies- Associations- Validation- Local & server storageEasily consume web services- JSON/P- XML- YQL
  18. 18. “The Kitchen Sink” http://sencha.com/x/5e
  19. 19. ThemingCSS3, SASS & Compass- Flexible themes- Highly optimized300+ Pre-included iconsRobust AnimationsResolution Independent
  20. 20. Applification
  21. 21. Working with the Web
  22. 22. Evolving sites for mobile Views HTML, CSS... Controllers Models
  23. 23. Evolving sites for mobile DesktopSwitcher HTML, CSS... Mobile Controllers Models
  24. 24. Mobile Fuclass ApplicationController < ActionController::Base has_mobile_fuend*.mobile.erbis_mobile_device?in_mobile_view? https://github.com/brendanlim/mobile-fu
  25. 25. An application approach DesktopSwitchers Mobile REST Controllers JSO N Models
  26. 26. The stack of the present req/resUser interface RenderingBusiness logic Storage
  27. 27. The stack of the future User interface syncSecurity Business logicStorage Storage
  28. 28. Let’s build an app
  29. 29. A few other considerations
  30. 30. Thematic consistencyw3c-speak http://mysite.com/posts/123 http://mysite.com/#!/posts/123
  31. 31. Smart detection & user choice“Switch to our desktop site” http://mobiforge.com/
  32. 32. Brand consistency
  33. 33. Mobile devices are di erent Geolocation Telephony Camera MessagingAnd mobile usersare different too!
  34. 34. Good luck!http://sencha.com/products/touch/
  35. 35. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×