SlideShare ist ein Scribd-Unternehmen logo
1 von 41
Building
with Sencha Touch 2
   (introductory)
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
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 the
browser 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 START
What do I need?
INGREDIENTS: QUICK START
What do I need?



•   Download the Sencha Touch (1/2 dev preview) SDK.
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/]
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*)
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
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
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 YOUR
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
High levels of coolness, right?
Building Pistachio with Sencha Touch 2 (introductory)
ALTERNATIVES #1
Native VS HTML5: Be careful when choosing
ALTERNATIVES #1
Native VS HTML5: Be careful when choosing

•   Deciding on what to choose can be a project on its own
ALTERNATIVES #1
Native 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 #2
Native VS HTML5: Be careful when choosing
ALTERNATIVES #2
Native 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 #2
Native 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 beta
release 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

Weitere ähnliche Inhalte

Was ist angesagt?

Beginning iOS Development with Swift
Beginning iOS Development with SwiftBeginning iOS Development with Swift
Beginning iOS Development with SwiftTurnToTech
 
Experiences building apps with React Native @DomCode 2016
Experiences building apps with React Native @DomCode 2016Experiences building apps with React Native @DomCode 2016
Experiences building apps with React Native @DomCode 2016Adrian Philipp
 
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...Codemotion
 
DeveloperDeveloperDeveloper! Sydney 2012
DeveloperDeveloperDeveloper! Sydney 2012DeveloperDeveloperDeveloper! Sydney 2012
DeveloperDeveloperDeveloper! Sydney 2012kittenthecat
 
iOS Build Infrastructure at Square
iOS Build Infrastructure at SquareiOS Build Infrastructure at Square
iOS Build Infrastructure at SquareMichael Tauraso
 
iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 7)
iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 7)iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 7)
iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 7)Jonathan Engelsma
 
React native in the wild @ Codemotion 2016 in Rome
React native in the wild @ Codemotion 2016 in RomeReact native in the wild @ Codemotion 2016 in Rome
React native in the wild @ Codemotion 2016 in RomeAlessandro Nadalin
 
Building Apps with React Native - Lessons Learned
Building Apps with React Native - Lessons LearnedBuilding Apps with React Native - Lessons Learned
Building Apps with React Native - Lessons LearnedAlexandra Anghel
 
Experiences building apps with React Native @UtrechtJS May 2016
Experiences building apps with React Native @UtrechtJS May 2016Experiences building apps with React Native @UtrechtJS May 2016
Experiences building apps with React Native @UtrechtJS May 2016Adrian Philipp
 
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Ryan Cuprak
 
From zero to hero with React Native!
From zero to hero with React Native!From zero to hero with React Native!
From zero to hero with React Native!Commit University
 
Retour d’expérience sur Couchbase par James Nocentini
Retour d’expérience sur Couchbase par James NocentiniRetour d’expérience sur Couchbase par James Nocentini
Retour d’expérience sur Couchbase par James NocentiniCocoaHeads France
 
Creating books app with react native
Creating books app with react nativeCreating books app with react native
Creating books app with react nativeAli Sa'o
 
Ten Ways to Improve Your EE Development
Ten Ways to Improve Your EE DevelopmentTen Ways to Improve Your EE Development
Ten Ways to Improve Your EE Developmentryanirelan
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react nativeModusJesus
 
Optimizing React Native views for pre-animation
Optimizing React Native views for pre-animationOptimizing React Native views for pre-animation
Optimizing React Native views for pre-animationModusJesus
 

Was ist angesagt? (20)

Beginning iOS Development with Swift
Beginning iOS Development with SwiftBeginning iOS Development with Swift
Beginning iOS Development with Swift
 
Experiences building apps with React Native @DomCode 2016
Experiences building apps with React Native @DomCode 2016Experiences building apps with React Native @DomCode 2016
Experiences building apps with React Native @DomCode 2016
 
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...
 
DeveloperDeveloperDeveloper! Sydney 2012
DeveloperDeveloperDeveloper! Sydney 2012DeveloperDeveloperDeveloper! Sydney 2012
DeveloperDeveloperDeveloper! Sydney 2012
 
iOS Build Infrastructure at Square
iOS Build Infrastructure at SquareiOS Build Infrastructure at Square
iOS Build Infrastructure at Square
 
iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 7)
iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 7)iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 7)
iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 7)
 
React native in the wild @ Codemotion 2016 in Rome
React native in the wild @ Codemotion 2016 in RomeReact native in the wild @ Codemotion 2016 in Rome
React native in the wild @ Codemotion 2016 in Rome
 
Building Apps with React Native - Lessons Learned
Building Apps with React Native - Lessons LearnedBuilding Apps with React Native - Lessons Learned
Building Apps with React Native - Lessons Learned
 
Unit testing
Unit testingUnit testing
Unit testing
 
Intro to Java Technology
Intro to Java TechnologyIntro to Java Technology
Intro to Java Technology
 
Experiences building apps with React Native @UtrechtJS May 2016
Experiences building apps with React Native @UtrechtJS May 2016Experiences building apps with React Native @UtrechtJS May 2016
Experiences building apps with React Native @UtrechtJS May 2016
 
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
 
From zero to hero with React Native!
From zero to hero with React Native!From zero to hero with React Native!
From zero to hero with React Native!
 
Retour d’expérience sur Couchbase par James Nocentini
Retour d’expérience sur Couchbase par James NocentiniRetour d’expérience sur Couchbase par James Nocentini
Retour d’expérience sur Couchbase par James Nocentini
 
Why Everyone else writes bad code
Why Everyone else writes bad codeWhy Everyone else writes bad code
Why Everyone else writes bad code
 
Ten years later
Ten years laterTen years later
Ten years later
 
Creating books app with react native
Creating books app with react nativeCreating books app with react native
Creating books app with react native
 
Ten Ways to Improve Your EE Development
Ten Ways to Improve Your EE DevelopmentTen Ways to Improve Your EE Development
Ten Ways to Improve Your EE Development
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react native
 
Optimizing React Native views for pre-animation
Optimizing React Native views for pre-animationOptimizing React Native views for pre-animation
Optimizing React Native views for pre-animation
 

Andere mochten auch

U.S. Organic Pistachio Market. Analysis and Forecast To 2025
 U.S. Organic Pistachio Market. Analysis and Forecast To 2025 U.S. Organic Pistachio Market. Analysis and Forecast To 2025
U.S. Organic Pistachio Market. Analysis and Forecast To 2025IndexBox Marketing
 
Health Benefits of the Pistachio
Health Benefits of the PistachioHealth Benefits of the Pistachio
Health Benefits of the PistachioKami Hoss
 
Schedule almond blossom eng ita_2017
Schedule almond blossom eng ita_2017Schedule almond blossom eng ita_2017
Schedule almond blossom eng ita_2017Natale Giordano
 
Pistachio Trends & Outlook
Pistachio Trends & OutlookPistachio Trends & Outlook
Pistachio Trends & OutlookRyan Mekech
 
Almond, Almond’s Developmental Approach to Political System
Almond, Almond’s Developmental Approach to Political SystemAlmond, Almond’s Developmental Approach to Political System
Almond, Almond’s Developmental Approach to Political SystemMahrukh Cheema
 
Almond Presentation.pptx
Almond Presentation.pptxAlmond Presentation.pptx
Almond Presentation.pptxOER Commons
 
Advanced production technology of almond
Advanced  production technology of almondAdvanced  production technology of almond
Advanced production technology of almondPawan Nagar
 

Andere mochten auch (9)

U.S. Organic Pistachio Market. Analysis and Forecast To 2025
 U.S. Organic Pistachio Market. Analysis and Forecast To 2025 U.S. Organic Pistachio Market. Analysis and Forecast To 2025
U.S. Organic Pistachio Market. Analysis and Forecast To 2025
 
Health Benefits of the Pistachio
Health Benefits of the PistachioHealth Benefits of the Pistachio
Health Benefits of the Pistachio
 
Schedule almond blossom eng ita_2017
Schedule almond blossom eng ita_2017Schedule almond blossom eng ita_2017
Schedule almond blossom eng ita_2017
 
Pistachio Trends & Outlook
Pistachio Trends & OutlookPistachio Trends & Outlook
Pistachio Trends & Outlook
 
Almond, Almond’s Developmental Approach to Political System
Almond, Almond’s Developmental Approach to Political SystemAlmond, Almond’s Developmental Approach to Political System
Almond, Almond’s Developmental Approach to Political System
 
Twitter for Business 101: TwtrconSF
Twitter for Business 101: TwtrconSFTwitter for Business 101: TwtrconSF
Twitter for Business 101: TwtrconSF
 
Almond
AlmondAlmond
Almond
 
Almond Presentation.pptx
Almond Presentation.pptxAlmond Presentation.pptx
Almond Presentation.pptx
 
Advanced production technology of almond
Advanced  production technology of almondAdvanced  production technology of almond
Advanced production technology of almond
 

Ähnlich wie Building Pistachio with Sencha Touch 2 (introductory)

WHAT / WHY / HOW WE’RE ENGINEERING AT SMARTSTUDY (English)
WHAT / WHY / HOW WE’RE ENGINEERING AT SMARTSTUDY (English)WHAT / WHY / HOW WE’RE ENGINEERING AT SMARTSTUDY (English)
WHAT / WHY / HOW WE’RE ENGINEERING AT SMARTSTUDY (English)Hyun-woo Park
 
Webview: The fifth element
Webview: The fifth elementWebview: The fifth element
Webview: The fifth elementFernando Cejas
 
Build software like a bag of marbles, not a castle of LEGO®
Build software like a bag of marbles, not a castle of LEGO®Build software like a bag of marbles, not a castle of LEGO®
Build software like a bag of marbles, not a castle of LEGO®Hannes Lowette
 
Continuous Integration with Open Source Tools - PHPUgFfm 2014-11-20
Continuous Integration with Open Source Tools - PHPUgFfm 2014-11-20Continuous Integration with Open Source Tools - PHPUgFfm 2014-11-20
Continuous Integration with Open Source Tools - PHPUgFfm 2014-11-20Michael Lihs
 
"WebView, the fifth element" por @fernando_cejas
"WebView, the fifth element" por @fernando_cejas"WebView, the fifth element" por @fernando_cejas
"WebView, the fifth element" por @fernando_cejaswebcat
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteChristian Heilmann
 
Microfrontends Monoreops & Trunkbased based
Microfrontends Monoreops & Trunkbased basedMicrofrontends Monoreops & Trunkbased based
Microfrontends Monoreops & Trunkbased basedVinci Rufus
 
DevOps on AWS: Deep Dive on Continuous Delivery and the AWS Developer Tools
DevOps on AWS: Deep Dive on Continuous Delivery and the AWS Developer ToolsDevOps on AWS: Deep Dive on Continuous Delivery and the AWS Developer Tools
DevOps on AWS: Deep Dive on Continuous Delivery and the AWS Developer ToolsAmazon Web Services
 
Appcelerator Titanium Intro
Appcelerator Titanium IntroAppcelerator Titanium Intro
Appcelerator Titanium IntroNicholas Jansma
 
Liberty: The Right Fit for Micro Profile?
Liberty: The Right Fit for Micro Profile?Liberty: The Right Fit for Micro Profile?
Liberty: The Right Fit for Micro Profile?Dev_Events
 
Building Your App SDK with Swift
Building Your App SDK with SwiftBuilding Your App SDK with Swift
Building Your App SDK with SwiftJordan Yaker
 
DevOps on AWS: Deep Dive on Continuous Delivery and the AWS Developer Tools
DevOps on AWS: Deep Dive on Continuous Delivery and the AWS Developer ToolsDevOps on AWS: Deep Dive on Continuous Delivery and the AWS Developer Tools
DevOps on AWS: Deep Dive on Continuous Delivery and the AWS Developer ToolsAmazon Web Services
 
Building High Quality Android Applications
Building High Quality Android ApplicationsBuilding High Quality Android Applications
Building High Quality Android ApplicationsLeif Janzik
 
Getting Started With Continuous Delivery on AWS - AWS April 2016 Webinar Series
Getting Started With Continuous Delivery on AWS - AWS April 2016 Webinar SeriesGetting Started With Continuous Delivery on AWS - AWS April 2016 Webinar Series
Getting Started With Continuous Delivery on AWS - AWS April 2016 Webinar SeriesAmazon Web Services
 
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateevWin j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateevMihail Mateev
 
Java is evolving rapidly: Maven helps you staying on track
Java is evolving rapidly:  Maven helps you staying on trackJava is evolving rapidly:  Maven helps you staying on track
Java is evolving rapidly: Maven helps you staying on trackArnaud Héritier
 
10 Deployments a day - A brief on extreme release protocols
10 Deployments a day - A brief on extreme release protocols10 Deployments a day - A brief on extreme release protocols
10 Deployments a day - A brief on extreme release protocolsVivek Parihar
 
Boilerplates: Step up your Web Development Process
Boilerplates: Step up your Web Development ProcessBoilerplates: Step up your Web Development Process
Boilerplates: Step up your Web Development ProcessFibonalabs
 
August Webinar - Water Cooler Talks: A Look into a Developer's Workbench
August Webinar - Water Cooler Talks: A Look into a Developer's WorkbenchAugust Webinar - Water Cooler Talks: A Look into a Developer's Workbench
August Webinar - Water Cooler Talks: A Look into a Developer's WorkbenchHoward Greenberg
 
Introduction to Cross Platform Development with Xamarin/ Visual Studio
Introduction to Cross Platform Development with Xamarin/ Visual StudioIntroduction to Cross Platform Development with Xamarin/ Visual Studio
Introduction to Cross Platform Development with Xamarin/ Visual StudioIndyMobileNetDev
 

Ähnlich wie Building Pistachio with Sencha Touch 2 (introductory) (20)

WHAT / WHY / HOW WE’RE ENGINEERING AT SMARTSTUDY (English)
WHAT / WHY / HOW WE’RE ENGINEERING AT SMARTSTUDY (English)WHAT / WHY / HOW WE’RE ENGINEERING AT SMARTSTUDY (English)
WHAT / WHY / HOW WE’RE ENGINEERING AT SMARTSTUDY (English)
 
Webview: The fifth element
Webview: The fifth elementWebview: The fifth element
Webview: The fifth element
 
Build software like a bag of marbles, not a castle of LEGO®
Build software like a bag of marbles, not a castle of LEGO®Build software like a bag of marbles, not a castle of LEGO®
Build software like a bag of marbles, not a castle of LEGO®
 
Continuous Integration with Open Source Tools - PHPUgFfm 2014-11-20
Continuous Integration with Open Source Tools - PHPUgFfm 2014-11-20Continuous Integration with Open Source Tools - PHPUgFfm 2014-11-20
Continuous Integration with Open Source Tools - PHPUgFfm 2014-11-20
 
"WebView, the fifth element" por @fernando_cejas
"WebView, the fifth element" por @fernando_cejas"WebView, the fifth element" por @fernando_cejas
"WebView, the fifth element" por @fernando_cejas
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynote
 
Microfrontends Monoreops & Trunkbased based
Microfrontends Monoreops & Trunkbased basedMicrofrontends Monoreops & Trunkbased based
Microfrontends Monoreops & Trunkbased based
 
DevOps on AWS: Deep Dive on Continuous Delivery and the AWS Developer Tools
DevOps on AWS: Deep Dive on Continuous Delivery and the AWS Developer ToolsDevOps on AWS: Deep Dive on Continuous Delivery and the AWS Developer Tools
DevOps on AWS: Deep Dive on Continuous Delivery and the AWS Developer Tools
 
Appcelerator Titanium Intro
Appcelerator Titanium IntroAppcelerator Titanium Intro
Appcelerator Titanium Intro
 
Liberty: The Right Fit for Micro Profile?
Liberty: The Right Fit for Micro Profile?Liberty: The Right Fit for Micro Profile?
Liberty: The Right Fit for Micro Profile?
 
Building Your App SDK with Swift
Building Your App SDK with SwiftBuilding Your App SDK with Swift
Building Your App SDK with Swift
 
DevOps on AWS: Deep Dive on Continuous Delivery and the AWS Developer Tools
DevOps on AWS: Deep Dive on Continuous Delivery and the AWS Developer ToolsDevOps on AWS: Deep Dive on Continuous Delivery and the AWS Developer Tools
DevOps on AWS: Deep Dive on Continuous Delivery and the AWS Developer Tools
 
Building High Quality Android Applications
Building High Quality Android ApplicationsBuilding High Quality Android Applications
Building High Quality Android Applications
 
Getting Started With Continuous Delivery on AWS - AWS April 2016 Webinar Series
Getting Started With Continuous Delivery on AWS - AWS April 2016 Webinar SeriesGetting Started With Continuous Delivery on AWS - AWS April 2016 Webinar Series
Getting Started With Continuous Delivery on AWS - AWS April 2016 Webinar Series
 
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateevWin j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
 
Java is evolving rapidly: Maven helps you staying on track
Java is evolving rapidly:  Maven helps you staying on trackJava is evolving rapidly:  Maven helps you staying on track
Java is evolving rapidly: Maven helps you staying on track
 
10 Deployments a day - A brief on extreme release protocols
10 Deployments a day - A brief on extreme release protocols10 Deployments a day - A brief on extreme release protocols
10 Deployments a day - A brief on extreme release protocols
 
Boilerplates: Step up your Web Development Process
Boilerplates: Step up your Web Development ProcessBoilerplates: Step up your Web Development Process
Boilerplates: Step up your Web Development Process
 
August Webinar - Water Cooler Talks: A Look into a Developer's Workbench
August Webinar - Water Cooler Talks: A Look into a Developer's WorkbenchAugust Webinar - Water Cooler Talks: A Look into a Developer's Workbench
August Webinar - Water Cooler Talks: A Look into a Developer's Workbench
 
Introduction to Cross Platform Development with Xamarin/ Visual Studio
Introduction to Cross Platform Development with Xamarin/ Visual StudioIntroduction to Cross Platform Development with Xamarin/ Visual Studio
Introduction to Cross Platform Development with Xamarin/ Visual Studio
 

Kürzlich hochgeladen

AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 

Kürzlich hochgeladen (20)

AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 

Building Pistachio with Sencha Touch 2 (introductory)

  • 1. Building with Sencha Touch 2 (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
  • 4. DEVELOPING IN MOBILE BROWSERS • Mobile browsers have improved
  • 5. DEVELOPING IN MOBILE BROWSERS • Mobile browsers have improved • Already familiar ground for web developers
  • 6. DEVELOPING IN MOBILE BROWSERS • Mobile browsers have improved • Already familiar ground for web developers • Easy adaptation process for the mobile developer wannabe
  • 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. 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. “It’s time to get back to innovating in the browser space.” ~ Brendan Eich
  • 10. WHY THE JAVASCRIPT WAY ...And why Sencha Touch 2
  • 11. WHY THE JAVASCRIPT WAY ...And why Sencha Touch 2 • Allows for fast product cycles
  • 12. WHY THE JAVASCRIPT WAY ...And why Sencha Touch 2 • Allows for fast product cycles • Easily deployable
  • 13. WHY THE JAVASCRIPT WAY ...And why Sencha Touch 2 • Allows for fast product cycles • Easily deployable • Even easier ENV set-up
  • 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. 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. 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. 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. 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
  • 20. INGREDIENTS: QUICK START What do I need? • Download the Sencha Touch (1/2 dev preview) SDK.
  • 21. 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/]
  • 22. 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*)
  • 23. 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
  • 24. 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
  • 26. INSIGHTS ON SENCHA TOUCH 2 • Extended Javascript MVC paradigm
  • 27. INSIGHTS ON SENCHA TOUCH 2 • Extended Javascript MVC paradigm • Lots of pre-built UI components which bind to the models
  • 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. 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. HOW WE BUILD YOUR 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 of coolness, right?
  • 33. ALTERNATIVES #1 Native VS HTML5: Be careful when choosing
  • 34. ALTERNATIVES #1 Native VS HTML5: Be careful when choosing • Deciding on what to choose can be a project on its own
  • 35. ALTERNATIVES #1 Native 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
  • 36. ALTERNATIVES #2 Native VS HTML5: Be careful when choosing
  • 37. ALTERNATIVES #2 Native 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
  • 38. ALTERNATIVES #2 Native 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
  • 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

Hinweis der Redaktion

  1. \n
  2. 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
  3. 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
  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. \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