The Capability Trap

Presentate

capabilities

combine capabilities?

touchscreen + keyboard

more costs

more expensive
more complex
more fragile

every capability

has a cost

focus

"Focus is about saying no."

— Steve Jobs

USER DOES SOMETHING
UPDATE APP STATE AND UI

two-way data flow

direct dom updates

how complicated

can debugging get?

rare corner case

chain reaction

serious problems

can we do better?

virtual DOM

render function

given app state,

describe the dom

one-way data flow

managed dom updates

scaling

obvious approach

remove capability

better outcome

drawbacks?

position: sticky

let's use a polyfill

dom control clash

react vs polyfill

bad things happened

to the dom

how do we get both?

it's a

would both

be better?

focus

github.com/jackmoore/react-sticky-position

crisis averted

render functions

should never mutate state

rules get broken

bad

function render() {
  mutateSomeState();

  return howThingsShouldLook;
}

discipline

discipline is hard

human

error

discipline

doesn't

scale

guarantees

function render() {
  mutateSomeState(); // now state is immutable

  return howThingsShouldLook;
}

rule wasn't broken

new and unfamiliar

frustration

give in to mutation

combine capabilities?

mutable state + immutable state

if we allow mutation

we need discipline

patience

don't give in

discipline

render functions

should never have side effects

bad

function render() {
  localStorage.username = "rtfeldman";
  
  return howThingsShouldLook;
}
can we guarantee no side effects?

no
side
effects

managed effects

3 ways to do effects

localStorage.username = "rtfeldman";
withCallback(function(result) { ... });
withPromise(promise).then( ... );

return a task

a description of

what you want done

harmless to

instantiate

chainable

succeed or fail

3 ways things can fail

try { doSomething() } catch (err) { ... }
withCallback(function(err, result) { ... });
withPromise(promise).then(success, failure);

task

virtual dom

function render() {
  localStorage.username = "rtfeldman";
  
  return howThingsShouldLook;
}

not supported

function render() {
  // localStorage.username = "rtfeldman";
  
  // return howThingsShouldLook;
  return new UpdateLocalStorageTask();
}

obviously broken

render functions
have no special side effect rule

100% immutable

no rules

TO WORRY ABOUT

virtual dom

managed effects

immutable values

do we need direct DOM updates?
do we need mutable values?
do we need side effects?

redundant

capabilities

more guarantees

not more capabilities

guarantees enforced at

build time

broken code

can't be run

broken code

can't be run

IF IT COMPILES,

IT USUALLY WORKS

reliable

maintainable

how does it do

in practice?

8 MONTHS

0 RUNTIME EXCEPTIONS

refactoring

fun

we let go of unnecessary capabilities
and got a better experience

should i

add a new

capability?

is it redundant?

more than the sum

of its parts?

is it worth the cost

of complexity?

Liked this talk? Share it!

  •   / 113

Published on , Last updated:

Share this presentation