Deterministic JavaScript Applications

DETERMINISTIC JS APPLICATIONS
State Management

A B O U T M E
{
"name": "Ilia Idakiev",
"experience": [
"Developer & Founder of HNS/HG“,
"Lecturer in 'Advanced JS' @ Sofia University”,
"Contractor / Consultant",
“Public / Private Courses“
],
"involvedIn": [
"Angular Sofia", "SofiaJS", "BeerJS"
]
}

26.01.2019 (Saturday) 
10 AM – 1:30 PM 
@ CampusX

“A deterministic system is a system in which no
randomness is involved in the development of future
states of the system. A deterministic model will thus
always produce the same output from a given
starting condition or initial state.
wikipedia

“In computer programming, a pure function is a
function that: 
 
1. Returns the same value for the same arguments.
2. Its evaluation has no side eﬀects.
wikipedia

“An expression is called referentially transparent if
it can be replaced with its corresponding value
without changing the program's behavior. This
requires that the expression is pure.
wikipedia

BENEFITS OF WRITING REFERENTIAL TRANSPARENT CODE
• It’s easier to modify code without breaking it. 
• It’s possible to apply optimisations like memoization, lazy-evaluation. 
• Helps proving correctness. (It’s easier to reason about.)
Deterministic JavaScript Applications

REDUX
Resource: https://itnext.io/integrating-semantic-ui-modal-with-redux-4df36abb755c

What should we put inside the REDUX store?

STATE DERIVATIONS WITH SELECTORS (RESELECT)
• Selectors can compute derived data, allowing Redux to store the minimal possible
state. 
• Selectors are efficient. A selector is not recomputed unless one of its arguments
changes. 
• Selectors are composable. They can be used as input to other selectors.

How should we store data inside the REDUX store?

PROBLEMS WITH STATE SHAPE
• When a piece of data is duplicated in several places, it becomes harder to make sure that it is
updated appropriately. 
• Nested data means that the corresponding reducer logic has to be more nested and therefore
more complex. In particular, trying to update a deeply nested field can become very ugly very
fast. 
• Since immutable data updates require all ancestors in the state tree to be copied and updated
as well, and new object references will cause connected UI components to re-render, an
update to a deeply nested data object could force totally unrelated UI components to re-
render even if the data they're displaying hasn't actually changed. 
 
• NORMALIZR - Normalises nested JSON according to a schema.
FIX:

HIGH ORDER REDUCERS
• A higher-order reducer is a function that takes a reducer function as an argument,
and/or returns a new reducer function as a result. It can also be viewed as a
"reducer factory".  
• We can use this pattern to create specialized versions of our own reducer
functions, with each version only responding to specific actions.

How to make our application state persistent across browsers?

THE UNIFORM RESOURCE
LOCATOR (URL),

SINGLE PAGE APPLICATIONS
http://location/**/*
index.html
*
*without static assets like css, js files

HOW SINGLE PAGE APPLICATION NAVIGATION WORKS
• Each browser tab has a “browsing context”. 
• The browsing context maintains a “session history”, which is basically, an array of
location entries

BROWSER HISTORY API
• pushState() - takes three parameters: a state object, a title (which is currently
ignored), and (optionally) a URL. 
• replaceState() - operates exactly like pushState() except that it modifies the current
history entry instead of creating a new one. 
• go() - method to load a specific page from session history, identified by its relative
position to the current page (with the current page being, of course, relative index 0). 
• back() - like the back browser button. 
• forward() - like the froward browser button.

BROWSER HISTORY API IN SPA
• <a href=“…”>Link</a> with event.preventDefault + pushState 
• window.addEventListener(‘popstate’, changeRouteHandler)

ROUTER DYNAMIC PATTERN MATCHING
• A dynamic segment is denoted by a colon “:”
• When a route is matched, the value of the dynamic segments will be available for
use.
/user/:username/post/:post_id

UNIFORM RESOURCE LOCATOR
• a form of URI and a standardized naming convention for addressing documents
accessible over the Internet and Intranet.
Resource: https://medium.com/@pshrmn/demystifying-single-page-applications-3068d0555d46

UTILISING THE URL IN SINGLE PAGE APPLICATIONS
• Controlling UI components like Dialogs and Tabs using the URL path. 
• Controlling the data and state of UI element like tables, dropdown.
• Application State Persistence
• Reducing Redux State
• More Deterministic Application
• Writing less code?
PROS CONS
• Longer and uglier URL

WHAT ARE WE TRYING TO ACHIEVE?
APPLICATION OUTPUTINPUT
(Pure function)

How will this work without side-effects?

SIDE EFFECTS
• Side effects are essential to enable a program to work with the outside world
(people, filesystems, networks). 
• By abstracting the side-effects it’s easier for us to find and fix errors.

Is REDUX enough?
After a while its very hard to follow
how and why state changes
happened when the state starts
growing bigger and bigger

“A ﬁnite-state machine (FSM) is an abstract
machine that can be in exactly one of a ﬁnite number
of states at any given time.
wikipedia

FINITE-STATE MACHINES
➤ Can change from one state to another in response to some external input. 
➤ Are defined by a list of its states, its initial state, and the conditions for each state
transition. 
➤ Can be of two types - deterministic and non-deterministic (but every non-
deterministic can be converted to deterministic)

DETERMINISTIC FINITE-STATE MACHINES
➤ each of its transitions is uniquely determined by its source state and input
symbol, and
➤ reading an input symbol is required for each state transition.
In automata theory, a finite state machine is called a deterministic finite
automaton (DFA), if

DETERMINISTIC FINITE-STATE MACHINES
a b c

STATECHARTS
➤ Extended state machine diagrams that allow us to model our states hierarchically. 
➤ A compound state can be split up into completely separate orthogonal regions and
each region specifies its own state machine. 
➤ States can have multiple transitions for the same event and transitions can be
guarded. 
➤ Transitions can happen automatically and can be delayed. 
➤ Statecharts keep history.
Resource: https://statecharts.github.io/

XSTATE
➤ We can preview and simulate your statecharts with xstate visualizer. 
➤ Eeasy to test all cases that our application can be in.
Resource: https://statecharts.github.io/

GitHub > https://github.com/iliaidakiev (/slides/ - list of future and past events)
Twitter > @ilia_idakiev
STATECHARTS
CONNECT

Deterministic JavaScript Applications

Recommended

More Related Content

Similar to Deterministic JavaScript Applications (20)

More from Ilia Idakiev (18)

Recently uploaded (20)

Deterministic JavaScript Applications