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

Building Cross Platform Mobile Apps with Sencha...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
Agents CLI と Gemini Enterprise Agent Platform で マルチエージェント開発が楽しくなる！
Avatar for Kaz kaz1437
0
140
ハーネスエンジニアリングの概要と設計思想
Avatar for sergicalsix sergicalsix
9
5.3k
AgentCore Managed Harness を使ってみよう
Avatar for やくも yakumo
2
220
Rapid Start: Faster Internet Connections, with Ruby's Help
Avatar for kazuho kazuho
2
760
Claude Code を安全に使おう勉強会 / Claude Code Security Basics
Avatar for MasahiroKawahara masahirokawahara
12
36k
PicoRuby as a Multi-VM Operating System
Avatar for Katsuhiko Kageyama kishima
1
200
Practical TypeProf: Lessons from Analyzing Optcarrot
Avatar for Yusuke Endoh mame
0
1k
M5Stack CoreS3とZephyr(RTOS)で Edge AIっぽいことしてみた
Avatar for misoji engineer iotengineer22
0
280
巨大プラットフォームを進化させる「第3のROI」
Avatar for Recruit recruitengineers
PRO
2
1.2k
弁護士ドットコム株式会社 エンジニア職向け 会社紹介資料
Avatar for 弁護士ドットコム bengo4com
1
180
データ定義の混乱と戦う 〜 管理会計と財務会計 〜
Avatar for wonohe wonohe
0
140
AI駆動1on1〜AIに自分を育ててもらう〜
Avatar for Yoshiaki Yasuda yoshiakiyasuda
0
150

Featured

See All Featured
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.3k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
10
37k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
180
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.5k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
170
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
770
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
Claude Code のすすめ
Avatar for schroneko schroneko
67
220k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
96
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k

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!