mobile web apps with sencha touch 2
Post on 18-Jul-2015
36 Views
Preview:
TRANSCRIPT
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
top related