designing and developing mobile web applications with mockup, sencha touch and sinatra @rubyday
DESCRIPTION
TRANSCRIPT
ITALIAN RUBY DAY, 10 GIUGNO 2011
Designing and developingmobile web applications withMockup, Sencha Touch and Sinatra
Matteo Collina
Daniele Bottillo
@matteocollina
@cribcaged7
ITALIAN RUBY DAY, 10 GIUGNO 2011
Who is Mavigex
Mavigex is an academic spin-off of the University of Bologna which focuseson:
• Mobile applications
• Digital signage
• VoIP applications
• Mobile broadcasting
ITALIAN RUBY DAY, 10 GIUGNO 2011
Who We Are
Daniele Bottillo:
Web mobile designer and developer
@cribcaged7
Matteo Collina:
Software Engineer
Ph.D. Candidate @ UoB
@matteocollina
ITALIAN RUBY DAY, 10 GIUGNO 2011
Mobile Web Apps?
ITALIAN RUBY DAY, 10 GIUGNO 2011
vs
HTML5 and CSS3:
Look & Feel similar tonative applications
Advanced graphicseffects (gradients, fades, slides…)
ITALIAN RUBY DAY, 10 GIUGNO 2011
vs
Javascript:
Everybody think theyknow it :-)
Powerful language just like Java and Obj-C
Several frameworks formobile development
ITALIAN RUBY DAY, 10 GIUGNO 2011
vs
Native Applications:
Full control of the Hardware
Maximum Performance
IDEs (Xcode, Eclipse)
ITALIAN RUBY DAY, 10 GIUGNO 2011
vs
PhoneGap:
Allows to reach AppStores with Mobile Web Apps
Full hardware access
Mixed Native/Web code
Limited performances
ITALIAN RUBY DAY, 10 GIUGNO 2011
Write
Test
Build
Development Process
Write
Test
Build
Native Approach
Write
Test
Build Build
Hybrid Approach
Less Work =
Less €
More Work =
More €
ITALIAN RUBY DAY, 10 GIUGNO 2011
Javascript Frameworks
ITALIAN RUBY DAY, 10 GIUGNO 2011
• 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
ITALIAN RUBY DAY, 10 GIUGNO 2011
• 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?)
ITALIAN RUBY DAY, 10 GIUGNO 2011
Backend Technologies
ITALIAN RUBY DAY, 10 GIUGNO 2011
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
ITALIAN RUBY DAY, 10 GIUGNO 2011
Backend Requirements
REST principles
Exposure of JSON APIs
Fast-Fast development
Easy HTTP caching
Easy testing
Easy deployment
ITALIAN RUBY DAY, 10 GIUGNO 2011
Ruby + Sinatra
REST is just built-in
JSON conversion is just a method callaway
Really flexible APIs for HTTP caching
Community mad with testing
ITALIAN RUBY DAY, 10 GIUGNO 2011
Ruby + Sinatra
require 'sinatra'
get '/hi' do
"Hello World!"
end
ITALIAN RUBY DAY, 10 GIUGNO 2011
An IntegratedDevelopment Process
ITALIAN RUBY DAY, 10 GIUGNO 2011
Development ProcessProblem
Definition
Mockups
JSON API definition
DevelopmentTesting
Deployment
Refactoring
ITALIAN RUBY DAY, 10 GIUGNO 2011
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
ITALIAN RUBY DAY, 10 GIUGNO 2011
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?
ITALIAN RUBY DAY, 10 GIUGNO 2011
MockupsGeoReview
ITALIAN RUBY DAY, 10 GIUGNO 2011
MockupsGeoReview
ITALIAN RUBY DAY, 10 GIUGNO 2011
JSON APIsGeoReview
• POST /reviews
– params:
{ review:{ name: “Pippo”, stars:
3, comment: “the comment”,
location: “…” } }
– response:
{ result: true }
ITALIAN RUBY DAY, 10 GIUGNO 2011
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 } ] }
ITALIAN RUBY DAY, 10 GIUGNO 2011
Developing with SenchaGeoReview
Getting started:
• Download Sencha Touch
• Create an empty index.html
• Include the JS+CSS libraries
ITALIAN RUBY DAY, 10 GIUGNO 2011
Developing with SenchaGeoReview
Sencha Touch is a MVC framework,
what does it mean?
• Views and models are separated
• Controllers perform actions
• Every component has its own definition
ITALIAN RUBY DAY, 10 GIUGNO 2011
Developing with SenchaGeoReview
Viewport
MapContainer
Map
InsertReview
ListReviewAbout
Organization views:
ITALIAN RUBY DAY, 10 GIUGNO 2011
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
ITALIAN RUBY DAY, 10 GIUGNO 2011
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/
ITALIAN RUBY DAY, 10 GIUGNO 2011
DeploymentGeoReview
We deployed our mobile web app on Heroku:
heroku create
heroku addons:add mongohq:free
git push heroku
ITALIAN RUBY DAY, 10 GIUGNO 2011
Testing
We have a full department of testers!
ITALIAN RUBY DAY, 10 GIUGNO 2011
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
ITALIAN RUBY DAY, 10 GIUGNO 2011
Thank You!