The progressive enhancement framework

Unpoly gives your traditional web application fast-responding views with minimal changes to your code and development style. If you require modern UX but don't want to pay the Javascript complexity tax, Unpoly can be a solution for you.

Examples

Update a page fragment via AJAX

Give a link an up-target attribute to update a CSS selector with the same selector from the link's destination. No server-side changes required.

preview.html
<div class="story">

  <p>Story summary</p>

  <a href="full.html" up-target=".story">
    Read full story
  </a>

</div>
full.html
<div class="story">

  <h1>Full story</h1>
  <p>Lorem ipsum dolor sit amet.</p>

  <a href="preview.html" up-target=".story">
    Read summary
  </a>
</div>

Animate a page transition

Give a link an up-transition attribute to animate between the old and new fragment.

story1.html
<div class="story">

  <h1>The first story</h1>

  <a href="story2.html" up-transition="move-left" up-target=".story">
    Show next story
  </a>

</div>
story2.html
<div class="story">

  <h1>The second story</h1>

  <a href="story1.html" up-transition="move-right" up-target=".story">
    Show previous story
  </a>

</div>

Custom tags

Create arbitrary HTML tags with a few lines of Javascript. Your tags will automatically be compiled whenever a page fragment is updated.

page.html
<p>
  The time is <timestamp />
</p>
scripts.js
up.compiler('timestamp', function($element) {
  var now = new Date();
  $element.text(now);
});

Modal dialogs

Give a link an up-modal attribute to extract a CSS selector from the destination and open the fragment in a modal dialog. No server-side changes required.

preview.html
<div class="story">

  <p>Story summary</p>

  <a href="full.html" up-modal=".story">
    Read full story
  </a>
</div>
full.html
<div class="story">

  <h1>Full story</h1>
  <p>Lorem ipsum dolor sit amet.</p>

</div>

Project status

We've started to use Unpoly in production. We're currently building a few more apps with it in order to improve the public API.

If you use Unpoly in production, you should be OK with a minor API changes until we reach version 1.0.

Philosophy

Unpoly is an opinionated Javascript library. You should understand our philosophy to see if Unpoly is for you.

Client-side MVC is a complexity driver

In order to meet the demand for modern, fast-moving interfaces, we have pushed more and more code into the client. This has vastly increased the complexity of our technology stacks. Modern web applications have a complete MV* stack on both sides of the wire, which we need to understand, synchronize and maintain.

We would like to reclaim some of the simplicity of classic server-side MVC development, while making your app feel more responsive and while enabling the most popular UI patterns you see on the web.

Batteries included

We will ship a basic implementation for the most established UI patterns like navigation bars, infinite scrolling, drop-down menus, modals dialogs, etc.

We will split this out into a plugin architecture eventually, but not now.

Our built-in UI patterns ship with commonly seen options. We don’t want to compromise their ease of use by providing a million hooks and switches. If you are missing an option, you can always roll your own code or integrate an existing Javascript library.

Not for ambitious UIs

While Unpoly pushes limits of what's traditionally been possible with server-side web development, the paradigm does have limits which we recognize. If you want to create a very ambitious user interface, Unpoly is probably not the best approach.

Plays nice with existing JS code

You can wire your existing JS code into the Unpoly page flow.

URLs are important

In Unpoly every page or screen state has a URL which you can bookmark and share. This also means you get all the SEO love from Google.

Server-side code should stay the same

We want to push progressive enhancement and unobtrusive Javascript to new extremes. For this we want to limit the amount of change required to your server-side code. E. g. it should not require extra controllers or views to update a page fragment via AJAX.

Both UJS and programmatic interfaces

All Unpoly functionality is available as both unobtrusive behavior (through HTML attributes like up-target) and Javascript functions for programmatic access and integration with your code.

Browser support

Unpoly supports all modern browsers.

Unpoly gracefully degrades with old versions of Internet Explorer:

Edge Full support
IE 10 Full support
IE 9 Page updates that change browser history fall back to a classic page load
IE 8 Unpoly prevents itself from booting itself, leaving you with a classic server-side application

Installation

See Download & Installation.

Getting started

This is the best place to start with the documentation:
Linking to page fragments

A makandra project (imprint)