Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Cross Platform Mobile Apps with Sencha...

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for robsquires robsquires
January 27, 2012
Technology
2
1.1k

Building Cross Platform Mobile Apps with Sencha Touch

A recent talk I did at the inaugural London Sencha Touch User Group.

Avatar for robsquires

robsquires

January 27, 2012
Tweet

Other Decks in Technology

See All in Technology
AI駆動開発を事業のコアに置く
Avatar for 鬼澤輔 tasukuonizawa
1
300
Red Hat OpenStack Services on OpenShift
Avatar for Tatsuya Amemiya tamemiya
0
120
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
13k
OpenShiftでllm-dを動かそう！
Avatar for jpishikawa jpishikawa
0
130
SREじゃなかった僕らがenablingを通じて「SRE実践者」になるまでのリアル / SRE Kaigi 2026
Avatar for AEON aeonpeople
6
2.5k
Bedrock PolicyでAmazon Bedrock Guardrails利用を強制してみた
Avatar for Yudai Jinno yuu551
0
250
Cosmos World Foundation Model Platform for Physical AI
Avatar for Takuya MINAGAWA takmin
0
950
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
15
400k
広告の効果検証を題材にした因果推論の精度検証について
Avatar for ZOZO Developers zozotech
PRO
0
200
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
15
93k
20260208_第66回 コンピュータビジョン勉強会
Avatar for KeiichiIto1978 keiichiito1978
0
180
SRE Enabling戦記 - 急成長する組織にSREを浸透させる戦いの歴史
Avatar for Masaki Ishigaki markie1009
0
140

Featured

See All Featured
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
590
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.8k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.7k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
450
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
55
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
200
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
150
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.1k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.3M
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
56

Transcript

  1. Building Cross Platform Mobile Apps with Sencha Touch! Rob Squires!

    Jan 2012!

  2. Rob Squires! Developer @uv_d! LAMP, Sencha! NodeJS , CouchDB! @rob_squires!

  3. Today! Basics of Sencha Touch! ! Look at cross platform

    challenges! ! Share some code! !

  4. Context!

  5. Mobile Betting App! Web service driven! White labeled! Deployed cross-platform!

    Web! iOS! Android!

  6. Vanilla Sencha Touch App! app.js!

  7. Vanilla Sencha Touch App! controller/Main.js!

  8. Vanilla Sencha Touch App! view/Main.js!

  9. Approaching Cross Platform!

  10. Breakdown! Platform! Web! Android! iOS! Blackberry! others…! Form Factor! Phone!

    Tablet! others…!

  11. Challenges! Native Languages + Deployment! Device APIs! UI Design Patterns!

    Duplication!

  12. Challenges! Native Languages + Deployment! Device APIs! UI Design Patterns!

    Duplication!

  13. Device APIs!

  14. Device APIs! HTML5 + Javascript! ! ! iOS! ! !

    Android!

  15. Phonegap! Proxies native code! Javascript navigator & document objects! Plugins!

    Kick-starts a web view!

  16. Vanilla ST + Phonegap! http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap! ??!

  17. Vanilla ST + Phonegap! controller/Main.js!

  18. UI Design Patterns!

  19. Interface Guidelines! iOS Human Interface Guidelines! Android Design Patterns! Others..!

    ! Designing Mobile Interfaces - O’Reilly!

  20. Great resource! www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design!

  21. Look & Feel - Differences!

  22. Look & Feel - Facebook! http://www.zdnet.com/blog/facebook/facebook-for-android- passes-facebook-for-iphone-dau/6440

  23. Look & Feel in ST! Theming with CSS! Very effective!

    Vimeo Awards! Chefkoch.de!

  24. Look & Feel in ST! Theming with CSS! Very effective!

  25. Look & Feel in ST! ios   android   web

      app   app.css   Sass! (.scss)! Juicy! CSS!! Compass! sencha  

  26. Interaction! Back buttons! Contextual Controls!

  27. Back’s not cross platform!

  28. Back in ST! controller/Main.js!

  29. Back again! Abstract UI events! Starting with HW : “App-back”

    controller/Main.js!

  30. Back again! view/Main.js!

  31. Back again! Device.js!

  32. Contextual Controls! iOS! ! Android!

  33. Contextual Controls - Evernote! iOS App! Android App!

  34. Contextual Controls in ST! view/Main.js! ouch!!

  35. Platform specific views! Split view components based on platform!

  36. Ext.Loader! Define! ! Require! ! Create!

  37. Summing Up! Cross platform could be endless! ! Choose your

    APIs! ! Write platform specific code in context! !

  38. Thanks! Time for questions?! ! @rob_squires! @uv_d!