Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
U.S. Organic Pistachio Market. Analysis and Forecast To 2025
Next

0

Share

Building Pistachio with Sencha Touch 2 (introductory)

Using those technologies to replace native mobile development is still quite new, lead developer for the mobile app "Pistachio" will showcase the app he's building together with his team to display the possibilities that they bring when developing applications for mobile devices.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Building Pistachio with Sencha Touch 2 (introductory)

  1. 1. Buildingwith Sencha Touch 2 (introductory)
  2. 2. Luis MerinoApplication Developer & FreelanceCo-Founder of Pistachio in BerlinWeb development projects:• www.cloud9ide.com• www.joinpistachio.com• ...twitter: @Rendezemail: mail@luismerino.name
  3. 3. DEVELOPING IN MOBILE BROWSERS
  4. 4. DEVELOPING IN MOBILE BROWSERS• Mobile browsers have improved
  5. 5. DEVELOPING IN MOBILE BROWSERS• Mobile browsers have improved• Already familiar ground for web developers
  6. 6. DEVELOPING IN MOBILE BROWSERS• Mobile browsers have improved• Already familiar ground for web developers• Easy adaptation process for the mobile developer wannabe
  7. 7. DEVELOPING IN MOBILE BROWSERS• Mobile browsers have improved• Already familiar ground for web developers• Easy adaptation process for the mobile developer wannabe• Part missing: browsers can’t access the device’s features...
  8. 8. DEVELOPING IN MOBILE BROWSERS• Mobile browsers have improved• Already familiar ground for web developers• Easy adaptation process for the mobile developer wannabe• Part missing: browsers can’t access the device’s features...• ...Can’t they?
  9. 9. “It’s time to get back to innovating in thebrowser space.”~ Brendan Eich
  10. 10. WHY THE JAVASCRIPT WAY...And why Sencha Touch 2
  11. 11. WHY THE JAVASCRIPT WAY...And why Sencha Touch 2• Allows for fast product cycles
  12. 12. WHY THE JAVASCRIPT WAY...And why Sencha Touch 2• Allows for fast product cycles• Easily deployable
  13. 13. WHY THE JAVASCRIPT WAY...And why Sencha Touch 2• Allows for fast product cycles• Easily deployable• Even easier ENV set-up
  14. 14. WHY THE JAVASCRIPT WAY...And why Sencha Touch 2• Allows for fast product cycles• Easily deployable• Even easier ENV set-up• One set of tools to rule them all (iOS, Android, Blackberry)
  15. 15. WHY THE JAVASCRIPT WAY...And why Sencha Touch 2• Allows for fast product cycles• Easily deployable• Even easier ENV set-up• One set of tools to rule them all (iOS, Android, Blackberry)• Plays nice with PhoneGap
  16. 16. WHY THE JAVASCRIPT WAY...And why Sencha Touch 2• Allows for fast product cycles• Easily deployable• Even easier ENV set-up• One set of tools to rule them all (iOS, Android, Blackberry)• Plays nice with PhoneGap• Feels like building an application, instead of HTML5
  17. 17. WHY THE JAVASCRIPT WAY...And why Sencha Touch 2• Allows for fast product cycles• Easily deployable• Even easier ENV set-up• One set of tools to rule them all (iOS, Android, Blackberry)• Plays nice with PhoneGap• Feels like building an application, instead of HTML5• It’s a solid Framework (enterprise-ready), not just a library
  18. 18. WHY THE JAVASCRIPT WAY...And why Sencha Touch 2• Allows for fast product cycles• Easily deployable• Even easier ENV set-up• One set of tools to rule them all (iOS, Android, Blackberry)• Plays nice with PhoneGap• Feels like building an application, instead of HTML5• It’s a solid Framework (enterprise-ready), not just a library• Version 1.0 proved very successful
  19. 19. INGREDIENTS: QUICK STARTWhat do I need?
  20. 20. INGREDIENTS: QUICK STARTWhat do I need?• Download the Sencha Touch (1/2 dev preview) SDK.
  21. 21. INGREDIENTS: QUICK STARTWhat do I need?• Download the Sencha Touch (1/2 dev preview) SDK.• Install the Ruby GEM for using Compass [http://compass-style.org/]
  22. 22. INGREDIENTS: QUICK STARTWhat do I need?• Download the Sencha Touch (1/2 dev preview) SDK.• Install the Ruby GEM for using Compass [http://compass-style.org/]• Start your web server (nginx, apache... *couch*MAMP*couch*)
  23. 23. INGREDIENTS: QUICK STARTWhat do I need?• Download the Sencha Touch (1/2 dev preview) SDK.• Install the Ruby GEM for using Compass [http://compass-style.org/]• Start your web server (nginx, apache... *couch*MAMP*couch*)• Your favorite IDE or code editor
  24. 24. INGREDIENTS: QUICK STARTWhat do I need?• Download the Sencha Touch (1/2 dev preview) SDK.• Install the Ruby GEM for using Compass [http://compass-style.org/]• Start your web server (nginx, apache... *couch*MAMP*couch*)• Your favorite IDE or code editor• Good background and understanding of Javascript
  25. 25. INSIGHTS ON SENCHA TOUCH 2
  26. 26. INSIGHTS ON SENCHA TOUCH 2• Extended Javascript MVC paradigm
  27. 27. INSIGHTS ON SENCHA TOUCH 2• Extended Javascript MVC paradigm• Lots of pre-built UI components which bind to the models
  28. 28. INSIGHTS ON SENCHA TOUCH 2• Extended Javascript MVC paradigm• Lots of pre-built UI components which bind to the models• Uses the Ext.JS 4.1 Class system: • Extensible classes • Integrates its own AMD, “requireJS”. • HTML5 flavours: XHR2, offline storage, localStorage...
  29. 29. INSIGHTS ON SENCHA TOUCH 2• Extended Javascript MVC paradigm• Lots of pre-built UI components which bind to the models• Uses the Ext.JS 4.1 Class system: • Extensible classes • Integrates its own AMD, “requireJS”. • HTML5 flavours: XHR2, offline storage, localStorage...• Lighting-fast theming for the views with SASS & Compass: great looking UI “default” included with the SDK
  30. 30. HOW WE BUILD YOUREVENTS’ CALENDARThis is simplified for demo purposesImportant stuff to learn here:ui: ‘dark’, ‘light’... you name it.itemTpl: similar to {{mustache}} butwith more features
  31. 31. High levels of coolness, right?
  32. 32. ALTERNATIVES #1Native VS HTML5: Be careful when choosing
  33. 33. ALTERNATIVES #1Native VS HTML5: Be careful when choosing• Deciding on what to choose can be a project on its own
  34. 34. ALTERNATIVES #1Native VS HTML5: Be careful when choosing• Deciding on what to choose can be a project on its own• Platforms to compile native apps: Titanium OR Xamarin OR ... • Their platforms seem to be performing better (specially for iPhone :/ ) • Hard to debug, and not easy to deal with UI element normalization • Deployment is highly bound to the respective App Stores
  35. 35. ALTERNATIVES #2Native VS HTML5: Be careful when choosing
  36. 36. ALTERNATIVES #2Native VS HTML5: Be careful when choosing• JQuery Mobile & the rest of the gang • Doesn’t reach ST2‘s point of performance • Personally, the speed of development feels slow • But simpler, and highly compatible if you build a mobile web app
  37. 37. ALTERNATIVES #2Native VS HTML5: Be careful when choosing• JQuery Mobile & the rest of the gang • Doesn’t reach ST2‘s point of performance • Personally, the speed of development feels slow • But simpler, and highly compatible if you build a mobile web app• Personally an alternative: mix of jQuery with Backbone and Underscore.js
  38. 38. SHOWCASING “PISTACHIO” ...AND... Q&A
  39. 39. pistachio betarelease date: when it’s done (but very soon we promise)
  40. 40. LINKS:• Sencha Touch 2 starting guide http://docs.sencha.com/touch/2-0/#!/guide• PhoneGap http://phonegap.com• Titanium http://www.appcelerator.com/products/• JQuery Mobile http://jquerymobile.com

Using those technologies to replace native mobile development is still quite new, lead developer for the mobile app "Pistachio" will showcase the app he's building together with his team to display the possibilities that they bring when developing applications for mobile devices.

Views

Total views

3,262

On Slideshare

0

From embeds

0

Number of embeds

857

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×