Mastering TypeScript's Advanced Patterns for Hardcore Development - Master Class (stationary & online)
by Tomasz Ducin

Not aimed for beginners or intermediate users; it's designed for those who already have a solid understanding of the language and are ready to level up. We’ll delve deep into several advanced patterns in TypeScript that are battle-tested techniques discovered and honed by the TypeScript community. From low-level details to high-level architecture concepts, get ready to face some of TypeScript's most challenging and exciting features through interactive exercises.

Key Takeaways:
1. Advanced Patterns Primer: Uncover patterns like branded types, value object, and configuring type compatibility that emerge from structural typing.

2. Branded Types: Learn to provide specific domain-related operations that don't easily interfere with primitives - and leverage this to make your app logic more robust and easier to maintain.

3. Type Predicates & Assertion Functions: Customize TypeScript's control flow and improve code inference to make your codebase more manageable.

4. Classical Patterns (Builder, Composite, Iterator, etc): Build on your knowledge of Generics to perform awe-inspiring feats of inference, developing entire data structures without manual type annotation.

5. External Libraries: Get down and dirty with external libraries, understanding how generics flow through them to debug type errors quickly.

6. Thinking on the Compiler Level: Understand the critical role of various TypeScript compiler internals, to understand the result and results, which are not explicitly written in your code.

What You'll Learn:
- Deepen your understanding of TypeScript's advanced features
- Navigate and resolve complex compiler errors
- Gain techniques for efficient domain modeling
- Master type controls to write cleaner and more reliable code

By the end of this hands-on workshop, you’ll be armed with a toolkit of advanced TypeScript skills and techniques, ready to tackle any coding challenge. Don't miss out on this opportunity to turbocharge your TypeScript game! 💪🤓

Buy Workshops

Build an AI-Powered Full-Stack Angular App - Master Class (stationary & online)
by Nir Kaufman

Unlock the potential of AI in web development with this intensive master class. Led by Nir Kaufman, this course is perfect for developers looking to integrate AI functionalities into their Angular projects. From serverless app architectures to advanced data handling with Vector databases, this workshop promises a comprehensive deep dive into modern web development.

What You Will Learn
✔️ Foundation Setup: Kickstart your project with a modern, serverless full-stack application using Angular.

✔️ Angular Expertise: Gain in-depth knowledge of the latest Angular features to enhance your app’s performance.

✔️ Database Skills: Master modern ORM techniques for efficient database management.

✔️ AI Integration: Experiment with Generative AI, focusing on prompt engineering and Langchain applications.

✔️ Advanced Data Handling: Implement Vector databases for sophisticated data management and retrieval.

✔️ OpenAI Technologies: Get practical experience with OpenAI's suite to infuse intelligent features into your web applications.

Takeaway
By the end of this online master class, you will have developed a fully functional, AI-enhanced Angular application. Equipped with new skills and insights, you will be ready to tackle contemporary challenges in the tech industry, pushing the boundaries of what's possible in web development.

Buy Workshops

Architecting Angular Apps for High Performance: Control the Browser Render Pipeline, Master the Event Loop, Measure & Optimize CWV - Master Class (stationary & online)
by Michael Hladky & Julian Jandl

What You Will Learn

✔️ Control the Browser Render Pipeline - To make your app faster, you need to understand how the browser interprets your code. Learn the different stages of the Browser Render Pipeline. Get to know the tools to inspect & analyze bottlenecks in your application. Write code that always performs optimally.

✔️ Master the Javascript Event Loop - If you care about performance in any JavaScript application, mastering the Event Loop is a must. Dive deep into the JavaScript vm and learn techniques to avoid slow performing code on real world applications.

✔️ Measure & Optimize (Core) Web Vitals - Your performance has a score. Learn how it’s composed, measured and techniques to improve it. Get an expert in analyzing and improving LCP, CLS, INP, TBT, TTFB & more.

✔️ Go Zoneless: Master the new zoneless & signal-based change detection - Understand how Angular is getting faster because of the new change detection and zoneless features. Learn how to benefit from them.

✔️ Use CSS and DOM performance best practices - Improve the performance of real world applications by applying the latest CSS features. Learn how to identify and fix forced reflows and how to avoid layout thrashing.

✔️ Optimize your apps Network requests - Enterprise apps consume a lot of data. Master the tools that allow you to identify network related performance bottlenecks. Learn techniques and strategic approaches to optimize network related data consumption to ultimately improve the performance of your application.

Takeaway
From this workshop you will walk away with a deep understanding of how to enhance your applications performance. You'll gain practical knowledge of the JavaScript event loop, learn optimization techniques for the Core Web Vitals, and understand how to effectively utilize strategic approaches to identify & encounter performance bottlenecks. We'll dive deep into the browsers render pipeline, ensuring you know how to measure and improve your apps performance properly. Additionally, you will learn to apply advanced features like measuring CSS execution performance & utilizing cutting-edge CSS and DOM APIs to reduce reflows and prevent layout thrashing.

Mastering NgRx SignalStore for Modern Angular Architectures - Master Class (stationary & online)
by Alex Okrushko & Marko Stanimirović

Revolutionize your Angular development! Join core NgRx team members Alex Okrushko and Marko Stanimirović for a hands-on exploration of NgRx SignalStore, the cutting-edge reactive state management solution for Angular.

This immersive workshop will equip you with the knowledge and skills to build scalable, performant, and maintainable Angular applications by leveraging the full power of Angular Signals and the streamlined SignalStore API.

What You'll Learn:

✔️ Angular Signals Deep Dive: Uncover the mechanics behind Angular's reactive programming model, understand the nuances between Signals and RxJS, and discover how to seamlessly integrate both for maximum efficiency.

✔️ NgRx SignalStore Mastery: Get hands-on with SignalState, RxMethod, SignalStore, and other key APIs through practical exercises and code labs. Learn to build modular, declarative stores that enhance code readability and maintainability.

✔️ Advanced SignalStore Techniques: Explore plugin-based architecture for entity management and build custom plugins to tailor SignalStore to your specific needs.

✔️ Unified State Management: Utilize SignalStore as a comprehensive solution for both local and global state, and discover how it complements the global NgRx Store for large-scale applications.

✔️ Architectural Best Practices: Gain valuable insights into clean code principles, declarative programming patterns, and architectural designs that promote code scalability, robustness, and testability.

Who Should Attend:

Angular developers of all levels who are eager to enhance their state management skills and adopt modern architectural practices. Basic familiarity with Angular and TypeScript is recommended, but prior experience with NgRx or Signals is not required.

Take your Angular expertise to the next level! Secure your spot today and unlock the full potential of NgRx SignalStore for building reactive, modern Angular applications.

Buy Workshops

Angular Code Quality - Master Class (stationary & online)
by Rainer Hahnekamp

What You Will Learn:

In this workshop, you’ll learn how to significantly enhance the quality and maintainability of your Angular projects through a focused, one-day intensive session.

By the end of the day, you will be able to:
✔️ Create Custom ESLint Rules: Craft your own ESLint rules and harness existing ones to tailor code quality checks to your team’s specific needs.
✔️ Develop Angular Schematics: Build your own schematics from scratch to automate and standardize the creation of code structures within your projects.
✔️ Apply Code Metrics: Utilize key metrics like the Maintainability Index, Cyclomatic Complexity, and Code Churn to analyze and improve your project’s performance.

We’ll kick off with ESLint, where you’ll learn to craft your own rules step-by-step. By the end, you’ll be equipped to create customizable rules that not only fix code automatically but also efficiently validate Angular templates.

The journey continues with Angular Schematics. You’ll start from the basics, learning how to develop them to automate the generation of repetitive code segments and ensure consistent use of libraries across your projects. You’ll also learn how to integrate these tools into the powerful ng update process.

We'll also take a look at the Nx Generators—a powerful enhancement to Schematics that adds features and tools for more sophisticated development workflows.

We’ll conclude the workshop by exploring code metrics, focusing on key indicators such as the Maintainability Index, Cyclomatic Complexity, and Code Churn. You will understand how these metrics operate, what benefits they offer, and how they can be used to gauge and improve the health of your codebase.
Additionally, we’ll cover popular tooling such as SonarQube and discuss how to seamlessly integrate it into your CI (GitHub Actions) process for continuous quality checks.

Detailed Agenda

ESLint
▪︎ Flat vs legacy config
▪︎ Creating rules
▪︎ Processing TypeScript with typescript-eslint
▪︎ TypeScript AST
▪︎ Customizable rules
▪︎ Creating plugins
▪︎ Testing rules

Schematics
▪︎ Setting up Schematics
▪︎ Using template for code generation
▪︎ Parameterizing Schematics
▪︎ Accessing the file system
▪︎ Managing dependencies with Schematics
▪︎ Testing schematics
▪︎ Bundling and publishing
▪︎ ng add & ng update
▪︎ Reading templates
▪︎ Nx Generators

Metrics
▪︎ Understanding common metrics
▪︎ Using SonarQube
▪︎ Combining Quality Gates & GitHub Actions

Buy Workshops

Building the Future with Angular: Master Signals and Deep Dive into Architecture Best Practices - Master Class (stationary & online)
by Enea Jahollari & Christopher Holder

What You Will Learn:
✔️ Master Signals
- Dive Deep: Go beyond the basics and understand the inner workings of Signals, Angular's new powerful reactivity system.
- Real-World Practice: Gain practical experience by applying signal best practices, reinforcing your understanding of how signals work.
✔️ Architect Angular Workspaces like a Pro
- Standalone: Understand and unlock the benefits of a more modular architecture with standalone components, directives and pipes.
- Function-based APIs and provide*- Learn how to create better APIs that are easier to maintain and reuse which align with Angular’s vision.
✔️ Craft Modern, Efficient Components:
- Modern APIs: Leverage signal inputs, model inputs, function-based outputs, signal queries, and more to build smarter, more reactive components.
- @defer like a PRO: Dramatically reduce bundle size and initial load time with @defer. Get in-depth experience about everything @defer has to offer and how to not break it!
- Bonus: Lazy load services: Learn how to lazy load services using injectLazy.
✔️ Go Zoneless & Signal-based change detection
- Embrace Angular's new, faster, and more efficient zoneless change detection with Signals and learn how to benefit from them.
✔️ Enhance Development Techniques
- Master inject patterns: Go beyond basic service injection and discover innovative code patterns that promote reusability, maintainability, and scalability in your Angular projects.
- Boosting Build Speed: Unleash the performance benefits of the webpack-to-esbuild migration.
✔️ Optimize User Experience with Server Side Rendering
- Hydration: Understand how it works and why it improves user experience together with event replaying.
- Bonus: A glimpse into global event delegation and partial hydration.

Takeaway
Elevate your Angular expertise and build high-performance applications by mastering the inject function, architecting modern apps with standalone components, turbocharging performance with esbuild, building smarter components with function-based APIs and Signals, and optimizing for speed with advanced lazy loading and partial hydration. Join us to modernize your Angular skillset and impress your users with a smooth, responsive experience.

Buy Workshops

Pragmatic Angular Testing - Master Class (stationary & online)
by Younes Jaaidi

Testing or more specifically, front-end testing is undeniably in the top 3 of the most complex topics associated with Angular & front-end development.

When one is confronted with this complexity, it is tempting to give up, but at what cost? It is totally possible to develop an application without tests but is it really faster? What happens to code maintainability a few months or sometimes just weeks later? Can we serenely refactor and deploy our apps regularly while it is getting older and complex in our hands? What about end-to-end tests, they sound attractive but are they enough?

This workshop presents, through practical exercises, pragmatic Angular testing techniques. You will also learn how to implement simple, meaningful, maintainable, and above all profitable tests.

What attendees will learn

During this workshop, you will learn:
- how to implement tests for your Angular application with the Test-Driven Development approach,
- how to choose the type of tests that fits best depending on the context,
- how to decouple tests from code to encourage refactoring and tidying up when needed,
- how to implement maintainable and human-readable tests,
- the difference between dummies, stubs, spies, mocks, and fakes + how and when to use them,
- the difference between isolated, shallow & integration component testing,
- how to choose the right scope for your tests,
- lots of tips & tricks that will help you adopt a pragmatic testing strategy.

Course Benefits
You will learn how to write profitable tests, in other terms, you'll learn how to reduce the cost of writing and maintaining tests while increasing their trustworthiness. This will boost the whole team’s confidence and efficiency. You will be able to choose the right tests to implement and how to implement them. You will also learn how to leverage the benefits of Progressive TDD to change your code with confidence, and you will be able to decouple your tests from the tested code so you change the code structure without having to fix tests all the time.

Workshop Agenda

👨🏻‍🏫 Overview

👨🏻‍🏫Introduction to testing
- Why test?
- What should we expect from a test?
- The different types of tests: Narrow & Wide vs Unit & Integration.

👨🏻‍🏫Jest
- Do you need Jest?
- Pros & cons.

💻 Exercise: First Test
- Progressive TDD.
- Making tests readable and maintainable with Object Mothers.
- Tips & Tricks.
- Testing asynchronous code.

💻Exercise: Test Doubles
- Dummies vs Stubs vs Mocks vs Spies vs Fakes: which one should we use?
- Contract testing fakes

👨🏻‍🏫Component Testing
- Different types of component tests: Integration vs Shallow vs Isolated.
- Angular Testing Library: Pros & Cons.
- Cypress Component Testing: Pros & Cons.
- Playwright Component Testing: Pros & Cons.

💻Exercise: Testing Components with Playwright Component Testing
- Which Test Doubles should we use?
- Testing Inputs & Outputs based communication.

👨🏻‍🏫Visual Regression Testing
- Testing the presentation.
- Visual regression testing with Playwright Component Testing

👨🏻‍🏫Building your Pragmatic Testing Strategy
- What should we test and how?
🙋‍♀️ Q/A

Buy Workshops

Modern Angular Architectures: Signals, Standalone, DDD & Micro Frontends - Master Class (stationary & online)
by Manfred Steyer & Michael Egger-Zikes

What You Will Learn:
✔️ Understand Standalone Components: Master the implementation and benefits of Standalone Components in Angular for streamlined and efficient project setups.

✔️ Application Structuring: Learn how to effectively structure large-scale applications using a Mono Repo approach combined with Strategic Design principles based on Domain-Driven Design (DDD).

✔️ Architectural Enforcement: Discover how to enforce and maintain architectural integrity using tools such as Nx and Sheriff to manage dependencies and workflows within your project.

✔️ Modular Monolith Implementation: Gain insights into creating a modular monolith—dubbed a "Modulith"—to maintain modularity while leveraging the robustness of a monolithic application.

✔️ Micro Frontend Architecture: Dive into the Micro Frontend architecture using Module Federation and Native Federation to build scalable and isolated components that can integrate seamlessly.

✔️ Leverage esbuild in Angular: Explore how to utilize Angular’s support for esbuild to significantly enhance the build and compilation speed of your applications.

✔️ Angular Signals Introduction: Understand the new Angular Signals feature, its use cases, and its integration into modern Angular architectures for more responsive applications.

✔️ Advanced State Management: Learn the advanced techniques of state management using the NGRX Signal Store, focusing on fine-grained change detection and state updates.

✔️ Custom Features for Signal Store: Implement custom functionalities within the NGRX Signal Store to handle complex and repetitive scenarios with minimal code.

✔️ Enterprise-scale Planning and Deployment: Equip yourself with the strategies and tools required to plan, develop, and deploy enterprise-scale Angular applications confidently.

Takeaway:
Participants of this workshop will emerge with a deep understanding of modern Angular architectures, equipped with practical skills and cutting-edge techniques. You will learn how to construct and maintain scalable and maintainable web applications using the latest Angular features, such as Standalone Components, Module Federation, and Angular Signals. By the end of the session, you will be adept at implementing complex architectures and managing state efficiently, enabling you to tackle enterprise-scale projects with confidence. This workshop will not only enhance your technical proficiency but also expand your toolkit for building future-proof Angular applications.

Buy Workshops