Designing and developing mobile web applications with Mockup, Sencha Touch and Sinatra Matteo Collina     @matteocollina D...
Who is MavigexMavigex is an academic spin-off of theUniversity of Bologna which focuseson:•   Mobile applications•   Digit...
Who We AreDaniele Bottillo: Web mobile designer and developer @cribcaged7Matteo Collina: Software Engineer Ph.D. Candi...
Mobile Web Apps?ITALIAN RUBY DAY, 10 GIUGNO 2011
vs              HTML5 and CSS3:               Look & Feel similar to                native applications               Ad...
vs              Javascript:               Everybody think they                know it :-)               Powerful languag...
vs              Native Applications:               Full control of the                Hardware               Maximum Per...
vs              PhoneGap:               Allows to reach App                Stores with Mobile Web                Apps    ...
Development Process    Native Approach                  Hybrid Approach  Write      Write    More Work                    ...
Javascript FrameworksITALIAN RUBY DAY, 10 GIUGNO 2011
• enhanches existing mobile web sites• has unobtrusive behaviour• is not structured enough for a full application  develop...
• derives from ExtJS• has MVC structure• has the Look & Feel of native applications• has big Javascript & CSS files• is st...
Backend TechnologiesITALIAN RUBY DAY, 10 GIUGNO 2011
Frontend + BackendNative Apps                Mobile Web Apps The frontend and the      Frontend and Backend  backend are...
Backend Requirements REST principles Exposure of JSON APIs Fast-Fast development Easy HTTP caching Easy testing Easy...
Ruby + Sinatra REST is just built-in JSON conversion is just a method call  away Really flexible APIs for HTTP caching...
Ruby + Sinatra           require sinatra           get /hi do             "Hello World!"           endITALIAN RUBY DAY, 10...
An IntegratedDevelopment ProcessITALIAN RUBY DAY, 10 GIUGNO 2011
Development Process                                     Problem                                     Definition            ...
Problem Definition                   GeoReviewA simple geo localized App to reviewlocations. A user can: Enter a star-bas...
GeoReviewThe GeoReview App is available at: georeview.mavigex.com is downloadable from the Android Market is open sourc...
Mockups                   GeoReviewITALIAN RUBY DAY, 10 GIUGNO 2011
Mockups                   GeoReviewITALIAN RUBY DAY, 10 GIUGNO 2011
JSON APIs                   GeoReview• POST /reviews  – params:    { review:{ name: “Pippo”, stars:      3, comment: “the ...
JSON APIs                       GeoReview• GET /reviews   – params:     { lat: “..”, lng: “..”, radius: “..”}   – response...
Developing with Sencha                   GeoReviewGetting started:• Download Sencha Touch• Create an empty index.html• Inc...
Developing with Sencha                   GeoReviewSencha Touch is a MVC framework,what does it mean?• Views and models are...
Developing with Sencha                   GeoReviewOrganization views:                                      Map            ...
CSS Generation                     GeoReviewSencha Touch allows to becustomized by regeneratingits CSS: to change the ‘ba...
CSS Generation                         GeoReviewIn order to regenerate the CSS: we use compass, a ruby library to  dinami...
Deployment                    GeoReviewWe deployed our mobile web app onHeroku:heroku createheroku addons:add mongohq:fr...
TestingWe 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•   Si...
Thank You!ITALIAN RUBY DAY, 10 GIUGNO 2011
Upcoming SlideShare
Loading in …5
×

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

6,151 views

Published on

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
  • looking on slide 22, i took few weeks lately in graz to hack on something very relevant: http://dspace.elevate.at

    daemons already use leveldb, i still need to figure it out for apps running in browsers...

    and yes, we may need to pick another name ;)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
6,151
On SlideShare
0
From Embeds
0
Number of Embeds
3,499
Actions
Shares
0
Downloads
27
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. Designing and developing mobile web applications with Mockup, Sencha Touch and Sinatra Matteo Collina @matteocollina Daniele Bottillo @cribcaged7ITALIAN RUBY DAY, 10 GIUGNO 2011
  2. 2. Who is MavigexMavigex is an academic spin-off of theUniversity of Bologna which focuseson:• Mobile applications• Digital signage• VoIP applications• Mobile broadcastingITALIAN RUBY DAY, 10 GIUGNO 2011
  3. 3. Who We AreDaniele Bottillo: Web mobile designer and developer @cribcaged7Matteo Collina: Software Engineer Ph.D. Candidate @ UoB @matteocollinaITALIAN RUBY DAY, 10 GIUGNO 2011
  4. 4. Mobile Web Apps?ITALIAN RUBY DAY, 10 GIUGNO 2011
  5. 5. vs HTML5 and CSS3:  Look & Feel similar to native applications  Advanced graphics effects (gradients, fades, slides…)ITALIAN RUBY DAY, 10 GIUGNO 2011
  6. 6. vs Javascript:  Everybody think they know it :-)  Powerful language just like Java and Obj-C  Several frameworks for mobile developmentITALIAN RUBY DAY, 10 GIUGNO 2011
  7. 7. vs Native Applications:  Full control of the Hardware  Maximum Performance  IDEs (Xcode, Eclipse)ITALIAN RUBY DAY, 10 GIUGNO 2011
  8. 8. vs PhoneGap:  Allows to reach App Stores with Mobile Web Apps  Full hardware access  Mixed Native/Web code  Limited performancesITALIAN RUBY DAY, 10 GIUGNO 2011
  9. 9. Development Process Native Approach Hybrid Approach Write Write More Work Write Less Work = = More € Less € Test Test Test Build Build Build BuildITALIAN RUBY DAY, 10 GIUGNO 2011
  10. 10. Javascript FrameworksITALIAN RUBY DAY, 10 GIUGNO 2011
  11. 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 statusITALIAN RUBY DAY, 10 GIUGNO 2011
  12. 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. 13. Backend TechnologiesITALIAN RUBY DAY, 10 GIUGNO 2011
  14. 14. Frontend + BackendNative 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 complexITALIAN RUBY DAY, 10 GIUGNO 2011
  15. 15. Backend Requirements REST principles Exposure of JSON APIs Fast-Fast development Easy HTTP caching Easy testing Easy deploymentITALIAN RUBY DAY, 10 GIUGNO 2011
  16. 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 testingITALIAN RUBY DAY, 10 GIUGNO 2011
  17. 17. Ruby + Sinatra require sinatra get /hi do "Hello World!" endITALIAN RUBY DAY, 10 GIUGNO 2011
  18. 18. An IntegratedDevelopment ProcessITALIAN RUBY DAY, 10 GIUGNO 2011
  19. 19. Development Process Problem Definition Refactoring Mockups JSON API Deployment definition Testing DevelopmentITALIAN RUBY DAY, 10 GIUGNO 2011
  20. 20. Problem Definition GeoReviewA 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 pointITALIAN RUBY DAY, 10 GIUGNO 2011
  21. 21. GeoReviewThe 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. 22. Mockups GeoReviewITALIAN RUBY DAY, 10 GIUGNO 2011
  23. 23. Mockups GeoReviewITALIAN RUBY DAY, 10 GIUGNO 2011
  24. 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. 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. 26. Developing with Sencha GeoReviewGetting started:• Download Sencha Touch• Create an empty index.html• Include the JS+CSS librariesITALIAN RUBY DAY, 10 GIUGNO 2011
  27. 27. Developing with Sencha GeoReviewSencha Touch is a MVC framework,what does it mean?• Views and models are separated• Controllers perform actions• Every component has its own definitionITALIAN RUBY DAY, 10 GIUGNO 2011
  28. 28. Developing with Sencha GeoReviewOrganization views: Map MapContainer InsertReview Viewport About ListReviewITALIAN RUBY DAY, 10 GIUGNO 2011
  29. 29. CSS Generation GeoReviewSencha Touch allows to becustomized by regeneratingits CSS: to change the ‘basecolor’ to bundle only the parts you need to do some crazy CSS personalization, like inlining imagesITALIAN RUBY DAY, 10 GIUGNO 2011
  30. 30. CSS Generation GeoReviewIn 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. 31. Deployment GeoReviewWe deployed our mobile web app onHeroku:heroku createheroku addons:add mongohq:freegit push herokuITALIAN RUBY DAY, 10 GIUGNO 2011
  32. 32. TestingWe have a full department of testers!ITALIAN RUBY DAY, 10 GIUGNO 2011
  33. 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.orgITALIAN RUBY DAY, 10 GIUGNO 2011
  34. 34. Thank You!ITALIAN RUBY DAY, 10 GIUGNO 2011

×