A new state of mind: Building better web apps with finite-state machines

Transcript

1. A NEW STATE OF MIND BUILDING BETTER WEB APPS WITH FINITE-STATE MACHINES
2. ADAM DAW TWITTER: @ADAMDAW GITHUB: ADAMDAW
3. WHAT IS A FINITE-STATE MACHINE? ANY (ABSTRACT) MACHINE THAT CAN BE IN EXACTLY ONE OF A FINITE NUMBER OF STATES AT A GIVEN TIME.
4. THINGS TO KNOW • NOT NEW (THOUGH RECENTLY GAINING POPULARITY) • NOT CODE (THOUGH MANY IMPLEMENTATIONS HAVE BEEN INTRODUCED) • NOT HARD (THOUGH STARTING TO THINK OF THINGS IN THIS FASHION MIGHT BE)
5. EXAMPLES IN THE WILD A CHECKBOX (2 STATES: CHECKED, UNCHECKED) A DOOR (2 STATES: OPEN, CLOSED) A PROMISE (3 STATES: PENDING, REJECTED, FULFILLED)
6. WHY STATE MACHINES? • IMPLICIT STATE • Booleans such as (loading/doneloading) • EXPLICIT STATE • states: { loading: {…}, error: {…}, idle: {…}, success: {…}} • CLEANER CONCEPTUALIZATION OF BEHAVIOUR • BETTER MAPPING OF TRANSITIONS • PARADIGM SHIFT: EVENT-ACTION TO EVENT-STATE-ACTION
7. VISUALIZING STATE • 2 STATES : • Locked (initial) • Coin: un-locked • Un-locked • Push: locked
8. VISUALIZING STATE PT 2 • 3 STATES : • Idle (initial) • Click : fetching • Fetching • Failure: error • Success: idle • Error • Retry: fetching
9. LET’S SEE IT IN CODE!
10. SUMMARY • CLEANER TRANSITIONS BETWEEN STATES • BETTER UNDERSTANDING OF BEHAVIOUR • LESS CODE TO COVER FOR TESTING • Can automate integration testing • MOVE FROM EVENT-ACTION TO EVENT-STATE-ACTION TODAY!
11. Q & A?