This presentation details the process I went through converting a medium sized Ruby on Rails application to Node.js. This included converting SASS to SCSS, Converting HAML to Jade, and building a model and routing framework to match the features in Rails.
2. BACKGROUND
•
CTO of Ideal Candidate
•
MVP existed when I joined
•
Author of Haraka and a few
other Node.js libraries
•
Background in Perl and
Anti-Spam
3. THE RAILS APP
•
Unicorn + Thin + Rails
•
CoffeeScript with Angular.JS
•
SASS+Compass for stylesheets
•
HAML for templates
•
MySQL + MongoDB
•
Sidekiq for background tasks
10. DIRECTORY STRUCTURE
lib
- general JS libraries
⌞ model - database accessors
public
- files that get served to the front end
⌞ assets - files that are considered part of the app
⌞ javascripts
⌞ stylesheets
⌞ images
routes
- files that provide express routes for HTML
⌞ api/v1 - files providing REST API endpoints (JSON)
views
- Jade templates
app.js
- entry point
11. RAILS ASSET PIPELINE
•
Rails does a lot for you, but it’s f ’ing confusing
•
HAML Template Example:
•
= javascript_include_tag :application
•
You’d think this adds <script
src=“application.js”>, but no.
12. RAILS ASSET PIPELINE
•
Easy if you understand it
•
Too much magic for my liking
•
But… the overall effect is good. So I copied some
of it.
18. SCSS APP.JS
compile_css();
!
// Dev and Production the same
app.get(//assets/stylesheets/application-(w+).css/, function (req, res) {
res.type('css');
res.setHeader('Cache-Control', 'public, max-age=31557600');
res.end(resources.css);
});
19. ADDING COMPASS
•
Ruby CSS framework
•
Luckily only the CSS3 part used
•
CSS3 code is just SASS files
•
Once I figured this out, copied them into my
project, et voila!
20. CONVERTING HAML TO JADE
•
Both indent based
•
HAML:
•
•
%tag{attr: “Value”}
Some Text
.person
.name
Bob
JADE:
tag(attr=“Value”) Some Text
.person
.name Bob
Other subtle differences too
21. CONVERSION TOOL: SUBLIME
TEXT
•
Afterthought: I should have written something in Perl
•
Regexp Find/Replace
•
^(s*)%
=> $1 (fix tags)
•
(w){(.*)} => $1($2) (attribute curlys)
•
(w):s*([“‘]) => $1=$2 (attribute key: value)
22. THINGS LEFT TO FIX
•
Helpers: = some_helper
•
Text on a line on its own - Jade treats these as tags
•
Nested attributes:
•
->
%tag{ng:{style:’…’,click:’…’},class:’foo’}
tag(ng-style=‘…’, ng-click=‘…’, class=‘foo’)
Making sure the output matched the Ruby/HAML
version was HARD - HTML Diff tools suck
23. HELPERS BECAME MIXINS
•
Standard Rails Helpers:
= form_for @person do |f|
f.label :first_name
f.text_field :first_name
%br
!
f.label :last_name
f.text_field :last_name
%br
!
f.submit
•
Custom Rails helpers stored in app/helpers/ folder
•
http://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html
24. JADE MIXINS
•
Very powerful. Poorly documented.
•
Standalone or can have block contents
// implementation
mixin form(action)
form(accept-charset="UTF-8", action=action, method="POST")
input(name="utf8" type="hidden" value="✓")
block
// usage:
+form(‘/post/to/here’)
input(type=“text”,name=“hello”,value=“world”)
•
Supports js code
mixin app_error(field)
if (errors && errors[field])
div(class="err_msg " + field)
each error in errors[field]
span= error
26. CREATING THE MODEL
•
Hand coded db.js layer developed over time from previous
projects
•
One file per table (generally) in lib/model/*.js
"use strict";
var db = require('./db');
exports.get = function get (id, cb) {
db.get_one_row("SELECT * FROM Answers WHERE id=$1", [id], cb);
}
exports.get_by_submission_id = function (submission_id, cb) {
db.query("SELECT * FROM Answers
WHERE submission_id=$1
ORDER BY question_id", [submission_id], cb);
}
27. WHY CONTROL THE SQL?
exports.get_avg_team_size = function (company_id, role_id, months, cb) {
var role_sql = role_id ? ' AND role_id=$2' : ' AND $2=$2';
!
!
}
if (months == 0 || months == '0') {
months = '9000'; // OVER NINE THOUSAND
}
var sql = "SELECT avg(c) as value
FROM (
SELECT g.month, count(e.*)
FROM generate_series(
date_trunc('month', now() - CAST($3 AS INTERVAL)),
now(),
INTERVAL '1 month') g(month)
LEFT JOIN employees e ON e.company_id=$1" + role_sql + "
AND (start_date, COALESCE(end_date, 'infinity'))
OVERLAPS
(g.month, INTERVAL '1 month')
GROUP BY g.month
HAVING count(e.*) > 0
) av(month,c)";
db.get_one_row(sql, [company_id, role_id, months + " months"], cb);
28. AND FINALLY…
•
Routes
•
Run Rails version of App
•
Open Chrome Dev Console Network tools
•
Hit record
•
Find all routes and implement them
29. CREATING ROUTES/MODELS
•
While I glossed over this, it was the bulk of the
work
•
Each endpoint was painstakingly re-created
•
This allowed me to get a view of the DB layout
•
And fix design bugs in the DB layout
find.fileSync(/.js$/, __dirname + '/routes').forEach(function (route_file) {
require(route_file);
});
30. BACKGROUND TASKS
•
Currently using Sidekiq, which uses Redis as a queue
•
Used for downloading slow data feeds
•
Node.js doesn’t care if downloads are slow
•
So I punted on background tasks for now
•
If I need them later I will use Kue (see npmjs.org)
31. DEPLOYMENT
•
Linode + Nginx + Postgres 9.3.1 + Runit +
Memcached
•
/var/apps and deploy_to_runit for github autodeploy
•
Monitoring via Zabbix
•
60M used vs 130M for Rails
32. NEXT STEPS
•
Convert coffeescript code to plain JS - I find
coffeescript too much of a pain
•
Implement graceful restarts using cluster
•
Consider porting CSS to Bootstrap so we get
mobile support
Notes de l'éditeur
Knowledge
Hiring
Lack of “Magic”
Performance
Queryability
PostgreSQL
Referential integrity
Pre-Customers so zero downtime
“Little ones and zeros, it’s all just electrons”.
Web apps are a flow of information. HTML+JS goes to the client, XHR queries come back, XHR responses get sent, POST and PUT requests modify data. Monitor all these, watch the flow, and you have your app. The backend is unimportant at that level.
And probably more
Let’s start with a solid directory structure. I always do this when I’m creating express apps as it helps me stay grounded and not create too many hacks.
My app.js has evolved a bit over time to include many things. Happy to share it.
What it actually does:
Looks for your application.js. If it doesn’t find it, looks for application.coffee.
It then scans that file for comments containing =require or =require_tree
In production it loads all those files, coffee script compiles them if necessary, minimises, and delivers via a <script src=“application-$md5.js”>.
In dev, it puts in as many <script> tags as required for each file and delivers them, coffee script compiled.
Rails does the same for SASS stylesheets.
FML.
I wrote coffee_compiler - but it’s very simple
Did this by installing the gem, finding the .sass files, and copying them over to my project.
Helpers are functions to simplify HTML generation. Rails comes with a bunch that help with creating forms (and some others).
These had to be ported to become Jade mixins.
HAML version creates some HTML and loads the template ‘views/roles/new’ to be part of the content
Jade cannot do that, so we manually include the template
Slightly more code than ActiveRecord, but gives you full control over SQL
Only returns plain objects, doesn’t support dynamic updates
Considering using getters/setters for next iteration, but not sure how they serialize
