Hacking the Mid-EndAdvanced Rails UI Techniques

Michael BleighChris Selmer

Overview

•Defining the “Mid-End”

•Solving Mid-End Problems

•Examples

What is the Mid-End?

MVC

MVCBack-End

MVCFront-End

MVC+I

MVC+I(I is for Interaction)

BuzzwordBS

But Not Really...

MVC+IMid-End

The Mid-End is all about abstraction.

Front-End

Mid-End

Back-End

Smart Partials XHTML/CSS

Smart Helpers App Structure

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

<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>

<%= link_to "Delete", user, :method => :delete, :confirm => "Are you sure?" %>

One workaround:“confirm_delete”

http://railscasts.com/episodes/77-destroy-without-javascript

Intuitive

Am I building a web application?

ORAm I building a desktop application on the web?

No Wrong Choice(but web apps are right)

Responsive

Great Job,USERNAME!

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

Your 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 informationinterface that is still fast forthose without Javascript.

The Approach

•Create a helper for back-end developers

•Create a template for front-end developers

•Add in Javascript interaction.

Wrap Up

Ruby, Rails, and UJS give you powerful tools for

abstraction.

Make everyone’s life easier, including yours.

Thanks!

http://intridea.com/blog