Using Ruby for Integrated Javascript Development: Introducing Iridium

Using Ruby for
Integrated Javascript
Development
Introducing Iridium
Wednesday, August 15, 12

View Slide

var Me = { };
• Ich heiße Adam Hawkins
• @adman65
• https://github.com/twinturbo
• Lead Code Monkey at Radium
• Primarily Ruby guy, now focused on JS

View Slide

Goal: Build an
Ambitious Ember App

View Slide

Ambitious (n) / Ambitioniert (h)
• Organized: Directory structure reﬂects code’s
responsibility
• Testable: Headless and Automated
• Compilable: Coffeescript, Handlebars, and SCSS
• Reloadable: Develop in the Browser
• Completely separate from any other code.
Separate repos. Separate servers. Separate
everything--allow per project optimizations.

View Slide

• We all have our own native language
• Independent frontend and backend
• We meet at the API
• More frontend guys then backend guys
Our Team

View Slide

Our Tools

View Slide

Javascript ... Verdammt

View Slide

• How can we write our code in
Coffeescript?
• How can we write our CSS in SCSS?
• How can we organize & require our code?
• How can we unit test?
• How can we run integration tests?

View Slide

Hard Problems mit
Lösungen

View Slide

• Organized code has boundaries
• Organized code is reusable
• Organized code is split into many source
ﬁles
• Organized code can be required or
imported
• Now you’re thinking....
Organization ... lolwut

View Slide

thought = "I’ll just
use #{[
"commonjs",
"AMD",
"requirejs",
"E6 Modules"
].rand}!"

View Slide

Code Loading
Comparison
Language Example Uses HTML
C #include No :)
Ruby require ‘socket’ No :)
Python import fibo No :)
JavaScript Yes :(

View Slide

Solutions ?
• Accept it sucks & use a module loader
• Wait for ES6 Modules. This will only take 5
lifetimes.
• Use a Polyﬁll
• Approach the problem from a new angle

View Slide

Loading JS: Minispade
• tags...<script> tag’s everywhere • Works when you have a small number of files • Blows up when you have hundreds or thousands • Use Minispade to wrap all individual source files in functions and dump them into a single file during compilation Wednesday, August 15, 12 

View Slide

Compilation

View Slide

$ cat **/*.coffee |
coffescript >
application.js

View Slide

That Was Easy Right?
• ... but I need to combine them into one ﬁle
• ... but I need to load extra JS depending on
environment (test/development/production)
• ... but I want to minify it in production
• ... but I only want something when I’m developing
• ... but what about images and other assets?

View Slide

Coffeescript
Concatenation
Miniﬁcation
Compression
application.js

View Slide

Rake::Pipeline
• I know Ruby. Let’s use Rake::Pipeline to
compile the application
• It’s a series of tubes
• Input ﬁles mapped to output ﬁles
• It can do everything we need

View Slide

Rake::Pipeline.build
input "app"
output "site"
match "javascripts/**/*.coffee" do
coffeescript
end
match "stylesheets/**/*.scss" do
scss
end
match "**/*.js" do
contact "application.js"
uglify if production?
end
match "**/*.css" do
contact "application.css"
yui_css if production?
end
end

View Slide

What About Red,
Green, Refactor?

View Slide

// simplest possible test
test("true", function() {
ok(true, "True is true");
});
Let’s just ﬁre this test up...

View Slide

1. Ensure we have the correct application.js loadable
2. Make an HTML file
3. Add a tag for qunit 4. Add a <script> tag for our test(s) 5. Write <script> tags for any other files we need 6. Human opens the HTML file using a browser 7. Human verifies results After We Do All This: Wednesday, August 15, 12 

View Slide

Integration Tests
• Use a server to serve and boot the app
• Use something to simulate user activity...no
seriously what do you use?
• Report Results

View Slide

What’s the Problem
• We need HTML (this makes me sad)
• Humans are involved
• No uniﬁed test runner from the command
line
• How does this process map to CI?
• Hard to run individual tests

View Slide

#77 - Iridium
(It’s an Element)

View Slide

Iridium: Dev Faster
• Uniﬁed test runner for integration and unit
tests -- all from CLI
• Sensible defaults for asset compilation with
Rake::Pipeline
• Code “modularization” with Minispade
• Conﬁgurable based on environment
(development, test, production)
• Make it all work seamlessly

View Slide

Architecture
• Written in Ruby & designed for Javascript
• Rake::Pipeline for asset compilation
• PhantomJS, CasperJS + Patches for automated
tests
• Minispade for JS module loading
• Preload jQuery and Handlebars
• Preload Qunit and Sinon for testing
• Not framework speciﬁc. Can use Ember,
Backbone, etc

View Slide

$ cd projects/todos
$ iridium server
>> Thin web server (v1.4.1 codename Chromeo)
>> Maximum connections set to 1024
>> Listening on 0.0.0.0:9292, CTRL+C to stop
Relodable
... now hit Refresh

View Slide

// app.js - loads all the code
Todos = Ember.Application.create({
VERSION: '1.0',
storeNamespace: 'todos-emberjs',
});
require('todos/router'); // app/javascripts/router.js|coffee
require('todos/models'); // app/javascripts/models.js|coffee
require('todos/controllers'); // you get
require('todos/views'); // the point
require('todos/templates'); // by now
Organized

View Slide

$ iridium test
Testable

View Slide

$ iridium test integration/todo.coffee
# integration test with CasperJS
# test/integration/todo.coffee
casper.start 'http://localhost:7777/', ->
@test.assertExists('#new-todo', 'todo form found')
casper.run ->
@test.done()
Fullstack Tests

View Slide

$ iridium test test/model_test.coffee
# test/models_test.coffee
test "should default to not done", ->
equal Models.todo.get('isDone'), false, "todo is not done"
test "should set todo title", ->
Models.todo.set 'title', "A todo"
equal Models.todo.get('title'), "A todo", "todo title is set"
test "should be able to signify isdone", ->
Models.todo.set 'isDone', true
ok Models.todo.get('isDone'), "Todo is done"
Unit Tests

View Slide

class Todos < Iridium::Application
config.load :minispade
config.load :jquery
config.load :handlebars
config.load :ember
end
Dependency Management

View Slide

$ iridium compile # production
$ iridium compile ENV=staging
Compilable

View Slide

$ iridium lint
If You Have OCD

View Slide

github.com/
radiumsoftware/iridium
git clone

View Slide

Using Ruby for Integrated Javascript Development: Introducing Iridium

Using Ruby for Integrated Javascript Development: Introducing Iridium

Adam Hawkins

More Decks by Adam Hawkins

Other Decks in Programming

Featured

Transcript