udsm-universal v0.0.1

udsm-universal

UDSM offers a minimal approach towards state management for your SPAs. It comes with complete (but optional) support for universal rendering & named routing, and works great with React, deku, virtual dom or any other presentation library that supports efficient top-down rerendering of entire page.

Core Assumptions

1. You love elegant urls: Your urls definitively describe what is to be presented on the screen. So before a single component is rendered, the url provides complete information about what all data is to be loaded to present the page.

2. You love promises: Asynchronous operations return promises. This enables us to compose asynchronous operations without resorting to callback pyramids.

3. User interactions that result in change of application state update the URL.

Before you dismiss udsm-universal because your frontend application does not meet the criteria above, please put some thought into whether adhering to above constraints can make your application a lot simpler to maintain and reason about. While there certainly are applications (eg. games) for which the assumptions might not hold true, for a lot of buisness application cases I have encountered during my web-development career, they do.

This library is a particularly good fit if your Single Page Application is primary an interactive facade to business logic residing on the server. If you intend to build applications with complex client side logic you should look into redux.

Workflow

               +-------------------------+
               |                         |
               | Updated URL             +<-----------+
               |                         |            |
               +-----+-------------------+            |
                     |                                |
                 Matched with a                       |
                 sequence of route                    |
                 patterms                             |
                     +                            User Interactions:
                     |                                |
                     v                            Clicking links, submitting forms etc.
                +----+------------------+             |
                |                       |             |
                | Route handler loaded  |             |
                | with URL parameters   |             |
+-------+       +----+------------------+             |
|       |            |                                |
|SERVER |          Passed through a            +------+---------+
+-------+<------>  sequence of                 |                |
                   asynchronous                | User           |
+-------+<------>  synchronizers               |                |
|CACHE  |            +                         +-------+--------+
|       |            |                                 ^
+-------+            |                                 |
                     v                                 |
                 +---+------------------+              |
                 |                      |              |
                 | Route handler loaded |              |
                 | with fetched data    |        Patched against
                 |                      |        rendered DOM
                 +---+------------------+              |
                     |                                 |
                  Passed to Single                     |
                  Top level application                |
                  component                            |
                     |                                 |
                     v                                 |
                 +---+------------------+              |
                 |                      |              |
                 | Virtual DOM Tree     +--------------+
                 |                      |
                 +----------------------+

Installation

$ npm install --save udsm-universal

Usage

TBD

API

AbstractStateManager

Description

RouteHandler

Description

Development

• npm run build - Build task that generates both minified and non-minified scripts;
• npm run test-server - Run Mocha tests once;
• npm run test-browser - Run Mocha tests in the browser using Karma once;
• npm run test - Shortcut for npm run test-server && npm run test-browser;
• npm run tdd - Run Mocha tests & watch files for changes;
• npm run tdd-browser - Run Karma (w/ Mocha) tests & watch files for changes;
• npm run coverage - Run Isparta, a code coverage tool;

License

MIT © Lorefnon