Demos
To-do list

Addressbook

Wine cellar

Graphic novels
Doc
GitHub

Evolutility-UI-jQuery

A set of model-driven views to list, browse, edit, and chart data.

Evolutility-UI-jQuery (currently v1.2.4) provides a set of generic Views ("V" as in "MVC") to browse, edit, filter, export and chart data of different structures and volumes.

With Evolutility-UI-jQuery, views are not hand-coded in Javascript, HTML templates, and CSS but configured with ui-models.

Sample views

See the view for a app.

If you are wondering, No, I didn't write 40 templates (10 views for 4 entities = 40 views) for the demo above. I only wrote 4 ui-models, Evolutility-UI-jQuery is doing the rest.

From a set of views to a single page app

Together the views "browse", "edit", "list" and "filter" provide CRUD (Create, Read, Update, Delete) functionality. The other views "cards", "bubbles", "charts" and "mini" make the app more user-friendly and powerful.

Demo applications (using your browser's local storage):

UI model to configure the views

Views are configured with a UI-model. Each UI-model is the single source of truth for all UI elements in all views of a specific entity. It contains a DRY (Don't Repeat Yourself) description of the UI elements on screen and how they map to the model. From a single UI-model, many views of an entity can be generated at run-time to browse, edit, filter, export, chart the data (for CRUD and more).

The "vocabulary" of UI-models is abstracted from the DOM and uses words like "tab", "panel" or "field" rather than "div", "span", "input"...

Example of UI-Models used in the demos: To Do, Addressbook, Wine Cellar, Graphic Novels. [Hide]

Documentation

Learn more about UI-models and generic Views.

Download & Code

Evolutility-UI-jQuery source code is available at GitHub under the MIT license.

For a matching model-driven RESTful API, use Evolutility-Server-Node with Node.js, Express, and Postgres.

The meaning of Evolutility

In biology, Evolutility means "The faculty possessed by all substances capable of self-nourishment of manifesting the nutritive acts by changes of form, of volume, or of structure."

This open source project is a UI which changes form, volume and structure. It's DNA is metadata.