S

J
. ER
T
C H

A
E H

XE M
UP L
L
F OM
C

DN G

NT I

AE N

RE A C

FLUX VS REACT.JS

Flux

An application architecture for building User Interfaces (UI)

A data flow application architecture created and used by Facebook

for client-side web applications

React.js

An open source JavaScript library for building user interfaces

An implementation of Web Components for customized User

Interface elements.

Blends in easily with any of the technologies selected.

It is the V in the MVC Model View Architecture

ADVANTAGES OF REACT.JS

Prudent use of a Component Model

Abstraction

Composition

Expressivity

Server Side Rendering

FLUX & REACT TOGETHER

Flux can be implemented using any platform or programming

language

when used internally with React.js the UI & UX are unparalleled

React enhances the use of reusable UI to generate competent UX

COMPANIES USING FLUX ARCHITECTURE

Facebook

Instagram

New York Times 2014 Red Carpet Project

COMPONENTS

Responsible for the closely co-ordinated functioning of the

applications

Control and initiate Events as allocated to them to maintain the

integrity and validity of the application state

This harmony amongst the components ensures a unidirectional

data flow

CORE COMPONENTS OF FLUX

ARCHITECTURE
1.
2.
3.
4.

Actions & Action Creators

Dispatcher
Stores
Controller Views

Views

APIs

Communicat
e to Users

Action
Creators

Stores
Event
Data

Actions

Dispatcher
Callbacks

ACTIONS

Helper methods which pass data to the Dispatcher

JavaScript objects with a type and data associated with them

Exchange data from the Server

The data is introduced into the Flux Flow by Actions while the bi
directional interactions from the outside traffic are taking place

The data is eventually then sent to the Stores

Another group of methods called the Action Creators are invoked

and they send actions to the Dispatcher

DISPATCHER

The Dispatcher is the one responsible for co-ordinating the entire

logic of the application

It synchronises the receiving of actions and the dispatching of the

actions as well, along with the data to the registered call backs

STORES

Holds various components for use down the line within the
application

They hold the components for multiple states of the applications,

maintaining smooth logic

They hold application state and business logic using various

variables

Manage data, its methods and the Dispatcher call backs

Organizes components domain wise and the management is done in

accordance with the need of each domain

Emit Events and a View which eventually binds to the respective

Stores Events for further actions

CONTROLLER VIEWS

These components obtain the State as data from Stores and

communicate them to the respective View in the hierarchy

They render with the Controller Views

A PROMISING FUTURE - FLUX AND

REACT.JS

React is a rage today when it comes to web frontend

It eliminates the nuisances of huge and slow data structures of the

age old DOMs by introducing the very crisp Virtual DOM

The Flux architecture enforces unidirectional data flow and typically

turns Single Page Applications into understandable and simple
implementations

VISIT
HTTP://WWW.SPEC-INDIA.COM/SERVICES/JAVA-APPLICATION-DEVELOPMENT.HTML

REQUEST A FREE POC

TO
TEST DRIVE OUR SERVICES

&