Building Scalable, Maintainable Apps Using TypeScript and React

Kamran Ayub

patterns and practices

github/sample-react-ts-app

Watch the talk:

bit.ly/ndcmn-react-ts-video

👨‍👩‍👦 🐶

🎲🎮👨‍💻📚🎸

Work at Target

excaliburjs.com

ktomg.com

What do I want?

To make my apps easier to maintain

To make my apps easier to scale

Scalable

?

Scalable

Easy to extend

Easy to collaborate on

Easy to reuse code

Maintainable

Easy to refactor

Easy to understand

Easy to test

TypeScript

JavaScript that scales

Static type checking
Fantastic editor tooling
Refactor-friendly code

React

Component-based presentation

Small surface area
Reusable components
Functional characteristics
Great performance

🆒

ktomg.com

Built in .NET
Hybrid app
Originally JavaScript & Knockout.js
Migrated (90%) to TypeScript & React
Heavily interactive UI

Based on a true story

(work in progress)

Concepts

Store - Single source of truth for app
State - The data representing the app at a point-in-time
Actions - Object with a "type" property
Action Creators - Small functions that create actions
Reducers - Take actions and update Redux state

Folder Layout

State & Reducers

Actions

Props & State

Action Creators

Folder layout

(previous)

Files are spread out
Components folder doesn't scale well
Fine for a small site

Folder Layout

Folder layout

(new)

Proposed by Ryan Florence
Screen organization
Scalable nesting
Better collaboration
Colocate related files
Closer imports

Folder Layout

Module Resolution

Not scalable as screens nest further

Folder Layout

🆒

Module Resolution

Emulate Node resolution, search each directory upwards

Maintains F12 Go to Definition behavior

Folder Layout

🆒

Module Resolution

There's an open issue for this

Folder Layout

🆒

Module Resolution

Using tsconfig-paths-webpack-plugin package

Embrace the chaos

const path = require("path");
const fs = require("fs");
const klaw = require("klaw-sync");
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
const tsconfig = require("./tsconfig.json");

// Find shared folders
const searchPath = path.join(__dirname, "new/src/");
const paths = klaw(searchPath, {
  nofile: true
})
  .filter(({ path: p }) => path.basename(p) === "shared")
  .map(({ path: p }) => path.join(path.relative(searchPath, p), "*"));

// Override tsconfig paths
tsconfig.compilerOptions.paths = {
  ...tsconfig.compilerOptions.paths,
  "shared/*": paths
};

// Write temp tsconfig
fs.writeFileSync(
  path.join(__dirname, "tsconfig.temp.json"),
  JSON.stringify(tsconfig)
);

module.exports = {
  resolve: {
    extensions: [".ts", ".tsx", ".js"],

    // Use temp config for resolving paths
    plugins: [new TsconfigPathsPlugin({ configFile: "tsconfig.temp.json" })]
  },
  mode: "development",
  entry: "./index.tsx",
  context: path.resolve(__dirname, "new/src"),
  output: {
    filename: "build/bundle.js"
  },
  module: {
    rules: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.tsx?$/, loader: "ts-loader" }
    ]
  }
};

Folder Layout