YUI3 Rails Application Template
I decided to put together a Rails template to generate a quick sqlite3 db driven web app to test out YUI3 functionality quickly. Rails 3 makes it super simple to quickly generate real JSON data for testing out various YUI 3 components such as DataSource.
The template takes care of removing the Prototype library, including yui-debug.js and the CSS framework including reset, and the new Grids - currently in beta. I also wanted to deliver my basic markup quickly so I've added Haml
Since I have been disciplining myself to follow Test Driven Development on the server, I included all of my Rails testing dependencies in the app template as well (RSpec, Cucumber, WebRat, Factory Girl) and I plan to continue to leverage YUI Test on the client as I run through browser validations of the datasource-polling sub-module. Clone the rails app template here.
# YUI3 Application Generator Template
# Generates a Rails app; includes YUI3, Haml, RSpec, Cucumber, WebRat, Factory Girl ...
puts "Generating a new YUI3 Rails app"
#----------------------------------------------------------------------------
# Create the database
#----------------------------------------------------------------------------
puts "creating the database..."
run 'rake db:create:all'
#----------------------------------------------------------------------------
# GIT
#----------------------------------------------------------------------------
puts "setting up 'git'"
append_file '.gitignore' do <<-FILE
'.DS_Store'
'.rvmrc'
FILE
end
git :init
git :add => '.'
git :commit => "-m 'Initial Commit of YUI3 Rails App'"
#----------------------------------------------------------------------------
# Remove files
#----------------------------------------------------------------------------
puts "removing files..."
run 'rm public/index.html'
run 'rm public/favicon.ico'
run 'rm public/images/rails.png'
run 'rm README'
run 'touch README'
puts "banning spiders from your site by changing robots.txt..."
gsub_file 'public/robots.txt', /# User-Agent/, 'User-Agent'
gsub_file 'public/robots.txt', /# Disallow/, 'Disallow'
#----------------------------------------------------------------------------
# Haml
#----------------------------------------------------------------------------
puts "setting up Gemfile for Haml..."
append_file 'Gemfile', "\n# Bundle gems needed for Haml\n"
gem 'haml', '3.0.18'
gem 'haml-rails', '0.2', :group => :development
#----------------------------------------------------------------------------
# Set up YUI3
#----------------------------------------------------------------------------
puts "replacing Prototype with YUI3"
run 'rm public/javascripts/controls.js'
run 'rm public/javascripts/dragdrop.js'
run 'rm public/javascripts/effects.js'
run 'rm public/javascripts/prototype.js'
run 'rm public/javascripts/rails.js'
get "http://yui.yahooapis.com/combo?3.3.0/build/yui/yui-debug.js", "public/javascripts/yui-debug.js"
get "http://yui.yahooapis.com/3.3.0/build/cssreset/reset.css", "public/stylesheets/reset.css"
get "http://yui.yahooapis.com/3.3.0/build/cssbase/base.css", "public/stylesheets/base.css"
get "http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts.css", "public/stylesheets/fonts.css"
get "http://yui.yahooapis.com/3.3.0/build/cssgrids/grids.css", "public/stylesheets/grids.css"
#----------------------------------------------------------------------------
# Create an index page
#----------------------------------------------------------------------------
puts "create a home controller and view"
generate(:controller, "home index")
gsub_file 'config/routes.rb', /get \"home\/index\"/, 'root :to => "home#index"'
append_file 'app/views/home/index.html.haml'do <<-FILE
!!!
%h2{:class => "subtitle"} Get Started
%p{:class => "content"} Update application.js with your logic
%div{:class => "container", :id => "container"}
%div{:id => "testLogger"}
FILE
end
#----------------------------------------------------------------------------
# Generate Application Layout
#----------------------------------------------------------------------------
run 'rm app/views/layouts/application.html.erb'
create_file 'app/views/layouts/application.html.haml' do <<-FILE
!!!
%html
%head
%title YUI3 App
= stylesheet_link_tag "reset"
= stylesheet_link_tag "base"
= stylesheet_link_tag "fonts"
= stylesheet_link_tag "grids"
= stylesheet_link_tag "application"
= javascript_include_tag :all
= csrf_meta_tag
%body{:class =>"yui3-skin-sam yui-skin-sam"}
= yield
FILE
end
#----------------------------------------------------------------------------
# Add Stylesheets
#----------------------------------------------------------------------------
create_file 'public/stylesheets/application.css' do <<-FILE
div.container {
width: 100%;
height: 100px;
padding: 10px;
margin: 10px;
border: 1px solid red;
}
#testLogger {
margin-bottom: 1em;
}
#testLogger .yui3-console .yui3-console-title {
border: 0 none;
color: #000;
font-size: 13px;
font-weight: bold;
margin: 0;
text-transform: none;
}
#testLogger .yui3-console .yui3-console-entry-meta {
margin: 0;
}
.yui3-skin-sam .yui3-console-entry-pass .yui3-console-entry-cat {
background: #070;
color: #fff;
}
FILE
end
#----------------------------------------------------------------------------
# Initialize YUI and add YUI Test
#----------------------------------------------------------------------------
append_file 'public/javascripts/application.js' do <<-FILE
YUI({ filter: 'raw' }).use("node", "console", "test",function (Y) {
Y.namespace("example.test");
Y.example.test.DataTestCase = new Y.Test.Case({
//name of the test case - if not provided, one is auto-generated
name : "Data Tests",
//---------------------------------------------------------------------
// setUp and tearDown methods - optional
//---------------------------------------------------------------------
/*
* Sets up data that is needed by each test.
*/
setUp : function () {
this.data = {
name: "test",
year: 2007,
beta: true
};
},
/*
* Cleans up everything that was created by setUp().
*/
tearDown : function () {
delete this.data;
},
//---------------------------------------------------------------------
// Test methods - names must begin with "test"
//---------------------------------------------------------------------
testName : function () {
var Assert = Y.Assert;
Assert.isObject(this.data);
Assert.isString(this.data.name);
Assert.areEqual("test", this.data.name);
},
testYear : function () {
var Assert = Y.Assert;
Assert.isObject(this.data);
Assert.isNumber(this.data.year);
Assert.areEqual(2007, this.data.year);
},
testBeta : function () {
var Assert = Y.Assert;
Assert.isObject(this.data);
Assert.isBoolean(this.data.beta);
Assert.isTrue(this.data.beta);
}
});
Y.example.test.ArrayTestCase = new Y.Test.Case({
//name of the test case - if not provided, one is auto-generated
name : "Array Tests",
//---------------------------------------------------------------------
// setUp and tearDown methods - optional
//---------------------------------------------------------------------
/*
* Sets up data that is needed by each test.
*/
setUp : function () {
this.data = [0,1,2,3,4]
},
/*
* Cleans up everything that was created by setUp().
*/
tearDown : function () {
delete this.data;
},
//---------------------------------------------------------------------
// Test methods - names must begin with "test"
//---------------------------------------------------------------------
testPop : function () {
var Assert = Y.Assert;
var value = this.data.pop();
Assert.areEqual(4, this.data.length);
Assert.areEqual(4, value);
},
testPush : function () {
var Assert = Y.Assert;
this.data.push(5);
Assert.areEqual(6, this.data.length);
Assert.areEqual(5, this.data[5]);
},
testSplice : function () {
var Assert = Y.Assert;
this.data.splice(2, 1, 6, 7);
Assert.areEqual(6, this.data.length);
Assert.areEqual(6, this.data[2]);
Assert.areEqual(7, this.data[3]);
}
});
Y.example.test.ExampleSuite = new Y.Test.Suite("Example Suite");
Y.example.test.ExampleSuite.add(Y.example.test.DataTestCase);
Y.example.test.ExampleSuite.add(Y.example.test.ArrayTestCase);
//create the console
var r = new Y.Console({
newestOnTop : false,
style: 'block' // to anchor in the example content
});
r.render('#testLogger');
Y.Test.Runner.add(Y.example.test.ExampleSuite);
//run the tests
Y.Test.Runner.run();
});
FILE
end
#----------------------------------------------------------------------------
# Setup RSpec & Cucumber
#----------------------------------------------------------------------------
puts 'Setting up RSpec, Cucumber, webrat, factory_girl, faker'
append_file 'Gemfile' do <<-FILE
group :development, :test do
gem "rspec-rails", ">= 2.0.1"
gem "cucumber-rails", ">= 0.3.2"
gem "webrat", ">= 0.7.2.beta.2"
gem "factory_girl_rails"
gem "faker"
end
FILE
end
run 'bundle install'
run 'script/rails generate rspec:install'
run 'script/rails generate cucumber:install'
run 'rake db:migrate'
run 'rake db:test:prepare'
run 'touch spec/factories.rb'
#----------------------------------------------------------------------------
# Finish up
#----------------------------------------------------------------------------
puts "Commiting to Git repository..."
git :add => '.'
git :commit => "-am 'Setup Complete'"
puts "DONE - setting up your YUI3 Rails App."
- admin's blog
- Login to post comments
