Writing Stateless UIs with Flux + React

View Github Repository Open presentation in a new window

jordangarcia

See all presentation from jordangarcia

Writing Stateless UIs with Flux + React

0 0

backbone-meetup-talk

On Github jordangarcia / backbone-meetup-talk

Writing Stateless UIs with Flux + React

by Jordan Garcia

About Me

Software Engineer @ Optimizely: world's most used A/B testing platform

Refactored Optimizely's Frontend to Flux

Big fan of functional javascript, stateless systems and ping pong

Table of Contents

Defining the term "Stateless UI"

A Flux Overview

Reactive UIs

Game Design

What is a Stateless UI?

  • UI components do not manage their own state or data
  • A completely separate system manages state and data flow
  • Application can be put into any state or reset completely

Why Do We Want This?

  • Creates a very thin UI layer
  • Data abstraction that can be reused
  • TESTABILITY!

How Do We Implement a Stateless UI?

  • Decoupled system for managing state
  • +
  • Decoupled system for reactively rendering UI
  • =
  • Flux + React

What is Flux?

  • No state is stored the view, stores dont know about views
  • A single action causes a single state change
  • Every action does a full roundtrop from View => Store => View

A More Complicated Diagram

Reactive UIs

  • Given some state or model UI renders deterministically
  • User does not have to implement state transitions, just the final states
  • Tend to be declarative over imperative

Whats the Difference Between Backbone Views and React Components?

Backbone:

  • Imperative
  • render() function attaches DOM to the page as a side effect
  • after the View has been instantiated, subscribe to model change events and re-render

React:

  • Declarative
  • render() function takes takes state + props and deterministically returns what the DOM should look like
  • When the state of the component or its props change the same render() function is called

Game Design: Tetris

  • 10x22 (W x H) grid
  • 7 different piece types, all 4 blocks
  • Creating a contiguous horizontal line of blocks clears the line
  • Should be a piece of cake!

Think About State First

  • Block - type ('I', 'L', 'J', etc), structure (array of translations), and spawn position
  • Board - 10 x 22 grid. Each grid space can be empty or contain a block
  • Active Piece - the piece the user is controlling on the board
  • Number of lines cleared
  • isPaused and isOver

Lets get started

http://github.com/jordangarcia/tetris

Thank You!

  • Twitter: @jordanjgarcia
  • Github: https://github.com/jordanjgarcia
  • NuclearJS: https://github.com/optimizely/nuclear-js