hacking the mid-end: advanced rails ui techniques
DESCRIPTION
These were the slides presented by Michael Bleigh and Chris Selmer at RailsConf Europe 2008 in Berlin. For more info including the code used in the livecoding demo, visit http://bit.ly/hacking-the-midend.TRANSCRIPT
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.