Presentation about my experience in developing deterministic JavaScript Applications. Thoughts on Redux and problems surrounding it. And how finite state machines/statecharts can help us (xstate). Demos Location: https://github.com/IliaIdakiev/slides

1. DETERMINISTIC JS APPLICATIONS
State Management

2. 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"
]
}

3. ANGULAR SOFIA

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

5. “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

6. “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 effects.
wikipedia

7. “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

8. Why?

9. 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

10. REDUX

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

12. What should we put inside the REDUX store?

13. How to minimise our state?

14. Deterministic JavaScript Applications
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.

15. How should we store data inside the REDUX store?

16. Deterministic JavaScript Applications
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:

17. Reusing reducer logic?

18. Deterministic JavaScript Applications
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.

19. How to make our application state persistent across browsers?

20. THE UNIFORM RESOURCE
LOCATOR (URL),

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

22. Deterministic JavaScript Applications
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

23. Deterministic JavaScript Applications
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.

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

25. Deterministic JavaScript Applications
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

26. Deterministic JavaScript Applications
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

27. Deterministic JavaScript Applications
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

28. Deterministic JavaScript Applications
WHAT ARE WE TRYING TO ACHIEVE?
APPLICATION OUTPUTINPUT
(Pure function)

29. How will this work without side-effects?

30. Deterministic JavaScript Applications
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.

31. DEMO

32. 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

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

34. Deterministic JavaScript Applications
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)

35. Deterministic JavaScript Applications
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

36. Deterministic JavaScript Applications
DETERMINISTIC FINITE-STATE MACHINES
a b c

37. STATECHARTS

38. Deterministic JavaScript Applications
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/

39. XSTATE

40. DEMO

41. Deterministic JavaScript Applications
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/

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

43. THANK YOU!