Friday April 28th 2023 (EST Times)
8:00 AM - 8:20 AM
Unlocking the Power of ngTemplateOutlet: Creating Reusable, Customizable, and Extensible Components
ngTemplateOutlet directive allows developers to provide custom templates, which can be used to create a wide range of different UI elements. This feature is especially useful for creating reusable components, which can be adapted to suit different use cases and requirements. Additionally, many Angular libraries make use of ngTemplateOutlet to enable users to provide custom templates and extend the functionality of the library. This talk will demonstrate how to use ngTemplateOutlet effectively and how it can be used to create flexible and extensible components. Duration: 20 minutes
8:25 AM - 8:45 AM
Deep Dive into the DI system
First, we'll learn how Angular's DI works under the hood. How angular puts things together to create magic DX when injecting dependencies into our components. We will explore some common use cases such as provideIn root, or how angular injects a dependency. We will also explore how the router's DI is implemented. And we will end with specific use cases like ActivatedRoute, ElementRef, TemplateRef, ... which are created like magic.
8:50 AM - 9:10 AM
Common RXJS Patterns in Angular
Paul Chesa, Joy Linda Wawira
A overview guide in reactive programing composing data streams, fetching data, interaction of the user with the system and API interactions.
9:15 AM - 9:35 AM
Refactoring Made Easy with Component Testing
Refactoring is an inevitable and often times crucial part of the development lifecycle. During refactoring, we rely heavily on automated tests to make sure our refactored code doesn't introduce regression into our applications. As our implementation changes and our tests begin to fail, it can become difficult to know which tests are accurately failing and which tests just need rewritten. In this talk I will show you how writing Component Tests with Cypress makes refactoring your components both easier and more reliable.
9:40 AM - 9:50 AM
[This is a 5-min session] The technique of implementing component-less and empty-path routes helps us deal with the Angular routes smarter without breaking the tree structure. This pattern looks simple at the first sight, but turns out to make your code reliable and flexible. Taam Nguyen KMS Technology, full-stack developer, dev girl firstname.lastname@example.org
9:50 AM - 10:10 AM
Component and typed reactive form - perfect duo
The short example of how excellent typed forms are and how we can easily use them in components. The talk would assume: - what are the typed forms, - how to setup them - how we can omit potential errors by using them.
10:25 AM - 10:45 AM
Playing your tests wright
It's time to play your tests wright. Let's take a look at how to write good tests and cover some of the best practices for testing, choosing the right locators and more. Let's make testing easy and fun by generating tests on user actions.
10:50 AM - 11:10 AM
Unpopular features of Angular
- viewProviders - Extend existing/3rd party directives - Auxiliary routes - Access parent component properties from child component - Access template variable as component instance - ngDestroy hook in Angular service - prevent Partial page display
11:15 AM - 11:35 AM
Promises Cant Do That
Joy Linda Wawira
In this session, we deep dive into promises and observables, Understand the differences between the two and when to use either of them in different cases.
11:40 AM - 12:00 PM
Our Journey to Fine-Grained Reactivity in Angular
In this talk, we will go on a journey exploring how Angular change detection has evolved over the years and the impacts of Signals on Angular and its reactivity model, the pros and cons, and what to expect in the future.
12:15 PM - 12:30 PM
SPARTAN. Type-safe full-stack development powered by Analog.
A quick description is: This talk will introduce the SPARTAN stack. An opinionated collection of tools and technologies that allow for completely typesafe full stack Angular development from the database to the template rendering the DOM! Super excited for this opportunity! Please let me know if there is anything else I should do! Will you follow up with instructions on how to join and/or how I'll be able to share my screen? Thanks already! Have a good rest of your night!
12:30 PM - 12:50 PM
Planning and Migrating your Application to Mono-repo using Nx
Collaboration is key to any organization today. Google has used mono-repos for years to ensure the code base are shared across the teams. Keeping code in mono-repo leads to quick feedback for any changes made by other groups. Over the years, it is becoming crucial for any organization as many teams are building different apps and are sometimes unaware they are duplicating the code. Using mono-repo brings many advantages. In this talk, we will cover how you can introduce Nx within your organization and important points why you need it.
12:55 PM - 1:15 PM
Reaping Benefits with Web Workers in Angular
1:20 PM - 1:40 PM
And the component stands alone....
How do Standalone Components change how we create Angular code?
1:45 PM - 2:05 PM
Enchance User Experience through Angular Internationalization & Localization for Growth
Anil Kumar Krishnashetty
In this talk, I will guide you through the process of enhancing your Angular application's user experience through internationalization and localization. I will cover key concepts such as creating a multi-language UI, localizing date, time, and number formats, and adapting content to cultural norms. Then, with real-world examples and best practices, I will show you how to optimize your Angular app for a global audience and drive growth through improved user engagement. Whether you are a front-end developer, product manager, or simply interested in building more accessible and user-friendly applications, this talk is for you!
2:15 PM - 2:35 PM
The Puppet Master's Guide to Injection Tokens
As the puppet master of your Angular application, you have the power to take control of your dependencies and shape them to your will. In this talk, we will study the details behind injection tokens, learning how to use them to fine-tune our app's behavior and make it dance to our tune. Whether you're new to Angular or a seasoned developer, this presentation will offer something for you.
2:40 PM - 3:00 PM
It's as simple as src to ngSrc
At last years ng-conf the new Image Directive was presented for the first time to much applause. It is now out of developer preview and is ready to improve the Largest Contentful Paint (LCP) of your application! From supporting prebuilt image loaders for image CDNs to the features built for Angular Universal and SSR that ensure your images have the necessary metadata for browsers the new Image Directive can do it all! Let's explore the huge gains this directive provides and how easy it is to get started!
3:05 PM - 3:25 PM
Performance at scale
The async pipe is boring! So we will skip ChangeDetection OnPush & trackBy and jump straight into the guts of performance optimization. Get ready to deepen your knowledge, learn about the latest best practices, and see them in action with exciting live demos lying at the core of this talk. This session will feature the most up-to-date information to expand your knowledge of advanced performance optimization techniques beyond the basics. Together, we will get hands-on with the powerful toolset, including Chrome and Angular DevTools, review the case study of web performance optimization and its outcomes, and learn how to achieve peak performance, reaching a staggering 99 points. In the end, you'll go home with lots of exercises to guide you and a wealth of insights to work with, impressed by how much faster your application can get.
3:30 PM - 3:50 PM
Angular Signals: are we saying goodbye to RxJS?
We'll talk about Angular Signals, the new reactive primitive from Angular, how it works and we'll talk what this mean for RXJS.
3:55 PM - 4:15 PM
Playwright: Changing the Guard?
Looking at the growth rate in terms of downloads, Playwright was the E2E testing shooting star in 2022 and keeps rising. Understandable because it has some pretty fancy features: Non-flaky tests, the backing of Microsoft, VSCode integration, parallelization, and much more. But does it have what it takes to become the new number one in E2E testing? If you've always wanted to know why you want to use Playwright and how it feels to write tests with it, this talk is for you. I will give an overview of the current E2E testing landscape and explain where Playwright fits in and how it differs from the rest. After that, I'll live code an example where I'll also showcase the official Playwright VSCode extensions.
4:20 PM - 4:40 PM
From zero to Analog: Building the meta-framework for Angular
The Angular community has been wanting a meta-framework for a while now, and now it exists with Analog. How did we get here? This talk dives into the process, decisions, and tech used to build Analog from the ground up.
4:45 PM - 5:05 PM
@Component.host, hostDirectives, :host, @HostListener?! Everything your Angular component's host...
Unlike other frameworks, Angular creates an element for every component. This can clutter your DOM with wrappers and third-party components. Learn how to extend your host element capabilities with classes instead of inputs, @HostListeners instead of wrappers, Directive Composition API instead of nested components, and more!
5:20 PM - 5:40 PM
Micro-Frontend Architecture and Module Federation: Making the Right Choices for Your Project
The micro-frontend architecture is attracting more and more developers, and module federation is a great addition to this architectural pattern. And as with any new technology, new questions are raised. Let's take real-life examples and live coding to answer the following but not limited to: how we should divide apps and whether there are specific criteria to separate them. Is my project suitable for the Micro-Frontend at all? When should I use Micro-Frontend and when Module Federation? And some other questions.
5:45 PM - 6:05 PM
Angular RxJS Exception Handling
It's always good practice to plan for exceptions! In this session we start with a look at basic RxJS exception handling. Then move on to more complex scenarios such errors when retrieving related data and continuing a pipeline after an error occurs.
6:10 PM - 6:30 PM
Is your Component Ready for Strict Mode?
With strict mode enabled by default, we must acknowledge that there is nothing more tiresome than using a component that is poorly typed. As we develop our components we must consider the implications of our Input types for developers that have strict mode enabled. The key point: just defining the Input types isn't enough to avoid type failures and poor DX Do you want to support shorthand boolean attributes? It can't just be boolean. Will Inputs be set with the async pipe? Do you handle the initial null values? I will demonstrate the use cases for ngAcceptInputType along with Input coercion, drawing on my experience as a component library developer.
6:35 PM - 6:55 PM
Angular Signals mental model
Learn how Angular Change Detection works with zone.js and how signals will simplify the mental model to build Angular apps
7:00 PM - 7:20 PM
Angular Magic with Angular Schematics
Learn how to take advantage of writing Angular Schematics to boost your teams productivity.