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

4. Mobile Web Apps?
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

10. Javascript Frameworks
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

13. Backend Technologies
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

18. An Integrated
Development Process
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

25. JSON APIs
GeoReview
• 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

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

33. 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

34. Thank You!
ITALIAN RUBY DAY, 10 GIUGNO 2011