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

Building Cross Platform Mobile Apps with Sencha...

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
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
2.7k
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
Avatar for ないとー bwkw
2
770
30万人の同時アクセスに耐えたい！新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
Avatar for GENDA genda
1
130
ブロックテーマでサイトをリニューアルした話 / 2026-01-31 Kansai WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
360
2人で作ったAIダッシュボードが、開発組織の次の一手を照らした話― Cursor × SpecKit × 可視化の実践 ―　Qiita AI Summit
Avatar for NOBORU ITOU noalisaai
1
350
クレジットカード決済基盤を支えるSRE - 厳格な監査とSRE運用の両立 (SRE Kaigi 2026)
Avatar for capytan capytan
6
1.8k
Frontier Agents (Kiro autonomous agent / AWS Security Agent / AWS DevOps Agent) の紹介
Avatar for msysh msysh
3
130
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
Avatar for Rocket Martue rocketmartue
1
260
3分でわかる！新機能 AWS Transform custom
Avatar for sato4mi sato4mi
1
320
Kubecon NA 2025: DRA 関連の Recap と社内 GPU 基盤での課題
Avatar for Yohei Kevin Namba kevin_namba
0
110
What happened to RubyGems and what can we learn?
Avatar for Mike McQuaid mikemcquaid
0
200
セキュリティ はじめの一歩
Avatar for nikinusu nikinusu
0
1.4k

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.1k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.3k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
160
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon szymonslowik
1
210
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
0
3.4k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
It's Worth the Effort
Avatar for 3n 3n
188
29k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.2k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
2
230
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
480

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!