Reactions

Making Things Simpler with React & Flux

Software Engineer & University Liaison at feature[23]

Graduate of Florida State and North Florida with respective degrees in Music and Computing

Prior professions include martial arts instructor, fishing guide, touring guitarist, and I am still regularly involved in

professional drinking

Today’s Focus…

Heuristics

JavaScript

“JavaScript is the heuristic that no matter how amazing of a programmer you think you are, you are… “Uncaught TypeError: undefined is not a function.

So, Why React (and Flux)?

Simplicity

How do we convince people that in programming simplicity and clarity — in short: what mathematicians call "elegance"— are not a dispensable luxury, but a crucial matter that decides between success and failure?

Edsger Dijkstra

What Can Cause Complexity?

Abstractions

Too Many Abstractions

“All problems in computer science can be solved by another level of indirection, except for the problem of too many layers of indirection.”

Abstractions Can Be Limiting

Choosing the Right Abstractions

Data Fetching & Persistence

Rendering

Data Flow

We Shape and Create Data Flows

So… What Does Simple Look Like Then?

PresentationData

Flux React

Flux React

Pattern Abstraction

Data Flow PresentationData

(Potential) Abstraction Abstraction

The heart of your application

The Flow

Store

ActionsComponents

UserCreates

NotifiesReceives/Retrieves State

Dispatcher

Server

Store

DispatcherView

User

StoreDispatcher View

Action

Server

Unidirectional data flow

Declarative/Explicit Mutation

Public APIs for retrieving data(and registering for mutation events)

CQRS & DDD (inspired) for client-side development

Code

The War Between The States

Data Presentation

Application State View State

Greg Young

Dan Abramov

f(simplicity, reliability) => confidence

Questions!

Like, why not “!?!” instead of just “!” ???

Resources

GUI Architectures(Fowler)

Observer & Flow Synchronization(Fowler, again)

Separated Presentation(Why not Fowler?)

History of MVC

React & Flux

Vanilla Flux (shameless self promotion)

Redux(brilliant talk on future of Flux)