A small PWA React/Redux application example to demostrate how to use known best practices, design pattern (CQS) and libraries to achieve a sofware highly scalable, realiable and maintainable.
🐳 Docker
Run app server in development mode:
$ docker compose up --build -dStop the development app server:
$ docker compose stop todosBuild:
$ docker build -t todos-app:latest --target prod .Run:
$ docker run --rm --name todos-app -p 3000:3000 -d todos-app:latestStop:
$ docker stop todos-appDespite the fact that this is a small app, to comprehend the code and the design choices applied here fully by only digging in the source code, can turn into a pretty tough job if you don't know the concepts behind it. Therefore, On the following topics I will try to explain all the theory bases that have been used to implement this demo app.
For many years, the MVC (Model-View-Controller) pattern has been the de facto standart regards to frontend apps design for long time, but with the advance of complex web app with countless number of user interactions and interfaces started to make the MVC architecture started to be inefficient.
Aiming to solve the MVC drawbacks regarding to the instability and complexity the Facebook engineers come out with an alternative called Flux.
Keeping that in mind, Redux is just an implementantion of the Flux architecture (as many others), but with an additional constraint. Redux doesn't allow to have more than one Store while for Flux it's possible to have as many Store as you decide. Store on those architecture is where it is keeped the application state.
Besides, Redux has added the concept of Reducers (a special function that must be always called in order to change the state beared in the application Store).
Before start talking about Redux itself in more details, I believe it would be also valuable knows a little bit more about the forerunner architectures which led us till Redux.
MVC is very much known by the three-layer architecture which divides the system into three components:
- Model: holds data and business logic
- View: displays the model in the UI
- Controller: interfaces between View and Model
flowchart TD
View([View]) --> |Requests|Controller([Controller])
Controller --> |Manipulate|Model([Model])
Controller --> |Render|View
View --> |Display|Model
The Controller receives the User requests, manipulate the Model and View to render back a new View to the User in response.
This pattern is great for most cases but it have drawbacks when you dealing with a complex UI with huge numbers of Views. For more information about some of those drawbacks take a look on this Facebook presentation.
⚛️ React
🛠️ Lodash
🐏 Ramda
👩🎤 Emotion
💎 Immer
🗃️ Normalizr
🤖 Reselect
⌛ Moment
🏃 Express
🃏 Jest
🦉 Jest DOM (Custom Jest Matchers)
🚪 Nock
❄️ Deep Freeze
Bugs, feature requests and more, in GitHub Issues.