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

Designing and developing mobile web applications with Mockup, Sencha Touch and Sinatra Matteo Collina @matteocollina Daniele Bottillo @cribcaged7ITALIAN RUBY DAY, 10 GIUGNO 2011

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

Who We AreDaniele Bottillo: Web mobile designer and developer @cribcaged7Matteo Collina: Software Engineer Ph.D. Candidate @ UoB @matteocollinaITALIAN RUBY DAY, 10 GIUGNO 2011

Mobile Web Apps?ITALIAN RUBY DAY, 10 GIUGNO 2011

vs HTML5 and CSS3:  Look & Feel similar to native applications  Advanced graphics effects (gradients, fades, slides…)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 developmentITALIAN RUBY DAY, 10 GIUGNO 2011

vs Native Applications:  Full control of the Hardware  Maximum Performance  IDEs (Xcode, Eclipse)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 performancesITALIAN RUBY DAY, 10 GIUGNO 2011

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

Javascript FrameworksITALIAN 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 statusITALIAN 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?)ITALIAN RUBY DAY, 10 GIUGNO 2011

Backend TechnologiesITALIAN RUBY DAY, 10 GIUGNO 2011

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

Backend Requirements REST principles Exposure of JSON APIs Fast-Fast development Easy HTTP caching Easy testing Easy deploymentITALIAN 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 testingITALIAN RUBY DAY, 10 GIUGNO 2011

Ruby + Sinatra require sinatra get /hi do "Hello World!" endITALIAN RUBY DAY, 10 GIUGNO 2011

An IntegratedDevelopment ProcessITALIAN RUBY DAY, 10 GIUGNO 2011

Development Process Problem Definition Refactoring Mockups JSON API Deployment definition Testing DevelopmentITALIAN RUBY DAY, 10 GIUGNO 2011

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

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

Mockups GeoReviewITALIAN RUBY DAY, 10 GIUGNO 2011

JSON APIs GeoReview• POST /reviews – params: { review:{ name: “Pippo”, stars: 3, comment: “the comment”, location: “…” } } – response: { result: true }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 } ] }ITALIAN RUBY DAY, 10 GIUGNO 2011

Developing with Sencha GeoReviewGetting started:• Download Sencha Touch• Create an empty index.html• Include the JS+CSS librariesITALIAN RUBY DAY, 10 GIUGNO 2011

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

Developing with Sencha GeoReviewOrganization views: Map MapContainer InsertReview Viewport About ListReviewITALIAN RUBY DAY, 10 GIUGNO 2011

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

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

Deployment GeoReviewWe deployed our mobile web app onHeroku:heroku createheroku addons:add mongohq:freegit push herokuITALIAN RUBY DAY, 10 GIUGNO 2011

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• 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

Thank You!ITALIAN RUBY DAY, 10 GIUGNO 2011

http://www.matteocollina.com	565
http://lanyrd.com	86
http://localhost	70
http://hi-tech.leonardo.it	1
http://www.linkedin.com	1

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

by Matteo Collina

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 723

Statistics

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