• This repository has been archived on 26/May/2020
  • Stars
    star
    982
  • Rank 46,621 (Top 1.0 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Budgeting - React + Redux + Webpack (tree shaking) Sample App

PRs Welcome MIT Licensed FOSSA Status CircleCI Coverage Status Maintainability Powered by Modus_Create

⚠️ Important Note ⚠️

While this project still fullfills the goal of demonstrating a scalable React architecture, it's now technically obsolete. At Modus Labs we are continuing to show modern best practices via GitHub and our YouTube Channel

Budgeting :: A Scalable React, Redux, React Router 4, Webpack Sample App

React, Redux, Router, Webpack, Sass

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.

See live demo.

React Budgeting App

Budgeting Application

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

Key concepts:

Performance

Budgeting App Performance The 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).

Alex Russel Test 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.

Waterfall

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.

How did we get that performance?

  1. Minimal application core. We decided to ditch the usual convention of creating a vendor chunk. Instead, it's bundled in the app core. The app core is actually very small, containing just the code needed to bootstrap the app.
  2. Common code is a chunk. We let Webpack figure out which bundles we reuse in chunks and create a common chunk that's also asyncronous.
  3. Redux module injection. Each chunk contains respective views and redux modules. Yes, that means reducers, action creators, actions - are all dynamically injected as we navigate through routes. That adds to the minimal application core concept and PRPL pattern.
  4. H2 Push. The app is hosted on Firebase and we use the magic of HTTP2 Push to push some of the scripts before they are requested.
  5. Pre-caching. Service Workers pre-cache resources so the browser can access them as soon as the user needs to.

Charts

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.

Performance Budgets

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 (npm run build) process to show a warning.

Performance Budgets

Simulated size warning

Note that running webpack dev server in production mode (npm 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

Service workers are enabled only when serving static files, not through webpack-dev-server. Here's how you can test service worker functionality:

  1. Run npm run build to build the app
  2. Run npm run prod to serve the app on localhost:3000
  3. Run a new instance of Chrome with disabled security (because localhost is not on https):

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
  1. Now you can observe network traffic in the Network tab or SW activity in Application > Service Workers in Developer Tools

Stack

The app was built using these aweseome technologies

NPM Scripts

  • npm install - install dependencies
  • npm start - run development server
  • npm run prod - run production server
  • npm run build - build app for deployment
  • npm run serve - serve previously built app using pushstate server
  • npm run lint - lint check
  • npm run lint:fix - lint check + autofixes + prettify code with prettier
  • npm test - run test suite
  • npm run test:fix - run test suite watching files for changes
  • npm run flow - run flow type checking
  • npm run update-types - update flow library definitions

Honorary Mentions

Want more?

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

License

MIT

FOSSA Status

More Repositories

1

react-dynamic-route-loading-es6

Auto chunking and dynamic loading of routes with React Router and Webpack 2
JavaScript
296
star
2

ionic-vue

Vuejs integration for Ionic versions 4 and 5
TypeScript
272
star
3

beep

BEEP Account Security Scanner - Detect if your credentials have been compromised (Vue + Ionic)
Objective-C
157
star
4

gimbal

Web Performance Auditing tooling
TypeScript
115
star
5

react-navigation-redux-sample

Sample application that uses React Navigation and Redux
JavaScript
92
star
6

slow

slow down a Linux network device to lower speeds (T1, 3G, 28.8k modem, etc)
Shell
69
star
7

webpack-react-es6-production-optimization

Optimize Webpack + React + ES6 + Babel app production build file size
JavaScript
57
star
8

extjs-reactjs-examples

Code examples for ExtJS to React transition
JavaScript
50
star
9

ionic-vue-examples

Examples for @ionic/vue
Vue
48
star
10

rn-listview-sections-blog

React Native ListView with Section Headers blog code
JavaScript
48
star
11

budgeting-sample-app

Budgeting - React + Redux + Webpack Sample App
JavaScript
46
star
12

alexa-skill-demo

Alexa Skill Demonstration using Python
Python
44
star
13

DiscoverMusic

Sencha Discover Music Repository
JavaScript
44
star
14

swift-modules-for-react-native

Supporting code for Swift Modules for React Native Blog Post by Mike Schwartz
Objective-C
43
star
15

TouchDJ

Example repository for a technical talk given at SenchaCon 2013
JavaScript
42
star
16

devops-infra-demo

Growing repository of Infrastructure as Code demos (initially created for DevOps Wall Street)
Shell
34
star
17

sencha-touch-in-action-examples

Sencha Touch in Action Examples
JavaScript
31
star
18

evade-arduboy-game

An Arduboy game, written as a gift for Modus Create clients for the 2016 holiday season.
C
27
star
19

python-automation-boilerplate

Python automation boilerplate
Python
26
star
20

cordova-swift3-plugin-example

Swift 3 Cordova plugin example to support blog post.
Swift
23
star
21

lambda-redirector

Redirect an entire website using AWS Lambda
JavaScript
22
star
22

modus-create-sencha-plugin-pack

Sencha Touch 2 and Ext JS 4 Plugins
JavaScript
21
star
23

extjs-in-action-examples

Ext JS in Action SE Examples
JavaScript
20
star
24

evade2

EVADE2 Source code for the Arduboy platform
C
18
star
25

creative-engine

Modus Create's portable Game Engine. Runs on the LDK Game console, desktop macOS and Linux
C
18
star
26

cucumber-watir

Test harness for automated functional testing of web applications
Ruby
18
star
27

ionic-seed

Boilerplate Ionic V1 seed project using ES6, Babel, Webpack, and Karma/Mocha/Chai/Sinon for testing.
JavaScript
18
star
28

cordova-swift-plugin-example

Cordova Swift Plugin Example for Blog Post
Swift
16
star
29

cordova-plugin-example

Example Cordova plugin for iOS and Android to support blog post.
JavaScript
15
star
30

d3-mobile-companion

Diablo 3 Mobile Companion
JavaScript
12
star
31

capsule

Automated CLI for static web application hosting on AWS using S3 buckets
JavaScript
12
star
32

network-rgb-matrix-display

A library for helping drive large arrays of RGB Matrices with Raspberry Pis
CMake
12
star
33

touch-node

Sencha Touch NPM module
JavaScript
11
star
34

google-maps-polygon-center-approximation-blog

Google Maps Polygon Center Approximation Demo for Blog Post
JavaScript
9
star
35

ngbp-gulp

A modified version of the ngBoilerplate that replaces Grunt with gulp, and uses the Angular Material library instead of Boostrap.
JavaScript
9
star
36

react-london-2022

React Advanced London 2022 Workshop
TypeScript
8
star
37

ciscospark-jira

JIRA bot for Cisco Spark
JavaScript
8
star
38

modite-adventure

Modus Create's 2020 Holiday Game for the LDK Game console.
C++
7
star
39

genus

Modus Create's 2018 Holiday Game for the ODROID GO
C++
7
star
40

ardugo

ArduGo is a Go game for the Arduboy game console.
C++
7
star
41

custom-components-nativescipt

Exploring how to write custom components in NativeScript
JavaScript
7
star
42

vue-lambda

VueConf lightning talk
JavaScript
6
star
43

custom-cordova-plugin-blog

Example repository for this article: https://moduscreate.com/blog/building-a-custom-phonegap-plugin-for-ios/
Objective-C
6
star
44

form-preso

Sample code for ExtJS Forms Presentation
CSS
6
star
45

systat

System Status for Mac/Windows/Linux
C++
5
star
46

newblogbot

Simple AWS Lambda Bot that posts new blog entries to Slack.
JavaScript
5
star
47

labs

Modus Create Labs web site
JavaScript
5
star
48

protractorStarterApp

Demonstrating how to setup functional testing with Protractor
JavaScript
5
star
49

engineering-experiments

TypeScript
5
star
50

hog-store

Web app example used to demonstrate performance improvements
JavaScript
5
star
51

ciscospark-survey-bot

Cisco Spark bot for for conducting surveys
JavaScript
4
star
52

phonegap-ios8-memory

A simple app to test memory accretion with iOS8
C++
4
star
53

ion-meetups

Ionic Meetups - Showcase of Ionic v3 to v4 migration process
TypeScript
4
star
54

web-audio-api

Examples of the early WebAudio API
JavaScript
4
star
55

Ext5Tablet

Example of sharing code in Ext JS 5 and Sencha Touch 2 apps with Sencha Space integration.
JavaScript
4
star
56

stop-watch-box

A simple Stop-Watch-Box Web Component created with Stencil
TypeScript
3
star
57

constellation

A Digital Transformation framework for containerizing microservices
CSS
3
star
58

nightwatch-cucumber-demo

Demo for the Nightwatch-Cucumber blog post
JavaScript
2
star
59

react-exercise

React exercise for potential Modus Create team members
JavaScript
2
star
60

quarkus-demos

An example repository to support this youtube video: https://www.youtube.com/watch?v=S_DV2boUMPA
Java
2
star
61

accordian-panels

Java
2
star
62

notes-app-ionic-pro

This is sample application built with Ionic to demonstrate the tools & services provided by Ionic Pro.
Shell
2
star
63

App-AddressBook

DreamFactory
JavaScript
2
star
64

cordova6templates

Cordova 6 template demo
2
star
65

modus-react

Modus React App Scaffolding
JavaScript
2
star
66

CordovaXcodeSchemeFix

Demonstration of how to programmatically add schemes to a Cordova iOS project to improve CI workflow
CSS
2
star
67

react-redux-esnext-webpack

React JS boilerplate with Redux, Babel, Webpack, ESNext support
JavaScript
2
star
68

CordovaCSPBlogApp

Supporting App Code for Cordova Content Security Policy / iOS 9 App Transport Security Blog Entry
JavaScript
1
star
69

cordova-merge-example

Example App to support Cordova merge feature blog post.
CSS
1
star
70

youtube-slack-bot

R&D For a youtube-slack bot
JavaScript
1
star
71

react-native-device

React Native Device Module
Objective-C
1
star
72

azure-devops-boards-scripts

Repository to store Azure DevOps Boards scripts.
Shell
1
star
73

codeceptjs-nightmare-harness

A simple test harness for CodeceptJS + Nightmare
JavaScript
1
star
74

react-chat

React Chat demo with React Create App and Firebase
HTML
1
star
75

battleship-meteor

Crysfel, Dave, and Chris Meteor JS skillshare
JavaScript
1
star
76

Arduboy_Wall

Experimental repo to make a "life size" Arduboy.
C++
1
star
77

brickout

Game example using Creative Engine
C++
1
star
78

internship-job-portal

Open Source example for interns to work with.
JavaScript
1
star
79

protrangular2-demo

Demo for NoVAJS talk on getting started with Protractor in Angular 2
JavaScript
1
star
80

ruby4windows

RETIRED - Portable Ruby for Windows v2.1.3 x64 with a bunch of utilities
1
star
81

cucumber-training

Cucumber Training
JavaScript
1
star
82

qa-dept

A place to host QA Dept experiments
JavaScript
1
star
83

ext-react

Helping Ext JS developers get up to speed with React
JavaScript
1
star
84

touch-2.2.0-sandbox

Sandbox environment for blog posts, etc.
JavaScript
1
star
85

framework-shootout-ionic2

Hybrid Mobile Framework Shootout - Ionic 2
TypeScript
1
star
86

guidelines

ModusCreateOrg repository hosting guidelines
1
star
87

javascript-challenge

A simple JavaScript challenge to help people see if they are a fit for an engineering role at Modus Create.
1
star