mobile web apps with sencha touch 2

16
Mobile web apps with Sencha Touch 2 Javascript Monterrey

Upload: bersoriano

Post on 18-Jul-2015

36 views

Category:

Software


1 download

TRANSCRIPT

Page 1: Mobile web apps with sencha touch 2

Mobile web apps with Sencha Touch 2

Javascript Monterrey

Page 2: Mobile web apps with sencha touch 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 [email protected]

Page 3: Mobile web apps with sencha touch 2

• 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

Page 4: Mobile web apps with sencha touch 2

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 • …

Page 5: Mobile web apps with sencha touch 2

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

Page 6: Mobile web apps with sencha touch 2

What is Sencha Touch?

Page 7: Mobile web apps with sencha touch 2

Sencha Touch Components

• Carousel

• Charts

• Forms

• List

• Navigation view

• TabPanel

• Theming

Page 8: Mobile web apps with sencha touch 2

• 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

Page 9: Mobile web apps with sencha touch 2

• 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

Page 10: Mobile web apps with sencha touch 2

Application structure

Page 11: Mobile web apps with sencha touch 2

Let’s add some stuff…

Carousel component for the second page…

Page 12: Mobile web apps with sencha touch 2

Sencha MVC - Model

Page 13: Mobile web apps with sencha touch 2

Sencha MVC - View

Page 14: Mobile web apps with sencha touch 2

Sencha MVC - Controller

Page 15: Mobile web apps with sencha touch 2

Other Mobile first FW

Mobile Angular UI

Page 16: Mobile web apps with sencha touch 2

@bersoriano [email protected]

Thanks!