marcel molina jr. presentation
DESCRIPTION
TRANSCRIPT
![Page 1: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/1.jpg)
Sharing RJS: Reuse at the app level
Marcel Molina Jr.37signals
1
![Page 2: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/2.jpg)
A little bit about me
2
![Page 3: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/3.jpg)
Member of Rails Core
Sam StephensonRick Olson
Thomas FuchsJamis Buck
Tobias Lütke Nicholas Seckar
Jeremy Kemper
Some of the people you trust your business to...
Michael Koziarski
3
![Page 4: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/4.jpg)
Work for 37signals
4
![Page 5: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/5.jpg)
Hottest Hacker On Earth
David Has And Belongs To Many Hanssons
5
![Page 6: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/6.jpg)
Sharing RJS
6
![Page 7: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/7.jpg)
Typical RJS
app/controllers/articles_controller.rb
7
![Page 8: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/8.jpg)
app/controllers/articles_controller.rb
Duplication
Oops
8
![Page 9: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/9.jpg)
Let’s fix this
9
![Page 10: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/10.jpg)
Extract to private method of controller
app/controllers/articles_controller.rb
10
![Page 11: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/11.jpg)
app/controllers/articles_controller.rb
Wrong scope!
Oops
11
![Page 12: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/12.jpg)
Extract to helper, passing page
app/helpers/articles_helper.rb
12
![Page 13: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/13.jpg)
This works
app/controllers/articles_controller.rb
13
![Page 14: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/14.jpg)
But it’s Pythonic :-(
Oops
app/controllers/articles_controller.rb
14
![Page 15: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/15.jpg)
Monkey patch JavaScriptGenerator!!!
15
![Page 16: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/16.jpg)
Define custom helpers directly on page!!!
app/helpers/articles_helper.rb
16
![Page 17: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/17.jpg)
That’s more like it!!!
app/controllers/articles_controller.rb
17
![Page 18: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/18.jpg)
Page “namespace” is already reserved
app/controllers/articles_controller.rb
Oops
18
![Page 19: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/19.jpg)
app/controllers/articles_controller.rb
JavaScriptProxy or custom helper?!
19
![Page 20: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/20.jpg)
public/javascripts/application.js
Maintenance headache
app/helpers/articles_helper.rb
app/controllers/articles_controller.rb
20
![Page 21: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/21.jpg)
app/controllers/articles_controller.rb
Method missing abuse
Oops
21
![Page 22: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/22.jpg)
What now?
22
![Page 23: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/23.jpg)
Let’s look back to the origins of RJS
23
![Page 24: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/24.jpg)
Initial API for Ajax in Rails
24
![Page 25: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/25.jpg)
Indicates which element to update
25
![Page 26: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/26.jpg)
Faced with a tricky problem
26
![Page 27: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/27.jpg)
:update won’t cut it
27
![Page 28: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/28.jpg)
Wouldn’t it be nice if you could...?
28
![Page 29: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/29.jpg)
Thanks Ruby :-)
29
![Page 30: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/30.jpg)
Initial API
30
![Page 31: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/31.jpg)
Ugly. Not quite right.
Oops
31
![Page 32: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/32.jpg)
Wrap it up in a new template type
actionpack/lib/action_view/base.rb
32
![Page 33: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/33.jpg)
Just update_page under the sheets
actionpack/lib/action_view/base.rb
33
![Page 34: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/34.jpg)
update_page just spits out JavaScript
34
![Page 35: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/35.jpg)
<< just adds raw JavaScript to the stream
is the same as
35
![Page 36: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/36.jpg)
So...36
![Page 37: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/37.jpg)
Wrap update_page in a helper
app/helpers/articles_helper.rb
37
![Page 38: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/38.jpg)
Reuse it with <<
app/controllers/articles_controller.rb
38
![Page 39: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/39.jpg)
Bonus
39
![Page 40: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/40.jpg)
Reuse it client side
40
![Page 41: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/41.jpg)
Having said all that...
41
![Page 42: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/42.jpg)
No use obviates reuse
app/helpers/application_helper.rb public/stylesheets/screen.css
app/views/articles/edit.rhtml
42
![Page 43: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/43.jpg)
Questions, comments & etc
43
![Page 44: Marcel Molina Jr. Presentation](https://reader034.vdocuments.us/reader034/viewer/2022050920/5496efa7ac79590e2e8b5257/html5/thumbnails/44.jpg)
Questions, comments & etc
Thanks44