Concurrency

with

JavaScript

Downtown ReactJS Meetup - 2018/10/30

Part 2

Part 2

• Quick Recap
• Fiber
• Async Rendering
• Web Workers
  • examples

Currency vs Parallelism

• Asynchronous vs Synchronous
• Blocking vs Non-Blocking
• Single Process vs Cooperative Multitasking
• Preemptive vs Non-Preemptive
• Simultaneous Multi Threading (SMT - hyper threading)

OS vs Userland

What is Concurrency?

two or more tasks can start, run, and complete in overlapping time periods. It doesn't rule out that the tasks can be both be running at the same instant. For example, multitasking on a single- vs multi-core machine.

... a property of a program or system

What is Parallelism?

tasks literally run at the same time e.g., on a multicore processor.

parallelism as the run-time behaviour of executing multiple tasks at the same time

Multi-

Multi-tasking

    -is a Process

    -top-level execution container

    -have their own memory space

    -communicate with other processes via IPC

    -sandbox / safety

 

Multi-threading

    -runs inside a process

    -share same memory

    -need to manage sync

OS vs Userland

JavaScript is

Single Threaded

Race conditions cannot happen

"Everything runs in parallel except your code"

JavaScript is

Synchronous

one operation is executed at a time

write code to make it behave asynchronous

JavaScript's Concurrency model is based on the

Event Loop

The goal is to move away from this

Multi-Theaded - Async

DOM

• find node(s) of interest
  • page loaded? element available?
• update node(s) if necessary
  • when to update? data incoming?
• repeat

DOM

DOM is tree-structured

DOM trees are easy to traverse

Virtual DOM*

• simplified copy of the DOM (JS objects)
• browser-independent
• can be optimized - diffing, batch updates

React Fiber

Background

• components describe what to render
  • react controls when to render
• gives react opportunity to optimize rendering
  • pause, delay, abort
• walks the tree recursively and calls render functions of the whole updated tree during a single tick.

Control over Scheduling

React Fiber

• It is a key goal for React that the amount of the user code that executes before yielding back into React is minimal.
• This ensures that React retains the capability to schedule and split work in chunks according to what it knows about the UI.

Control over Scheduling

React Fiber

key features: the ability to pause, abort, or reuse work as new updates come in; the ability to assign priority to different types of updates; and new concurrency primitives.

incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.

React Fiber

React Fiber

• Scheduling
  • the process of determining when work should be performed
• Work

  • computations that must be performed. Work is usually the result of an update (e.g. setState).

React Fiber

Reconciliation is not Rendering

React Fiber

Take aways

Rendering

CPU

• Creating Nodes
• Re-rendering

IO

• data fetching
• code splitting

ASYNC Rendering

Time Slicing

• React does not block the thread while rendering
• Only the final rendered state is displayed

Suspense

• Pause any state update until the data is ready
• Add async data to any component without 'plumbing'

Web Workers

• Dedicated Worker
• Shared Worker

isolated thread

    -code lives in its own file

    -some APIs are not accessible (i.e. DOM)

postMessage

    -communicates with the Main Thread

Spawn other workers (sub-workers)

Web Workers

• Dedicated Worker
• Shared Worker

isolated thread

    -code lives in its own file

    -some APIs are not accessible (i.e. DOM)

postMessage

    -communicates with the Main Thread

Spawn other workers (sub-workers)

main

worker

Uploading a CSV file

with Web Workers

Web Workers makes it possible to run a script operation in background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down.

Uploading a CSV file

• user is uploading a csv file
• csv file is parsed
• csv file is validated

Criteria

• Errors
  • misspelled header
  • unknown header
  • missing required header
  •  

Flow

• parse csv file
• validate headers
• validate items