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 quot;Deletequot;, user, :method => :delete,
                            :confirm => quot;Ar...
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 s...
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 Jav...
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
Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Upcoming SlideShare
Loading in …5
×

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

2,058 views
1,965 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,058
On SlideShare
0
From Embeds
0
Number of Embeds
204
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. Hacking the Mid-End Advanced Rails UI Techniques Michael Bleigh
  2. 2. @mbleigh
  3. 3. Overview •Define “Mid-End” • Solving Mid-End Problems • Real Live Coding!
  4. 4. What is the Mid-End?
  5. 5. MVC
  6. 6. Back-End MVC
  7. 7. Front-End MVC
  8. 8. MVC+I (I is for Interaction)
  9. 9. BS ALERT!!!
  10. 10. But Not Really...
  11. 11. Mid-End MVC+I
  12. 12. The Mid-End is all about abstraction.
  13. 13. Front-End Smart Partials XHTML/CSS Mid-End Smart Helpers App Structure Back-End
  14. 14. Why? Focus on strengths.
  15. 15. Four goals of the mid-end: • Fast • Accessible • Intuitive • Responsive
  16. 16. Fast
  17. 17. NO LOADING WHATSOEVER
  18. 18. Accessible
  19. 19. UJS is an automatic best practice.
  20. 20. Rails isn’t perfect here.
  21. 21. RESTful Confusion <%= link_to quot;Deletequot;, user, :method => :delete, :confirm => quot;Are you sure?quot; %> <a onclick=quot;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;quot; href=quot;/users/bobquot;>Delete</a>
  22. 22. One workaround: “confirm_delete” http://railscasts.com/episodes/ 77-destroy-without-javascript
  23. 23. Intuitive
  24. 24. Am I building a web application? OR Am I building a desktop application on the web?
  25. 25. No Wrong Choice (but web apps are right)
  26. 26. Responsive
  27. 27. Great Job, FRIEND!
  28. 28. Solving Mid-End Problems
  29. 29. The Toolset • Helpers • Partials • jQuery (Prototype works too) • LowPro
  30. 30. The Approach • Build it without Javascript • Abstract UI into helpers and partials • Add in UJS layer
  31. 31. Example 1: TPS Reports
  32. 32. The Problem My online TPS Reports take forever to generate.
  33. 33. 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
  34. 34. Example 2: Dynamic Tabs
  35. 35. The Problem I want a tabbed information interface that is still fast for those without Javascript.
  36. 36. The Approach • Create a helper for back-end developers • Create a template for front-end developers • Add in Javascript interaction.
  37. 37. Example 3: Relative Times
  38. 38. The Problem I use relative times on a page that is partially updated by AJAX calls.
  39. 39. The Approach • time_ago_in_words for JS • Add the actual time as a title • Parse and update times on the client side
  40. 40. Wrap Up
  41. 41. Ruby, Rails, and UJS give you powerful tools for abstraction.
  42. 42. Make everyone’s life easier, including yours.
  43. 43. Thanks! http://intridea.com/blog

×