WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Dec 1, 2020

Hello generics, goodbye boilerplate!

Miroslav Jonaš

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.

Pause
Mute Enter Fullscreen
#1 about 7 min

Redundancy in code and the boilerplate problem

How recurring architectural patterns lead to repetitive boilerplate code in large applications.

#2 about 3 min

Enterprise architecture and state management setup

How standardizing state management across enterprise Angular applications introduces boilerplate overhead.

#3 about 3 min

Understanding the NgRx state management flow

A breakdown of the NgRx redux-style flow handling state, actions, reducers, and asynchronous effects.

#4 about 5 min

Demonstrating state management in a practical application

Tracing the synchronous and asynchronous state flow using a practical web application example.

#5 about 3 min

Identifying and reducing boilerplate in NgRx actions

How standard NgRx action implementations generate massive amounts of repetitive boilerplate.

#6 about 5 min

Introduction to TypeScript generics for type safety

How TypeScript generics enable type-agnostic but strongly typed reusable functions.

#7 about 3 min

Applying generics to custom action definitions

Using a base action class with generic payload parameters to minimize action declaration code.

#8 about 7 min

Automating reducers with generic group factories

Creating group reducers to automatically handle repetitive loading, success, and failure states.

#9 about 7 min

Refactoring NgRx effects using generic creators

Designing generic effect functions to abstract away repetitive switch mapping and error handling.

#10 about 4 min

Eliminating boilerplate in general application code

Extending the use of TypeScript generics to optimize common app structures like pagination records.

Matching moments

7:21 min

Integrating the NgRx architecture for global state management

Indu Chaube · LIVE

2:49 min

Introduction to the speakers and the TypeScript problem

Michael Hladky +1 · LIVE

3:24 min

Introduction to building reusable Angular components

Valentine Awe · World Congress 2022

9:46 min

Questions on architecture typing and team organization

Trishul Goel · JS Congress

2:11 min

Comparing JavaScript variables to TypeScript type annotations

Peter Kröner Peter Kröner · World Congress 2022

1:23 min

Refactoring and porting legacy code to new languages

Markus Walker Markus Walker · World Congress 2023

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Read more, Prompt Less thumbnail
1:01:30
5 days ago

WeAreDevelopers LIVE - Read more, Prompt Less

Chris Heilmann, Daniel Cranney, Luise Freese

WeAreDevelopers LIVE - Tech Education in Two Languages thumbnail
1:00:18
12 days ago

WeAreDevelopers LIVE - Tech Education in Two Languages

Daniel Cranney, Roxy Rodriguez-Becker

WeAreDevelopers LIVE - Playing in Production thumbnail
1:06:40
19 days ago

WeAreDevelopers LIVE - Playing in Production

Andrew MacLean, Daniel Cranney, Christian Heilmann

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
about 1 month ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
about 1 month ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
about 1 month ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

React Under Fire: Rendering Performance for Streaming Agent UIs

  • Abhirupa Mitra

    Slack

    Senior Member of Technical Staff

Open session

From Prompt Engineering to Harness Engineering: Building Observable and Governed GenAI Systems

  • Lakshmi Devi Prakash

    JPMorgan Chase

    VP, Applied AI/ML Lead

Open session

From Profiler to Production: Measuring What Actually Matters in React & React Native

  • Andrei Tazetdinov

    Dynatrace

    React Native Developer

Open session

Teaching AI Coding Agents to Build It Right the First Time

  • Sajeetharan Sinnathurai

    Microsoft

    Principal Product Manager

Open session

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

  • Vidhya Krishnamoorthy

    Morgan Stanley

    VP, Software Engineering Manager

Open session

How We Cut Our API's p99 Latency from Minutes to Under a Second

  • Deepak Agrawal

    Atlassian

    Principal Software Engineer

Related videos

NgRx Tips for Future-Proof Angular Apps thumbnail
26:58
LIVE • over 4 years ago

NgRx Tips for Future-Proof Angular Apps

Marko Stanimirović

The Art and Craft of Type Development thumbnail
43:20
LIVE • almost 6 years ago

The Art and Craft of Type Development

Michael Hladky, Stefan Baumgartner

Building software that scales with Typescript thumbnail
37:18
World Congress 2022 • over 4 years ago

Building software that scales with Typescript

Tal Joffe

Practice makes perfect - when it comes to RxJS thumbnail
33:25
LIVE • over 6 years ago

Practice makes perfect - when it comes to RxJS

Jan-Niklas Wortmann

Meet Your New BFF: Backend to Frontend without the Duct Tape thumbnail
51:04
LIVE • about 3 years ago

Meet Your New BFF: Backend to Frontend without the Duct Tape

Noam Honig

How to Create New RxJS Operators thumbnail
58:15
LIVE • about 3 years ago

How to Create New RxJS Operators

Mohammad-Ali A'râbi

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.