A Todo list with universal JavaScript & Progressive Enhancement
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
webpack
.babelrc
.eslintrc.js
.gitignore
LICENSE
README.md
package.json
webpack.config.js
yarn.lock

README.md

Todo list with universal JavaScript & Progressive Enhancement

This is a simple example app that renders HTML on the server and on the client using “universal” / “isomorphic” JavaScript. It’s using Node.js, React, React-Router and Redux for the rendering and the UI logic. For storing the todos on the server, it uses the key-value database LevelDB.

There’s also a Preact version available in the preact branch if you prefer that over React.

There are several good example apps and boilerplates for universal React/Preact apps. This one borrows ideas from Milo Mordaunt’s great tutorial: Handcrafting an Isomorphic Redux Application (With Love) and the corresponding repository.

What’s special about this example is that it’s made with Progressive Enhancement in mind. Instead of just rendering the first page on the server to improve the Javascript application’s startup time, this example works entirely when JavaScript is disabled or fails for any reason. See my recent articles for background information:

The interesting difference between the numerous universal React/Preact examples is the data fetching and the server communication. This example follows Milo Mordaunt’s approach. It declares the data dependencies in the React/Preact component. The static component property needs lists Redux action creators.

These action creators directly talk to the database when called on the server, or make a request to the server when called on the client. It gets simpler if you use a separate HTTP REST API server that speaks JSON. Then you can use a universal HTTP library like axios or fetch to talk with the API server. In this simple example though, everything is mashed up on purpose.

I think the key is to have the data loading logic in one place, or to have a high-level wrapper like Relay, Transmit or Falcor for managing data dependencies.

Starting the server

$ yarn install
$ yarn start

Then open http://localhost:3333 in your browser.

Similar projects