Downloaded 49 times
Uploaded byRob Jones
Creating cross-platform mobile apps
- Sencha Touch allows building cross-platform mobile apps using existing web development skills like HTML, CSS, and JavaScript. It includes touch gestures, scrolling physics, many reusable components, and powerful ways to integrate data. jQuery Mobile is also HTML5-based but has fewer components and no data features. PhoneGap packages the apps so they can be deployed to app stores and access native device features.
More Related Content
Similar to Creating cross-platform mobile apps
Creating cross-platform mobile apps
- 1. Building cross-platform mobileapps with your existing chops Refresh Austin - April 12, 2011
- 2.
- 3. INTRO • Who am I?
- 4. INTRO • Who am I? • Why am I giving this talk?
- 5. INTRO • Who am I? • Why am I giving this talk? • What should you take away from this presentation?
- 6. INTRO • Who am I? • Why am I giving this talk? • What should you take away from this presentation? • This talk is about mobile apps, not mobile websites That being said, I would love to hear someone volunteer to talk about Responsive web design at an upcoming meeting
- 7.
- 9. I don’t claimto be a ninja with this stuff yet
- 11. if I ama ninja, it’s more like this
- 13. Another thing beforewe start...
- 15. Native apps arebetter. I know.
- 16. Native apps arebetter. I know. They are just not practical for every project and budget.
- 17.
- 18.
- 19. SENCHA TOUCH • Touch gestures and scrolling physics built in
- 20. SENCHA TOUCH • Touch gestures and scrolling physics built in • Components (lots of them)
- 21. SENCHA TOUCH • Touch gestures and scrolling physics built in • Components (lots of them) • Lots of ways to hook into data
- 22. SENCHA TOUCH • Touch gestures and scrolling physics built in • Components (lots of them) • Lots of ways to hook into data • Powerful theming
- 23.
- 24. USING SENCHA • You will need to learn a bit about Ext.js
- 25. USING SENCHA • You will need to learn a bit about Ext.js • Do some reading on Panels and Layouts (URL later)
- 26. USING SENCHA • You will need to learn a bit about Ext.js • Do some reading on Panels and Layouts (URL later) • Panelsand layout concepts are not CSS-like and the syntax can get fugly
- 27.
- 28. SENCHA THEMES • Easy to change the overall appearance
- 29. SENCHA THEMES • Easy to change the overall appearance • Lots of parameters and functions to modify Look and Feel
- 30. SENCHA THEMES • Easy to change the overall appearance • Lots of parameters and functions to modify Look and Feel • Complete set of png-based icons
- 31. SENCHA THEMES • Easy to change the overall appearance • Lots of parameters and functions to modify Look and Feel • Complete set of png-based icons • Uses SASS / Compass to generate CSS
- 32. SENCHA THEMES • Easy to change the overall appearance • Lots of parameters and functions to modify Look and Feel • Complete set of png-based icons • Uses SASS / Compass to generate CSS • Unfortunately, not well documented to date I will give you a link to some information I’ve found at the end of the presentation
- 33. Let’s take Senchaout for a spin
- 34.
- 35.
- 36. JQUERY MOBILE • HTML 5 based
- 37. JQUERY MOBILE • HTML 5 based • Far fewer components than Sencha
- 38. JQUERY MOBILE • HTML 5 based • Far fewer components than Sencha • No data features like Sencha
- 39. JQUERY MOBILE • HTML 5 based • Far fewer components than Sencha • No data features like Sencha • Much smaller than Sencha
- 40. JQUERY MOBILE • HTML 5 based • Far fewer components than Sencha • No data features like Sencha • Much smaller than Sencha • CSS-based layouts - much easier to start with
- 41. JQUERY MOBILE • HTML 5 based • Far fewer components than Sencha • No data features like Sencha • Much smaller than Sencha • CSS-based layouts - much easier to start with • Easy to theme
- 42. Let’s take jQueryMobile out for a spin
- 43.
- 44. PHONEGAP • Putsa “wrapper”around your HTML5 apps so that they can be placed on the various App Stores • Allows you to access native features of phone • Up to recently, you needed to have the SDK installed for each platform you want to target, and follow a slightly different process for each one • With Phonegap Build, they do all this for you
- 45. Let’s take Phonegapout for a spin
- 46. A final comment: Sencha,jQuery Mobile are not the only options for cross-platform mobile apps...
- 47. Thanks for listening! Thelinks used in this presentation can be found at: http://delicious.com/2sidesdesign/refreshmobile Visit our site: http://2sidesdesignstudio.com Follow us on Twitter: @2sidesdesign
Editor's Notes
- #2 \n
- #3 first site in 1994 - full time 99\nwhy - clients are interested in this - doing native is hard\nwe will look at 2 ways to do this ; there are other ways\nAt the end of this talk, you should have an idea of how you can use HTML 5 based frameworks \nto get cross platform apps out there. \ninvite people to ask\n
- #4 first site in 1994 - full time 99\nwhy - clients are interested in this - doing native is hard\nwe will look at 2 ways to do this ; there are other ways\nAt the end of this talk, you should have an idea of how you can use HTML 5 based frameworks \nto get cross platform apps out there. \ninvite people to ask\n
- #5 first site in 1994 - full time 99\nwhy - clients are interested in this - doing native is hard\nwe will look at 2 ways to do this ; there are other ways\nAt the end of this talk, you should have an idea of how you can use HTML 5 based frameworks \nto get cross platform apps out there. \ninvite people to ask\n
- #6 first site in 1994 - full time 99\nwhy - clients are interested in this - doing native is hard\nwe will look at 2 ways to do this ; there are other ways\nAt the end of this talk, you should have an idea of how you can use HTML 5 based frameworks \nto get cross platform apps out there. \ninvite people to ask\n
- #7 \\\n
- #8 \\\n
- #9 \\\n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\ntheming - icons, animations \n\n\n
- #17 has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\ntheming - icons, animations \n\n\n
- #18 has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\ntheming - icons, animations \n\n\n
- #19 has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\ntheming - icons, animations \n\n\n
- #20 has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
- #21 has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
- #22 has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
- #23 icons, animations\nall css3 based - which is cool because almost all mobile browsers are webkit\ncan do custom style sheets for android, iOS\n\n
- #24 icons, animations\nall css3 based - which is cool because almost all mobile browsers are webkit\ncan do custom style sheets for android, iOS\n\n
- #25 icons, animations\nall css3 based - which is cool because almost all mobile browsers are webkit\ncan do custom style sheets for android, iOS\n\n
- #26 icons, animations\nall css3 based - which is cool because almost all mobile browsers are webkit\ncan do custom style sheets for android, iOS\n\n
- #27 icons, animations\nall css3 based - which is cool because almost all mobile browsers are webkit\ncan do custom style sheets for android, iOS\n\n
- #28 make sure to show \n
- #29 \n
- #30 has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
- #31 has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
- #32 has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
- #33 has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
- #34 has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
- #35 has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
- #36 make sure to show the data providers and transitionstransitions are fade, flip, pop, slide, slideup, slidedown\n
- #37 \n
- #38 has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
- #39 \n
- #40 there are more ways to do this stuff. we talked about 2 ways I am most familiar with. \n
- #41 \n