This demo app presents an architecture for building complex frontends using React + Redux + Rails.
Update libraries:
bundle && yarn
Start servers:
bin/rails server && bin/webpack-dev-server
or if using a process manager like Overmind, simply run
overmind start
or if using Docker
docker compose up
Go to http://localhost:5000/demo and http://localhost:5000/single_page_app.
- React for the UI
- Redux for state manangement
- React Router for route-driven Single Page Apps
- ImmutableJS for enforcing an immutable state tree for the Redux store
- Webpacker for handling all the JS compiling (can deprecate Sprockets)
- Full integration tests via Rspec feature specs with Capybara
- JS unit testing via Ava + Enzyme + Sinon
- Easy debugging via React and Redux browser extensions
- Interactors for organizing complex business logic
-
JS apps seamlessly coexist within the context of traditional server-rendered HTML pages; there is no one or the other – both can work depending on the situation.
-
Each JS app is separated by business domain, yet retains the same code organization and structure with each other. This establishes a pattern for consistency and predictability.
-
Enables easy JS testing. When redux is used properly, react components become more-or-less pure functions. This can simplify unit testing because there are less side effects which may occur if a component manages its own internal state.
-
Because we’re still working in a Rails context, we also take advantage of that fact and can do things like run proper integration tests (Rspec calls these “feature specs”) in a browser environment. This brings confidence that the features we work on are all working together with the backend as expected.
-
JQuery is not required; it can be dropped completely.
-
Redux centralizes all application state within a single store object. This approach may be overkill for smaller apps, but is often helpful when building large apps. The patterns and predictabile nature of redux can be over the long run or when onboarding new engineers fresh to the codebase.
-
Both react and redux come with helpful browser extensions for developers. These tools enable the overall structure and behavior of an application to be visualized. Each action is visually dispatched based on a user’s interaction as well as explicitly see how the store’s state tree is updating in real time. This is a powerful debugging tool.
-
Setting up modern frontends powered is complicated. This demo app can serve as a reference for assisting developers as they explore what works best for them when integrating react + redux + rails.
