Budgeting App - React + Redux + Webpack 2 (tree shaking)
MIT License
Production-ready React + Webpack architecture implemented on consumer web apps of some of the most successful enterprises in the world. Perceived performance and development experience are key factors in this setup. You can use this code base for learning or to scaffold your mission-critical project.
The is a simple budget management application. It tracks inflow and outflow, shows remaining budget, and interesting reports with charts. As such, it offers more features than the usual Todo App.
Budgeting app is a showcase project that demonstrates important decisions in architecture and development of a modern React application.
Feel free to use it as a reference app or a starter kit.
import()
statementThe app loads in 1 second on 3G, cache disabled
Budgeting app is blazing fast, thanks to the smart architecture and Webpack 3 configuration. It takes about 1000ms (1s) to load on 3G (see above).
Emerging Markets 3G Filmstrip
The aggressive test above shows the budgeting app loads in under 5 seconds. It's a heavily limited connection that accounts for poor connectivity and limited bandwidth.
All important (aka critical path) assets are loaded as early as possible, while the others (e.g. images or GitHub buttons) will load after the first render.
Charts are developed using the awesome D3 library. The idea behind showing charts is not only to show beautiful content, but also to demonstrate keeping heavy content in a chunk that owns it. In other words - we show how applications can run fast even if they use larger libraries.
D3 is used in the /reports
route only. Given that major routes are separate chunks (code splitting FTW!), the entire D3 library is bundled with the code that needs it. That makes the /reports
route a bit heavier than the initial /budget
route, but it also makes routes much faster to load.
We are looking to maintain the lightest possible application core (aka entry chunk). Our target is 300kB for the entrypoint and 300kB for all other assets. This is how we set it in webpack configuration:
performance: {
maxAssetSize: 300000,
maxEntrypointSize: 300000,
hints: 'warning',
},
Adding lots of extra code to the entry chunk might cause the build (yarn run build
) process to show a warning.
Simulated size warning
Note that running webpack dev server in production mode (yarn run prod
) will trigger this warning because of the additional dev server code injected in the app. This code will not show in regular production builds.
Service workers are enabled only when serving static files, not through webpack-dev-server. Here's how you can test service worker functionality:
yarn run build
(or npm run build
) to build the appyarn run serve
(or npm run serve
) to serve the app on localhost:3000
OS X
open -a "Google Chrome" --args --user-data-dir=/tmp/unsafe --unsafely-treat-insecure-origin-as-secure=http://localhost
Linux
/path/to/chrome --user-data-dir=/tmp/unsafe --unsafely-treat-insecure-origin-as-secure=http://localhost
Windows
chrome.exe --user-data-dir=c:\temp --unsafely-treat-insecure-origin-as-secure=http://localhost
The app was built using these aweseome technologies
yarn
- install dependenciesyarn start
- run development serveryarn run prod
- run production serveryarn run build
- build app for deploymentyarn run serve
- serve previously built app using pushstate serveryarn run lint
- lint checkyarn run lint:fix
- lint check + autofixes + prettify code with prettier
yarn run test
- run test suiteyarn run test:fix
- run test suite watching files for changesyarn run flow
- run flow type checkingyarn run update-types
- update flow library definitionsSimilar to Yarn, really...
npm install
- install dependenciesnpm start
- run development servernpm run prod
- run production servernpm run build
- build app for deploymentnpm run serve
- serve previously built app using pushstate servernpm run lint
- lint checknpm run lint:fix
- lint check + autofixes + prettify code with prettier
npm run test
- run test suitenpm run test:fix
- run test suite watching files for changesnpm run flow
- run flow type checkingnpm run update-types
- update flow library definitionsThis project is maintained by Modus Create. Fantastic React apps are in our DNA so give us a buzz if we can help with your awesome project.