Slide 1

Slide 1 text

Borrowing Concepts From React To Build Dynamic Forms with Rails

Slide 2

Slide 2 text

tend.cash James Kerr

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Re-render everything when the state changes.

Slide 5

Slide 5 text

Avoid partial updates

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

2. Which UI depends on which state? 1. Duplicate rendering logic

Slide 8

Slide 8 text

“The most dif fi cult thing to do in the front-end right now is updates.” - Jordan Walke (2012, right before creating React )

Slide 9

Slide 9 text

Server Rendered Websites

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

func(state) => UI

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

It watches for link clicks and form submissions, performs them in the background, and updates the page without doing a full reload.

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

If a page re-render’s itself, Turbo will “morph” the HTML, only changing what’s different between the old and new.

Slide 17

Slide 17 text

Best of both worlds!

Slide 18

Slide 18 text

change->form#refresh

Slide 19

Slide 19 text

Live Demo

Slide 20

Slide 20 text

Thank you! tend.cash jameskerr.blog @specialCaseDev @[email protected] jameskerr/dynamic-form-demo