The JavaScript blog.


css react flux

React Inline, FluxThis

Posted on .

React Inline

If you're looking for a solution for managing CSS in React projects, then take a look at React Inline (GitHub: martinandert/react-inline, License: MIT, npm: react-inline) by Martin Andert. It transforms inline styles into CSS code and class names, so you get a CSS file and a list of class names.

There's an example that shows how the StyleSheet.create syntax can be turned into a more succinct const styles object with a corresponding CSS file.

The project has tests (that are written with ES6 with Babel), and there's a demo site.


Josh Horwitz sent in FluxThis (GitHub: addthis/fluxthis, License: Apache 2, npm: fluxthis), a Flux framework by AddThis. It's designed to make debugging easier, and comes with immutability and performance optimisations.

For more on immutability, see the immutable stores documentation. There's also a non-immutable store known as the ObjectOrientedStore. Internally the project uses immutable, and Babel is also used so all of the internal FluxThis code is ES6.


libraries modules react dependency-injection flux

Flox, Pioc

Posted on .


I continue to receive Flux implementations, which isn't a bad thing because they're adapting at a rapid pace. Flox (GitHub: foss-haas/flox, License: MIT, npm: flox) by Alan Plum is lightweight and seems easy to learn -- the readme has a nice introduction to the architecture.

It's loosely based on Flux, with a pared down pragmatic approach which I like. For example, Flox doesn't provide waitFor. Instead you should use services, which I thought made sense.

If you're interested in Flox, read through the example in the readme. It also ships with pretty detailed Mocha/SinonJS tests.


Speaking of services, what do you do when you want to easily switch dependencies or configuration values for different environments, like tests? pioc (GitHub: pago/pioc, License: MIT, npm: pioc) by Patrick Gotthardt is a dependency injection container that is aimed at Node but can be used with browsers through Browserify.

pioc's goal is to help you write loosely coupled modules:

pioc is very smart about how and when to initialize your services. It supports constructor injection, property injection, static values and even module inheritance with all the parts that are needed to make it work.

The API allows you to define modules, which are known as service definitions. These services are resolved by providers. Services can be bound as values or lazily evaluated objects. By default objects are treated as singletons, which is the most common usage.

If you're confused by all of this then try to imagine how to handle loose coupling for database modules. If you wanted to switch your database's configuration for the test or staging environments, then DI can help because you can inject different configuration values at runtime. Also, the database module would be treated as a singleton, so you can safely refer to it in multiple places in your project without accidentally creating new instances or connections.

Patrick's example is actually MongoDB, and this works well as a showcase of pioc's features.


libraries ui flux

DeLorean, Cash: Call, Collect, Assign

Posted on .


DeLorean.js (GitHub: f / delorean, License: MIT, Bower: delorean, npm: delorean.js) by Fatih Kadir Akın is a Flux implementation. It can be used with React.js and Flight.js, and the author mentioned that he's working on Backbone.js integration as well.

I've previously written about Fluxxor, which is another library based on Flux. If you've used MVC libraries before, then you can think of DeLorean.js and Fluxxor like alternatives for the models and controllers. Flux provides tools for creating stores, dispatchers, and action creators.

Stores are a bit like models, but you don't create instances of them. Instead they manage state for a domain within the application. This actually has positive implications for testing. This quote is from the React overview:

Stores accept updates and reconcile them as appropriate, rather than depending on something external to update its data in a consistent way. Nothing outside the store has any insight into how it manages the data for its domain, helping to keep a clear separation of concerns. This also makes stores more testable than models, especially since stores have no direct setter methods like setAsRead(), but instead have only an input point for the payload, which is delivered through the dispatcher and originates with actions.

Dispatchers manage data flows, responding to actions as they are created during the lifetime of a program. Action creators are similar to controllers in MVC -- in DeLorean's documentation they do things like get JSON from a server, then pass the data to a dispatcher.

Action creators are then used by the view layer, so if you're using React you could invoke action creators from views and bind them to template fragments.

This might all sound highly abstract, but you might find it useful if you're finding it hard to manage large client-side projects. The model layer in MVC libraries often feels ORM-inspired, which in my experience doesn't always work well when combined with business logic.

Cash Updates

Rob Robbins sent in a note to say Cash has been updated to include new methods for allowing the invocation of native functionality:

Call, Collect and Assign

In order to keep code creep at a minimum, We are introducing these three methods that allow the invocation of native functionality on the elements in the q. What do I mean? Let's take the Attribute methods for an example. We could write separate methods for the getting, setting, and removal of attributes:

cash.setAttribute = function(foo, bar) {  
  // set attribute 'foo' to 'bar' on each element in the q 

cash.removeAttribute = function(foo) {  
  // remove attribute 'foo' from each element in the q 

cash.getAttribute = function(foo) {  
  // collect and return attribute 'foo' from each element in the q 

Instead we can have a single method capable invoking any of these (or any native method for that matter):

$(foo).call('setAttribute', 'data-foo', 'bar'); // returns cash
$(foo).call('removeAttribute', 'data-foo');
$(foo).collect('getAttribute', 'data-foo'); // retruns an array

The reason I wrote about Cash previously was because I know a lot of people are looking for alternatives to jQuery for smaller DOM/event-wrapper libraries, and this new API should help people use existing standards rather than reinventing things browsers are good at.