index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Littlest</title>
  <meta name="description" content="The website for the Littlest family of JavaScript libraries.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="public/bundle.css">
  <link rel="shortcut icon" href="public/favicon.ico">
</head>
<body>
  <div class="app" data-reactid=".18z27tpoy68" data-react-checksum="-365431875"><div class="app__header" data-reactid=".18z27tpoy68.0"><div class="container" data-reactid=".18z27tpoy68.0.0"><h1 class="app__title" data-reactid=".18z27tpoy68.0.0.0"><a href="/" data-reactid=".18z27tpoy68.0.0.0.0">Littlest</a></h1><img class="app__logo" src="public/logo.png" data-reactid=".18z27tpoy68.0.0.1"></div></div><div class="app__content" data-reactid=".18z27tpoy68.1"><div class="container container--readability" data-reactid=".18z27tpoy68.1.0"><h2 data-reactid=".18z27tpoy68.1.0.0">Getting Started &amp; Architecture</h2><p data-reactid=".18z27tpoy68.1.0.1"><span data-reactid=".18z27tpoy68.1.0.1.0">To properly take advantage of Littlest, you should understand </span><em data-reactid=".18z27tpoy68.1.0.1.1">how it works</em><span data-reactid=".18z27tpoy68.1.0.1.2">, including all underlying technolgies. This documentation won&#x27;t even </span><em data-reactid=".18z27tpoy68.1.0.1.3">pretend</em><span data-reactid=".18z27tpoy68.1.0.1.4"> to teach you then better than existing resources, and will link you elsewhere wherever possible.</span></p><div class="home__row" data-reactid=".18z27tpoy68.1.0.2"><img class="home__cutout" src="public/cutout.png" alt="Littlest Cutout: Node/Browsers, JavaScript, React, Dispatcher, and Isomorph" data-reactid=".18z27tpoy68.1.0.2.0"><h3 data-reactid=".18z27tpoy68.1.0.2.1">Layers</h3><dl data-reactid=".18z27tpoy68.1.0.2.2"><dt data-reactid=".18z27tpoy68.1.0.2.2.0">Isomorph</dt><dd data-reactid=".18z27tpoy68.1.0.2.2.1">Serving, Navigating, Contextualizing, Abstracting</dd><dt data-reactid=".18z27tpoy68.1.0.2.2.2">Dispatcher</dt><dd data-reactid=".18z27tpoy68.1.0.2.2.3">Storing, Acting, Dispatching</dd><dt data-reactid=".18z27tpoy68.1.0.2.2.4">React</dt><dd data-reactid=".18z27tpoy68.1.0.2.2.5">Rendering, Organizing</dd><dt data-reactid=".18z27tpoy68.1.0.2.2.6">JavaScript</dt><dd data-reactid=".18z27tpoy68.1.0.2.2.7">Everything</dd></dl></div><h3 data-reactid=".18z27tpoy68.1.0.3">JavaScript</h3><p data-reactid=".18z27tpoy68.1.0.4"><span data-reactid=".18z27tpoy68.1.0.4.0">You </span><em data-reactid=".18z27tpoy68.1.0.4.1">did</em><span data-reactid=".18z27tpoy68.1.0.4.2"> know this was a suite of JavaScript libraries, right?</span><span data-reactid=".18z27tpoy68.1.0.4.3"> </span><a href="https://www.codeschool.com/courses/javascript-road-trip-part-1" data-reactid=".18z27tpoy68.1.0.4.4">CodeSchool</a><span data-reactid=".18z27tpoy68.1.0.4.5"> and</span><span data-reactid=".18z27tpoy68.1.0.4.6"> </span><a href="https://www.khanacademy.org/computing/computer-programming/programming" data-reactid=".18z27tpoy68.1.0.4.7">Khan Academy</a><span data-reactid=".18z27tpoy68.1.0.4.8"> </span><span data-reactid=".18z27tpoy68.1.0.4.9">have plenty to say on the subject. Don&#x27;t come back until you know how </span><span data-reactid=".18z27tpoy68.1.0.4.a">function</span><span data-reactid=".18z27tpoy68.1.0.4.b"> scoping and</span><span data-reactid=".18z27tpoy68.1.0.4.c"> </span><code data-reactid=".18z27tpoy68.1.0.4.d">this</code><span data-reactid=".18z27tpoy68.1.0.4.e"> work, inside and out. There will be a quiz; please have your</span><span data-reactid=".18z27tpoy68.1.0.4.f"> </span><a href="http://en.wikipedia.org/wiki/Pencil" data-reactid=".18z27tpoy68.1.0.4.g">#2 pencil</a><span data-reactid=".18z27tpoy68.1.0.4.h"> sharpened and ready.</span></p><h3 data-reactid=".18z27tpoy68.1.0.5">React</h3><p data-reactid=".18z27tpoy68.1.0.6"><span data-reactid=".18z27tpoy68.1.0.6.0">An impressively fast component renderer, React provides the backbone for the rest of the architecture. To learn React, check out their </span><a href="http://facebook.github.io/react/docs/tutorial.html" data-reactid=".18z27tpoy68.1.0.6.1">fantastic tutorial</a><span data-reactid=".18z27tpoy68.1.0.6.2">, paying close attention to how Components are organized and how state is passed from one to another.</span></p><h3 data-reactid=".18z27tpoy68.1.0.7">Flux</h3><p data-reactid=".18z27tpoy68.1.0.8"><span data-reactid=".18z27tpoy68.1.0.8.0">To complement React&#x27;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&#x27;s useful to know one&#x27;s roots – you can find their tutorial, specific to Flux, </span><a href="http://facebook.github.io/flux/docs/todo-list.html" data-reactid=".18z27tpoy68.1.0.8.1">here</a><span data-reactid=".18z27tpoy68.1.0.8.2">.</span></p><h3 data-reactid=".18z27tpoy68.1.0.9">Dispatcher</h3><p data-reactid=".18z27tpoy68.1.0.a"><span data-reactid=".18z27tpoy68.1.0.a.0">The </span><a href="https://github.com/Littlest/littlest-dispatcher" data-reactid=".18z27tpoy68.1.0.a.1">Littlest Dispatcher</a><span data-reactid=".18z27tpoy68.1.0.a.2"> is the first layer built on top of React, providing an implementation of Flux. The notable differences from other Flux implementations are:</span></p><ul data-reactid=".18z27tpoy68.1.0.b"><li data-reactid=".18z27tpoy68.1.0.b.0">The Dispatcher leverages node&#x27;s EventEmitter implementation. No need to reinvent the bus.</li><li data-reactid=".18z27tpoy68.1.0.b.1">Actions are just Functions, though a helper is provided to automatically dispatch from Promise-returning functions based on the promise state.</li><li data-reactid=".18z27tpoy68.1.0.b.2"><span data-reactid=".18z27tpoy68.1.0.b.2.0">Stores also leverage EventEmitter for </span><code data-reactid=".18z27tpoy68.1.0.b.2.1">change</code><span data-reactid=".18z27tpoy68.1.0.b.2.2"> events, and store state in a well-defined manner, while still being serializable/deserializable for rehydrating on the client.</span></li></ul><h3 data-reactid=".18z27tpoy68.1.0.c">Isomorph</h3><p data-reactid=".18z27tpoy68.1.0.d"><span data-reactid=".18z27tpoy68.1.0.d.0">The </span><a href="https://github.com/Littlest/littlest-isomorph" data-reactid=".18z27tpoy68.1.0.d.1">Littlest Isomorph</a><span data-reactid=".18z27tpoy68.1.0.d.2"> 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:</span></p><ul data-reactid=".18z27tpoy68.1.0.e"><li data-reactid=".18z27tpoy68.1.0.e.0">Navigators provide top-level navigation from Component to Component.</li><li data-reactid=".18z27tpoy68.1.0.e.1">Renderers wrap React&#x27;s `render` methods, providing interfaces for the DOM and Express.</li><li data-reactid=".18z27tpoy68.1.0.e.2">The Context contextualizes Store state to a single session or request.</li><li data-reactid=".18z27tpoy68.1.0.e.3"><span data-reactid=".18z27tpoy68.1.0.e.3.0">The Context also provides an </span><em data-reactid=".18z27tpoy68.1.0.e.3.1">implementation</em><span data-reactid=".18z27tpoy68.1.0.e.3.2"> of state rehydration. The final server-side state becomes the first client-side state with zero loss of &quot;work&quot;.</span></li><li data-reactid=".18z27tpoy68.1.0.e.4">The Mixin provides easier-to-use, one-way data bindings between Context/Store state and Component state.</li><li data-reactid=".18z27tpoy68.1.0.e.5">The Router provides a simple (perhaps too simple) vehicle for History manipulation and mapping URLs requested to Components rendered.</li></ul><h3 data-reactid=".18z27tpoy68.1.0.f">Support: ProxyClient</h3><p data-reactid=".18z27tpoy68.1.0.g"><span data-reactid=".18z27tpoy68.1.0.g.0">A product of building a multitude of Littlest applications at </span><a href="https://faithlife.com" data-reactid=".18z27tpoy68.1.0.g.1">Faithlife</a><span data-reactid=".18z27tpoy68.1.0.g.2">,</span><span data-reactid=".18z27tpoy68.1.0.g.3"> </span><a href="https://github.com/Littlest/proxy-client" data-reactid=".18z27tpoy68.1.0.g.4">ProxyClient</a><span data-reactid=".18z27tpoy68.1.0.g.5"> provides a top-level prototype for HTTP API clients that can be proxied on the Littlest server (or any Express application).</span></p><p data-reactid=".18z27tpoy68.1.0.h">No more CORS headaches, and unfriendly APIs can be reshaped for better application responsiveness.</p><h3 data-reactid=".18z27tpoy68.1.0.i">Scaffolding: Yeoman</h3><p data-reactid=".18z27tpoy68.1.0.j"><em data-reactid=".18z27tpoy68.1.0.j.0">Once you know what to expect,</em><span data-reactid=".18z27tpoy68.1.0.j.1"> the Yeoman</span><span data-reactid=".18z27tpoy68.1.0.j.2"> </span><a href="https://github.com/Littlest/generator-littlest-isomorph" data-reactid=".18z27tpoy68.1.0.j.3">generator</a><span data-reactid=".18z27tpoy68.1.0.j.4"> can scaffold out a complete application, rife with the opinions of Littlest&#x27;s loving creators.</span></p></div></div><div class="app__footer" data-reactid=".18z27tpoy68.2"><div class="container" data-reactid=".18z27tpoy68.2.0"><p data-reactid=".18z27tpoy68.2.0.0"><span data-reactid=".18z27tpoy68.2.0.0.0">Made with ♥ by </span><a href="https://twitter.com/Schoonology" data-reactid=".18z27tpoy68.2.0.0.1">@Schoonology</a><span data-reactid=".18z27tpoy68.2.0.0.2">.</span></p><p data-reactid=".18z27tpoy68.2.0.1"><span data-reactid=".18z27tpoy68.2.0.1.0">Incubated </span><a href="https://faithlife.com" data-reactid=".18z27tpoy68.2.0.1.1">@Faithlife</a><span data-reactid=".18z27tpoy68.2.0.1.2">.</span></p><p data-reactid=".18z27tpoy68.2.0.2"><span data-reactid=".18z27tpoy68.2.0.2.0">Code (including this site) is available under </span><a href="https://github.com/Littlest/littlest.github.io/blob/master/LICENSE" data-reactid=".18z27tpoy68.2.0.2.1">MIT</a><span data-reactid=".18z27tpoy68.2.0.2.2">. Documentation is available under </span><a href="http://creativecommons.org/licenses/by/3.0/" data-reactid=".18z27tpoy68.2.0.2.3">CC BY 3.0</a><span data-reactid=".18z27tpoy68.2.0.2.4">.</span></p></div></div></div><script>window.LITTLEST_ISOMORPH_CONTEXT = {"stores":{"photos":{"interesting":[]}}};</script>
  <script src="public/dependencies.bundle.js"></script>
  <script src="public/app.bundle.js"></script>
</body>
</html>