6 good resources for learning Facebook Flux

Facebook uses Flux application architecture to build client side web applications. Flux utilizes a unidirectional dataflow to complement React’s composable view components. The important thing to note is that it is more of an architecture than a formal framework. A unidirectional dataflow to make changes in a complicated application. The main concepts of this architecture are:

• Dispatcher: Directs the flow of data
• Stores: Store the states and handle the events sent by dispatcher
• Views: Sends action to stores through dispatcher to notify stores to hold data and logic
• Actions: JavaScript objects that give actions for views

The dispatcher is the singleton that manages the entire process. It broadcasts the payload to the registered callbacks. The dispatcher becomes vital as the application grows. It invokes the registered callbacks in a specific order to manage the dependencies between the stores. The stores wait for other stores to update and then accordingly, they update themselves. They contain the state and logic of the application and manage not just one but a number of object instances.

The problem with using MVC is that the complexity of the system increases exponentially every time you attempt to add a new feature. This made the code unpredictable. The solution for this problem was to structure the code in a way that makes it more predictable. Flux enables us to build scalable web applications. It won’t take long for you to understand this architecture and put it to use. If you are trying to use this amazing architecture in designing your web applications, here are some good sources that can guide you:

Facebook’s tutorial

This is the official tutorial provided by Facebook to teach us about Flux. It is an illustrative tutorial and does a good job at teaching you about the different Flux components by providing coding examples and showing how they built client side applications at Facebook. It covers all the concepts that are there in the architecture with concise explanations.

Eduonix

Eduonix offers a course that focusses at providing a one stop training manual for developers who want to use this architecture for building their application. It starts with teaching the basic concepts followed by a detailed section on React. You will get to learn about the different flux components, setting up a programming environment and other popular tools. In the end you will get to build a complete web app using this Facebook Flux architecture.

Getting To Know Flux, the React.js Architecture

This website offers a tutorial on Flux as one of the installments form the Learning React series. You can refer to their previous installments to gain familiarity with React.js. It teaches you about the working of Flux architecture and how you could implement it in your projects. They also teach you to build a shopping cart in the next installment.

88 Mph With Flux and React

This is a blogpost by Chris Callahan where he starts the post by giving a brief introduction of what Flux architecture is all about. He follows a simple approach for teaching the implementation using coding example from an app that he has built himself and also provides a reference to the whole app. He makes the process easier to understand for the learner since he himself is still learning it.

Flux For Stupid People

This is a blog by Andrew Ray for people who are struggling with learning Flux because of its dynamic and complicated nature. He tells you about whether or not you actually need to learn this architecture for your apps as it may result in adding unnecessary complexity to your code. He writes it in a manner such that it is easily accessible by the reader.

Facebook’s Flux Overview

This is an official overview provided by Facebook about the Flux architecture. It gives you a deeper insight into the architecture and its working rather than just a surfaced introduction. This is a great help if you are still unclear about the core architecture and what makes it work.

Flux is one of the ways through you can learn facebook programming. You need to use these concepts in order to fully understand them. Take help from others’ projects and explore more coding examples so that so that you can implement the knowledge in designing your own application. Or have you built one already? Let us know through your comments.

I am a technical blog writer and content developer at Eduonix Learning Solutions, beside content writing I also love to discuss on topics related to web designing, SEO and other stuff which are trending in today's web development world.