Harry Moreno

Consultant at the R3DM.com

• Ruby
• Javascript

Vocabulary

HTTP - HyperText Transfer Protocol

CSRF - Cross-Site Request Forgery

JSON - JavaScript Object Notation

SPA - Single Page Application

DOM - Document Object Model

Bundle thick Javascript

client

Modules aka Javascript Gems

JSON REST API

GET request

JSON response

In your view

<div id="content"></div>

In your view

<% if user_signed_in? %>
  <div id="content"></div>
<% else %>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-xs-offset-0 welcome">

        <h1>Welcome</h1>

      </div>
    </div>
  </div>
<% end %>

CSRF

<%-# view.erb -%>

<%= csrf_meta_tags %>

<!-- renders -->

...

<meta name="csrf-token" content="MA2lN1qA==">
...

// globals.js
var $ = require('jquery')

function globular () {
  var csrf = $('meta[name="csrf-token"]')
               .attr('content')
  return {
    csrf: csrf
  }
}

module.exports = globular()

CSRF

var $ = require('jquery')
var globals = require('../globular.js')
var csrfToken = globals.csrf

$.ajax({
  url: 'logout',
  type: 'DELETE',
  headers: {
    'X-CSRF-Token': csrfToken
  },
  success: function(data) {
    debug('successful delete', data)
    window.location.replace(window.location.origin)
  }
})
.fail(function() {
  debug('logout failed')
})

You should namespace your SPA global variables. I use this approach.

Deploying to Heroku

Deploying to Heroku

bundle

npm install

Deployment time increases

Use a buildpack

Testing with Mocha

Testing with Mocha

To install
$ npm install --save mocha

To run
$ mocha spec/javascripts

or

package.json
{
  "scripts": {
    "test": "mocha spec/javascripts"
  }
}

$ npm run test

Rails JSON API

• Could use rails-api gem
• serve CSRF via api end-point
• Protip - use Postman

Rails JSON API

class ModelController < ApplicationController

  def model
    @model = Model.find(params[:id])
    render json: @model
  end

end

{
  "id": 108,
  "created_at": "2015-03-27T03:12:57Z",
  "updated_at": "2015-03-27T03:12:59Z"
}

Get /model/:id

Rails JSON API

class ModelController < ApplicationController

  def update
    @model = Model.find(params[:id])
    @model.update!(safe_params)
    render nothing: true
  end

  private

    def safe_params
      params.require(:model).permit(:foo)
    end

end

$.ajax({
  type: 'PUT',
  url: 'models/' + Id,
  headers: {
    'X-CSRF-Token': csrfToken
  },
  data: {model: {foo: 'bar'}},
  dataType: 'json',
  success: function (res) {
    console.log(res)
  }
})

PUT /model/:id

• Smaller API than Angular.js
• Reusable UI Components
• More granular Componentization than other approaches
• Immutability

Why React?

React.js

// app.jsx
var React = require('react')
var Searchbox = require('/searchbox.jsx')
var List = require('/list.jsx')
var ListItem = require('/listItem.jsx')
var ListTitle = require('/listTitle.jsx')

var App = React.createClass({
  render: function() {
    return (
      <div>
        <Searchbox />
        <List>
          <ListTitle title="Sporting goods"/>
          <ListItem name="football" price="49.99" />
          <ListItem name="baseball" price="9.99" />
          <ListItem name="basketball" price="29.99" />

          <ListTitle title="Electronics"/>
          <ListItem name="iPod Touch" price="99.99" />
          <ListItem name="iPhone 5" price="399.99" />
          <ListItem name="Nexus 7" price="199.99" />
        </List>
      </div>
    )
  }
})

module.exports = App

React.js

• Immutability is good!
• Don't focus on mutating DOM focus on rendering you component given any possible state
• State changes cascade down from parent components to their children

React.js