Resource-oriented Client Architecture

A collection of simple recommendations for decent Web application frontends

JavaScript Libraries

Selecting JavaScript widgets for a ROCA application can be an arduous process, as it’s not always immediately clear to what extent the principles of POSH and unobtrusive JavaScript are respected by a particular library.

This page attempts to provide some guidance in this regard. Note that it is not intended as a comprehensive or authoritative collection though, since it’s difficult to fully capture a continuously evolving ecosystem.

Further suggestions and contributions are welcome!

  • htmx high power tools for HTML

    htmx allows you to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext.

  • Hotwire HTML Over The Wire

    an outstanding group of libraries. Mostly POSH with a little unobtrusive JavaScript for progressive enhancement. From the Basecamp team.

  • Practical ARIA examples

    Heydon Pickering lists several common components (e.g. tabs, dropdowns) with example implementations following accessibility best practices.

  • pjax

    is a popular technique for dynamically updating page fragments

    This is a near-perfect embodiment of ROCA principles: It improves user experience by reducing load and rendering times while ensuring that standard browser behaviors remain intact.

    • AJAX
    • jQuery

  • smoothState

    is similar to pjax, but uses animated page transition for a more seamless user experience

    The author explicitly lists progressive enhancement and unobtrusive JavaScript as primary design principles.

    • AJAX
    • jQuery

  • Unpoly

    is an unobtrusive JavaScript framework for server-side web applications. It enables fast and flexible frontends while keeping rendering logic on the server.

    A design goal of Unpoly is to keep server-side changes to a minimum and progressively enhance a series of full HTML pages instead.

    • AJAX
    • modal

  • jQuery UI Tabs

    provides a common UI for switching between content panels

    This implementation is a particular good example of POSH-based progressive enhancement: The markup is based on a list of links referencing page fragments, thus nicely taking advantage of browsers’ default functionality when JavaScript is unavailable.

    • selective content
    • tabs
    • jQuery

  • Accessible Tabs

    is conceptually similar to jQuery UI Tabs, but puts special emphasis on accessibility

    • selective content
    • tabs
    • jQuery

  • jQuery UI Accordion

    allows selectively hiding content in collapsible panels

    Similar to tabs, this widget builds upon a solid markup foundation, leaving contents perfectly accessible even without JavaScript.

    • selective content
    • collapsible
    • jQuery

  • List.js

    provides search as well as sorting and filtering functionality for both lists and tables

    Depending on the use case, some additional glue code might be required - e.g. to extract column headings from existing markup.

    • lists
    • tables
    • search
    • sortable
    • filterable

  • jQuery UI Autocomplete

    allows populating a regular input field with arbitrary suggestions

    While this widget simply augments an <input> field, the specifics of how to retrieve suggestions are left to the respective developer.

    • input
    • search
    • autocomplete
    • jQuery

  • Select2

    augments <select> or <input> elements to allow for filtering, autocomplete, tagging etc.

    • input
    • search
    • sortable
    • filterable
    • autocomplete
    • jQuery

  • complete.ly

    is a minimal library for autocompletion which also lends itself to be used in natural language forms

    Due to its pure-JavaScript API, additional glue code is required for graceful initialization and determining input suggestions.

    • input
    • search
    • autocomplete

  • Awesomplete

    is a lightweight autocompletion library

    It does not currently support remote sources for asynchronous retrieval, so it’s mostly suitable for small and medium-sized data sets that can be embedded directly within the page.

    • input
    • search
    • autocomplete

  • jQuery UI Datepicker

    provides a UI for entering date and time values

    Another nice example from jQuery UI’s repertoire, this widget augments an existing <input> field to simplify user input.

    • input
    • datetime
    • jQuery

  • Kalendae

    provides a UI for entering date and time values

    From a conceptional perspective, this is very similar to jQuery UI’s version.

    • input
    • datetime

  • generates image galleries in a variety of presentation formats

    Based on a regular list of images, ensuring that contents remain accessible both with and without JavaScript.

    • gallery

  • Sortable

    adds drag and drop functionality to lists

    • sortable
    • dragndrop

  • dragula

    provides framework-agnostic drag and drop functionality

    • dragndrop

  • DropzoneJS

    augments regular file upload forms with a drag & drop UI and image previews

    This is an excellent example of progressive enhancement, as it leverages HTML forms rather than circumventing them.

    • input
    • upload

  • jQuery Validation

    enables client-side form validation using a declarative API, in part based on HTML5 attributes

    • input
    • validation
    • jQuery

  • wysihtml

    provides rich-text editing by augmenting a <textarea> element

    • WYSIWYG

  • DataTables

    provides a comprehensive set of functionality for common client-side sorting, filtering, pagination etc.

    DataTables is fairly complex. It might be preferable to dynamically update tables using server-generated HTML instead.

    • tables
    • search
    • sortable
    • filterable
    • AJAX
    • jQuery