Scribd
Upload
70 views

Flux React

Flux is an application architecture for building user interfaces that uses a unidirectional data flow. React.js is an open source JavaScript library for building user interfaces that implements the view component of the MVC architecture. Flux and React.js work well together, with Flux providing the unidirectional data flow and React.js providing reusable UI components to generate user experiences. Key components of the Flux architecture include actions and action creators, a dispatcher, stores, and controller views.

Uploaded by

aepatil74
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
70 views

Flux React

Flux is an application architecture for building user interfaces that uses a unidirectional data flow. React.js is an open source JavaScript library for building user interfaces that implements the view component of the MVC architecture. Flux and React.js work well together, with Flux providing the unidirectional data flow and React.js providing reusable UI components to generate user experiences. Key components of the Flux architecture include actions and action creators, a dispatcher, stores, and controller views.

Uploaded by

aepatil74
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

MVC

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. Actions & Action Creators
2. Dispatcher
3. Stores Views
4. Controller Views • Communicate APIs
to Users

Stores Action
• Event Creators
• 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 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

You might also like