A Graphical Way of Thinking About React Designs

A Graphical Way of Thinking About
React Designs
Olaf Nouvortne
Independent Full-Stack Developer & Project Manager
Berlin, Germany
onouv@t-online.de
Rev 01.00

2Copyright (c) 2020, Olaf Nouvortne
Web Applications Become Complex Fast
Build
a new
Feature
Find best design
option !
Consistent
Error
Handling !
Consistent
control flow
for user !
UI
visual
structure
Maintainable
and Fast Code !
Asynchronous
backend requests
Maintain
component
data state !
How to cut
for reuse ?

Which wheels should be turned ?
Which wheels are you to turn ?
A quick review of react redux ...

React + react-redux + thunk
The React Redux Architecture
Container
Action Creator
Service
Reducer
Stateless
Presentational
Component
Action
dispatch(...)
Store
backend
fetch(...)
Presentational Component
connect(...)

React Redux Typical Roundtrip
Stateless
Presentational
Component
Stateless
Presentational
Component
Action Creator
Stateless
Presentational
Component
When a change in the UI component occurs …
… then a callback triggers the Action Creator function

Action Creator
Stateless
Presentational
Component
Action Creator
Stateless
Presentational
Component
Action Creator
Stateless
Presentational
Component
… which may delegate to a service
function for retrieving data ...
Service
backend
… e.g. by means of an asynchronous request through the fetch(…) API

Action Creator
When the reply
comes back in ...
Service
backend
fetch(…)
Reducer
Action
... a callback triggers the action creator to
generate an Action object with relevant data ...
... which the framework dispatches to all
Reducer functions.
Reducer
Reducer
dispatch(...)

Reducer
Action
... where some reducers
may decide to ignore
the Action and return
the state unchanged.
When the Action object and the
state from the redux store are
dispatched to all reducers...
Reducer
Store
… while others may modify
the state based on the
actions contents.
dispatch(...)

Reducer Store
Once a reducer has
updated the state...
Stateless
Presentational
Component
… the framework
renders those UI
components for
which data has
changed

Store
The container maps
both the
●
callbacks to actions
●
data bindings for
rendering
to the stateless UI
component ...
Container
Stateless
Presentational
Component
Presentational Component
connect(...) Test Script
… which makes testing
a bit easier.

Thinking it graphically helps ...
Photo by Gerd Altmann

Micro Modeling
●
“A picture is worth a thousand words” (to some people)
●
Travel Light with “Micro Modeling” - invest only a few sketches just
to aid your thinking before coding
A simple
Visual
Model
Problem Aspect
●
UI structure
●
Component reuse
●
DRY
●
Error handling
●
Asynch service calls
●
User control flow
●
Component Data
●
...
Feels
Okay ?
Try some
coding !
●
Cycle time: minutes, not hours !
●
Alone, with team mate, with a few
colleagues
●
Sketched on paper, on the whiteboard
(take a photo!), maybe on the screen

Need Of A Simple Expressive Notation
●
JavaScript and React are intrinsically functional. They are not as
easily represented visually as object-oriented designs (Unified
Modeling Language)
●
Another simple, but expressive way of visually representing React
designs is needed
●
Should use “standardized” symbols for easy recognition of patterns
●
Should be simple and fast to draft, so you can cycle in “minutes, not
hours”

A Non-Trivial Example
Images by Pashminu Mansukhani from pixabay , Dimitry Anikin from Pexels
F S C L – A concept demonstrator to model industrial systems
https://onouv.github.io/fscl
Functions
Systems
Components
Locations

A Non-Trivial Example
Navigating from a Project to its Functions
Project List
Function List

Micro-Modeling Static UI structure
A view showing a List of editable Functions for a Project...

FSCLHeader
HeaderButtonGroupFsclLinks
FunctionList
Breaking it down into presentational components...
FunctionLine
LinkSectionConstrainedLocation
ControlSection ContentSection

Connected Presentational Component
Stateless Presentational Component
Data
Parameter
Call

Or like so – straight from the CMT * ...
* Coffee Machine Talk

Compare with the Code here:
– https://github.com/onouv/fscl/blob/master/client/src/function/FunctionList/FunctionListUI.js
– https://github.com/onouv/fscl/blob/master/client/src/function/FunctionLine/FunctionLineUI.js
– https://github.com/onouv/fscl/blob/master/client/src/lib/ui/ControlSectionUI.js
Notice, we are modeling much less detail than we are coding
This is for quickly thinking about design on a high-level, not
for implementation

Micro-Modeling Behavior and Redux Stuff

Showing a list of Components linked to a Function...

LinkedComponentsList
FetchRootLevelService
EntityLinksReducer
functions.links.source
functions.links.components
function-service
<<http>>
LoadLinkedComponentsAsyncAction
<<dispatch>
>
FunctionReducer
FunctionLine <<http>>
when created
component-service
<<http>>
LoadLinkedEntitiesService
entityIds
when clicking on „C“ button
in FunctionLine
once for each entiyID

LinkedComponentsList
FetchRootLevelService
EntityLinksReducer
functions.links.source
functions.links.components
function-service
<<http>>
LoadLinkedComponentsAsyncAction
<<dispatch>>
FunctionReducer
FunctionLine <<http>>
when created
component-service
<<http>>
LoadLinkedEntitiesService
entityIds
when clicking on „C“ button
in FunctionLine
once for each entiyID
Action Creator
Main Reducer
Sub Reducer
State
Services
Remote Services
Data Flow

Compare with the Code here:
Presentational Components:
➔
https://github.com/onouv/fscl/tree/master/client/src/function/LinkedComponentsList
Actions and Services:
➔
.../client/src/function/redux/LoadLinkedComponentsAsyncAction.js
➔
.../client/src/lib/api/FetchRootLevelService.js
➔
.../client/src/lib/api/LoadLinkEntitiesService.js
Reducers:
➔
.../client/src/function/redux/FunctionReducer.js
➔
.../client/src/function/redux/EntityLinksReducer.js
Notice, the EntityLinksReducer had
better been placed in .../lib/redux

THANK YOU
Questions, thoughts and remarks most welcome
onouv@t-online.de

A Graphical Way of Thinking About React Designs

Recommended

Recommended

More Related Content

Similar to A Graphical Way of Thinking About React Designs

Similar to A Graphical Way of Thinking About React Designs (20)

Recently uploaded

Recently uploaded (20)

A Graphical Way of Thinking About React Designs