Designing and developing mobile web applications with Mockup, Sencha Touch and Sinatra @RubyDay
1. Designing and developing
mobile web applications with
Mockup, Sencha Touch and
Sinatra
Matteo Collina @matteocollina
Daniele Bottillo @cribcaged7
ITALIAN RUBY DAY, 10 GIUGNO 2011
2. Who is Mavigex
Mavigex is an academic spin-off of the
University of Bologna which focuses
on:
• Mobile applications
• Digital signage
• VoIP applications
• Mobile broadcasting
ITALIAN RUBY DAY, 10 GIUGNO 2011
3. 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
5. vs
HTML5 and CSS3:
Look & Feel similar to
native applications
Advanced graphics
effects (gradients,
fades, slides…)
ITALIAN RUBY DAY, 10 GIUGNO 2011
6. vs
Javascript:
Everybody think they
know it :-)
Powerful language just
like Java and Obj-C
Several frameworks for
mobile development
ITALIAN RUBY DAY, 10 GIUGNO 2011
7. vs
Native Applications:
Full control of the
Hardware
Maximum Performance
IDEs (Xcode, Eclipse)
ITALIAN RUBY DAY, 10 GIUGNO 2011
8. vs
PhoneGap:
Allows to reach App
Stores with Mobile Web
Apps
Full hardware access
Mixed Native/Web code
Limited performances
ITALIAN RUBY DAY, 10 GIUGNO 2011
9. Development Process
Native Approach Hybrid Approach
Write Write More Work
Write Less Work
= =
More € Less €
Test Test Test
Build Build Build Build
ITALIAN RUBY DAY, 10 GIUGNO 2011
11. • enhanches existing mobile web sites
• has unobtrusive behaviour
• is not structured enough for a full application
development
• has small Javascript & CSS Files
• supports many devices
• is in alpha status
ITALIAN RUBY DAY, 10 GIUGNO 2011
12. • 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
14. Frontend + Backend
Native Apps Mobile Web Apps
The frontend and the Frontend and Backend
backend are are tightly bound
developed separately As often as not there
Often there is no is a backend
backend Easy sharing of data
When backend between the browser
functionality is and the JSON APIs
needed, the
integration is complex
ITALIAN RUBY DAY, 10 GIUGNO 2011
15. Backend Requirements
REST principles
Exposure of JSON APIs
Fast-Fast development
Easy HTTP caching
Easy testing
Easy deployment
ITALIAN RUBY DAY, 10 GIUGNO 2011
16. Ruby + Sinatra
REST is just built-in
JSON conversion is just a method call
away
Really flexible APIs for HTTP caching
Community mad with testing
ITALIAN RUBY DAY, 10 GIUGNO 2011
17. Ruby + Sinatra
require 'sinatra'
get '/hi' do
"Hello World!"
end
ITALIAN RUBY DAY, 10 GIUGNO 2011
19. Development Process
Problem
Definition
Refactoring Mockups
JSON API
Deployment
definition
Testing Development
ITALIAN RUBY DAY, 10 GIUGNO 2011
20. Problem Definition
GeoReview
A simple geo localized App to review
locations. 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
21. 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
22. Mockups
GeoReview
ITALIAN RUBY DAY, 10 GIUGNO 2011
23. Mockups
GeoReview
ITALIAN RUBY DAY, 10 GIUGNO 2011
24. JSON APIs
GeoReview
• POST /reviews
– params:
{ review:{ name: “Pippo”, stars:
3, comment: “the comment”,
location: “…” } }
– response:
{ result: true }
ITALIAN RUBY DAY, 10 GIUGNO 2011
26. Developing with Sencha
GeoReview
Getting started:
• Download Sencha Touch
• Create an empty index.html
• Include the JS+CSS libraries
ITALIAN RUBY DAY, 10 GIUGNO 2011
27. Developing with Sencha
GeoReview
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
28. Developing with Sencha
GeoReview
Organization views:
Map
MapContainer InsertReview
Viewport
About ListReview
ITALIAN RUBY DAY, 10 GIUGNO 2011
29. CSS Generation
GeoReview
Sencha Touch allows to be
customized by regenerating
its CSS:
to change the ‘basecolor’
to bundle only the parts
you need
to do some crazy CSS
personalization, like inlining
images
ITALIAN RUBY DAY, 10 GIUGNO 2011
30. CSS Generation
GeoReview
In order to regenerate the CSS:
we use compass, a ruby library to
dinamically generate CSS templates
normally, generating the CSS is just
a ‘compass compile’ away
in the GeoReview project we have
automatized it using a rake task
to see more details, look at this
blog post:
http://www.sencha.com/blog/an-
introduction-to-theming-sencha-
touch/
ITALIAN RUBY DAY, 10 GIUGNO 2011
31. Deployment
GeoReview
We deployed our mobile web app on
Heroku:
heroku create
heroku addons:add mongohq:free
git push heroku
ITALIAN RUBY DAY, 10 GIUGNO 2011
32. Testing
We have a full department of testers!
ITALIAN RUBY DAY, 10 GIUGNO 2011