SPA like user experience without a client side framework (in Ruby on Rails)

- Fast in-app navigation with Turbolinks
- Ajax requests created with rails-ujs and Server-generated JavaScript Responses (SJR)
- Interactive HTML with Stimulus JS

Transcript

1. SPA like user experience without a client side framework (in Ruby on Rails) @patrikbona
2. SPA like user experience • Fast in-app navigation • Ajax requests (forms, buttons, check-boxes, links, etc.) • Interactive HTML
3. Fast in-app navigation Goal • No full-page reload during navigation
4. Turbolinks How does it work? • Intercepts all clicks on <a href> links to the same domain • Prevents the default click action and creates an Ajax request instead • Replaces the current <body> element and merges <head> element
5. Turbolinks Other features • Browser history management • Page caching • Asset monitoring • Redirects after Ajax form submission
6. Turbolinks Installation steps • None
7. Turbolinks More information • https://github.com/turbolinks/turbolinks
8. Ajax requests
9. Ajax requests Server-generated JavaScript Responses - SJR 1. Create an Ajax request 2. Process it on the server (save the data, etc.) 3. Generate a JavaScript response with updated HTML 4. Evaluate the response and update the DOM
10. Ajax requests Rails Unobtrusive JavaScript Adapter - rails-ujs • https://github.com/rails/rails/tree/master/actionview/app/ assets/javascripts
11. Ajax forms <%= form_with model: @user do |form| %> <%= form.text_field :name %> <%= form.submit %> <% end %>
12. Ajax forms <%= form_with model: @user do |form| %> <%= form.text_field :name %> <%= form.submit %> <% end %> <form action="/users" data-remote="true" ...> ... </form>
13. Ajax links <%= link_to "New User", new_user_path %> <a href="/users/new">New User</a>
14. Ajax links <%= link_to "New User", new_user_path, remote: true %> <a data-remote="true" href="/users/new">New User</a>
15. Ajax links <%= link_to "Delete user", user_path(user) %>
16. Ajax links <%= link_to "Delete user", user_path(user), data: { } %>
17. Ajax links <%= link_to "Delete user", user_path(user), data: { remote: true, } %>
18. Ajax links <%= link_to "Delete user", user_path(user), data: { remote: true, method: :delete, } %>
19. Ajax links <%= link_to "Delete user", user_path(user), data: { remote: true, method: :delete, confirm: "Are you sure?" } %>
20. Ajax links <%= link_to "Delete user", user_path(user), data: { remote: true, method: :delete, confirm: "Are you sure?" } %> <a href="/users/new" data-remote="true" data-method="delete" data-confirm="Are you sure?"> New user </a>
21. Ajax check-boxes <%= check_box_tag %>
22. Ajax check-boxes <%= check_box_tag dom_id(todo, "checkbox"), %>
23. Ajax check-boxes <%= check_box_tag dom_id(todo, "checkbox"), 1, %>
24. Ajax check-boxes <%= check_box_tag dom_id(todo, "checkbox"), 1, todo.completed?, %>
25. Ajax check-boxes <%= check_box_tag dom_id(todo, "checkbox"), 1, todo.completed?, data: { } %>
26. Ajax check-boxes <%= check_box_tag dom_id(todo, "checkbox"), 1, todo.completed?, data: { remote: true, } %>
27. Ajax check-boxes <%= check_box_tag dom_id(todo, "checkbox"), 1, todo.completed?, data: { remote: true, url: toggle_todo_path(todo), } %>
28. Ajax check-boxes <%= check_box_tag dom_id(todo, "checkbox"), 1, todo.completed?, data: { remote: true, url: toggle_todo_path(todo), method: :post } %>
29. Ajax check-boxes <%= check_box_tag dom_id(todo, "checkbox"), 1, todo.completed?, data: { remote: true, url: toggle_todo_path(todo), method: :post } %> <input type="checkbox" data-remote="true" data-url="/todos/1/toggle" data-method="post" ... />
30. Ajax requests def create end
31. Ajax requests def create @product = Product.new(product_params) if @product.save redirect_to products_path else render "new" end end
32. Ajax requests def create @product = Product.new(product_params) if @product.save redirect_to products_path else render "create" # create.js.erb end end
33. Ajax requests def create @product = Product.new(product_params) if @product.save redirect_to products_path end end
34. Ajax requests def create @product = Product.new(product_params) if @product.save redirect_to products_path end end
35. Ajax requests def create @product = Product.new(product_params) if @product.save redirect_to products_path end end Turbolinks.clearCache() Turbolinks.visit( "http://example.com/products", {“action":"replace"} )
36. Ajax requests # create.js.erb
37. Ajax requests # create.js.erb <%= render "form", product: @product %>
38. Ajax requests # create.js.erb <%= escape_javascript render "form", product: @product %>
39. Ajax requests # create.js.erb <%= j render "form", product: @product %>
40. Ajax requests # create.js.erb document <%= j render "form", product: @product %>
41. Ajax requests # create.js.erb document .querySelector("form") <%= j render "form", product: @product %>
42. Ajax requests # create.js.erb document .querySelector("form") .outerHtml = "<%= j render "form", product: @product %>"
43. Ajax requests # create.js.erb document .querySelector("form") .outerHtml = "<%= j render "form", product: @product %>" JavaScript response: document .querySelector("form") .outerHtml = "<form action=\"/users\" ..."
44. Ajax requests def destroy @todo.destroy end
45. Ajax requests def destroy @todo.destroy end // destroy.js.erb
46. Ajax requests def destroy @todo.destroy end // destroy.js.erb document
47. Ajax requests def destroy @todo.destroy end // destroy.js.erb document .getElementById("<%= dom_id(@todo) %>")
48. Ajax requests def destroy @todo.destroy end // destroy.js.erb document .getElementById("<%= dom_id(@todo) %>") .remove()
49. Ajax requests def destroy @todo.destroy end // destroy.js.erb document .getElementById("<%= dom_id(@todo) %>") .remove() JavaScript response: document .getElementById("todo_12") .remove()
56. https://github.com/mrhead/todos
57. Ajax requests • https://guides.rubyonrails.org/working_with_javascript_in_rails.html • https://signalvnoise.com/posts/3697-server-generated-javascript- responses • https://m.patrikonrails.com/do-you-really-need-that-fancy- javascript-framework-e6f2531f8a38 • https://m.patrikonrails.com/how-to-make-ajax-calls-the-rails- way-20174715d176 • https://m.patrikonrails.com/a-definitive-guide-to-railss- unobtrusive-javascript-adapter-ef13bd047fff
58. Interactive HTML
59. Interactive HTML Stimulus JS • A modest JavaScript framework for the HTML you already have. • https://stimulusjs.org/
60. Interactive HTML <div> Your profile has been updated! </div>
61. Interactive HTML <div data-controller="flash"> Your profile has been updated! </div>
62. Interactive HTML <div data-controller="flash"> Your profile has been updated! </div> // flash_controller.js import { Controller } from "stimulus" export default class extends Controller { }
63. Interactive HTML <div data-controller="flash"> Your profile has been updated! </div> // flash_controller.js import { Controller } from "stimulus" export default class extends Controller { connect() { setTimeout(() => this.element.remove(), 2000) } }
64. Interactive HTML <div data-controller="flash"> Your profile has been updated! </div> // flash_controller.js import { Controller } from "stimulus" export default class extends Controller { }
65. Interactive HTML <div data-controller="flash"> Your profile has been updated! </div> // flash_controller.js import { Controller } from "stimulus" export default class extends Controller { disconnect() { this.element.remove() } }
66. Interactive HTML <div data-controller=“flash"> <a href="">X</a> Your profile has been updated! </div> // flash_controller.js import { Controller } from "stimulus" export default class extends Controller { }
67. Interactive HTML <div data-controller=“flash"> <a href="" data-action="">X</a> Your profile has been updated! </div> // flash_controller.js import { Controller } from "stimulus" export default class extends Controller { }
68. Interactive HTML <div data-controller=“flash"> <a href="" data-action="click">X</a> Your profile has been updated! </div> // flash_controller.js import { Controller } from "stimulus" export default class extends Controller { }
69. Interactive HTML <div data-controller=“flash"> <a href="" data-action="click->flash">X</a> Your profile has been updated! </div> // flash_controller.js import { Controller } from "stimulus" export default class extends Controller { }
70. Interactive HTML <div data-controller=“flash"> <a href="" data-action="click->flash#close">X</a> Your profile has been updated! </div> // flash_controller.js import { Controller } from "stimulus" export default class extends Controller { }
71. Interactive HTML <div data-controller=“flash"> <a href="" data-action="click->flash#close">X</a> Your profile has been updated! </div> // flash_controller.js import { Controller } from "stimulus" export default class extends Controller { close(event) { event.preventDefault() this.element.remove() } }
72. Interactive HTML <div data-controller="hello"> <input type="text"> <button data-action="click->hello#greet"> Greet </button> </div> // hello_controller.js import { Controller } from "stimulus" export default class extends Controller { greet() { console.log(`Hello ...`) } }
73. Interactive HTML <div data-controller="hello"> <input data-target="" type="text"> <button data-action="click->hello#greet"> Greet </button> </div> // hello_controller.js import { Controller } from "stimulus" export default class extends Controller { greet() { console.log(`Hello ...`) } }
74. Interactive HTML <div data-controller="hello"> <input data-target="hello" type="text"> <button data-action="click->hello#greet"> Greet </button> </div> // hello_controller.js import { Controller } from "stimulus" export default class extends Controller { greet() { console.log(`Hello ...`) } }
75. Interactive HTML <div data-controller="hello"> <input data-target="hello.name" type="text"> <button data-action="click->hello#greet"> Greet </button> </div> // hello_controller.js import { Controller } from "stimulus" export default class extends Controller { greet() { console.log(`Hello ...`) } }
76. Interactive HTML <div data-controller="hello"> <input data-target="hello.name" type="text"> <button data-action="click->hello#greet"> Greet </button> </div> // hello_controller.js import { Controller } from "stimulus" export default class extends Controller { static targets = [ "name" ] greet() { console.log(`Hello ...`) } }
77. Interactive HTML <div data-controller="hello"> <input data-target="hello.name" type="text"> <button data-action="click->hello#greet"> Greet </button> </div> // hello_controller.js import { Controller } from "stimulus" export default class extends Controller { static targets = [ "name" ] greet() { console.log(`Hello ${this.nameTarget.value}`) } }
88. https://github.com/mrhead/stimulus-search
90. Conclusion • Turbolinks • SJR - Server-generated JavaScript Responses • Stimulus JS
91. Thank you!
92. Q & A