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
AWSを利用する上で知っておきたい名前解決のはなし（10分版）
Avatar for nagisa_53 nagisa53
10
3.3k
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
Avatar for Yusuke Wada wadayusuke
6
3.6k
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
Avatar for TomoyaIwata iwatatomoya
1
1.2k
AlarmKitで実現する 新時代のシステム通知
Avatar for Ryo Tsuzukihashi tsuzuki817
0
200
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
Avatar for cm-usuda-keisuke cmusudakeisuke
1
300
共有と分離 - Compose Multiplatform "本番導入" の設計指針
Avatar for Ryo WATANABE error96num
2
1.3k
IoT x エッジAI - リアルタイ ムAI活用のPoCを今すぐ始め る方法 -
Avatar for niizawat niizawat
0
150
論文紹介「Evaluation gaps in machine learning practice」と、効果検証入門に関する昔話
Avatar for Shinichi Takayanagi stakaya
0
110
Apache Spark もくもく会
Avatar for Takaaki Yayoi taka_aki
0
160
サーバなしで対戦ゲームが作れる！？ 純正フレームワークで実現するリアルタイム通信
Avatar for Ryutaro Okamoto / kuromelon257 kuromelon257
0
110
今日から始めるAWSセキュリティ対策 3ステップでわかる実践ガイド
Avatar for 吉田 岳史 yoshidatakeshi1994
0
150
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
Avatar for KASUYA, Daisuke daiksy
4
1.4k

Featured

See All Featured
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
33
8.8k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.8k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Docker and Python
Avatar for Tania Allard trallard
46
3.6k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.9k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.5k

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!