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

Transcript

1. ITALIAN RUBY DAY, 10 GIUGNO 2011 Designing and developing mobile web applications with Mockup, Sencha Touch and Sinatra Matteo Collina Daniele Bottillo @matteocollina @cribcaged7
2. ITALIAN RUBY DAY, 10 GIUGNO 2011 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
3. 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
4. ITALIAN RUBY DAY, 10 GIUGNO 2011 Mobile Web Apps?
5. ITALIAN RUBY DAY, 10 GIUGNO 2011 vs HTML5 and CSS3:  Look & Feel similar to native applications  Advanced graphics effects (gradients, fades, slides…)
6. ITALIAN RUBY DAY, 10 GIUGNO 2011 vs Javascript:  Everybody think they know it :-)  Powerful language just like Java and Obj-C  Several frameworks for mobile development
7. ITALIAN RUBY DAY, 10 GIUGNO 2011 vs Native Applications:  Full control of the Hardware  Maximum Performance  IDEs (Xcode, Eclipse)
8. ITALIAN RUBY DAY, 10 GIUGNO 2011 vs PhoneGap:  Allows to reach App Stores with Mobile Web Apps  Full hardware access  Mixed Native/Web code  Limited performances
9. ITALIAN RUBY DAY, 10 GIUGNO 2011 Write Test Build Development Process Write Test Build Native Approach Write Test Build Build HybridApproach Less Work = Less € More Work = More €
10. ITALIAN RUBY DAY, 10 GIUGNO 2011 Javascript Frameworks
11. ITALIAN RUBY DAY, 10 GIUGNO 2011 • 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
12. 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?)
13. ITALIAN RUBY DAY, 10 GIUGNO 2011 Backend Technologies
14. 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 is needed, the integration is complex Mobile Web Apps  Frontend and Backend are tightly bound  As often as not there is a backend  Easy sharing of data between the browser and the JSON APIs
15. ITALIAN RUBY DAY, 10 GIUGNO 2011 Backend Requirements  REST principles  Exposure of JSON APIs  Fast-Fast development  Easy HTTP caching  Easy testing  Easy deployment
16. ITALIAN RUBY DAY, 10 GIUGNO 2011 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
17. ITALIAN RUBY DAY, 10 GIUGNO 2011 Ruby + Sinatra require 'sinatra' get '/hi' do "Hello World!" end
18. ITALIAN RUBY DAY, 10 GIUGNO 2011 An Integrated Development Process
19. ITALIAN RUBY DAY, 10 GIUGNO 2011 Development Process Problem Definition Mockups JSON API definition Development Testing Deployment Refactoring
20. ITALIAN RUBY DAY, 10 GIUGNO 2011 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
21. 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?
22. ITALIAN RUBY DAY, 10 GIUGNO 2011 Mockups GeoReview
23. ITALIAN RUBY DAY, 10 GIUGNO 2011 Mockups GeoReview
24. ITALIAN RUBY DAY, 10 GIUGNO 2011 JSON APIs GeoReview • POST /reviews – params: { review:{ name: “Pippo”, stars: 3, comment: “the comment”, location: “…” } } – response: { result: true }
25. ITALIAN RUBY DAY, 10 GIUGNO 2011 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 } ] }
26. ITALIAN RUBY DAY, 10 GIUGNO 2011 Developing with Sencha GeoReview Getting started: • Download Sencha Touch • Create an empty index.html • Include the JS+CSS libraries
27. ITALIAN RUBY DAY, 10 GIUGNO 2011 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
28. ITALIAN RUBY DAY, 10 GIUGNO 2011 Developing with Sencha GeoReview Viewport MapContainer Map InsertReview ListReview About Organization views:
29. ITALIAN RUBY DAY, 10 GIUGNO 2011 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
30. ITALIAN RUBY DAY, 10 GIUGNO 2011 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/
31. ITALIAN RUBY DAY, 10 GIUGNO 2011 Deployment GeoReview We deployed our mobile web app on Heroku: heroku create heroku addons:add mongohq:free git push heroku
32. ITALIAN RUBY DAY, 10 GIUGNO 2011 Testing We have a full department of testers!
33. 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
34. ITALIAN RUBY DAY, 10 GIUGNO 2011 Thank You!