FLUX A

ND REA

CT.JS

CO

MP

LE

ME

NT

I NG

EA

CH

OT

HE

R

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

APIs

Action Creators• Actions

Dispatcher• Callbacks

Stores• Event• Data

Views• Communicat

e to Users

1. Actions & Action Creators2. Dispatcher3. Stores4. Controller Views

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 Store’s 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