This is a small CRUD application to show off Unpoly with Django.
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.
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.
New page fragments are highlighted with a yellow flash. This flash is only visible in this demo.
The top navigation divides the app is into three sections:
Click on everything! All data is ephemeral, 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.
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 django-unpoly-demo repository. This is a Django app that has been implemented using the original Ruby app as a base.
The frontend contains no significant JavaScript aside from Unpoly itself. The CSS is just Bootstrap 4 with minimal tweaks.