The document discusses hacking the "mid-end" of web applications, which is defined as the layer between the front-end and back-end that focuses on abstraction. It provides examples of solving "mid-end" problems by building functionality without JavaScript first, then adding an interactive JavaScript layer. Specific techniques mentioned include helpers, partials, jQuery, and making the user interface faster, more accessible, intuitive and responsive.

1. Hacking the Mid-End
Advanced Rails UI Techniques
Michael Bleigh

4. @mbleigh

5. Overview
•Define “Mid-End”
• Solving Mid-End Problems
• Real Live Coding!

6. What is the
Mid-End?

7. MVC

8. Back-End
MVC

9. Front-End
MVC

10. MVC+I
(I is for Interaction)

11. BS ALERT!!!

12. But Not Really...

13. Mid-End
MVC+I

14. The Mid-End is all
about abstraction.

15. Front-End
Smart Partials XHTML/CSS
Mid-End
Smart Helpers App Structure
Back-End

16. Why?
Focus on strengths.

17. Four goals of the mid-end:
• Fast
• Accessible
• Intuitive
• Responsive

18. Fast

20. NO LOADING WHATSOEVER

21. Accessible

22. UJS is an automatic
best practice.

23. Rails isn’t perfect here.

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

25. One workaround:
“confirm_delete”
http://railscasts.com/episodes/
77-destroy-without-javascript

26. Intuitive

27. Am I building
a web application?
OR
Am I building a desktop
application on the web?

30. No Wrong Choice
(but web apps are right)

31. Responsive

33. Great Job,
FRIEND!

34. Solving Mid-End
Problems

35. The Toolset
• Helpers
• Partials
• jQuery (Prototype works too)
• LowPro

36. The Approach
• Build it without Javascript
• Abstract UI into helpers and
partials
• Add in UJS layer

37. Example 1:
TPS Reports

38. The Problem
My online TPS Reports
take forever to generate.

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

40. Example 2:
Dynamic Tabs

41. The Problem
I want a tabbed information
interface that is still fast for
those without Javascript.

42. The Approach
• Create a helper for
back-end developers
• Create a template for
front-end developers
• Add in Javascript interaction.

43. Example 3:
Relative Times

44. The Problem
I use relative times on a page
that is partially updated by
AJAX calls.

45. The Approach
• time_ago_in_words for JS
• Add the actual time as a title
• Parse and update times on the
client side

46. Wrap Up

47. Ruby, Rails, and UJS give
you powerful tools for
abstraction.

48. Make everyone’s life
easier, including yours.

49. Thanks!
http://intridea.com/blog