Differences

Classic web applications and single page applications have their respective advantages and disadvantages. The following chapters describe the architecture and the pros and cons of each approach.

Classic Web Application 

stateDiagram-v2
    direction LR
    state "User interaction" as UI
    state "Views" as V
    state "Controller" as C
    state "Models" as M
    state "Database" as DB

    UI --> V
    V --> C: "Process user actions"
    C --> M: "use"
    M --> DB
    DB --> M
    M --> C
    C --> V: "construct"

Pros

We have full control over our application stack. A slight disadvantage is that more control also means more responsibility. Another advantage is security. We basically only expose a plain HTML site, with all business logic running on the server.

Cons

The classic web application lacks user experience. Pages need to be reloaded to show new content which is slow and generates a lot of requests. This also means that there are a lot of server roundtrips which is bad for performance.

Single Page Application

ProsCons
User feedbackBrowser support
Client vs server logicDifferent technologies
stateDiagram-v2
    direction LR
    state "User interaction" as UI
    state "Views" as V
    state "Controller" as C
    state "Models" as M1
    state "Database" as DB
    state "Services" as S
    state "Models" as M2

    UI --> V
    V --> C: "Process user actions"
    C --> M1: "use"
    M1 --> S
    S --> M2: "use"
    M2 --> DB
    DB --> M2
    M2 --> S
    S --> M1
    M1 --> C
    C --> V: "construct"

Pros

User feedback is much quicker because most of the application runs on the client. Logic can be split between client and server. This allows us to move business logic to the client and only validate on the server.

Cons

Browser support is limited because we rely on JavaScript, which might be disabled or outdated on some systems. We also need to learn more technologies to create SPAs and their respective backend. However, the amount of different technologies can be reduced.

Client Technologies

Different technologies are available to create SPAs.

Runtime environments

  • Apache Flex (aka Adobe Flex): requires Flash Player
  • Java Applets: requires Java Runtime Environment
  • Microsoft Silverlight: requires Silverlight plugin

Scripting languages

  • Visual Basic Script
  • ActionScript
  • ECMAScript

React

React is a JavaScript library for building user interfaces. Its history goes back to 2011 when Jordan Walke, a software engineer at Facebook, created the library. More information can be found in the blog post The History of React.js on a Timeline

JSX

JavaScript Syntax Extensions (or JavaScript XML) is an extension to the JavaScript language syntax. It allows HTML tags to be used in JavaScript code, which is then transpiled into plain JavaScript code.

The following JSX and JavaScript code are equivalent.

  <MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>
  
  React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

Arrow Functions

Arrow functions are a short form of function expressions. They are anonymous and do not have their own this value. this will be inherited from the enclosing scope (e.g. class or window).

  // arrow function syntax:
const name = (param1, param2, ...) => { statements };
// single line:
const single = n => n * 2; // implicit return
// multi line:
const multi = n => {
    return n * 2; // explicit return required
};
// more than one parameter:
const add = (a, b) => a + b; // parentheses required

// destructuring:
const destruct = ({a, b}) => a + b; // parentheses required
// destruct({a: 1, b: 2}) === 3

Start Reacting

From Scratch

  1. Install Node.js (use Node Version Manager on macOS)
    brew install nvm && nvm install --lts
  2. Switch to the project directory: cd ~/projects && mkdir <myapp> && cd <myapp>
  3. Initialize project with NPM (Node Package Manager): npm init (press enter until finished)
  4. Install dependencies: npm install react react-dom
  5. Create entry point (mkdir src && cd src && touch index.html && touch index.js)
  6. Set up babel: npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
  7. Set up webpack: npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev and create webpack.config.js
  8. Add scripts to package.json
  9. Try it out: npm run start
  {
  "name": "start-reacting",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.23.2",
    "@babel/preset-env": "^7.23.2",
    "@babel/preset-react": "^7.22.15",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.5.3",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}
  
  <html>
    <body>
        <div id="root"></div>
        <script src="index.js"></script>
    </body>
</html>
  
  import React from 'react'
import ReactDOM from 'react-dom/client'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <h1>Just React</h1>
    </React.StrictMode>
);
  
  const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.?js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"],
                    },
                },
            },
        ],
    },
    devServer: {
        open: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'index.html'),
        }),
    ],
};

Toolchain

  1. Run create-react-app: npx create-react-app <myapp>
  2. Switch to the project directory: cd <myapp>
  3. Start the development server: npm start