Unpoly can give your server-side application fast and flexible frontends that feel like a single-page application (SPA). It also preserves the resilience and simplicity of the server-side programming model.
You can install Unpoly by either downloading the library files or using a package managers like npm or RubyGems.
If you just want to test-drive Unpoly, the easiest way is to link to a CDN.
In a traditional web application, the entire page is destroyed and re-created when the user follows a link:
With Unpoly the server still renders full HTML pages, but we only use fragments and discard the rest:
All fragment updates change the browser URL by default. The back button work as expected.
You can learn more in Linking to fragments, or continue with the tutorial below.
Layered interactions, like modal dialogs, can make a frontend easier to both use and implement. Using layers we can keep an unfinished interaction open in the background, branch out to an interaction in an overlay, and return to the background page when we're done.
Below you see a screenshot of a layered interaction in Gmail. The mail editor has been stacked on top of the message list as a modal dialog. Inside the dialog we see a third layer, the autocomplete results, as a pop-up overlay:
An interaction like the Gmail example is pretty straightforward to build with Unpoly. Unpoly lets you stack up to three HTML documents on top of each other: The page itself, a modal dialog and a pop-up overlay. Each layer has its own URL:
The content inside a modal is rendered as a full HTML page, but we only use a fragment for the modal content and discard the rest. This allows you to render any response either as a full page or inside a modal or pop-up.
Using fragment links it's also simple to stay inside a modal or pop-up during an interaction that spans multiple pages. Links prefer to update fragments within the same layer, while preserving the content of lower layers. You can even submit forms without leaving the modal or pop-up.
Have you noticed how noticed how pages fade in and out as you follow links on this site,
Learn more about animation, or continue with the tutorial below.
<input type="search">should request search results when the user types something
<textarea class="wysiwyg">should automatically activate a WYSIWYG editor like Redactor
<div class="map">should render a map with the Google Maps API
Similar functions exist for every unobtrusive Unpoly feature, be it opening a modal, submitting a form with AJAX or morphing elements. The API docs list these function along their unobtrusive counterparts.
This tutorial covered just the most basic features of Unpoly. The other guides will explain these and more advanced features in much greater detail: