Unpoly Demo

This is a small CRUD application to show off Unpoly.

We recommend viewing this demo on a PC or tablet.

Like all Unpoly applications, this demo is a classic web app that renders HTML on the server. The app is enhanced to feel like a single-page app by adding [up] attributes to links and forms. Aside from these attributes the server does not need to know about Unpoly in the frontend.

Fragments

Much of Unpoly's magic lies in updating page fragments instead of making full page loads. The server still renders full HTML pages, but we only use the targeted fragments and discard the rest.

Under this model all DOM state outside the updated fragment is preserved. Following links and forms feels smooth, without seeing flashes of incomplete content or losing scroll positions or incomplete form data. Pages also load much faster since the DOM, CSS and JavaScript environments do not need to be destroyed and recreated for every request.

To get a better understanding which parts of the page were updated, the bar at the bottom shows which selectors were targeted. Click on reveal to highlight the fragment in the page.

The demo app

The top navigation divides the app is into three sections:

• Companies is a CRUD interface for company records. A company can be assigned one or more projects.
• Projects is a CRUD interface for project records. Some of its templates are reused in the Companies section.
• Tasks is a simple TODO list, not connected to companies or projects.

Exploring the app

Click on everything! All data is scoped to your session, so feel free to change and delete records.

Throughout the app you will see green dots . Clicking on a dot will reveal a hint about what you can discover here.

Source code

We encourage you to use your browser's DevTools to inspect the HTML. Take a closer look at links, forms and their [up] attributes.

The bar at the bottom of the screen shows links to the server-side code that rendered the last HTML response. The entire application code can be cloned from the unpoly-demo repository.

The backend is written in Ruby, but don't let that scare you if you're using another language. The backend only makes a few SQL queries and renders HTML using a template language similar to PHP, Moustache or Pug. The community has also provided a Python re-implementation of this demo using Django.

The frontend contains no significant JavaScript aside from Unpoly itself. The CSS is just Bootstrap 4 with minimal tweaks.