This app is set up as a React/Redux/Rx application. That's 3 different libraries with coincidentally similar names. Sorry.
Javascript is Ecmascript 2015, a.k.a. ES6, the latest version of Javascript.
Module support in ES6 looks different than the older standards.
- ES6 module syntax
- Axel Rauschmayer explains
- Jason Orendorff explains
- module importing can be a complicated standards battle
Android does not like expensive re-renders on timers; instead they must be done in worker threads or in response to user input.
- Measure Performance with the RAIL Model
- Chrome has draconion policies for scheduling on slower computers and tablets - see expensive task blocking scheduling logic, leading to lots of violation warnings if you use the scheduler. Google's policy is that you need to do react updates in a webworker or in "micro partial updates" broken across several
requestAnimationFrameupdates - see Optimize JavaScript Execution - Moving Atom To React, including seeing GPU usage and the
translate3dtrick for shunting to the GPU - Scrolling Performance
- debouncing for good animation performance
- Jank Busting for Better Rendering Performance
- 9 things every React.js beginner should know
- Webpack optimisation 1
- Webpack optimisation 2
- This can possibly be improved easily by using FRP - e.g.
- To have a stable API to access audio and video we use webrtc-adapter.
- Audio synthesis
- SVG - see the SVG HOWTO.
- For the gallery: kiosk mode is natively supported by chrome, but you should disable sensitive controls by doing a gallery build,
npm run gallerybuild - Icons are provided through fontawesome
The rendering system for all UI components is React.
- For debugging the user interface, we recommend React developer tools
e.g. for accessing video. How do I persist DOM nodes? Perhaps using keys and then relying on a ref How do i communicate across branches of Components? Methods?
But I think I can avoid this by separating DOM streams and React components as two separates types of App both of which talk to the Redux store.
- for people using react.js, Victory
- Preact is smaller than React. Does it work for us? Is it faster?
We use Redux to organise the app state.
- Components and Super-Components
- what in blazes are all these "components"?
- asynchronicity
- memoization/ caching
- How can we batch updates? redux-batched-subscribe or redux-batched-actions are recommended in the redux docs.
- smart and dumb
- react+redux
- thinking in react
We are currently using redux-persist. It imports a LOT of code in dependencies though... We could instead use redux-storage
The storage engine is localForage but we could use cookies or localStorage. redux-storage supports many backends.
Could also use Rx with a redux pattern A, B, or C. It's recommended to not even bother with redux in that case. However I will start that way because otherwise it's too complicated
We mostly use webpack, which is built on npm. webpack is a module bundler. This means webpack takes modules spread across multiple files with dependencies and a smaller number of files which include the functionality.. It's the dominant build system right now for web apps, at least for community-supported react-based ones.
Webpack works by magic, as far as I can tell, and it has fearsomely complicated and poorly explained configuration. Nonetheless, everyone uses it and so we ignore it and just GO here.
webpack.config.js has the actual configuration, which does various things.
package.json lists the various libraries ("dependencies")
that are assembled together by npm.
It isn't specific to webpack, as all npm packages use it,
but we use webpack here.
- Compiles JSX to JS, to support React
- compresses the javascript slightly in production mode
- NB: Usually you see this with UglifyJS2, but it doesn't support ES6. However, there is an experimental branch that partly works
"uglify-js": "git://github.com/mishoo/UglifyJS2#harmony"- However if we really wanted to use that, there is babel-plugin-uglify which does AFTER compilation to javascript, so we could compile to ES5 and uglify?
- Or Webpack's uglifyjsplugin
- there is an alternative competitor escompress, which integrates to Babel es6. This is our current solution
- I recommend using just one plugin, [https://www.npmjs.com/package/babel-plugin-transform-dead-code-elimination], which somewhat reduced the JS size (but not as well as uglifyjs!)
- Why can't anyone write a simple webpack tutorial?
- legacy code must be shimmed
- If you want to update dependencies, the command looks like this:
npm install --save-dev --upgrade \
babel-cli \
babel-core \
babel-loader \
babel-plugin-system-import-transformer \
babel-plugin-transform-dead-code-elimination\
babel-plugin-transform-function-bind \
babel-plugin-transform-object-rest-spread \
babel-preset-es2015 \
babel-preset-react \
babel-preset-stage-0 \
localforage \
node-static \
react \
react-dom \
react-redux \
redux \
redux-logger \
redux-persist \
redux-thunk \
reselect \
rxjs \
serviceworker-webpack-plugin \
source-map-loader \
tone \
webpack \
webpack-dev-server \
webrtc-adapter \
worker-loader
See progressive webapps with webpack and the serviceworker-webpack-plugin documentation.
We use Rx.js 5.0, because even though it is less common that Rx.js 4.0, the documentation is way better.
-
- Rx.js 4.0 vs 5.0
- we use the CJS installation although
- here is a HOWTO guide
- Rx marbles visualises Rx streams
- Rx.js official documenation
-
Interoperation
- we could, but do not currently use redux-rx
-
stream debuggers
- percussion
- rxvision - I can't work out how this one works or how to use it, and the documentation doesn't explain basic stuff like how to install it, so I'm ignoring it for now.