310 Unpoly [3d]

Unpoly Show archive.org snapshot is a library we use to get many advantages of SPAs Show archive.org snapshot , but with much less code.

Important

Work on this lesson in advisor mode.

Learning goals

• You can explain what problem Unpoly solves: SPA-like navigation and interactions on a server-rendered app, with very little JavaScript.
• You can explain how a fragment update works — a link or form targets a fragment, the server renders a normal page, only the target is swapped — and what the unpoly-rails gem adds on the server side.
• You can enhance links and forms so they update fragments, submit automatically or navigate without full page loads, and configure this app-wide instead of per link.
• You can build a subinteraction in an overlay: open a form in a new layer, show validation errors in place, and close the overlay and update the parent page on success.
• You can attach JavaScript behavior to elements with compilers and clean up when elements are removed, and explain why that matters when pages are swapped instead of reloaded.
• You replace hand-written JavaScript with Unpoly's built-in features wherever they fit.
• You can explain how Unpoly compares to Hotwire/Turbo, the Rails default.

Resources

Read what's new to you, skim what's familiar, skip what you already master. Stop when you can meet the learning goals.

Your agent can also generate an overview, a tutorial or an explanation for anything here, tailored to what you already know. Just ask.

• 📄 Unpoly tutorial Show archive.org snapshot — start here; then read the main sections in the site's navigation ("Targeting fragments", "Layers", "Forms", …) to see what the library includes
• 📄 It's not you, it's us: we're breaking up with JavaScript frontends Show archive.org snapshot — Henning's slides on the idea behind Unpoly
• 📄 unpoly-rails README Show archive.org snapshot — how the gem complements the frontend library
• 🎮 Unpoly demo app Show archive.org snapshot with its source code Show archive.org snapshot — click through it, then read how it's built
• 📄 Compilers Show archive.org snapshot — attaching JavaScript to elements, and cleaning up when they leave
• 📄 Fixing memory leaks in web applications Show archive.org snapshot — why an app whose pages are swapped instead of reloaded must not leak

Exercises

Reduce JavaScript with Unpoly

Use Unpoly in MovieDB Show archive.org snapshot :

• All your compiler() functions should use up.compiler() instead.
• Replace as much JavaScript as possible with built-in Unpoly features:
  • E.g. code that loads HTML with AJAX and replaces a page fragment can be replaced with a[up-target] Show archive.org snapshot .
    • Configure Unpoly according to Handling all links and forms Show archive.org snapshot before proceeding to the next excercise
  • E.g. find-as-you-type search can be implemented with form[up-target] and form[up-autosubmit] Show archive.org snapshot .
  • E.g. code that opens modal dialogs can be replaced with a[up-layer=new] Show archive.org snapshot .

Unpoly overlays

• The form to create a new actor should open in an overlay Show archive.org snapshot .
• If the user submits an invalid form, validation errors should be shown within the same overlay.
• When the user successfully saves a valid actor, the overlay should close and the list of actors should reload.

Note

Your movie DB's content security policy might block your inline callback function. You can wrap it with safe_callback Show archive.org snapshot to give it a valid nonce. 'up-on-accepted': up.safe_callback('up.validate( ...

Alternatives

Rails ships with Hotwire (Turbo and Stimulus) for the same job: updating fragments of a server-rendered page without full reloads. Turbo Drive and Turbo Frames correspond roughly to Unpoly's navigation and fragment targeting, Stimulus to compilers. Unpoly goes further with layers/overlays, form validation and its handling of complex form interactions, which is why it is our default — see Our Rails stack. You will meet Hotwire in tutorials and in some client projects; the concepts transfer.