Getting Started & Architecture

To properly take advantage of Littlest, you should understand how it works, including all underlying technolgies. This documentation won't even pretend to teach you then better than existing resources, and will link you elsewhere wherever possible.

Littlest Cutout: Node/Browsers, JavaScript, React, Dispatcher, and Isomorph

Layers

Isomorph
Serving, Navigating, Contextualizing, Abstracting
Dispatcher
Storing, Acting, Dispatching
React
Rendering, Organizing
JavaScript
Everything

JavaScript

You did know this was a suite of JavaScript libraries, right? CodeSchool and Khan Academy have plenty to say on the subject. Don't come back until you know how function scoping and this work, inside and out. There will be a quiz; please have your #2 pencil sharpened and ready.

React

An impressively fast component renderer, React provides the backbone for the rest of the architecture. To learn React, check out their fantastic tutorial, paying close attention to how Components are organized and how state is passed from one to another.

Flux

To complement React's philosophical underpinnings, the developers documented Flux: a non-MVC-based architecture for changing state in response to behaviour. While their implementation differs greatly from that provided by Littlest, it's useful to know one's roots – you can find their tutorial, specific to Flux, here.

Dispatcher

The Littlest Dispatcher is the first layer built on top of React, providing an implementation of Flux. The notable differences from other Flux implementations are:

  • The Dispatcher leverages node's EventEmitter implementation. No need to reinvent the bus.
  • Actions are just Functions, though a helper is provided to automatically dispatch from Promise-returning functions based on the promise state.
  • Stores also leverage EventEmitter for change events, and store state in a well-defined manner, while still being serializable/deserializable for rehydrating on the client.

Isomorph

The Littlest Isomorph is only the second layer built on top of React, yet the last. It provides the bulk of the value of Littlest, attempting to be a simple yet coprehensive and cohesive library to build applications from:

  • Navigators provide top-level navigation from Component to Component.
  • Renderers wrap React's `render` methods, providing interfaces for the DOM and Express.
  • The Context contextualizes Store state to a single session or request.
  • The Context also provides an implementation of state rehydration. The final server-side state becomes the first client-side state with zero loss of "work".
  • The Mixin provides easier-to-use, one-way data bindings between Context/Store state and Component state.
  • The Router provides a simple (perhaps too simple) vehicle for History manipulation and mapping URLs requested to Components rendered.

Support: ProxyClient

A product of building a multitude of Littlest applications at Faithlife, ProxyClient provides a top-level prototype for HTTP API clients that can be proxied on the Littlest server (or any Express application).

No more CORS headaches, and unfriendly APIs can be reshaped for better application responsiveness.

Scaffolding: Yeoman

Once you know what to expect, the Yeoman generator can scaffold out a complete application, rife with the opinions of Littlest's loving creators.