Hacking the Mid-End (Great Lakes Ruby Bash Edition)
-
Upload
michael-bleigh -
Category
Technology
-
view
1.666 -
download
4
description
Transcript of Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Hacking the Mid-EndAdvanced Rails UI Techniques
Michael Bleigh
@mbleigh
Overview
•Define “Mid-End”
•Solving Mid-End Problems
•Real Live Coding!
What is the Mid-End?
MVC
MVCBack-End
MVCFront-End
MVC+I(I is for Interaction)
BS ALERT!!!
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,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 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.
Example 3:Relative Times
The Problem
I use relative times on a pagethat 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.