Borrowing Concepts from React to Build Dynamic Forms in Rails

Learn the concepts that made React so popular, then learn how to build a highly dynamic user interface with only the default Rails stack.

Transcript

1. Borrowing Concepts From React To Build Dynamic Forms with Rails
2. tend.cash James Kerr
4. Re-render everything when the state changes.
5. Avoid partial updates
7. 2. Which UI depends on which state? 1. Duplicate rendering logic
8. “The most dif fi cult thing to do in the front-end right now is updates.” - Jordan Walke (2012, right before creating React )
9. Server Rendered Websites
10. React There are two reasons for a component to render: 1. It’s the component’s initial render. 2. The component’s (or one of its ancestors’) state has been updated.
11. func(state) => UI
13. It watches for link clicks and form submissions, performs them in the background, and updates the page without doing a full reload.
16. If a page re-render’s itself, Turbo will “morph” the HTML, only changing what’s different between the old and new.
17. Best of both worlds!
18. change->form#refresh
19. Live Demo
20. Thank you! tend.cash jameskerr.blog @specialCaseDev @jameskerr@mastodon.social jameskerr/dynamic-form-demo