• Save
Building Pistachio with Sencha Touch 2 (introductory)
Upcoming SlideShare
Loading in...5
×
 

Building Pistachio with Sencha Touch 2 (introductory)

on

  • 3,091 views

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 ...

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.

Statistics

Views

Total Views
3,091
Views on SlideShare
2,239
Embed Views
852

Actions

Likes
0
Downloads
0
Comments
0

3 Embeds 852

http://blog.joinpistachio.com 849
http://mightdo.tumblr.com 2
http://www.slashdocs.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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

Building Pistachio with Sencha Touch 2 (introductory) Building Pistachio with Sencha Touch 2 (introductory) Presentation Transcript

  • Buildingwith Sencha Touch 2 (introductory)
  • Luis MerinoApplication Developer & FreelanceCo-Founder of Pistachio in BerlinWeb development projects:• www.cloud9ide.com• www.joinpistachio.com• ...twitter: @Rendezemail: mail@luismerino.name
  • 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 adaptation process for the mobile developer wannabe
  • 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...
  • 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?
  • “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 set-up
  • 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)
  • 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
  • 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
  • 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
  • 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
  • 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 using Compass [http://compass-style.org/]
  • 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*)
  • 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
  • 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
  • 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• Uses the Ext.JS 4.1 Class system: • Extensible classes • Integrates its own AMD, “requireJS”. • HTML5 flavours: XHR2, offline storage, localStorage...
  • 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
  • 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
  • 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• 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
  • 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‘s point of performance • Personally, the speed of development feels slow • But simpler, and highly compatible if you build a mobile web app
  • 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
  • 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• Titanium http://www.appcelerator.com/products/• JQuery Mobile http://jquerymobile.com