Building cross-platform mobile apps                     with your existing chopsRefresh Austin - April 12, 2011
INTRO
INTRO• Who   am I?
INTRO• Who   am I?• Why   am I giving this talk?
INTRO• Who    am I?• Why   am I giving this talk?• What   should you take away from this presentation?
INTRO• Who     am I?• Why     am I giving this talk?• What     should you take away from this presentation?• This   talk i...
one thing
I don’t claim to be a ninja    with this stuff yet
if I am a ninja, it’s more like this
Another thing before we start...
Native apps are better. I know.
Native apps are better. I know.They are just not practical for everyproject and budget.
Sencha Touch
SENCHA TOUCH
SENCHA TOUCH• Touch   gestures and scrolling physics built in
SENCHA TOUCH• Touch   gestures and scrolling physics built in• Components     (lots of them)
SENCHA TOUCH• Touch   gestures and scrolling physics built in• Components     (lots of them)• Lots   of ways to hook into ...
SENCHA TOUCH• Touch   gestures and scrolling physics built in• Components     (lots of them)• Lots   of ways to hook into ...
USING SENCHA
USING SENCHA• You   will need to learn a bit about Ext.js
USING SENCHA• You   will need to learn a bit about Ext.js• Do    some reading on Panels and Layouts (URL later)
USING SENCHA• You   will need to learn a bit about Ext.js• Do    some reading on Panels and Layouts (URL later)• Panelsand...
SENCHA THEMES
SENCHA THEMES• Easy   to change the overall appearance
SENCHA THEMES• Easy   to change the overall appearance• Lots   of parameters and functions to modify Look and Feel
SENCHA THEMES• Easy   to change the overall appearance• Lots   of parameters and functions to modify Look and Feel• Comple...
SENCHA THEMES• Easy   to change the overall appearance• Lots   of parameters and functions to modify Look and Feel• Comple...
SENCHA THEMES• Easy   to change the overall appearance• Lots   of parameters and functions to modify Look and Feel• Comple...
Let’s take Sencha out for a spin
jQuery Mobile
JQUERY MOBILE
JQUERY MOBILE• HTML   5 based
JQUERY MOBILE• HTML     5 based• Far   fewer components than Sencha
JQUERY MOBILE• HTML     5 based• Far   fewer components than Sencha• No    data features like Sencha
JQUERY MOBILE• HTML     5 based• Far   fewer components than Sencha• No    data features like Sencha• Much    smaller than...
JQUERY MOBILE• HTML     5 based• Far   fewer components than Sencha• No    data features like Sencha• Much    smaller than...
JQUERY MOBILE• HTML     5 based• Far   fewer components than Sencha• No    data features like Sencha• Much    smaller than...
Let’s take jQuery Mobile out for a spin
PhoneGap
PHONEGAP• Putsa “wrapper” around your HTML5 apps so that they can be placed on the various App Stores• Allows   you to acc...
Let’s take Phonegap out for a spin
A final comment:Sencha, jQuery Mobile are not the onlyoptions for cross-platform mobile apps...
Thanks for listening!The links used in this presentation can be found at:http://delicious.com/2sidesdesign/refreshmobileVi...
Creating cross-platform mobile apps
Creating cross-platform mobile apps
Creating cross-platform mobile apps
Creating cross-platform mobile apps
Upcoming SlideShare
Loading in …5
×

Creating cross-platform mobile apps

1,554 views

Published on

Here is the deck for the "Creating Cross Platform Mobile Apps" presentation I gave at the Refresh Austin meeting on Apr 12, 2011

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,554
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
49
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • 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
  • 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
  • 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
  • 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
  • \\\n
  • \\\n
  • \\\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\ntheming - icons, animations \n\n\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\ntheming - icons, animations \n\n\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\ntheming - icons, animations \n\n\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\ntheming - icons, animations \n\n\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • 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
  • 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
  • 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
  • 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
  • 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
  • make sure to show \n
  • \n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • make sure to show the data providers and transitionstransitions are fade, flip, pop, slide, slideup, slidedown\n
  • \n
  • has models, stores, proxies\nvalications, associations\nhooks to consume json/p, xml, yql\n
  • \n
  • there are more ways to do this stuff. we talked about 2 ways I am most familiar with. \n
  • \n
  • Creating cross-platform mobile apps

    1. 1. Building cross-platform mobile apps with your existing chopsRefresh Austin - April 12, 2011
    2. 2. INTRO
    3. 3. INTRO• Who am I?
    4. 4. INTRO• Who am I?• Why am I giving this talk?
    5. 5. INTRO• Who am I?• Why am I giving this talk?• What should you take away from this presentation?
    6. 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. 7. one thing
    8. 8. I don’t claim to be a ninja with this stuff yet
    9. 9. if I am a ninja, it’s more like this
    10. 10. Another thing before we start...
    11. 11. Native apps are better. I know.
    12. 12. Native apps are better. I know.They are just not practical for everyproject and budget.
    13. 13. Sencha Touch
    14. 14. SENCHA TOUCH
    15. 15. SENCHA TOUCH• Touch gestures and scrolling physics built in
    16. 16. SENCHA TOUCH• Touch gestures and scrolling physics built in• Components (lots of them)
    17. 17. SENCHA TOUCH• Touch gestures and scrolling physics built in• Components (lots of them)• Lots of ways to hook into data
    18. 18. SENCHA TOUCH• Touch gestures and scrolling physics built in• Components (lots of them)• Lots of ways to hook into data• Powerful theming
    19. 19. USING SENCHA
    20. 20. USING SENCHA• You will need to learn a bit about Ext.js
    21. 21. USING SENCHA• You will need to learn a bit about Ext.js• Do some reading on Panels and Layouts (URL later)
    22. 22. 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
    23. 23. SENCHA THEMES
    24. 24. SENCHA THEMES• Easy to change the overall appearance
    25. 25. SENCHA THEMES• Easy to change the overall appearance• Lots of parameters and functions to modify Look and Feel
    26. 26. SENCHA THEMES• Easy to change the overall appearance• Lots of parameters and functions to modify Look and Feel• Complete set of png-based icons
    27. 27. 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
    28. 28. 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
    29. 29. Let’s take Sencha out for a spin
    30. 30. jQuery Mobile
    31. 31. JQUERY MOBILE
    32. 32. JQUERY MOBILE• HTML 5 based
    33. 33. JQUERY MOBILE• HTML 5 based• Far fewer components than Sencha
    34. 34. JQUERY MOBILE• HTML 5 based• Far fewer components than Sencha• No data features like Sencha
    35. 35. JQUERY MOBILE• HTML 5 based• Far fewer components than Sencha• No data features like Sencha• Much smaller than Sencha
    36. 36. 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
    37. 37. 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
    38. 38. Let’s take jQuery Mobile out for a spin
    39. 39. PhoneGap
    40. 40. 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
    41. 41. Let’s take Phonegap out for a spin
    42. 42. A final comment:Sencha, jQuery Mobile are not the onlyoptions for cross-platform mobile apps...
    43. 43. Thanks for listening!The links used in this presentation can be found at:http://delicious.com/2sidesdesign/refreshmobileVisit our site:http://2sidesdesignstudio.comFollow us on Twitter:@2sidesdesign

    ×