Buildingwith Sencha Touch 2   (introductory)
Luis MerinoApplication Developer & FreelanceCo-Founder of Pistachio in BerlinWeb development projects:• www.cloud9ide.com•...
DEVELOPING IN MOBILE BROWSERS
DEVELOPING IN MOBILE BROWSERS•   Mobile browsers have improved
DEVELOPING IN MOBILE BROWSERS•   Mobile browsers have improved•   Already familiar ground for web developers
DEVELOPING IN MOBILE BROWSERS•   Mobile browsers have improved•   Already familiar ground for web developers•   Easy adapt...
DEVELOPING IN MOBILE BROWSERS•   Mobile browsers have improved•   Already familiar ground for web developers•   Easy adapt...
DEVELOPING IN MOBILE BROWSERS•   Mobile browsers have improved•   Already familiar ground for web developers•   Easy adapt...
“It’s time to get back to innovating in thebrowser space.”~ Brendan Eich
WHY THE JAVASCRIPT WAY...And why Sencha Touch 2
WHY THE JAVASCRIPT WAY...And why Sencha Touch 2•   Allows for fast product cycles
WHY THE JAVASCRIPT WAY...And why Sencha Touch 2•   Allows for fast product cycles•   Easily deployable
WHY THE JAVASCRIPT WAY...And why Sencha Touch 2•   Allows for fast product cycles•   Easily deployable•   Even easier ENV ...
WHY THE JAVASCRIPT WAY...And why Sencha Touch 2•   Allows for fast product cycles•   Easily deployable•   Even easier ENV ...
WHY THE JAVASCRIPT WAY...And why Sencha Touch 2•   Allows for fast product cycles•   Easily deployable•   Even easier ENV ...
WHY THE JAVASCRIPT WAY...And why Sencha Touch 2•   Allows for fast product cycles•   Easily deployable•   Even easier ENV ...
WHY THE JAVASCRIPT WAY...And why Sencha Touch 2•   Allows for fast product cycles•   Easily deployable•   Even easier ENV ...
WHY THE JAVASCRIPT WAY...And why Sencha Touch 2•   Allows for fast product cycles•   Easily deployable•   Even easier ENV ...
INGREDIENTS: QUICK STARTWhat do I need?
INGREDIENTS: QUICK STARTWhat do I need?•   Download the Sencha Touch (1/2 dev preview) SDK.
INGREDIENTS: QUICK STARTWhat do I need?•   Download the Sencha Touch (1/2 dev preview) SDK.•   Install the Ruby GEM for us...
INGREDIENTS: QUICK STARTWhat do I need?•   Download the Sencha Touch (1/2 dev preview) SDK.•   Install the Ruby GEM for us...
INGREDIENTS: QUICK STARTWhat do I need?•   Download the Sencha Touch (1/2 dev preview) SDK.•   Install the Ruby GEM for us...
INGREDIENTS: QUICK STARTWhat do I need?•   Download the Sencha Touch (1/2 dev preview) SDK.•   Install the Ruby GEM for us...
INSIGHTS ON SENCHA TOUCH 2
INSIGHTS ON SENCHA TOUCH 2•   Extended Javascript MVC paradigm
INSIGHTS ON SENCHA TOUCH 2•   Extended Javascript MVC paradigm•   Lots of pre-built UI components which bind to the models
INSIGHTS ON SENCHA TOUCH 2•   Extended Javascript MVC paradigm•   Lots of pre-built UI components which bind to the models...
INSIGHTS ON SENCHA TOUCH 2•   Extended Javascript MVC paradigm•   Lots of pre-built UI components which bind to the models...
HOW WE BUILD YOUREVENTS’ CALENDARThis is simplified for demo purposesImportant stuff to learn here:ui: ‘dark’, ‘light’... y...
High levels of coolness, right?
ALTERNATIVES #1Native VS HTML5: Be careful when choosing
ALTERNATIVES #1Native VS HTML5: Be careful when choosing•   Deciding on what to choose can be a project on its own
ALTERNATIVES #1Native VS HTML5: Be careful when choosing•   Deciding on what to choose can be a project on its own•   Plat...
ALTERNATIVES #2Native VS HTML5: Be careful when choosing
ALTERNATIVES #2Native VS HTML5: Be careful when choosing•   JQuery Mobile & the rest of the gang    •   Doesn’t reach ST2‘...
ALTERNATIVES #2Native VS HTML5: Be careful when choosing•   JQuery Mobile & the rest of the gang    •   Doesn’t reach ST2‘...
SHOWCASING “PISTACHIO”        ...AND...         Q&A
pistachio betarelease date: when it’s done    (but very soon we promise)
LINKS:•   Sencha Touch 2 starting guide    http://docs.sencha.com/touch/2-0/#!/guide•   PhoneGap    http://phonegap.com•  ...
Building Pistachio with Sencha Touch 2 (introductory)
Upcoming SlideShare
Loading in...5
×

Building Pistachio with Sencha Touch 2 (introductory)

2,832

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,832
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • Hi, my name is Luis Merino. For the past three months I’ve been building a mobile application called Pistachio. Yes, like the nut...\n\nTo give you a point of reference, the product that I and my team are building is basically a social calendar of events that includes people around you and also the stuff that you are interested about based on location. For example, if you are fan of Radiohead, you might want to know when they come to play in Berlin, or maybe you like to stay tuned to some meet-ups your friends are creating, like BerlinJS.\n\nThe interesting part about about this project is that is “almost” entirely built using Javascript and is running on a mobile device. \n\nAnd I’ll run the demo of the application, but first I want to show you a little about how to build it.\n
  • Mobile browsers are getting faster: they are shipping faster Javascript engines, more HTML5 support and they become more stable with each release.\n\nLearning a new set of tools and new programming language takes time.\n\nIf you are a web developer the same old gang is available for development: the mix of HTML5, CSS and Javascript.\n
  • Mobile browsers are getting faster: they are shipping faster Javascript engines, more HTML5 support and they become more stable with each release.\n\nLearning a new set of tools and new programming language takes time.\n\nIf you are a web developer the same old gang is available for development: the mix of HTML5, CSS and Javascript.\n
  • Mobile browsers are getting faster: they are shipping faster Javascript engines, more HTML5 support and they become more stable with each release.\n\nLearning a new set of tools and new programming language takes time.\n\nIf you are a web developer the same old gang is available for development: the mix of HTML5, CSS and Javascript.\n
  • Mobile browsers are getting faster: they are shipping faster Javascript engines, more HTML5 support and they become more stable with each release.\n\nLearning a new set of tools and new programming language takes time.\n\nIf you are a web developer the same old gang is available for development: the mix of HTML5, CSS and Javascript.\n
  • Mobile browsers are getting faster: they are shipping faster Javascript engines, more HTML5 support and they become more stable with each release.\n\nLearning a new set of tools and new programming language takes time.\n\nIf you are a web developer the same old gang is available for development: the mix of HTML5, CSS and Javascript.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "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

    ×