JavaScript Online Meetup of Open Tech Week by Sigma Software, September, 2020

1. Life without Single State
Management
Who is that guy?
Working as Team Lead at Sigma Software.
10 years in software development as developer
(officially)
4+- years as a Dev Lead
Working with GIS / i18n / LTS products
Focus on productivity, time-management and UX
Interested in open-source software development
Playing PS, Reading / listening books
Agenda
What about X?
What are alternatives?
So do I need X?
Summary

2. What about X?
Flux
Redux
MobX
NgRx
VueX
FlutterRedux
etcX
So.. is it Framework or Library?
Jokes aside
This is framework

3.
But why?
Library vs. Framework?
What is the most popular ReduXMan?
How XMan position himself?
Predictable
Centralized
Debuggable
Flexible
Immutable
So what are top complexities? What problem does it solve?
Mutation

4. const newStateList = [...state.list];
newStateList[0].updated = 'true';
state.list = newStateList;
return state;
Asynchronicity
if Promise/async/await is complex - try to use Thread in any other language
Core concepts
State - is a simple object
Action - is a plain JavaScript object
Reducer - nothing magical about it—it’s just a function
(notice how we don’t introduce any magic?)
It is all about no-magic and KISS, but..
redux-saga
redux-thunk
redux-logic
redux-observable
redux-loop
reduce-reducers
redux-xforms
redux-data-structures
redux-undo
redux-ignore
redux-recycle
redux-optimist
normalizr
…

5.
https://redux.js.org/introduction/ecosystem
Ecosystem | Redux • redux.js.org
It is all about Marketing
Let's summarise all simplicities
And look on it from architecture perspective
Flux
ngrx

6.
Vuex

7.
Redux

8.
What are alternatives?

9.
All we know about
MVC
MVVM
Layer architecture
meh..
No Architecture approach
CQRS

10.
Despite the benefits, you should be very cautious about using CQRS. Many
information systems fit well with the notion of an information base that is
updated in the same way that it's read, adding CQRS to such a system can add
significant complexity. I've certainly seen cases where it's made a significant drag
on productivity, adding an unwarranted amount of risk to the project, even in the
hands of a capable team. So while CQRS is a pattern that's good to have in the
toolbox, beware that it is difficult to use well and you can easily chop off important
bits if you mishandle it.
Martin Fowler
Hexagonal architecture
Based on three principles and techniques:
Explicitly separate User-Side, Business Logic, and Server-Side

11. Dependencies are going from User-Side and Server-Side to the Business Logic
We isolate the boundaries by using Ports and Adapters
Positive
External services independency
Separation of concerns
Ability to cover the business logic with unit tests
The adapters are replaceable
Good maintainability level
Negative
The number of entities like classes and protocols one should define to implement
this architecture in a project
Clean Architecture

12.
Colors mean application layers, and arrow in the end means Dependency rule.
To make concept and data flow clear - it is better to split it onto categories and
describe data flow.
Micro-frontends

13.
How to structure application?
Logical structuring
Apis
Components
Models
Pages
Feature module decomposition
DDD recognises that we've learned that "total unification of the domain model
for a large system will not be feasible or cost-effective”

14.
So, do I need XMan?
ToDo application as a sample
I Do …
Single page with almost ZERO to FEW routing
GitKraken
Notion
Google Form generator
Stepper-landings

15.
A lot of data at one place
Trading Platform
DrawIO

16.
I Do Not …
A lot of complex navigations (and tons of CRUD)
Google Drive
Admin panels

17.
A lot of entities (not connected between each other)
GitLab
Analytics

18.
A lot of User-Oriented / Heavy data
YouTube / YouTube Music
Maps

20.
A lot of customisation (plugins / add-ons / extensions)
VSCode

21.
Summary
Any decision is a trade-off
Any decision has a reason
Perform FR and NFR research
Architecture should be based on requirements
Learn to see future big picture
Think critically
Question(re-review) best practices and recommendations
Lets get in touch

22.
https://www.linkedin.com
/in/pastuhovaleksey/
Useful links
https://martinfowler.com/
architecture/