README.md

Casepacer V2 Frontend Architecture

1. Goals
2. Overview
   1. Libraries + Frameworks
   2. Lerna
3. v1 Embedded
4. v2 Stand-alone

Goals

This architecture has the following goals in mind:

1. Allow for continuous improvements to the v1 codebase
2. Code should live outside of v1 codebase for the following reasons:
   1. Avoids issues with incompatible dependencies (i.e. Bootstrap 3 vs 4)
   2. Allows code to be tested in isolation
   3. Enables modern optimizations like code-splitting, minification
   4. Simplifies build process
   5. Allows use of modern javascript features (es6, jsx, styled-components, etc)

Overview

The codebase will be split into 3 separate packages that all live within a single mono-repo:

1. v1: A front-end application that serves components via iframes to the legacy v1 front-end
2. v2: A front-end application that serves a new site, with a new navigation structure, routing system and theme
3. shared: A shared library of components used by both of the above applications

Libraries + Frameworks

The new architecture will leverage the following libraries:

1. lerna: used for managing multiple packages within a single repository
2. react.js: UI library / framework
3. next.js: build system, routing
4. bootstrap v4: themeable css framework
5. reactstrap: react interface for bootstrap components
6. styled-components: styling system that allows for theming and isolation of component styles
7. axios: API client
8. redux: application state management
9. jest: testing + code coverage
10. eslint: code linting + formatting

Lerna

These 3 packages will be managed using Lerna. The directory structure will look as follows:

root/
  packages/
    shared/
      components/
    v1/
      routes.js
      pages/
      theme/
        variables.scss
    v2/
      routes.js
      pages/
      theme/
        variables.scss

The shared package will contain components used by both the v1 legacy site and the new v2 site.

Both the v1 and v2 sites will define their own theme using bootstrap global variables. This will allow the v2 site to change the look and feel independently of the current v1 theme while still allowing both sites to share the same components.

V1 Embedded Site

Implementation

The v1 site will provide access to the new react components via embeddable iframes. Props can be passed to the components via querystring params.

Example:

If we wanted to render the Case Index of a firm with the id 123, we would use the following code snippet:

<iframe src="/shared/case-index?firmId=123" />

The v1 embedded site will then perform the following actions:

1. Fetch the data necessary to render the CaseIndex component from the API
2. Render the CaseIndex component in isolation using the v1 bootstrap theme

Hosting

Next.js will compile the application as a static site which can be served from the static directory of the existing v1 site.

V2 Stand-alone site

Implementation

The v2 site will be a stand-alone node.js application that will function independently of the v1 front-end. It will integrate with the existing casepacer backend via API endpoints that will provide JSON data to a new React.js application.

Hosting

We have several options for hosting. The easiest will be to run the front-end application using a node.js server running from heroku. This will provide the following benefits:

1. Allow local development against a staging API without needing to run the existing .NET infrastructure locally
2. Allow Q/A using review apps
3. Easy integration + deployment with CI systems (i.e. circle)
4. Easy rollback of broken builds