Rails, Postgres, Angular, and Bootstrap: The Power Stack

Rails, Postgres,
Angular, and Bootstrap
The Power Stack
@davetron5000

Journey through the
“stack”

“Jack of all trades,
master of none…
…oftentimes better
than master of one”

Subhead 1
Subhead 2
Subhead 3
Body Text
Captions & Secondary Text

About Us
The place for all your needs
We’ve got everything you
could ever want and then
some. It’s just that simple to
be as awesome as we are,
and it shows.
You can’t find this much great
stuff anywhere else, so what
are you waiting for? Sign up
Sign Up
Log In
Help

<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
<form>
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
<label>
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn btn-default">Sign in</button>
</form>

<button type=“button” class=“btn btn-default”>Default</button>
<button type=“button” class=“btn btn-primary”>Primary</button>
<button type=“button” class=“btn btn-primary btn-lg”>Large</button>
<button type=“button” class=“btn btn-primary btn-xs”>XS</button>
Default
Default
Default
Default

<div class=“alert alert-success”>…</div>
alert-info
alert-warning
alert-danger

Panel
Icons
Sub-panel
Well
Disabled
Badge

You shouldn’t think about
locating DOM elements and
firing or responding to events
<div class=“dialog js-dismissable”>
<h1>OK?</h1>
<nav>
<button data-dismiss=“yes”>Close</button>
<button data-ok>OK</button>
</nav>
</div>
$(“.js-dimissable”).find(“[data-ok]”).click(function() {
// ...
});

Components &
Behavior
<dialog>
<title>OK?</title>
<dismiss>Close</dismiss>
<confirm>OK</confirm>
</dialog>
dialog.on_confirm(function() {
// ...
});

Some
Documentation
Kinda
Works
No
Support
Yeah, there’s probably some
code comments, and it’s
entirely possible I used great
variable names. Functions
and objects should be
consistent, but probably
aren’t. I think there was a
demo page somewhere,
maybe?
It still doesn’t handle that
weird case on IE 8, and I
never tested what happens if
you use two containers in the
same DOM subtree, but CSS
polyfills mostly work for major
browsers. No, there’s no test
suite.
I’m moving onto a project
using Node, Elixir, Redis,
Mongo, and Kubernetes, so
the best thing to do is hang
out on the Slack channel. I
live in New Orleans, but work
Amsterdam hours, so I’m not
always around.
JS

<aside class=“modal-dialog”>
<h1>{{ title }}</h1>
<p ng-if=“message”>
{{ message }}
</p>
<button ng-click=“dismiss()”>Close</button>
<button ng-click=“ok(‘ok’)”>OK</button>
<button ng-click=“ok(‘maybe’)”>Maybe</button>
</aside>

“DialogController”,
function($scope, $dialog, opts) {
$scope.title = opts.title;
$scope.message = opts.message;
$scope.ok = function(data) {
if (data == ‘ok’) {
$dialog.confirm();
}
else {
$dialog.confirm(withData: data)
}
}
$scope.dismiss = function() {
$dialog.cancel();
}

User = $resource(“/users/:id”);
$scope.user = User.get(id: $routeParams.id);
<article>
<h1>{{ user.name }}</h1>
<h2>{{ user.email }}</h2>
<ul ng-repeat=“login in user.recentLogins”>
<li>
<strong>{{ login.date }}</strong> -
{{ login.ipAddress }}
</li>
</ul>
</article>

angular.module(‘controllers’).controller(
function($scope, $dialog, opts) {
$scope.ok = function(data) {
if (data == ‘ok’) {
$dialog.confirm();
}
else {
$dialog.confirm(withData: data)
}
}
$dialog.cancel();
}
});

“customConfirmation”,
function() {
return {
confirm: function($dialog,data) {
if (data == ‘ok’) $dialog.confirm();
else $dialog.confirm(withData: data);
}
}
}
);
angular.module(‘controllers’).controller(
function($scope, $dialog, opts, customConfirmation) {
$scope.ok = customConfirmation.confirm;
$dialog.cancel();
}

Parse HTTP
Extract params, headers,
cookies, etc
Route to code
Read result
Generate response, cookies,
headers, etc.
Database Access
Package Assets
Run Tests
Schema Management
Configuration & Deployment

Parse HTTP
Extract params, headers,
cookies, etc
Route to code
Read result
Generate response, cookies,
headers, etc.
Database Access
Package Assets
Run Tests
Schema Management
Configuration & Deployment
Plumbing

First: Learn SQL. You
won’t regret it.

ALTER TABLE
users
ADD CONSTRAINT
valid_emails
CHECK (
( guest = true AND
email ! ‘[A-Za-z0-9._%-]+@example.com’)
OR
( guest = false AND
email ~ ‘[A-Za-z0-9._%-]+@example.com’)
)

CREATE INDEX
users_name_index
ON
users (lower(name))
SELECT * FROM users
WHERE lower(name) = ‘bob’;

UPDATE users
SET config = ‘auto_save => true,
color => default’::hstore;
CREATE INDEX user_config
ON users USING GIN(config);
ALTER TABLE
users
ADD COLUMN
config HSTORE;
SELECT * FROM users
WHERE config @> ‘auto_save => true’;

ALTER TABLE
users
ADD COLUMN
roles text[];
UPDATE users
SET roles = ‘{staff,admin}’;
CREATE INDEX user_roles
ON users USING GIN(roles);
SELECT * FROM users
WHERE roles @> ‘{admin}’;

ALTER TABLE
transactions
ADD COLUMN
braintree_response JSONB;
UPDATE transactions
SET braintree_response = ‘{
“processor_response”: “decline”,
“processor_code”: 1234,
“details”: {
“charge_type”: “authorization”,
“amount”: 12.45,
“zip”: “20002”
}

CREATE INDEX txn_responses
ON transactions
USING GIN(braintree_response);
SELECT * FROM
transactions
WHERE
roles @>
‘{“processor_response”: “decline”}’::jsonb;

SQL Knowledge + Postgres
== Powerful data layer

Bootstrap
• JS-based components require jQuery
• Angular-UI-Bootstrap

Angular
• Protractor (end-to-end testing) totally disconnected
from Rails/back-end
• Use Capybara/PhantomJS for E2E testing

Rails
• Strange view/front-end/JS/AJAX design
• Avoid
• Disable turbolinks
• Asset Pipeline oddities
• Learn to use it—it’s actually powerful

Rails
• Database Migrations “DSL”
• You are not making a database-agnostic app
• Use execute
• Use SQL-based schema
config.active_record.schema_format = :sql

Rails
• ActiveRecord
• Examine queries in the log—look for
optimizations
• Let SQL shine
• Don’t fear .where() or
ActiveRecord::Base.connection.exec_query()

Postgres
• Stored Procedures
• Triggers
• Avoid putting business logic here

You don’t have to use
every feature

The reduce the decisions
you have to make to only
what’s important.

If you are making decisions
not related to your product…

…consider Bootstrap,
Angular, Rails, or Postgres

Rails, Postgres, Angular, and Bootstrap: The Power Stack

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Rails, Postgres, Angular, and Bootstrap: The Power Stack

Similar to Rails, Postgres, Angular, and Bootstrap: The Power Stack (20)

Recently uploaded

Recently uploaded (20)

Rails, Postgres, Angular, and Bootstrap: The Power Stack

Editor's Notes