SlideShare a Scribd company logo
Intro to Flux
Damian Legawiec
CEO of Spark Solutions
@damianlegawiec
What is Flux?
Framework?
What is Flux?
Framework?
Library?
What is Flux?
Framework?
Library? Kinda :)
What is Flux?
Architecture Pattern
What is Flux?
Architecture Pattern
One Way Data Binding
What is Flux?
Architecture Pattern
One Way Data Binding
Framework Agnostic
What is Flux?
Architecture Pattern
One Way Data Binding
Framework Agnostic
Not MVC :)
What is Flux?
Store
Model?
Store
Model?
Store
Model?
Collection?
Store
Model?
Collection?
Store
Application State Container
Store
Application State Container
Can be used with ORM
Store
Application State Container
Can be used with ORM
Simple JavaScript object enhanced by EventEmitter
or MicroEvent
Actions
Used to invoke Change of state
Actions
Used to invoke Change of state
Invoked from Views (Components in React)
Actions
Actions
Used to invoke Change of state
Invoked from Views (Components in React)
They pass arguments (payload) to Dispatcher
Actions
Dispatcher
There can be only one!
Actions
Dispatcher
There can be only one!
Dispatches Actions to the Store
DispatcherActions
Smart Components
Aware of Store
Smart Components
Aware of Store
Listen for Store change
Smart Components
Aware of Store
Listen for Store change
Data is in State
Smart Components
Aware of Store
Listen for Store change
Data is in State
Pass data via props to Dumb Components
Dumb Components
Only display data passed in props
Single Page App Example
https://greetabl.com/builder
Web App Example
https://milanstyle.com
When to use Flux?
Single Page App
Complex UI
Real World apps :)
When not to use Flux?
Learning React :)
Simple components enhancing static site
What is Flux implementation use?
Short Answer
REDUX
What is Flux implementation use?
Long Answer
What is Flux implementation use?
1. Start with official Facebook one
2. Choose between more conventional
ones (Reflux, Alt) or bleeding edge
Redux
Future reading List
1. https://facebook.github.io/flux/docs/o
verview.html#content
2. http://blog.andrewray.me/flux-for-
stupid-people/
Thanks for your attention!

More Related Content

PDF
Introduce Flux & react in practices (KKBOX)
PDF
React & Flux Workshop
PDF
Introduce flux & react in practice
PPSX
React introduction
PPT
Building Reactive webapp with React/Flux
PPTX
React, Flux and a little bit of Redux
PDF
Introduction to React and Flux (CodeLabs)
PDF
How to Redux
Introduce Flux & react in practices (KKBOX)
React & Flux Workshop
Introduce flux & react in practice
React introduction
Building Reactive webapp with React/Flux
React, Flux and a little bit of Redux
Introduction to React and Flux (CodeLabs)
How to Redux

What's hot (20)

PDF
An Overview of the React Ecosystem
PDF
Introduction to react
PDF
Thinking in React
PPTX
React. Flux. Redux
PPTX
Flux architecture
PDF
Workshop React.js
PPTX
React and Flux life cycle with JSX, React Router and Jest Unit Testing
PPT
React js
PDF
Best Practice-React
PDF
Redux js
PPTX
React.js - The Dawn of Virtual DOM
PDF
React + Redux for Web Developers
PPTX
React in Native Apps - Meetup React - 20150409
PPTX
ReactJS.NET - Fast and Scalable Single Page Applications
PDF
Understanding Facebook's React.js
PDF
Using redux
PDF
The Road To Redux
PPT
PPTX
Rethinking Best Practices
An Overview of the React Ecosystem
Introduction to react
Thinking in React
React. Flux. Redux
Flux architecture
Workshop React.js
React and Flux life cycle with JSX, React Router and Jest Unit Testing
React js
Best Practice-React
Redux js
React.js - The Dawn of Virtual DOM
React + Redux for Web Developers
React in Native Apps - Meetup React - 20150409
ReactJS.NET - Fast and Scalable Single Page Applications
Understanding Facebook's React.js
Using redux
The Road To Redux
Rethinking Best Practices
Ad

Similar to Intro to Flux - ReactJS Warsaw #1 (20)

PDF
An Introduction to Redux
PPTX
React gsg presentation with ryan jung & elias malik
PDF
Java Hurdling: Obstacles and Techniques in Java Client Penetration-Testing
ODP
Intro to Muon - How to build Polyglot Message and Event Microservices
PPTX
Introduction to Spring sec1.pptx
PDF
Redux data flow with angular
PDF
Advanced web application architecture Way2Web
PDF
Redux data flow with angular 2
PPT
Capsulization of Oracle Inventory
PPTX
Spring 1 day program
PDF
Building React Applications with Redux
PPTX
Academy PRO: React JS. Redux & Tooling
PDF
Spring mvc
PDF
Redux data flow with angular
PPTX
Scaling React and Redux at IOOF
PDF
Swiz DAO
PPTX
downloads_introduction to redux.pptx
PDF
Introduction to React, Flux, and Isomorphic Apps
PDF
Optimizing Spark Deployments for Containers: Isolation, Safety, and Performan...
PPT
Architectural Patterns and Software Architectures: Client-Server, Multi-Tier,...
An Introduction to Redux
React gsg presentation with ryan jung & elias malik
Java Hurdling: Obstacles and Techniques in Java Client Penetration-Testing
Intro to Muon - How to build Polyglot Message and Event Microservices
Introduction to Spring sec1.pptx
Redux data flow with angular
Advanced web application architecture Way2Web
Redux data flow with angular 2
Capsulization of Oracle Inventory
Spring 1 day program
Building React Applications with Redux
Academy PRO: React JS. Redux & Tooling
Spring mvc
Redux data flow with angular
Scaling React and Redux at IOOF
Swiz DAO
downloads_introduction to redux.pptx
Introduction to React, Flux, and Isomorphic Apps
Optimizing Spark Deployments for Containers: Isolation, Safety, and Performan...
Architectural Patterns and Software Architectures: Client-Server, Multi-Tier,...
Ad

Recently uploaded (20)

PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PDF
Electronic commerce courselecture one. Pdf
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
PPTX
Cloud computing and distributed systems.
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PPTX
A Presentation on Artificial Intelligence
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
PDF
NewMind AI Weekly Chronicles - August'25 Week I
PDF
CIFDAQ's Market Insight: SEC Turns Pro Crypto
PDF
Review of recent advances in non-invasive hemoglobin estimation
DOCX
The AUB Centre for AI in Media Proposal.docx
PDF
Unlocking AI with Model Context Protocol (MCP)
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PDF
cuic standard and advanced reporting.pdf
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
Encapsulation_ Review paper, used for researhc scholars
20250228 LYD VKU AI Blended-Learning.pptx
Electronic commerce courselecture one. Pdf
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
Cloud computing and distributed systems.
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
A Presentation on Artificial Intelligence
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
NewMind AI Weekly Chronicles - August'25 Week I
CIFDAQ's Market Insight: SEC Turns Pro Crypto
Review of recent advances in non-invasive hemoglobin estimation
The AUB Centre for AI in Media Proposal.docx
Unlocking AI with Model Context Protocol (MCP)
Digital-Transformation-Roadmap-for-Companies.pptx
Advanced methodologies resolving dimensionality complications for autism neur...
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
cuic standard and advanced reporting.pdf
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Encapsulation_ Review paper, used for researhc scholars

Intro to Flux - ReactJS Warsaw #1