Designing and developing mobile web applications with Mockup, Sencha Touch and Sinatra @RubyDay

ITALIAN RUBY DAY, 10 GIUGNO 2011

Designing and developingmobile web applications withMockup, Sencha Touch and Sinatra

Matteo Collina

Daniele Bottillo

@matteocollina

@cribcaged7


Who is Mavigex

Mavigex is an academic spin-off of the University of Bologna which focuseson:

• Mobile applications

• Digital signage

• VoIP applications

• Mobile broadcasting


Who We Are

Daniele Bottillo:

Web mobile designer and developer

@cribcaged7

Matteo Collina:

Software Engineer

Ph.D. Candidate @ UoB

@matteocollina


Mobile Web Apps?


vs

HTML5 and CSS3:

Look & Feel similar tonative applications

Advanced graphicseffects (gradients, fades, slides…)


vs

Javascript:

Everybody think theyknow it :-)

Powerful language just like Java and Obj-C

Several frameworks formobile development


vs

Native Applications:

Full control of the Hardware

Maximum Performance

IDEs (Xcode, Eclipse)


vs

PhoneGap:

Allows to reach AppStores with Mobile Web Apps

Full hardware access

Mixed Native/Web code

Limited performances


Write

Test

Build

Development Process

Write

Test

Build

Native Approach

Write

Test

Build Build

Hybrid Approach

Less Work =

Less €

More Work =

More €


Javascript Frameworks


• enhanches existing mobile web sites

• has unobtrusive behaviour

• is not structured enough for a full applicationdevelopment

• has small Javascript & CSS Files

• supports many devices

• is in alpha status


• derives from ExtJS

• has MVC structure

• has the Look & Feel of native applications

• has big Javascript & CSS files

• is stable (but not bug free, and you?)


Backend Technologies


Frontend + Backend

Native Apps

The frontend and the backend are

developed separately

Often there is no backend

When backend

functionality isneeded, the integration is complex

Mobile Web Apps

Frontend and Backendare tightly bound

As often as not there

is a backend

Easy sharing of data between the browser

and the JSON APIs


Backend Requirements

REST principles

Exposure of JSON APIs

Fast-Fast development

Easy HTTP caching

Easy testing

Easy deployment


Ruby + Sinatra

REST is just built-in

JSON conversion is just a method callaway

Really flexible APIs for HTTP caching

Community mad with testing


Ruby + Sinatra

require 'sinatra'

get '/hi' do

"Hello World!"

end


An IntegratedDevelopment Process


Development ProcessProblem

Definition

Mockups

JSON API definition

DevelopmentTesting

Deployment

Refactoring


Problem DefinitionGeoReview

A simple geo localized App to reviewlocations. A user can:

Enter a star-based review of some coordinates

View all the reviews in a map

View the review details of a point


GeoReview

The GeoReview App

is available at: georeview.mavigex.com

is downloadable from the Android Market

is open source software, and the repository are on github: App PhoneGapIntegration

is not bug free, but who it is?

http://georeview.mavigex.com/

https://github.com/mcollina/GeoReview

https://github.com/mcollina/GeoReview-PhoneGap-Android


MockupsGeoReview


MockupsGeoReview


JSON APIsGeoReview

• POST /reviews

– params:

{ review:{ name: “Pippo”, stars:

3, comment: “the comment”,

location: “…” } }

– response:

{ result: true }


JSON APIsGeoReview

• GET /reviews– params:

{ lat: “..”, lng: “..”, radius: “..”}

– response:{ status: true,

reviews:

[ { items:

[ { name:"rff", comment:"fff", stars:4} ],

total:1, lng:11.35, lat:44.49},

{ items:

[ { name: “gggg", comment:"Ggg",

stars: 5 } ],

total: 1, lng :11.35, lat:44.49 } ] }


Developing with SenchaGeoReview

Getting started:

• Download Sencha Touch

• Create an empty index.html

• Include the JS+CSS libraries

http://www.sencha.com/





Sencha Touch is a MVC framework,

what does it mean?

• Views and models are separated

• Controllers perform actions

• Every component has its own definition



Viewport

MapContainer

Map

InsertReview

ListReviewAbout

Organization views:


CSS GenerationGeoReview

Sencha Touch allows to becustomized by regeneratingits CSS:

to change the ‘basecolor’

to bundle only the partsyou need

to do some crazy CSS personalization, like inliningimages


CSS GenerationGeoReview

In order to regenerate the CSS:

we use compass, a ruby library todinamically generate CSS templates

normally, generating the CSS is just a ‘compass compile’ away

in the GeoReview project we haveautomatized it using a rake task

to see more details, look at thisblog post: http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch/

http://compass-style.org/

http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch/














DeploymentGeoReview

We deployed our mobile web app on Heroku:

heroku create

heroku addons:add mongohq:free

git push heroku


Testing

We have a full department of testers!


Links

• Mavigex: http://www.mavigex.com

• GeoReview: http://georeview.mavigex.com

• Sencha: http://www.sencha.com

• Sinatra: http://www.sinatrarb.com

• Ruby: http://www.ruby-lang.org

• Compass: http://compass-style.org/

• Heroku: http://www.heroku.com

• MongoDB: http://www.mongodb.org

http://www.mavigex.com/

http://georeview.mavigex.com/


http://www.sinatrarb.com/

http://www.ruby-lang.org/






http://www.heroku.com/

http://www.mongodb.org/


Thank You!

Technology

Designing and developing mobile web applications with Mockup, Sencha Touch and Sinatra @RubyDay