Hacking the Mid-End: Advanced Rails UI Techniques
-
Upload
michael-bleigh -
Category
Technology
-
view
3.354 -
download
0
description
Transcript of Hacking the Mid-End: Advanced Rails UI Techniques
![Page 1: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/1.jpg)
Hacking the Mid-EndAdvanced Rails UI Techniques
Michael BleighChris Selmer
![Page 2: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/2.jpg)
![Page 3: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/3.jpg)
![Page 4: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/4.jpg)
Overview
•Defining the “Mid-End”
•Solving Mid-End Problems
•Examples
![Page 5: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/5.jpg)
What is the Mid-End?
![Page 6: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/6.jpg)
MVC
![Page 7: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/7.jpg)
MVCBack-End
![Page 8: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/8.jpg)
MVCFront-End
![Page 9: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/9.jpg)
MVC+I
![Page 10: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/10.jpg)
MVC+I(I is for Interaction)
![Page 11: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/11.jpg)
BuzzwordBS
![Page 12: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/12.jpg)
But Not Really...
![Page 13: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/13.jpg)
MVC+IMid-End
![Page 14: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/14.jpg)
The Mid-End is all about abstraction.
![Page 15: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/15.jpg)
Front-End
Mid-End
Back-End
Smart Partials XHTML/CSS
Smart Helpers App Structure
![Page 16: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/16.jpg)
Why?Focus on strengths.
![Page 17: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/17.jpg)
Four goals of the mid-end:
•Fast
•Accessible
•Intuitive
•Responsive
![Page 18: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/18.jpg)
Fast
![Page 19: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/19.jpg)
![Page 20: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/20.jpg)
NO LOADING WHATSOEVER
![Page 21: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/21.jpg)
Accessible
![Page 22: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/22.jpg)
UJS is an automatic best practice.
![Page 23: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/23.jpg)
Rails isn’t perfect here.
![Page 24: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/24.jpg)
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 25: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/25.jpg)
One workaround:“confirm_delete”
http://railscasts.com/episodes/77-destroy-without-javascript
![Page 26: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/26.jpg)
Intuitive
![Page 27: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/27.jpg)
Am I building a web application?
ORAm I building a desktop application on the web?
![Page 28: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/28.jpg)
![Page 29: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/29.jpg)
![Page 30: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/30.jpg)
No Wrong Choice(but web apps are right)
![Page 31: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/31.jpg)
Responsive
![Page 32: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/32.jpg)
![Page 33: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/33.jpg)
Great Job,USERNAME!
![Page 34: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/34.jpg)
Solving Mid-End Problems
![Page 35: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/35.jpg)
The Toolset
•Helpers
•Partials
• jQuery (Prototype works too)
•LowPro
![Page 36: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/36.jpg)
The Approach
•Build it without Javascript
•Abstract UI into helpers and partials
•Add in UJS layer
![Page 37: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/37.jpg)
Example 1:TPS Reports
![Page 38: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/38.jpg)
The Problem
Your online TPS Reports take forever to generate.
![Page 39: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/39.jpg)
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: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/40.jpg)
Example 2:Dynamic Tabs
![Page 41: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/41.jpg)
The Problem
I want a tabbed informationinterface that is still fast forthose without Javascript.
![Page 42: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/42.jpg)
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: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/43.jpg)
Wrap Up
![Page 44: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/44.jpg)
Ruby, Rails, and UJS give you powerful tools for
abstraction.
![Page 45: Hacking the Mid-End: Advanced Rails UI Techniques](https://reader034.fdocuments.net/reader034/viewer/2022042607/555930b4d8b42a543d8b4903/html5/thumbnails/45.jpg)
Make everyone’s life easier, including yours.