Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit a32211b60e71524f57009e3ab94eaded377e588f @elado elado committed Oct 28, 2010
Showing with 11,035 additions and 0 deletions.
  1. +2 −0 .gitignore
  2. +3 −0 CHANGELOG.rdoc
  3. +5 −0 Gemfile
  4. +11 −0 Gemfile.lock
  5. +18 −0 LICENSE
  6. +226 −0 README.md
  7. +4 −0 examples/rails3-example/.gitignore
  8. +34 −0 examples/rails3-example/Gemfile
  9. +77 −0 examples/rails3-example/Gemfile.lock
  10. +256 −0 examples/rails3-example/README
  11. +7 −0 examples/rails3-example/Rakefile
  12. +3 −0 examples/rails3-example/app/controllers/application_controller.rb
  13. +63 −0 examples/rails3-example/app/controllers/articles_controller.rb
  14. +2 −0 examples/rails3-example/app/helpers/application_helper.rb
  15. +2 −0 examples/rails3-example/app/helpers/articles_helper.rb
  16. +11 −0 examples/rails3-example/app/views/articles/article.html.ejs
  17. +35 −0 examples/rails3-example/app/views/articles/show_client.html.erb
  18. +4 −0 examples/rails3-example/app/views/articles/show_server_template_in_view.html.erb
  19. +13 −0 examples/rails3-example/app/views/layouts/application.html.erb
  20. +4 −0 examples/rails3-example/config.ru
  21. +42 −0 examples/rails3-example/config/application.rb
  22. +13 −0 examples/rails3-example/config/boot.rb
  23. +22 −0 examples/rails3-example/config/database.yml
  24. +5 −0 examples/rails3-example/config/environment.rb
  25. +26 −0 examples/rails3-example/config/environments/development.rb
  26. +49 −0 examples/rails3-example/config/environments/production.rb
  27. +35 −0 examples/rails3-example/config/environments/test.rb
  28. +7 −0 examples/rails3-example/config/initializers/backtrace_silencers.rb
  29. +10 −0 examples/rails3-example/config/initializers/inflections.rb
  30. +5 −0 examples/rails3-example/config/initializers/mime_types.rb
  31. +7 −0 examples/rails3-example/config/initializers/secret_token.rb
  32. +8 −0 examples/rails3-example/config/initializers/session_store.rb
  33. +5 −0 examples/rails3-example/config/locales/en.yml
  34. +65 −0 examples/rails3-example/config/routes.rb
  35. +7 −0 examples/rails3-example/db/seeds.rb
  36. +2 −0 examples/rails3-example/doc/README_FOR_APP
  37. 0 examples/rails3-example/lib/tasks/.gitkeep
  38. +26 −0 examples/rails3-example/public/404.html
  39. +26 −0 examples/rails3-example/public/422.html
  40. +26 −0 examples/rails3-example/public/500.html
  41. 0 examples/rails3-example/public/favicon.ico
  42. BIN examples/rails3-example/public/images/rails.png
  43. +239 −0 examples/rails3-example/public/index.html
  44. +2 −0 examples/rails3-example/public/javascripts/application.js
  45. +965 −0 examples/rails3-example/public/javascripts/controls.js
  46. +974 −0 examples/rails3-example/public/javascripts/dragdrop.js
  47. +1,123 −0 examples/rails3-example/public/javascripts/effects.js
  48. +6,001 −0 examples/rails3-example/public/javascripts/prototype.js
  49. +175 −0 examples/rails3-example/public/javascripts/rails.js
  50. +53 −0 examples/rails3-example/public/javascripts/template.js
  51. +5 −0 examples/rails3-example/public/robots.txt
  52. 0 examples/rails3-example/public/stylesheets/.gitkeep
  53. +6 −0 examples/rails3-example/script/rails
  54. +9 −0 examples/rails3-example/test/functional/articles_controller_test.rb
  55. +9 −0 examples/rails3-example/test/performance/browsing_test.rb
  56. +13 −0 examples/rails3-example/test/test_helper.rb
  57. +4 −0 examples/rails3-example/test/unit/helpers/article_helper_test.rb
  58. +4 −0 examples/rails3-example/test/unit/helpers/articles_helper_test.rb
  59. 0 examples/rails3-example/vendor/plugins/.gitkeep
  60. +1 −0 examples/rails3-example/vendor/plugins/ruby-hybrid-templates
  61. +4 −0 examples/sinatra-example/server.rb
  62. +29 −0 isotope.gemspec
  63. +53 −0 lib/isotope.js
  64. +75 −0 lib/isotope.rb
  65. +9 −0 lib/version.rb
  66. +11 −0 test/article.ejs
  67. +105 −0 test/isotope_spec.rb
@@ -0,0 +1,2 @@
+examples/rails3-example/log
+examples/rails3-example/tmp
@@ -0,0 +1,3 @@
+== 1.0.0 Initial release, 2010-10-28
+
+* Initial release
@@ -0,0 +1,5 @@
+source :rubygemss
+source :gemcutter
+source "http://gems.github.com"
+
+gem "johnson"
@@ -0,0 +1,11 @@
+GEM
+ remote: http://rubygems.org/
+ remote: http://gems.github.com/
+ specs:
+ johnson (1.2.0)
+
+PLATFORMS
+ ruby
+
+DEPENDENCIES
+ johnson
18 LICENSE
@@ -0,0 +1,18 @@
+Copyright (c) 2010 Elad Ossadon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
226 README.md
@@ -0,0 +1,226 @@
+# Isotope - Ruby Hybrid Template Engine for Client Side and Server Side
+
+## The problem:
+
+Ajax based site developers sometimes struggle with content rendering and role division between server and client.
+
+## Common approaches, pros and cons:
+
+A few approaches to output a rendered template evaluated with an object are:
+
+### Approach #1: Regular ERB Partial
+
+Evaluate a simple ERB partial with a local object, and server it as a **string** to the client, simply by
+
+ <%= render :partial => "article", :object => @article %>
+
+in a view, or from a controller and request it by Ajax.
+
+This partial can look like:
+
+ <h2><%=article.title%></h2>
+ <div class="content">
+ <%=article.content%>
+ </div>
+ <ul class="tags">
+ <%article.tags.each { |tag|%>
+ <li><%=tag.name%></li>
+ <%}%>
+ </ul>
+
+#### Pros
+
+* Simple, readable and well known ERB for Rails/Sinatra
+* SEO and accessibility - HTML code is downloaded into the source
+
+#### Cons
+
+* Server side only
+* Requires download of the whole HTML code, can cause performance issues
+* To change data or bind with a different object on client side JS, need to do some DOM traversal, by using a technique like assigning special classes/attributes to data containers (`<div class="content"></div>` and something like `container.querySelect('.content').textContent=article.content;`)
+
+
+### Approach #2: Client Side EJS Template with JSON Objects
+
+Having an EJS template in the HTML code, with techniques such as John Resig's [JavaScript Micro-Templating](http://ejohn.org/blog/javascript-micro-templating/)
+
+ <script type="text/html" id="article-template">
+ <h2><%=item.title%></h2>
+
+ <div class="content">
+ <%=item.content%>
+ </div>
+
+ <ul class="tags">
+ <%item.tags.forEach(function (tag) {%>
+ <li><%=tag.name%></li>
+ <%});%>
+ </ul>
+ </script>
+
+Ask the server for a JSON article and evaluate the template with this object into a string, and place it inside a container, using a techniques as mentioned:
+
+ var results = document.getElementById("results"); // some container on the page
+ results.innerHTML = tmpl("article-template", article); // article is an object, probably a result of an AJAX JSON request
+
+
+#### Pros
+
+* Fast - requires the server to send only the JSON object and the HTML is downloaded only once as a template
+
+#### Cons
+
+* SEO and accessibility - HTML code isn't in the source of the page but being rendered after load
+
+
+In these two approaches, the developer needs to choose according to the task and the project requirements, or, worse, maintaining two templates, ERB and EJS.
+
+
+## Introducing: Isotope - Ruby Hybrid Template Engine for Client Side and Server Side
+
+So why not combining the two approaches together?
+
+The biggest constraints to be considered are:
+
+* Client side doesn't understand Ruby
+* Ruby can't be translated fully into JavaScript
+* And the most important one: **Template should be maintained in one single file for both client and server uses**
+
+Isotope is from greek - "Equal Place". An equal place of editing a template for both client and server (Thanks @yuvalraz for the name!).
+
+Using [**jbarnette**](http://github.com/jbarnette/)'s [**Johnson**](http://github.com/jbarnette/johnson/) gem, Ruby and JavaScript can interact together!
+
+That means, that ruby code can handle EJS templates and JSON objects. A **great and very inspiring article** is [Write your Rails view in… JavaScript?](http://tenderlovemaking.com/2008/05/06/write-your-rails-view-in-javascript/) by [Aaron Patterson](http://tenderlovemaking.com/).
+
+In this approach, only one template is written in EJS format.
+
+## Usage
+
+There are the methods of using this library:
+
+### On the Client Side
+
+Outputting from the server side (controller or view)
+
+ <%= Isotope.render_template("full/path/to/article.ejs", :id => "article-template") %>
+
+*Notice: a full path should be sent as the first variable, so either use `File.join(File.dirname(__FILE__), '../relative/path/to/article.ejs') or with Rails.root.join('app/views/articles/article.ejs')`*
+
+The above code will output:
+
+ <script type="text/x-isotope" id="article-template">
+ <h2><%=item.title%></h2>
+
+ <div class="content">
+ <%=item.content%>
+ </div>
+
+ <ul class="tags">
+ <%item.tags.forEach(function (tag) {%>
+ <li><%=tag.name%></li>
+ <%});%>
+ </ul>
+ </script>
+
+which is easy to evaluate with any JS object using the [mentioned technique](http://ejohn.org/blog/javascript-micro-templating/).
+
+### On the Server Side (The Holy Grail)
+
+Using [Johnson](http://github.com/jbarnette/johnson/), the famous [micro-templating technique](http://ejohn.org/blog/javascript-micro-templating/) and JSONed Ruby objects, this library provides the following functionality:
+
+ <%= Isotope.render_partial("full/path/to/article.js", :locals => { :item => @article }) %>
+
+*Notice: a full path should be sent as the first variable, so either use `File.join(File.dirname(__FILE__), '../relative/path/to/article.ejs') or with Rails.root.join('app/views/articles/article.ejs')`*
+
+This code reads the source of the EJS file, uses Johnson and John Resig's technique and serves a **string** as an output.
+
+
+### Installation:
+
+#### Rails
+
+##### Rails 3.x
+
+ ruby script/rails plugin install git@github.com:elado/isotope.git
+
+Add to your Gemfile
+
+ gem 'json'
+ gem 'johnson'
+
+and run `bundle install`
+
+##### Rails 2.3.x
+
+ ruby script/plugin install git@github.com:elado/isotope.git
+
+Add to config/environment.rb
+
+ config.gem 'json'
+ config.gem 'johnson'
+
+and run `rake gems:install`
+
+##### Server Side Example:
+
+ # ArticlesController
+
+ def show
+ @article = {
+ :title => "Hello!",
+ :content => "World!",
+ :tags => [
+ {:name => "tag 1"},
+ {:name => "tag 2"},
+ {:name => "tag 3"},
+ {:name => "tag 4"}
+ ]
+ } # Or an ActiveRecord fetch
+
+ render :text => Isotope.render_partial(Rails.root.join('app/views/articles/article.ejs'), :locals => { :item => @article })
+ end
+
+Or, with a view:
+
+ # ArticlesController
+
+ def show
+ @article = {
+ :title => "Hello!",
+ :content => "World!",
+ :tags => [
+ {:name => "tag 1"},
+ {:name => "tag 2"},
+ {:name => "tag 3"},
+ {:name => "tag 4"}
+ ]
+ } # Or an ActiveRecord fetch
+ end
+
+ # views/articles/show.html.erb
+
+ <%= Isotope.render_partial(Rails.root.join('app/views/articles/article.ejs'), :locals => { :item => @article }) %>
+
+##### Client Side Example:
+
+ # views/articles/show.html.erb
+
+ <%= Isotope.render_template(Rails.root.join('app/views/articles/article.ejs'), :id => "article") %>
+
+
+#### Sinatra
+
+Actually the same usage, more or less.
+
+
+---
+
+---
+
+Would love to hear your comments!
+
+Elad Ossadon
+
+* [http://devign.me](http://devign.me)
+* [http://elad.ossadon.com](http://elad.ossadon.com)
+* [elad@ossadon.com](mailto:elad@ossadon.com)
@@ -0,0 +1,4 @@
+.bundle
+db/*.sqlite3
+log/*.log
+tmp/**/*
@@ -0,0 +1,34 @@
+source 'http://rubygems.org'
+
+gem 'rails', '>=3.0.0'
+
+# gem 'isotope'
+gem 'json'
+gem 'johnson'
+
+# Bundle edge Rails instead:
+# gem 'rails', :git => 'git://github.com/rails/rails.git'
+
+gem 'sqlite3-ruby', :require => 'sqlite3'
+
+# Use unicorn as the web server
+# gem 'unicorn'
+
+# Deploy with Capistrano
+# gem 'capistrano'
+
+# To use debugger
+# gem 'ruby-debug'
+
+# Bundle the extra gems:
+# gem 'bj'
+# gem 'nokogiri'
+# gem 'sqlite3-ruby', :require => 'sqlite3'
+# gem 'aws-s3', :require => 'aws/s3'
+
+# Bundle gems for the local environment. Make sure to
+# put test-only gems in this group so their generators
+# and rake tasks are available in development mode:
+# group :development, :test do
+# gem 'webrat'
+# end
@@ -0,0 +1,77 @@
+GEM
+ remote: http://rubygems.org/
+ specs:
+ abstract (1.0.0)
+ actionmailer (3.0.0)
+ actionpack (= 3.0.0)
+ mail (~> 2.2.5)
+ actionpack (3.0.0)
+ activemodel (= 3.0.0)
+ activesupport (= 3.0.0)
+ builder (~> 2.1.2)
+ erubis (~> 2.6.6)
+ i18n (~> 0.4.1)
+ rack (~> 1.2.1)
+ rack-mount (~> 0.6.12)
+ rack-test (~> 0.5.4)
+ tzinfo (~> 0.3.23)
+ activemodel (3.0.0)
+ activesupport (= 3.0.0)
+ builder (~> 2.1.2)
+ i18n (~> 0.4.1)
+ activerecord (3.0.0)
+ activemodel (= 3.0.0)
+ activesupport (= 3.0.0)
+ arel (~> 1.0.0)
+ tzinfo (~> 0.3.23)
+ activeresource (3.0.0)
+ activemodel (= 3.0.0)
+ activesupport (= 3.0.0)
+ activesupport (3.0.0)
+ arel (1.0.1)
+ activesupport (~> 3.0.0)
+ builder (2.1.2)
+ erubis (2.6.6)
+ abstract (>= 1.0.0)
+ i18n (0.4.1)
+ johnson (1.2.0)
+ json (1.4.6)
+ mail (2.2.7)
+ activesupport (>= 2.3.6)
+ mime-types
+ treetop (>= 1.4.5)
+ mime-types (1.16)
+ polyglot (0.3.1)
+ rack (1.2.1)
+ rack-mount (0.6.13)
+ rack (>= 1.0.0)
+ rack-test (0.5.6)
+ rack (>= 1.0)
+ rails (3.0.0)
+ actionmailer (= 3.0.0)
+ actionpack (= 3.0.0)
+ activerecord (= 3.0.0)
+ activeresource (= 3.0.0)
+ activesupport (= 3.0.0)
+ bundler (~> 1.0.0)
+ railties (= 3.0.0)
+ railties (3.0.0)
+ actionpack (= 3.0.0)
+ activesupport (= 3.0.0)
+ rake (>= 0.8.4)
+ thor (~> 0.14.0)
+ rake (0.8.7)
+ sqlite3-ruby (1.3.1)
+ thor (0.14.3)
+ treetop (1.4.8)
+ polyglot (>= 0.3.1)
+ tzinfo (0.3.23)
+
+PLATFORMS
+ ruby
+
+DEPENDENCIES
+ johnson
+ json
+ rails (>= 3.0.0)
+ sqlite3-ruby
Oops, something went wrong.

0 comments on commit a32211b

Please sign in to comment.