Thomas Burleson

FE Architect

Current Workspace

Environment for the Developer Experience

ASP.Net MVC + NgJS + Angular

Angular

NextJS + React

1

Team efficiencies are affected by (1) Workspaces + Technical Debt + Testing

This repository forces friction between FE + BE ... and is very, very difficult to navigate for FE Dx.

 

Even worse, it does not include the Fresco, Marketing, or BFF projects.

Repository

2

Angular v11.x  has a Monolithic code structure affects build times, testing, code sharing, reuse, and more.

Repository

3

  • Mixing Dx for BE with FE
  • Forcing FE Devs to use Virtual Machines
  • Poor Code Organization
    • Not using custom library organization
    • Not enforcing public APIs
    • Not organizing code by Domain
  • Excessive Build times
  • Excessive Testing times
  • Poor/Limited Dependency Analysis

Current Workspace

Environment for the Developer Experience

4

Collaborating

with a Nx Workspace

A Workspace is more than just a Git repository structure!

 

Workspaces also encompasses

  • tools,
  • conventions,
  • documentation, and
  • processes
  • multi-applications
  • multi-libraries
  • middle-tier services
  • multiple technologies: Angular, NextJS, React, etc.

5

 Workspaces

Code Generators + Tooling

Library - Data Access

Library - Shared API

Library - UI Components

Single Version of Packages

Mono-Repository

Enforced Public APIs

Multiple Applications

Colocated Code

6

7

Nx Workspace builds multiple FEs and multiple BFFs in the same workspace

 

FE-Nx Workspace

Environment for All FE Products at Degreed

  • Encourage sharing/discovery of code...  
  • Encourage code organization...
  • Encourage code consistency...
  • Encourage full-scope testing...

8

Live Demo

with the FE-Nx Workspace

Next Steps

FE-Nx Workspace

9

Must deploy all apps at same time

"... for any code changes, must re-deploy all apps"

Git is slow...

1

2

Loss of Autonomy...

3

"... other teams limit / constrain my team and my releases"

Real Costs 

of

Use tools to test & deploy only apps/libs AFFECTED by the code changes.

App must developed in the same repo.

Teams are only impacted by shared libraries

Can work in isolation and incrementally share later...

Git performance scales well as codebase grows

ensures upgrade + testing

Real Costs 

Fear of Misplaced Ownership

'unauthorized modifications to code... '

Single-Version Policy

'need ability for ad-hoc changes to package dependencies'

Trunk-Based Development

'no long-lived branches; cost of integration'

1

2

3

of

code ownership can be configured & controlled

define library dependency constraints

requires admin rights to repository (hooks, teams, branch locking)

ensures holistic upgrade + testing

requires trunk rebasing and trunk merging

requires high-quality Pull Request processes

Degreed Nx Workspace

By Thomas Burleson

Private

Degreed Nx Workspace

Overview of FE-Nx Workspace. Presented at Degreed Summit, Miami 2022

More from Thomas Burleson