Satish Chilukuri’s Blog 

If you are using Facebook's React, you would have come across Flux, an unidirectional data flow architecture that facebook suggests to use with React. Unfortunately, the Flux overview is light on some details and even after looking at the tutorial code, I still found Flux to be somewhat complicated for what it wants to achieve. So I was looking for Flux alternatives and I came across this excellent post on how to implement the ubiquitous Model-View-Controller pattern in a reactive way. Using that I was able to build a simple example with unidirectional data flow. I also used a REST API as opposed to using a JavaScript object as a data store.

The rest of this post describes how the example was implemented. If you'd rather just skip all that and just look at the code, it is available here.

What the example application does

Our example application is oversimplified, but I think it illustrates how to use React in a realistic fashion. Most Flux examples I've come across just use a JavaScript object as a data store, whereas in typical web applications, the actual data store is elsewhere and you make ajax calls to interface to it. Typical operations are — read data, delete/update data and add new data. Accordingly, our example application will display a list of users, allow us to delete users from that list and to create new users.

An overview of the implementation

Our example application has the following JavaScript modules:

1. UserView — A React component which is our View module. It displays a list of users and also allows us to delete/create users.
2. UserStore — A data store which is the Model. It talks to a REST API to get a list of users, to delete a user and to create a user.
3. UserIntent — The Intent object.

Read more...

How many elements does this JavaScript array object have? (note the comma at the end after which there is no element):

var an_array = [1, 2, 3, ]

This is what the ECMASript Language Specification says about commas in array initialisers:

Whenever a comma in the element list is not preceded by an AssignmentExpression (i.e., a comma at the beginning or after another comma), the missing array element contributes to the length of the Array and increases the index of subsequent elements. Elided array elements are not defined. If an element is elided at the end of an array, that element does not contribute to the length of the Array.

So the answer to our question would be 3 as the trailing comma would be ignored. You can confirm this by bringing up the console in developer tools in Firefox or Chrome entering the array definition and printing out its length:

> var an_array = [1, 2, 3, ]
            
> an_array.length

< 3

Read more...