Designing and developing mobile web applications with Mockup, Sencha Touch and Sinatra @RubyDay
4 likes4,241 views
The document discusses developing mobile web applications using Mockup, Sencha Touch and Sinatra. It describes designing applications using HTML5, CSS3 and JavaScript frameworks like Sencha Touch. It also discusses using Sinatra for backend development and implementing REST APIs, and developing a sample location review application called GeoReview using these techniques.
![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](https://image.slidesharecdn.com/senchatouchsinatrarubyday-110613041155-phpapp01/85/Designing-and-developing-mobile-web-applications-with-Mockup-Sencha-Touch-and-Sinatra-RubyDay-25-320.jpg)
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
- 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