Skip to content

Learning Material

Jump to bottom
pospi edited this page May 30, 2017 · 5 revisions

There's a lot of new tech underpinning this project, and though modularity is great it can also mean there are a daunting array of things to learn. Following is a list of some helpful learning material and background info on some of the more complicated pieces. This may be especially useful for Python developers or those unfamiliar with the React ecosystem.

ES6 & ES7

These are the modern updates to JavaScript, if you haven't heard of them then you probably know 'classic' JavaScript (ES5). They add a host of convenience features and powerful new syntax.

New syntax

In brief: https://github.com/lukehoban/es6features

Promises, Generators and Async/Await

Three different specs added to ES6 & ES7 which create more modern means of handling asynchronous behaviour.

Typescript

React

React implements the UI layer of our application. It's rather a departure from the ways you may have developed web applications with pure HTML, CSS and JavaScript before, so getting up to speed on its approach is important.

The recommended pattern for building React applications is via composable views. Since a view is usually just a pure function which transforms data into a DOM structure, composing React views works very much the same as functional composition.

Redux

Redux is the data layer of the application- it has evolved from previous architectures loosely dubbed "Flux", though bears little similarity to them. Essentially it is a convention-enforcing library which implements a one-way dataflow between the UI and application data. It can be summarised by three points:

  • There is a single source of truth for all data in your UI, or if you prefer the "application state". Redux calls this the store.
  • Application state (the data in the store) is read-only. It can only be changed by emitting actions from the UI.
  • Changes to the application state are made by reducers. Reducers are exactly like a 'reducer' or 'fold' that you may be familiar with from functional programming concepts. Reducers accept the previous state & an emitted action, and return a new application state.

This architecture gives you many benefits such as reduced complexity, easier debugging and the ability to time-travel backwards through your application state in order to reproduce previous events. The best place for understanding Redux is the official site.

You may also be interested in some thoughts on testing React + Redux applications.

On top of Redux, many additional features are possible. If you know nodejs already, you can think of Redux as being somewhat similar to 'Express.js for UI data'- it is a very lightweight framework which can have middlewares added to build other features on top of. For more info on our Redux setup see UI Data Architecture.

Webpack

Webpack is the build system which compiles our app for distribution. Pity the fool who ever has to deal with it, because configuration is often complex and arduous. Webpack itself is a continually moving target and you'll probably be building with alpha software at some point.

But that said, once development has started in earnest you should never have to deal with it again.

Webpack is just the build tool- roughly equivalent to 'make'. It's the things you add to your build pipeline (loaders) which do the actual work. Here are some of the more important ones:

  • Babel- transpiles ES7 JavaScript to ES5 in order to run in older browsers, by a process known as bundling. Babel by itself doesn't do anything without its plugins and presets:
    • babel-preset-react allows Babel to compile JSX for React.
    • babel-preset-stage-1 enables most of the modern ES6/7 functionality.
    • react-hot-loader/babel allows files handled by babel to be live-reloaded into the DOM as your code changes.
    • ...more to come...
  • PostCSS, postcss-loader, css-loader and style-loader- these all work together to handle compiling CSS. This means you can simply import CSS in your JavaScript modules directly to describe dependencies between UI components and their styles. The use of these loaders is an example of loader chaining- first postcss-loader is run to compile as standard CSS, then css-loader compiles the styles into a CSS module, and this is injected into the running webpage as a style tag by style-loader. PostCSS can support many types of CSS preprocessors so using it means we are free to choose what is appropriate / familiar.
  • extract-text-webpack-plugin does stuff to pull text out of your main bundle and save it elsewhere. We use it to write css into a *.css file separately to the application JS.
  • The more basic loaders such as url-loader, file-loader, yaml-loader etc allow us to reference and use other assets easily in our JavaScript modules. Usually there is some appropriate behaviour based on the type of import- for example, file-loader copies the file to Webpack's build directory and returns a resolved URL to reference the file; yaml-loader returns the contents of the YAML file as JSON, svg-react-loader imports SVG files directly as React components, and so on.
  • webpack-isomorphic-tools provides a layer to prevent resources only relevant on the client side (CSS, images etc) from crashing when encountered on the server. Usually this just means the files are ignored as the server doesn't care about rendering styles & images.

About this codebase

For new contributors

Clone this wiki locally