Rails and the single page app
a case study
Jan Krutisch for railswaycon 2012
made with showoff and <3
huhu
Jan Krutisch
/halfbyte
Web developer
Since 1996, more front than backend, etc.
Freelance
dpa
(they're hiring. yep.)
Single Page App
No full page reloads
Server interaction
only using XHR
Frontent interaction
built using javascript
But is it worth it?
Reasons for
a single page app
NXT: Snappiness
1. "Snappiness"
Subjective
Asynchronicity
A JAX
Excursion I:
Reduce network
interaction
reorder
AJAX! Drag & Drop! Magic!
Delayed persistance
NXT: Mobile Apps
2. Mobile Apps
Different interaction models
(taken from designnotes.info)
"Add to Home screen"
NXT: Offline Access
3. Offline access
Sketchy network
Mobile again
Excursion II:
Offline storage
Confusion!
Three basic techniques
- DOM Storage
- WebSQL
- IndexedDB
Browsers
| FF | Chrome | Opera | IE | Safari | |
|---|---|---|---|---|---|
| DOM Storage | 3.5 | 5.0 | 10.63 | 8.0 | 5.0 |
| WebSQL | - | 4 | 10.5 | - | 3.1 |
| IndexedDB | 9.0 | 17 | - | 10 | - |
Browsers
| FF | Chrome | Opera | IE | Safari | |
|---|---|---|---|---|---|
| DOM Storage | 3.5 | 5.0 | 10.63 | 8.0 | 5.0 |
| WebSQL | - | 4 | 10.5 | - | 3.1 |
| IndexedDB | 9.0 | 17 | - | 10 | - |
Use Lawnchair
var store = new lawnchair({name:'testing'},
function(store) {
// create an object
var me = {key:'brian'};
// save it
store.save(me);
// access it later...
store.get('brian', function(me) {
console.log(me);
});
}
);NXT: Clear Boundaries
4. Clear boundaries
We've all been there
"The jQuery-Mess"
Hard to test
Hard to maintain
Excursion III:
Javascript MVC
sammy.js spine.js backbone.js ember.js cappuchino.js knockout.js angular.js batman.js JavascriptMVC Cappuchino GWT Google Closure SproutCore
source: codebrief.com
backbone.js
Elements
- Models / Collections
- Views
- Routers / History
Models: server
persistence via JSON
Views: rendering UI
and handling UI events
≈ ViewControllers
in Cocoa
Routers:
≈ Controllers in Rails
History: URL modification
and routing
Own Event model
5. API uniformity
Building a native iPhone app?
Build a json/REST API once
Reasons against
a single page app
NXT: Search Engines
1. Search Engines
JS only won't fly
Solutions
Static landing pages
(e.g. links in footer)
potentially dangerous
render the important
content statically
Problem:
Duplication
Serverside Templates
vs.
Client side Templates
Currently
no good solution
Excursion IV:
Deserialize from HTML
Render static HTML
<ul class="books">
<li>
<h2>Book Title</h2>
<dl class="metadata">
<dt>ISBN:</dt>
<dd class="isbn">978foobar</dd>
<dt>Authors</dt>
<dd class="creator">Jonathan Oxer, Hugh Blemings</dd>
<dt>Created:</dt>
<dd class="created-at" data-date="2011-01-01">
January 1st, 2011
</dd>
</dl>
</li>
</ul>Initialize Collection
from HTML
books = new App.models.BooksCollection()
ds = new BackboneExt.Deserializer
root: 'ul.books'
iterate: 'li'
selectors:
title: 'h3'
isbn: '.metadata .isbn'
creator: '.metadata .creator'
description:
selector: '.description'
processors: 'strip'
created_at:
selector: '.metadata .created-at'
attribute: 'data-date'
books.reset ds.deserialize()Current Implementation
~100 lines of Coffeescript
Probably needs more work
What about URLs?
The Hashbang theory
https://twitter.com/?_escaped_fragment_=/halfbyte
Missing connection
between URL and content
Don't do that.
Solution
Excursion V:
pushState
history.pushState(obj, 'foo', 'halfbyte');
history.replaceState(obj, 'foo', 'halfbyte');Browser Support
- FF 4
- Chrome 5
- Opera 11.50
- Safari 5
- IE 10
backbone.js
Backbone.history.start({pushState: true})(falls back to hash URI)
Rails integration
If you don't
need SEO
Wildcard routing
namespace 'api' do
# all the API routes
end
match '/.*', :to => 'home#index'(beware of the user called 'api')
If you need SEO
Well
NXT: Leaving the Rails way
2. Leaving
"the rails way"
less best practices
less structure
Prepare to read
a lot of code
Almost no good books
Use rails_backbone
Adhere to conventions
More Complexity
3. More Complexity
Don't underestimate!
Request based
vs.
Event driven
Stateless
vs.
Stateful
Asynchronicity
Error Handling
Network problems
Don't forget
the unhappy path
Implement ALL THE CALLBACKS. NXT: Harder to test
4. Harder to test
More layers
JS testing
best practices
...
Asynchronicity
Excursion VI:
Javascript testing
1. Unit-Testing
qunit + sinon.js
Jasmine
2. Integration Testing
Capbybara / Cucumber
Selenium Webrunner
capybara-webkit
Phantom.js / Poltergeist
Test your tests
to automate
Watch out for buster.js
Example
Testing a model
HTML Test shim
<html>
<head>
<script src="jquery-latest.js"></script>
<link rel="stylesheet" href="qunit.css" type="text/css"/>
<script type="text/javascript" src="qunit.js"></script>
<script type="text/javascript" src="book_test.js"></script>
</head>
<body>
<h1 id="qunit-header">QUnit example</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>
</body>
</html>// a single test
test('should validate ISBN', function() {
expect( 1 );
var book = new Book({isbn: '978-3827324917'});
ok(book.isValid());
});
test('should validate ISBN', function() {
// 1 Assertion expected
expect( 1 );
var book = new Book({isbn: '978-3827324917'});
ok(book.isValid());
});
test('should validate ISBN', function() {
expect( 1 );
// Create a new Book
var book = new Book({isbn: '978-3827324917'});
ok(book.isValid());
});
test('should validate ISBN', function() {
expect( 1 );
var book = new Book({isbn: '978-3827324917'});
// ok() is qunit's assert()
ok(book.isValid());
});In Browser
Rails integration
unless Rails.env.production?
match "/javascript_tests/:action",
:controller => 'javascript_tests'NXT: Browser
5. Browsers
Browser support
- CSS3
- Storage
- pushState
Target audience
LAST
Conclusion
Don't do it
Don't do it now
Know the limits
Expect Difficulties
Have a fun ride
Thanks <3
Questions?
Follow me on twitter for slides-announcement