Hacking the Mid-End
Advanced Rails UI Techniques
Michael Bleigh

@mbleigh

Overview
•Define “Mid-End”
• Solving Mid-End Problems
• Real Live Coding!

What is the
Mid-End?

MVC

Back-End
MVC

Front-End
MVC

MVC+I
(I is for Interaction)

BS ALERT!!!

But Not Really...

Mid-End
MVC+I

The Mid-End is all
about abstraction.

Front-End
Smart Partials XHTML/CSS
Mid-End
Smart Helpers App Structure
Back-End

Why?
Focus on strengths.

Four goals of the mid-end:
• Fast
• Accessible
• Intuitive
• Responsive

Fast

NO LOADING WHATSOEVER

Accessible

UJS is an automatic
best practice.

Rails isn’t perfect here.

RESTful Confusion
<%= link_to \"Delete\", user, :method => :delete,
:confirm => \"Are you sure?\" %>
<a onclick=\"if (confirm('Are you sure?')) { var f =
document.createElement('form'); f.style.display = 'none';
this.parentNode.appendChild(f); f.method = 'POST'; f.action
= this.href;var m = document.createElement('input');
m.setAttribute('type', 'hidden'); m.setAttribute('name',
'_method'); m.setAttribute('value', 'delete');
f.appendChild(m);f.submit(); };return false;\"
href=\"/users/bob\">Delete</a>

One workaround:
“confirm_delete”
http://railscasts.com/episodes/
77-destroy-without-javascript

Intuitive

Am I building
a web application?
OR
Am I building a desktop
application on the web?

No Wrong Choice
(but web apps are right)

Responsive

Great Job,
FRIEND!

Solving Mid-End
Problems

The Toolset
• Helpers
• Partials
• jQuery (Prototype works too)
• LowPro

The Approach
• Build it without Javascript
• Abstract UI into helpers and
partials
• Add in UJS layer

Example 1:
TPS Reports

The Problem
My online TPS Reports
take forever to generate.

The Approach
• Provide a helpful message to users
• Move generation to a new page
• For JS users
• Replace message with spinner
• Fetch page in background
• Display results

Example 2:
Dynamic Tabs

The Problem
I want a tabbed information
interface that is still fast for
those without Javascript.

The Approach
• Create a helper for
back-end developers
• Create a template for
front-end developers
• Add in Javascript interaction.

Example 3:
Relative Times

The Problem
I use relative times on a page
that is partially updated by
AJAX calls.

The Approach
• time_ago_in_words for JS
• Add the actual time as a title
• Parse and update times on the
client side

Wrap Up

Ruby, Rails, and UJS give
you powerful tools for
abstraction.

Make everyone’s life
easier, including yours.

Thanks!
http://intridea.com/blog