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!

  • 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