The Future of JavaScript Architecture

Tomasz Ducin  •      @tomasz_ducin  •  bit.ly/js-arch-future

@tomasz_ducin

Hi, I'm Tomasz

Independent Consultant & Software Architect

Trainer, Speaker, JS/TS Expert

ArchitekturaNaFroncie.pl (ANF)

Warsaw, PL

tomasz (at) ducin.dev

@tomasz_ducin

VIRTUAL DOM

@tomasz_ducin

React Diffing Algorithm

render phase (virtual) + commit phase (DOM repaint)

@tomasz_ducin

@tomasz_ducin

<script>
  let price = 0;

  function handleClick() {
    price += 1;
  }
</script>
<button on:click={handleClick}>
  Price: {price} {price ? '$' : ''}
</button>

Svelte

@tomasz_ducin

VIRTUAL DOM

INCREMENTAL DOM

VIRTUAL DOM

@tomasz_ducin

<button on:click={handleClick}>
  Price: {price} {price ? '$' : ''}
</button>
function c(){
  button = element("button");
  t0 = text("Price: ");
  t1 = text(ctx.price);
  t2 = space();
  t3 = text(t3_value);
  dispose = listen(button, "click", ctx.handleClick);
}

@tomasz_ducin

compiled:

source:

CALCULATIONS:
RUNTIME

@tomasz_ducin

CALCULATIONS:
RUNTIME
COMPILE-TIME

Imperative

let quantity = 1;
let price = 4.99;
let totalPrice = quantity * price; // 4.99

quantity++;
totalPrice // DESYNC

@tomasz_ducin

totalPrice == quantity * price

Invariant (rule to be satisfied):

Functional Reactive

let quantity$ = fromClickEvent()
let price$ = fromHTTP(4.99)
let totalPrice$ = combineLatest(
  quantity$, price$,
  (quantity, price) => quantity * price
)

INC quantity$ // click!
totalPrice$ // 9.98

@tomasz_ducin

<script>
  let quantity = 0;
  let price = 4.99;
  $: totalPrice = quantity * price;

  function handleClick() {
    quantity += 1;
  }
</script>
<button on:click={handleClick}>
  Price: {totalPrice} {totalPrice ? '$' : ''}
</button>

Svelte

@tomasz_ducin

Imperative Reactive

<script>
  let quantity = 0;
  let price = 4.99;
  $: totalPrice = quantity * price;

  function handleClick() {
    quantity += 1;
  }

  async function update(data){
    return http.post(url, data)
      .then(...).catch(...)
  }

  $: update({ totalPrice })
</script>

Svelte

@tomasz_ducin

Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it.
And to make matters worse: complexity sells better.

Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it.
And to make matters worse: complexity sells better.

- Edsger Dijkstra

@tomasz_ducin

TO HIDE
OR TO EXPOSE

@tomasz_ducin

SIMPLICITY REDUCES (OUR) RESPONSIBILITY

@tomasz_ducin

  • audit
  • auditTime
  • buffer
  • bufferCount
  • bufferTime
  • bufferToggle
  • bufferWhen
  • catchError
  • combineAll
  • combineLatest
  • concat
  • concatAll
  • concatMap
  • concatMapTo
  • concatWith
  • count
  • debounce
  • debounceTime
  • defaultIfEmpty
  • delay
  • delayWhen
  • dematerialize
  • distinct
  • distinctUntilChanged
  • distinctUntilKeyChanged
  • elementAt
  • endWith
  • every
  • exhaust
  • exhaustMap
  • expand
  • filter
  • finalize
  • find
  • findIndex
  • first
  • groupBy
  • ignoreElements
  • isEmpty
  • last
  • map
  • mapTo
  • materialize
  • max
  • merge
  • mergeAll
  • mergeMap
  • mergeMap as flatMap
  • mergeMapTo
  • mergeScan
  • min
  • multicast
  • observeOn
  • onErrorResumeNext
  • pairwise
  • partition
  • pluck
  • publish
  • publishBehavior
  • publishLast
  • publishReplay
  • race
  • reduce
  • repeat
  • repeatWhen
  • retry
  • retryWhen
  • refCount
  • sample
  • sampleTime
  • scan
  • sequenceEqual
  • share
  • shareReplay
  • single
  • skip
  • skipLast
  • skipUntil
  • skipWhile
  • startWith
  • subscribeOn
  • switchAll
  • switchMap
  • switchMapTo
  • take
  • takeLast
  • takeUntil
  • takeWhile
  • tap
  • throttle
  • throttleTime
  • throwIfEmpty
  • timeInterval
  • timeout
  • timeoutWith
  • timestamp
  • toArray
  • window
  • windowCount
  • windowTime
  • windowToggle
  • windowWhen
  • withLatestFrom
  • zip
  • zipAll

@tomasz_ducin

  • audit
  • auditTime
  • buffer
  • bufferCount
  • bufferTime
  • bufferToggle
  • bufferWhen
  • catchError
  • combineAll
  • combineLatest
  • concat
  • concatAll
  • concatMap
  • concatMapTo
  • concatWith
  • count
  • debounce
  • debounceTime
  • defaultIfEmpty
  • delay
  • delayWhen
  • dematerialize
  • distinct
  • distinctUntilChanged
  • distinctUntilKeyChanged
  • elementAt
  • endWith
  • every
  • exhaust
  • exhaustMap
  • expand
  • filter
  • finalize
  • find
  • findIndex
  • first
  • groupBy
  • ignoreElements
  • isEmpty
  • last
  • map
  • mapTo
  • materialize
  • max
  • merge
  • mergeAll
  • mergeMap
  • mergeMap as flatMap
  • mergeMapTo
  • mergeScan
  • min
  • multicast
  • observeOn
  • onErrorResumeNext
  • pairwise
  • partition
  • pluck
  • publish
  • publishBehavior
  • publishLast
  • publishReplay
  • race
  • reduce
  • repeat
  • repeatWhen
  • retry
  • retryWhen
  • refCount
  • sample
  • sampleTime
  • scan
  • sequenceEqual
  • share
  • shareReplay
  • single
  • skip
  • skipLast
  • skipUntil
  • skipWhile
  • startWith
  • subscribeOn
  • switchAll
  • switchMap
  • switchMapTo
  • take
  • takeLast
  • takeUntil
  • takeWhile
  • tap
  • throttle
  • throttleTime
  • throwIfEmpty
  • timeInterval
  • timeout
  • timeoutWith
  • timestamp
  • toArray
  • window
  • windowCount
  • windowTime
  • windowToggle
  • windowWhen
  • withLatestFrom
  • zip
  • zipAll

$: statement

@tomasz_ducin

It seems that perfection is attained, not when there is nothing more to add, but when there is nothing more to take away

- Antoine de Saint Exupéry

@tomasz_ducin

LESS IS MORE

@tomasz_ducin

me

@tomasz_ducin

Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it.
And to make matters worse: complexity sells better.

Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it.
And to make matters worse: complexity sells better.

- Edsger Dijkstra

@tomasz_ducin

SHOULD I ...?

@tomasz_ducin

NO!

Nothing is more dangerous than an idea, when you have only one idea.

- Émile-Auguste Chartier

@tomasz_ducin

Thank you

Thank you

Tomasz Ducin  •     @tomasz_ducin  •  bit.ly/js-arch-future