iPhone Web Development and Ruby On Rails
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


iPhone Web Development and Ruby On Rails



iPhone Web Development and Ruby On Rails. Creating iPhone web applications in Ruby On Rails using the iWebKit toolkit

iPhone Web Development and Ruby On Rails. Creating iPhone web applications in Ruby On Rails using the iWebKit toolkit



Total Views
Views on SlideShare
Embed Views



2 Embeds 16

http://www.slideshare.net 14
http://www.linkedin.com 2



Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

iPhone Web Development and Ruby On Rails Presentation Transcript

  • 1. iPhone Web Applications in Rails José de Leon and Bonnie Gabrick K-LUG May 13, 2010
  • 2. About This Talk
    • Overview of Ruby on Rails
    • 3. Overview of iWebKit
    • 4. Demos
  • 5. About Ruby
    • Created by Yukihiro “Matz” Matsumoto in Japan, 1995
    • 6. Ruby is a multi-paradigm, interpreted programming language :
      • Imperative
      • 7. Object-oriented
      • 8. Functional programming (map/reduce functions AKA collect, select)
    • Familiarity with Perl, Smalltalk, Java, LISP, C++ is an asset
  • 9. About Rails
    • Conception of David Heinemeier-Hansson
    • 10. Based on work derived from Basecamp, a web-based project-management application
    • 11. Extracted as a distinct framework, Summer 2004
    • 12. 1.0 release in December 2005
    “ Rails is a full-stack framework for developing database-backed web applications according to the Model-View-Control pattern.”
  • 13. Rails Embodies Best Practices
    • Model-View-Controller (MVC) – separation of data, operations on data, presentation of data
    • 14. ActiveRecord Pattern – Object/Relational Mapping (ORM)
    • 15. REST web application paradigm:
      • Emphasis on unique URIs/URLs (routes/resources)
      • 16. Handling protocol verbs of HTTP (requests) (POST/GET/PUT/DELETE)
      • 17. Consistent data representations (HTML/XML/JSON) (responses)
  • 18. Rails Applications
    • Occupies a “sweet spot” of front-end web applications for a database
    • 19. Original front-end for Twitter
    • 20. Front-end for Hulu.com
    • 21. 37signals.com suite of applications, including Basecamp Project Management
    • 22. Redmine project management
    • 23. Learning Spaces Technology Listings for WSU Teaching, Learning and Technology
  • 24. Overview of iWebKit
    • HTML 5 and CSS 3 based web framework
    • 25. Home website: http://iwebkit.net/
    • 26. Can use iWebKit with any web development framework in any language you can create HTML from: PHP, Java/JVM languages, Python, .NET languages
    • 27. Combining iWebKit with Rails allows for very fast prototyping of mobile web applications
  • 28. About HTML 5 and CSS 3
    • Much more than the VIDEO tag
    • 29. Emphasis on semantics of actual content in the Document Object Model (DOM)
    • 30. Canvas element allows for enhanced graphics
    • 31. Geo-Location information support
    • 32. Local database support (stronger persistence in web apps)
    • 33. Web-worker threads support (threads in web apps)
    • 34. All combine to provide stronger support for richer web applications than ever before
    • 35. Demo: http://apirocks.com/html5/html5.html
  • 36. Demo
    • Women's Building Library Book List
      • Catalog from library established during 1893 World's Fair, gathering contributions of women to the world of letters (destroyed 1911)
    • CRUD rapid application development with scaffolding (using SQLite)
    • 37. Integration of iWebKit
    • 38. Fully customized application integrated with iWebKit, replacing scaffolding with a componentized approach (some gotchas)
  • 39. iWebKit on Rails
      Changes to be made:
    • Copy images in the iWebKit distribution to the Rails public/folder
    • 40. Change iWebKit CSS: image resource paths in the CSS file are adjusted to point to the Rails public/ folder
    • 41. Place iWebKit CSS & JavaScript in their respective subdirectories in the Rails public/ folder
    • 42. Change default index.html file in the original iWebKit distribution into a Rails ERB (.html.erb) template that loads the iWebKit CSS + JavaScript, and replace class templates in the views/layouts folder
  • 43. iWebKit on Rails
      Download iWebKit from http://iwebkit.net Unzip the downloaded ZIP archive. There should be a “Framework” folder inside of the unzipped archive folder.
    • Copy the images/ and thumbs/ folders in the Framework folder into the Rails public/ folder
    • 44. Inside the Framework/javascript folder of the extracted ZIP archive, copy functions.js into Rails public/javascripts/ folder
  • 45. iWebKit on Rails
    • Inside the Framework/css folder of the extracted ZIP archive, open up developer-style.css in a text editor.
    • 46. Perform a search-and-replace on ../images replacing it with /images
    • 47. Save the result in your Rails public/stylesheets folder, and give it the name iwebkit.css
  • 48. iWebKit on Rails
    • Inside the Framework folder of the extracted ZIP archive, open up index.html in a text editor.
    • 49. Add the following two lines inside the <head> section of index.html (above the <title> tag works best)
    <%= javascript_include_tag &quot;functions&quot; %> <%= stylesheet_link_tag &quot;iwebkit&quot; %>
    • Remove the <link> and <script> tags from the <head> section of index.html
    • 50. Replace the opening <body> and closing </body> tags and replace the deleted content with the Rails <%= yield %> tag
    • 51. Save the result in your Rails app/views/layouts folder as index.html.erb
    • 52. For each class.html.erb file representing each class in the Rails app/views/layouts folder, replace that file with the index.html.erb created in Step 10.
  • 53. iWebKit on Rails
      Optional (better desktop support):
    • Add the following META tag to enable Google Chrome Frame loading for Internet Explorer
    <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;chrome=1&quot;>
    • Add a background-color declaration to the &quot;body&quot; selector in iwebkit.css
    background-color: #CCC; Default Rails scaffolding uses JavaScript to confirm item deletes; add confirmation-of-removal form and delete the item upon submission of this form (HTTP POST) in the controller.