Hacking the Mid-End (Great Lakes Ruby Bash Edition)

49
Hacking the Mid-End Advanced Rails UI Techniques Michael Bleigh

description

The slides for my talk "Hacking the Mid-End: Advanced Rails UI Techniques" as given at the Great Lakes Ruby Bash on October 11, 2008.

Transcript of Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Page 1: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Hacking the Mid-EndAdvanced Rails UI Techniques

Michael Bleigh

Page 2: Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Page 3: Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Page 4: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

@mbleigh

Page 5: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Overview

•Define “Mid-End”

•Solving Mid-End Problems

•Real Live Coding!

Page 6: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

What is the Mid-End?

Page 7: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

MVC

Page 8: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

MVCBack-End

Page 9: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

MVCFront-End

Page 10: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

MVC+I(I is for Interaction)

Page 11: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

BS ALERT!!!

Page 12: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

But Not Really...

Page 13: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

MVC+IMid-End

Page 14: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

The Mid-End is all about abstraction.

Page 15: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Front-End

Mid-End

Back-End

Smart Partials XHTML/CSS

Smart Helpers App Structure

Page 16: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Why?Focus on strengths.

Page 17: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Four goals of the mid-end:

•Fast

•Accessible

•Intuitive

•Responsive

Page 18: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Fast

Page 19: Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Page 20: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

NO LOADING WHATSOEVER

Page 21: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Accessible

Page 22: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

UJS is an automatic best practice.

Page 23: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Rails isn’t perfect here.

Page 24: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

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?" %>

Page 26: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Intuitive

Page 27: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Am I building a web application?

ORAm I building a desktop application on the web?

Page 28: Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Page 29: Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Page 30: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

No Wrong Choice(but web apps are right)

Page 31: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Responsive

Page 32: Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Page 33: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Great Job,FRIEND!

Page 34: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Solving Mid-End Problems

Page 35: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

The Toolset

•Helpers

•Partials

• jQuery (Prototype works too)

•LowPro

Page 36: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

The Approach

•Build it without Javascript

•Abstract UI into helpers and partials

•Add in UJS layer

Page 37: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Example 1:TPS Reports

Page 38: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

The Problem

My online TPS Reports take forever to generate.

Page 39: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

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

Page 40: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Example 2:Dynamic Tabs

Page 41: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

The Problem

I want a tabbed informationinterface that is still fast forthose without Javascript.

Page 42: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

The Approach

•Create a helper for back-end developers

•Create a template for front-end developers

•Add in Javascript interaction.

Page 43: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Example 3:Relative Times

Page 44: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

The Problem

I use relative times on a pagethat is partially updated by

AJAX calls.

Page 45: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

The Approach

•time_ago_in_words for JS

•Add the actual time as a title

•Parse and update times on the client side

Page 46: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Wrap Up

Page 47: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Ruby, Rails, and UJS give you powerful tools for

abstraction.

Page 48: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Make everyone’s life easier, including yours.

Page 49: Hacking the Mid-End (Great Lakes Ruby Bash Edition)

Thanks!

http://intridea.com/blog