Todo App Demo

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.

Table of Contents

• Getting Started

  • Requirements
  • Usage
  • Production

• Documentation

  • Introduction
  • Reducer + Flux = Redux
  • Model-View-Controller

• Libraries

• Development Aid Tools

• Testing Tools

• Contributing

• License

Getting Started

Requirements

🐳 Docker

Usage

Run app server in development mode:

$ docker compose up --build -d

Stop the development app server:

$ docker compose stop todos

Production

Build:

$ docker build -t todos-app:latest --target prod .

Run:

$ docker run --rm --name todos-app -p 3000:3000 -d todos-app:latest

Stop:

$ docker stop todos-app

Documentation

Introduction

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

Reducer + Flux = Redux

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.

Model-View-Controller

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.

Libraries

⚛️ React

🛠️ Lodash

🐏 Ramda

👩‍🎤 Emotion

🎁 React Router v4

Redux

💎 Immer

🗃️ Normalizr

🤖 Reselect

👊 Redux Actions

Redux Saga

〰️ Connected React Router

⌛ Moment

🏃 Express

📡 Server-Sent Events

📦 ES Module

Development Aid Tools

ESLint

Stylelint

Babel

TypeScript

Webpack

PostCSS

Hard Source Webpack Plugin

Workbox

Autoprefixer

CSS Hot Loader

nodemon

Redux Logger

Redux DevTools Extension

Testing Tools

🃏 Jest

🐐 React Testing Library

🦉 Jest DOM (Custom Jest Matchers)

🚪 Nock

❄️ Deep Freeze

📖 Redux Saga Test Plan

Watchman

Contributing

Bugs, feature requests and more, in GitHub Issues.

License

MIT License.