Glossary of frontend architecture and migration
Plain definitions of the terms used in micro-frontend platforms and legacy frontend migrations.
- Big-bang rewriteA big-bang rewrite replaces an entire application with a new one built from scratch and moves all users over in a single cutover.
- Blue-green deploymentBlue-green deployment keeps two production environments, one live and one idle; a new version goes to the idle one and all traffic is then switched over.
- Canary releaseA canary release sends a new version to a small share of users first, watches how it behaves, and widens the audience only if the metrics stay healthy.
- Change detectionChange detection is the process by which a framework notices that application data changed and updates the DOM to match.
- CI/CD pipelineA CI/CD pipeline is the automated sequence that builds, tests and deploys every code change on its way from a commit to production.
- Conway's lawConway's law observes that organizations design systems whose structure mirrors the communication structure of the organization itself.
- Design systemA design system is the shared set of design tokens, UI components, usage guidelines and governance that keeps a product's interfaces consistent across teams.
- Design tokensDesign tokens are named design decisions, such as colors, spacing and typography, stored as data so that every platform and application uses the same values.
- Downgrade (downgradeComponent / downgradeInjectable)In ngUpgrade, downgrading means wrapping an Angular component or service so that AngularJS code can use it as a directive or an injectable.
- End of life (EOL)End of life is the date after which a maintainer stops releasing fixes, including security patches, for a version of a product.
- Feature flagA feature flag is a runtime switch that turns a piece of functionality on or off for some or all users without deploying new code.
- Host (shell) applicationThe host, or shell, is the application the browser loads first in a micro-frontend architecture; it provides layout, navigation and session, and loads the remotes.
- Hybrid application (AngularJS + Angular)A hybrid application runs AngularJS and Angular together in the same page, usually through ngUpgrade, so that code can be migrated piece by piece.
- Import mapsAn import map is a JSON block in an HTML page that tells the browser which URL to load for each module name used in import statements.
- Incremental migrationAn incremental migration moves an application to a new technology in small releasable steps while the product stays in production the whole time.
- Lazy loadingLazy loading delays downloading a part of an application, such as a route or a heavy component, until the user actually needs it.
- Legacy codeLegacy code is code that still delivers value in production but is hard or risky to change, often because of missing tests, outdated technology or lost knowledge.
- Long-term support (LTS)Long-term support is the period in which a software version no longer gets new features but still receives critical fixes and security patches.
- Micro-frontendA micro-frontend is an independently built and deployed part of a web application, owned by one team and composed with other parts into a single product at runtime.
- Module FederationModule Federation is a bundler feature, introduced in webpack 5, that lets separately built applications load each other's code and share libraries at runtime.
- MonorepoA monorepo is a single repository that holds several projects, such as applications and shared libraries, usually with tooling that understands how they depend on each other.
- Native FederationNative Federation is a community library that implements the Module Federation model with browser standards, ES modules and import maps, so it works independently of webpack.
- ngUpgrade (UpgradeModule)ngUpgrade is the official Angular package, @angular/upgrade, that lets AngularJS and Angular run in one application and use each other's components and services.
- NxNx is an open source build system for monorepos that understands project dependencies, runs tasks only where needed and caches their results.
- PolyrepoA polyrepo setup gives each application or library its own repository, with its own history, pipeline and release cycle.
- Remote (micro-frontend remote)A remote is a separately built and deployed application that exposes modules, such as routes or components, for a host to load at runtime.
- Remote entry and manifestThe remote entry is the file each remote publishes to describe what it exposes and shares; the manifest is the host's list of where each remote entry lives.
- RollbackA rollback returns a system to the last version known to work after a release causes problems.
- SignalsSignals are Angular's reactive primitive: a signal holds a value, tracks where it is read, and notifies those readers when the value changes.
- single-spasingle-spa is an open source JavaScript router for micro-frontends that mounts and unmounts independent applications, possibly written in different frameworks, as the URL changes.
- Standalone componentsStandalone components are Angular components, directives and pipes that declare their own dependencies and do not need to belong to an NgModule.
- Strangler fig patternThe strangler fig pattern replaces a legacy system gradually: new code takes over one piece at a time behind a routing layer until the old system can be removed.
- Technical debtTechnical debt is the future cost created by technical shortcuts or postponed maintenance, which makes later changes slower and riskier until it is paid down.
- Tree shakingTree shaking is the build step in which a bundler removes code that is exported but never imported, so that it does not reach the production bundle.
- Web components (custom elements)Web components are browser standards, mainly custom elements and Shadow DOM, for defining reusable HTML elements that work in any framework or in plain HTML.
- Zoneless change detectionZoneless change detection runs Angular without Zone.js; the framework updates the view when signals, template events or explicit calls report a change.
Planning a migration or a micro-frontend platform?
In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.
Message me on LinkedIn