mobile web apps with sencha touch 2

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!