> Markdown version of [/videos/82-hello-generics-goodbye-boilerplate](https://www.wearedevelopers.com/videos/82-hello-generics-goodbye-boilerplate). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Hello generics, goodbye boilerplate!

Is your enterprise codebase drowning in repetitive boilerplate? Learn how TypeScript generics eliminate copy-pasted NgRx patterns, drastically reduce code volume, and build scalable frontend architectures.

- **Speakers:** Miroslav Jonaš
- **Event:** WeAreDevelopers LIVE
- **Published:** December 1, 2020
- **Duration:** 42:16
- **URL:** https://www.wearedevelopers.com/videos/82-hello-generics-goodbye-boilerplate

## Summary

Enterprise applications often suffer from extensive boilerplate code, sometimes making up to 90% of a codebase due to necessary architectural consistency. This repetition is especially prominent in Redux-style state management systems like NgRx for Angular, where developers frequently copy-paste actions, reducers, and effects with only minor alterations. While consistent patterns are a sign of a well-architected codebase, manually managing synchronous and asynchronous data flows—including standard loading, success, and failure states—swiftly becomes an unmanageable and error-prone chore.\n\nTypeScript generics provide a powerful mechanism to eliminate this repetitive boilerplate by creating type-safe, reusable constructs. By replacing rigid classes with generic abstractions, developers can dynamically handle application payloads and state changes. Building a customized generic reducer can automatically trigger loading flags and catch errors across grouped actions without requiring manual switch statements for every feature. Similarly, abstracting side effects into generic factories removes the repetitive RxJS piping for successful data mapping and error catching, distilling complex streams down to just the specific action triggers and service calls that uniquely matter.\n\nThe mindset of applying generics extends far beyond state management. Recognizing architectural duplication allows teams to build shared wrappers, such as a paginated generic that cleanly handles data fetching logic to avoid expensive database counting queries. Ultimately, viewing code duplication as a challenge to abstract logic through strongly typed generic structures allows engineering teams to drastically reduce code volume, minimize human error, and build highly scalable frontend architectures.

**Keywords:** typescript generics, boilerplate code reduction, angular state management, ngrx redux flow, custom action creators, generic state reducers, rxjs side effects abstraction, asynchronous state updates, frontend state architecture, pagination data structures, strongly typed wrappers, enterprise codebase architecture, declarative state transitions, typescript type safety

## Chapters

1. **Redundancy in code and the boilerplate problem** (00:18) — How recurring architectural patterns lead to repetitive boilerplate code in large applications.
1. **Enterprise architecture and state management setup** (06:40) — How standardizing state management across enterprise Angular applications introduces boilerplate overhead.
1. **Understanding the NgRx state management flow** (09:10) — A breakdown of the NgRx redux-style flow handling state, actions, reducers, and asynchronous effects.
1. **Demonstrating state management in a practical application** (11:28) — Tracing the synchronous and asynchronous state flow using a practical web application example.
1. **Identifying and reducing boilerplate in NgRx actions** (15:48) — How standard NgRx action implementations generate massive amounts of repetitive boilerplate.
1. **Introduction to TypeScript generics for type safety** (18:00) — How TypeScript generics enable type-agnostic but strongly typed reusable functions.
1. **Applying generics to custom action definitions** (22:27) — Using a base action class with generic payload parameters to minimize action declaration code.
1. **Automating reducers with generic group factories** (25:04) — Creating group reducers to automatically handle repetitive loading, success, and failure states.
1. **Refactoring NgRx effects using generic creators** (32:04) — Designing generic effect functions to abstract away repetitive switch mapping and error handling.
1. **Eliminating boilerplate in general application code** (38:32) — Extending the use of TypeScript generics to optimize common app structures like pagination records.

## Related Moments

- [Integrating the NgRx architecture for global state management](https://www.wearedevelopers.com/videos/685-angular-unleashed-mastering-modern-web-development-with-angular) (from "Angular Unleashed: Mastering Modern Web Development with Angular")
- [Introduction to building reusable Angular components](https://www.wearedevelopers.com/videos/497-angular-magical-directives) (from "Angular Magical directives")
- [Questions on architecture typing and team organization](https://www.wearedevelopers.com/videos/318-destructuring-frontend-monoliths-with-microfrontends) (from "Destructuring Frontend monoliths with MicroFrontends")
- [Comparing JavaScript variables to TypeScript type annotations](https://www.wearedevelopers.com/videos/455-where-we-re-going-we-don-t-need-javascript-programming-with-type-annotations) (from "Where we're going we don't need JavaScript - Programming with Type Annotations")
- [Refactoring and porting legacy code to new languages](https://www.wearedevelopers.com/videos/631-chatgpt-create-a-presentation) (from "ChatGPT: Create a Presentation!")
- [Exploring the benefits of type safety and TypeScript migration](https://www.wearedevelopers.com/videos/1302-wearedevelopers-live-dishonest-charts-britcss-debugging-with-ai) (from "WeAreDevelopers LIVE - Dishonest Charts, BritCSS, Debugging with AI")

## Related Articles

- [Exploring TypeScript: Benefits for Large-Scale JavaScript Projects](https://www.wearedevelopers.com/magazine/554-exploring-typescript-benefits-for-large-scale-javascript-projects)
- [Dev Digest 108 - Git off my cloud!](https://www.wearedevelopers.com/magazine/407-dev-digest-108-git-off-my-cloud)
- [Dev Digest 136 - No JS(on) of mine](https://www.wearedevelopers.com/magazine/482-dev-digest-136-no-js-on-of-mine)
- [Dev Digest 120 - Apple and peers](https://www.wearedevelopers.com/magazine/455-dev-digest-120-apple-and-peers)

## Related Jobs

- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**
- [Agile Full Stack Engineer](https://www.wearedevelopers.com/jobs/48325-agile-full-stack-engineer) at **synava GmbH**
- [Senior Software Engineer, Angular (B2C Web Platform)](https://www.wearedevelopers.com/jobs/ext/1927757-senior-software-engineer-angular-b2c-web-platform) at **Bitpanda**
- [React Engineer for Next.js UI - Hybrid, Impactful FinTech](https://www.wearedevelopers.com/jobs/ext/1444505-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**