SlideShare a Scribd company logo
Mobile web apps with
Sencha Touch 2
Javascript Monterrey
Hi there!
I’m Bernardo Soriano, Front end & Mobile
web developer.
FE Dev Accenture Interactive, ex IBM
Interactive, digital marketing agencies…
4 years working in FE, hybrid mobile apps
& Interactive development.
Twitter @bersoriano
Email bersoriano@me.com
• What is Sencha Touch and when should I use it?
• Creating your first app.
• Sencha Touch widgets.
• Application architecture.
• Comparing Sencha Touch with other frameworks.
Agenda
What is Sencha Touch?
Sencha Touch is…
• UI components library (widgets)
• Layouts and navigation (SPAs)
• UI data chart presentation
• Handles UI Touch events
• Library of javascript global functions
• MVC architecture
• …
Should I use it?
The good
• Fast UI development
• Cross device
optimization
• Maturity of the
framework
• Integrated build scripts
for production
distribution
• Data management
JSON->Model Obj
• Graphing (SVG)
• Large developer
community
The bad
• Hard to customize UI
components,
transitions and
interaction
• Debugging errors in
the UI
• Some errors in the
documentation
between different
version
• Hard to extend
widgets functionality
The ugly
• Poor theming options
• Limited number of
components
• Old fashioned
transitions and UI
design
• Sharp learning curve
for designers
What is Sencha Touch?
Sencha Touch Components
• Carousel
• Charts
• Forms
• List
• Navigation view
• TabPanel
• Theming
• Download Sencha Touch
• Download and install the Sencha CMD
• Download and install Ruby (Sencha UI uses SASS)
• Download and install the JDK (Sencha CMD use it)
• Verify the installation by typing in the terminal:
$sencha $ruby --version $java -version
Preparing the ingredients
• Execute from the unzipped Sencha files you’ve
downloaded: $sencha generate app [AppName]
[path/to/app]
• For watching the default project you’ve just created
you can start sencha server by typing: $sencha
web start
• You can generate distribution builds by typing:
$sencha app build -e production
Creating your first app
Application structure
Let’s add some stuff…
Carousel component for the second page…
Sencha MVC - Model
Sencha MVC - View
Sencha MVC - Controller
Other Mobile first FW
Mobile Angular UI
@bersoriano
bersoriano@me.com
Thanks!

More Related Content

Similar to Mobile web apps with sencha touch 2

Sencha and Spring (Spring 2GX 2013)
Sencha and Spring (Spring 2GX 2013) Sencha and Spring (Spring 2GX 2013)
Sencha and Spring (Spring 2GX 2013)
Sencha
 
SENCHA Web Programming Software
SENCHA Web Programming SoftwareSENCHA Web Programming Software
SENCHA Web Programming Software
Saisha Nesarikar
 
Sencha touch
Sencha touchSencha touch
Sencha touch
Madusha Perera
 
Revolution to Mobile Web App Development – SenchaTouch (Draft)
Revolution to Mobile Web App Development – SenchaTouch (Draft)Revolution to Mobile Web App Development – SenchaTouch (Draft)
Revolution to Mobile Web App Development – SenchaTouch (Draft)
Jyotirmaya Dehury
 
selvakumar_murugesan
selvakumar_murugesanselvakumar_murugesan
selvakumar_murugesanselvakumar M
 
ExtJS: La piattaforma vincente (tools)
ExtJS: La piattaforma vincente (tools)ExtJS: La piattaforma vincente (tools)
ExtJS: La piattaforma vincente (tools)
Eugenio Minardi
 
"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
webcat
 
Mobile web development
Mobile web development Mobile web development
Mobile web development
Moumie Soulemane
 
The front end toolkit
The front end toolkitThe front end toolkit
The front end toolkitsamuel-holt
 
Satish_Yeole_Dot_NET
Satish_Yeole_Dot_NETSatish_Yeole_Dot_NET
Satish_Yeole_Dot_NETSatish Yeole
 
JQuery Mobile vs Appcelerator Titanium vs Sencha Touch
JQuery Mobile vs Appcelerator Titanium vs Sencha TouchJQuery Mobile vs Appcelerator Titanium vs Sencha Touch
JQuery Mobile vs Appcelerator Titanium vs Sencha Touch
Steve Drucker
 
Front-end vs. Back-end Development Understanding the Differences and Synergy....
Front-end vs. Back-end Development Understanding the Differences and Synergy....Front-end vs. Back-end Development Understanding the Differences and Synergy....
Front-end vs. Back-end Development Understanding the Differences and Synergy....
Savior_Marketing
 
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
 
Sencha Tooling - Senchacon Conference
Sencha Tooling  - Senchacon ConferenceSencha Tooling  - Senchacon Conference
Sencha Tooling - Senchacon Conference
Sandeep Adwankar
 
SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...
SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...
SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...
Sencha
 
Building ext js apps with ES2015 using sencha visual studio code plugin
Building ext js apps with ES2015 using sencha visual studio code pluginBuilding ext js apps with ES2015 using sencha visual studio code plugin
Building ext js apps with ES2015 using sencha visual studio code plugin
Sandeep Adwankar
 
Food borne human diseases
Food borne human diseasesFood borne human diseases
Food borne human diseases
AmalMohammedNasserSa
 
Rohit Yadav - Modern UI for CloudStack
Rohit Yadav - Modern UI for CloudStackRohit Yadav - Modern UI for CloudStack
Rohit Yadav - Modern UI for CloudStack
ShapeBlue
 

Similar to Mobile web apps with sencha touch 2 (20)

Sencha and Spring (Spring 2GX 2013)
Sencha and Spring (Spring 2GX 2013) Sencha and Spring (Spring 2GX 2013)
Sencha and Spring (Spring 2GX 2013)
 
SENCHA Web Programming Software
SENCHA Web Programming SoftwareSENCHA Web Programming Software
SENCHA Web Programming Software
 
Sencha touch
Sencha touchSencha touch
Sencha touch
 
Chalam_JAVA_Portal
Chalam_JAVA_PortalChalam_JAVA_Portal
Chalam_JAVA_Portal
 
Revolution to Mobile Web App Development – SenchaTouch (Draft)
Revolution to Mobile Web App Development – SenchaTouch (Draft)Revolution to Mobile Web App Development – SenchaTouch (Draft)
Revolution to Mobile Web App Development – SenchaTouch (Draft)
 
selvakumar_murugesan
selvakumar_murugesanselvakumar_murugesan
selvakumar_murugesan
 
ExtJS: La piattaforma vincente (tools)
ExtJS: La piattaforma vincente (tools)ExtJS: La piattaforma vincente (tools)
ExtJS: La piattaforma vincente (tools)
 
"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
 
Mobile web development
Mobile web development Mobile web development
Mobile web development
 
Anshul Mahajan_iOS
Anshul Mahajan_iOSAnshul Mahajan_iOS
Anshul Mahajan_iOS
 
The front end toolkit
The front end toolkitThe front end toolkit
The front end toolkit
 
Satish_Yeole_Dot_NET
Satish_Yeole_Dot_NETSatish_Yeole_Dot_NET
Satish_Yeole_Dot_NET
 
JQuery Mobile vs Appcelerator Titanium vs Sencha Touch
JQuery Mobile vs Appcelerator Titanium vs Sencha TouchJQuery Mobile vs Appcelerator Titanium vs Sencha Touch
JQuery Mobile vs Appcelerator Titanium vs Sencha Touch
 
Front-end vs. Back-end Development Understanding the Differences and Synergy....
Front-end vs. Back-end Development Understanding the Differences and Synergy....Front-end vs. Back-end Development Understanding the Differences and Synergy....
Front-end vs. Back-end Development Understanding the Differences and Synergy....
 
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
 
Sencha Tooling - Senchacon Conference
Sencha Tooling  - Senchacon ConferenceSencha Tooling  - Senchacon Conference
Sencha Tooling - Senchacon Conference
 
SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...
SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...
SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...
 
Building ext js apps with ES2015 using sencha visual studio code plugin
Building ext js apps with ES2015 using sencha visual studio code pluginBuilding ext js apps with ES2015 using sencha visual studio code plugin
Building ext js apps with ES2015 using sencha visual studio code plugin
 
Food borne human diseases
Food borne human diseasesFood borne human diseases
Food borne human diseases
 
Rohit Yadav - Modern UI for CloudStack
Rohit Yadav - Modern UI for CloudStackRohit Yadav - Modern UI for CloudStack
Rohit Yadav - Modern UI for CloudStack
 

Recently uploaded

Enhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdfEnhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdf
Globus
 
Understanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSageUnderstanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSage
Globus
 
RISE with SAP and Journey to the Intelligent Enterprise
RISE with SAP and Journey to the Intelligent EnterpriseRISE with SAP and Journey to the Intelligent Enterprise
RISE with SAP and Journey to the Intelligent Enterprise
Srikant77
 
Quarkus Hidden and Forbidden Extensions
Quarkus Hidden and Forbidden ExtensionsQuarkus Hidden and Forbidden Extensions
Quarkus Hidden and Forbidden Extensions
Max Andersen
 
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Anthony Dahanne
 
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Shahin Sheidaei
 
Enterprise Resource Planning System in Telangana
Enterprise Resource Planning System in TelanganaEnterprise Resource Planning System in Telangana
Enterprise Resource Planning System in Telangana
NYGGS Automation Suite
 
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...
Mind IT Systems
 
Cyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdfCyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdf
Cyanic lab
 
Graphic Design Crash Course for beginners
Graphic Design Crash Course for beginnersGraphic Design Crash Course for beginners
Graphic Design Crash Course for beginners
e20449
 
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.ILBeyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Natan Silnitsky
 
Providing Globus Services to Users of JASMIN for Environmental Data Analysis
Providing Globus Services to Users of JASMIN for Environmental Data AnalysisProviding Globus Services to Users of JASMIN for Environmental Data Analysis
Providing Globus Services to Users of JASMIN for Environmental Data Analysis
Globus
 
Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus
 
How to Position Your Globus Data Portal for Success Ten Good Practices
How to Position Your Globus Data Portal for Success Ten Good PracticesHow to Position Your Globus Data Portal for Success Ten Good Practices
How to Position Your Globus Data Portal for Success Ten Good Practices
Globus
 
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
Globus
 
Lecture 1 Introduction to games development
Lecture 1 Introduction to games developmentLecture 1 Introduction to games development
Lecture 1 Introduction to games development
abdulrafaychaudhry
 
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdfDominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
AMB-Review
 
A Comprehensive Look at Generative AI in Retail App Testing.pdf
A Comprehensive Look at Generative AI in Retail App Testing.pdfA Comprehensive Look at Generative AI in Retail App Testing.pdf
A Comprehensive Look at Generative AI in Retail App Testing.pdf
kalichargn70th171
 
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdfEnhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf
Jay Das
 
Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024
Globus
 

Recently uploaded (20)

Enhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdfEnhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdf
 
Understanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSageUnderstanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSage
 
RISE with SAP and Journey to the Intelligent Enterprise
RISE with SAP and Journey to the Intelligent EnterpriseRISE with SAP and Journey to the Intelligent Enterprise
RISE with SAP and Journey to the Intelligent Enterprise
 
Quarkus Hidden and Forbidden Extensions
Quarkus Hidden and Forbidden ExtensionsQuarkus Hidden and Forbidden Extensions
Quarkus Hidden and Forbidden Extensions
 
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
 
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
 
Enterprise Resource Planning System in Telangana
Enterprise Resource Planning System in TelanganaEnterprise Resource Planning System in Telangana
Enterprise Resource Planning System in Telangana
 
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...
 
Cyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdfCyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdf
 
Graphic Design Crash Course for beginners
Graphic Design Crash Course for beginnersGraphic Design Crash Course for beginners
Graphic Design Crash Course for beginners
 
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.ILBeyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
 
Providing Globus Services to Users of JASMIN for Environmental Data Analysis
Providing Globus Services to Users of JASMIN for Environmental Data AnalysisProviding Globus Services to Users of JASMIN for Environmental Data Analysis
Providing Globus Services to Users of JASMIN for Environmental Data Analysis
 
Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024
 
How to Position Your Globus Data Portal for Success Ten Good Practices
How to Position Your Globus Data Portal for Success Ten Good PracticesHow to Position Your Globus Data Portal for Success Ten Good Practices
How to Position Your Globus Data Portal for Success Ten Good Practices
 
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
 
Lecture 1 Introduction to games development
Lecture 1 Introduction to games developmentLecture 1 Introduction to games development
Lecture 1 Introduction to games development
 
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdfDominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
 
A Comprehensive Look at Generative AI in Retail App Testing.pdf
A Comprehensive Look at Generative AI in Retail App Testing.pdfA Comprehensive Look at Generative AI in Retail App Testing.pdf
A Comprehensive Look at Generative AI in Retail App Testing.pdf
 
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdfEnhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf
 
Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024
 

Mobile web apps with sencha touch 2

  • 1. Mobile web apps with Sencha Touch 2 Javascript Monterrey
  • 2. Hi there! I’m Bernardo Soriano, Front end & Mobile web developer. FE Dev Accenture Interactive, ex IBM Interactive, digital marketing agencies… 4 years working in FE, hybrid mobile apps & Interactive development. Twitter @bersoriano Email bersoriano@me.com
  • 3. • What is Sencha Touch and when should I use it? • Creating your first app. • Sencha Touch widgets. • Application architecture. • Comparing Sencha Touch with other frameworks. Agenda
  • 4. What is Sencha Touch? Sencha Touch is… • UI components library (widgets) • Layouts and navigation (SPAs) • UI data chart presentation • Handles UI Touch events • Library of javascript global functions • MVC architecture • …
  • 5. Should I use it? The good • Fast UI development • Cross device optimization • Maturity of the framework • Integrated build scripts for production distribution • Data management JSON->Model Obj • Graphing (SVG) • Large developer community The bad • Hard to customize UI components, transitions and interaction • Debugging errors in the UI • Some errors in the documentation between different version • Hard to extend widgets functionality The ugly • Poor theming options • Limited number of components • Old fashioned transitions and UI design • Sharp learning curve for designers
  • 6. What is Sencha Touch?
  • 7. Sencha Touch Components • Carousel • Charts • Forms • List • Navigation view • TabPanel • Theming
  • 8. • Download Sencha Touch • Download and install the Sencha CMD • Download and install Ruby (Sencha UI uses SASS) • Download and install the JDK (Sencha CMD use it) • Verify the installation by typing in the terminal: $sencha $ruby --version $java -version Preparing the ingredients
  • 9. • Execute from the unzipped Sencha files you’ve downloaded: $sencha generate app [AppName] [path/to/app] • For watching the default project you’ve just created you can start sencha server by typing: $sencha web start • You can generate distribution builds by typing: $sencha app build -e production Creating your first app
  • 11. Let’s add some stuff… Carousel component for the second page…
  • 12. Sencha MVC - Model
  • 13. Sencha MVC - View
  • 14. Sencha MVC - Controller
  • 15. Other Mobile first FW Mobile Angular UI