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
1.1k
2

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

Other Decks in Technology

See All in Technology
AIAU_UMEMOGU_ninomiya_slide
Avatar for ninomiya ninomiya_ii
0
240
AWS Security Agent といっしょに脅威モデリングをやってみよう
Avatar for amarelo_n24 amarelo_n24
1
180
いまさら聞けない「仕様駆動開発入門」 〜AI活用時代の開発プロセスを考える〜
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
2
160
FPGAの開発コンペでZephyrを使ってみた
Avatar for misoji engineer iotengineer22
0
150
【Cyber-sec+】経営層を"動かす"ための考え方
Avatar for Hisashi Hibino hssh2_bin
0
200
When Platform Engineering Meets GenAI
Avatar for suci sucitw
0
130
AWS Security Hub CSPMの成功・失敗体験
Avatar for cm-usuda-keisuke cmusudakeisuke
0
280
AIチャット検索改善の3週間
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
2
140
ザ・データベース、MySQL ～ OSC 2026 Sendai ～
Avatar for sakaik sakaik
0
140
AIネイティブな開発のサプライチェーンリスク対策 〜激動の開発現場でリスクに立ち向かう〜【ZennFes】
Avatar for サイバーセキュリティクラウド cscengineer
PRO
2
140
Chainlitで作るお手軽チャットUI
Avatar for tomo ynt0485
0
280
スタートアップにAmazon EKSは早すぎる？ マルチプロダクト戦略を加速する Platform Engineeringの実践 / Is Amazon EKS Too Soon for Startups? Practical Platform Engineering to Accelerate a Multi-Product Strategy
Avatar for elmo elmodev09
1
460

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
180
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
220
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
800
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
290
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
160
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.5k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
870
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
350
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
360
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k

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!