![INGREDIENTS: QUICK START
What do I need?
• Download the Sencha Touch (1/2 dev preview) SDK.
• Install the Ruby GEM for using Compass [http://compass-style.org/]](https://image.slidesharecdn.com/mobile-apps-javascript-120120050006-phpapp01/75/Building-Pistachio-with-Sencha-Touch-2-introductory-21-2048.jpg)
![INGREDIENTS: QUICK START
What 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*)](https://image.slidesharecdn.com/mobile-apps-javascript-120120050006-phpapp01/75/Building-Pistachio-with-Sencha-Touch-2-introductory-22-2048.jpg)
![INGREDIENTS: QUICK START
What 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](https://image.slidesharecdn.com/mobile-apps-javascript-120120050006-phpapp01/75/Building-Pistachio-with-Sencha-Touch-2-introductory-23-2048.jpg)
![INGREDIENTS: QUICK START
What 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](https://image.slidesharecdn.com/mobile-apps-javascript-120120050006-phpapp01/75/Building-Pistachio-with-Sencha-Touch-2-introductory-24-2048.jpg)
Uploaded byLuis Merino
Building Pistachio with Sencha Touch 2 (introductory)
The document discusses the advantages of developing mobile applications using Sencha Touch 2, highlighting its ability to create fast, deployable applications across multiple platforms, while providing a solid framework for development. It emphasizes the benefits of JavaScript in web development, features extensive pre-built UI components, and offers insights on setting up the development environment. Additionally, it compares native development options with HTML5, noting performance considerations and alternatives like jQuery Mobile.
More Related Content
Similar to Building Pistachio with Sencha Touch 2 (introductory)
Building Pistachio with Sencha Touch 2 (introductory)
- 1. Building with Sencha Touch2 (introductory)
- 2. Luis Merino Application Developer& Freelance Co-Founder of Pistachio in Berlin Web development projects: • www.cloud9ide.com • www.joinpistachio.com • ... twitter: @Rendez email: mail@luismerino.name
- 3. DEVELOPING IN MOBILEBROWSERS
- 4. DEVELOPING IN MOBILEBROWSERS • Mobile browsers have improved
- 5. DEVELOPING IN MOBILEBROWSERS • Mobile browsers have improved • Already familiar ground for web developers
- 6. DEVELOPING IN MOBILEBROWSERS • Mobile browsers have improved • Already familiar ground for web developers • Easy adaptation process for the mobile developer wannabe
- 7. DEVELOPING IN MOBILEBROWSERS • 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. DEVELOPING IN MOBILEBROWSERS • 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. “It’s time toget back to innovating in the browser space.” ~ Brendan Eich
- 10. WHY THE JAVASCRIPTWAY ...And why Sencha Touch 2
- 11. WHY THE JAVASCRIPTWAY ...And why Sencha Touch 2 • Allows for fast product cycles
- 12. WHY THE JAVASCRIPTWAY ...And why Sencha Touch 2 • Allows for fast product cycles • Easily deployable
- 13. WHY THE JAVASCRIPTWAY ...And why Sencha Touch 2 • Allows for fast product cycles • Easily deployable • Even easier ENV set-up
- 14. WHY THE JAVASCRIPTWAY ...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. WHY THE JAVASCRIPTWAY ...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. WHY THE JAVASCRIPTWAY ...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. WHY THE JAVASCRIPTWAY ...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. WHY THE JAVASCRIPTWAY ...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. INGREDIENTS: QUICK START Whatdo I need?
- 20. INGREDIENTS: QUICK START Whatdo I need? • Download the Sencha Touch (1/2 dev preview) SDK.
- 21. INGREDIENTS: QUICK START Whatdo I need? • Download the Sencha Touch (1/2 dev preview) SDK. • Install the Ruby GEM for using Compass [http://compass-style.org/]
- 22. INGREDIENTS: QUICK START Whatdo 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. INGREDIENTS: QUICK START Whatdo 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. INGREDIENTS: QUICK START Whatdo 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. INSIGHTS ON SENCHATOUCH 2
- 26. INSIGHTS ON SENCHATOUCH 2 • Extended Javascript MVC paradigm
- 27. INSIGHTS ON SENCHATOUCH 2 • Extended Javascript MVC paradigm • Lots of pre-built UI components which bind to the models
- 28. INSIGHTS ON SENCHATOUCH 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. INSIGHTS ON SENCHATOUCH 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. HOW WE BUILDYOUR EVENTS’ CALENDAR This is simplified for demo purposes Important stuff to learn here: ui: ‘dark’, ‘light’... you name it. itemTpl: similar to {{mustache}} but with more features
- 31. High levels ofcoolness, right?
- 33. ALTERNATIVES #1 Native VSHTML5: Be careful when choosing
- 34. ALTERNATIVES #1 Native VSHTML5: Be careful when choosing • Deciding on what to choose can be a project on its own
- 35. ALTERNATIVES #1 Native VSHTML5: 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
- 36. ALTERNATIVES #2 Native VSHTML5: Be careful when choosing
- 37. ALTERNATIVES #2 Native VSHTML5: 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
- 38. ALTERNATIVES #2 Native VSHTML5: 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
- 39. SHOWCASING “PISTACHIO” ...AND... Q&A
- 40. pistachio beta release date:when it’s done (but very soon we promise)
- 41. 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
Editor's Notes
- #2 \n
- #3 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
- #4 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
- #5 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
- #6 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
- #7 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
- #8 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
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n