Angular - All Talks from ng-conf Hardwired (2020)

May 1, 2020 14 min read Angular

A collection of all lectures that were presented during the world's original Angular conference within one page. Each session includes a concise description and relevant slides.
Contents

Note: Some of the talks and slides are still missing. This post will be updated incrementally as soon as these will be available.

Day One

Keynote

Presented by Jules Kremer, Kara Erickson

Slides 1, Slides 2

Click here to watch

Http Interceptors: The Room Where It Happens

Presented by Ward Bell

Between an HTTP request and response lies a realm of decision and transformation under your command with HttpInterceptors. Add authentication headers, filter content, retry failed requests, react to errors, log traffic, control busy indicators, and just make stuff up. Interceptors are easy to write and test. They’re a good reason to polish your RxJS skills. After 20 minutes with me you’ll be in the room where it happens, just like Alexander Hamilton and Thomas Jefferson.

Slides

Click here to watch

How Ivy will improve your application architecture

Presented by Manfred Steyer

Ivy is primarily associated with smaller bundles and therefore better performance. However, Ivy has much more to offer, and many smart concepts provide the foundation for some much-anticipated future features.

Find out how Ivy’s potential can impact your future architecture. We use a case study to explore a possible future without NgModules, the use of dynamic components or higher-order components, zone-less change detection, and new possibilities for lazy loading and plug-in systems.

In the end, you understand Ivy’s potential and how to start preparing for it today.

Slides

Click here to watch

Deep dive into CLI Builders

Presented by Mike Hartington

One of Angular’s best features, is also one of it’s most secretive. How does your project go from a bunch of files, to an amazing app that you can deploy? The secrete? Builders. We’ll not only look at how this happens, but take a look at the API involved so you write your own builder and integrate other tools that fit your needs.

Slides

Click here to watch

Session #1 Q&A

Presented by Ward Bell, Manfred Steyer, Mike Hartington

Click here to watch

A Philosophy for Designing Components with Composition

Presented by Jeremy Elbourn

Everyone knows that you want “composition” in your architecture, but what are the practical implications of composition? How do you think about composition in the context of UI components? In this talk, you’ll hear about a specific strategy for bringing composition into your design to create components that are accessible, flexible, and maintainable.

Slides

Click here to watch

The Makings of Scully

Presented by Sander Elias

In this talk we peek under the covers of the new Angular Static site generator. a tale on how we created it, and what it can do to you.

Slides, Project

Click here to watch

Why Should You Care About RxJS Higher-order Mapping Operators?

Presented by Deborah Kurata

What is a higher-order mapping operator? When would you use one? And why should you care?

There are important differences between the map operator and higher-order mapping operators such as concatMap, mergeMap, and switchMap. For example, higher-order mapping operators automatically subscribe to their inner Observables.

This session examines several higher-order mapping operators using real-world scenarios. If you’ve ever wondered why you use a switchMap instead of a map, what the heck an “inner Observable” is, or what a higher-order mapping operator does, this session is for you.

Slides

Click here to watch

The Phantom of the Template Error

Presented by Brian Love

Lurking below the surface of the templates in your application are half-masked type errors that are closer to surfacing as grotesquely disfigured bugs than you realize. As the director of your application, what are you to do? Manually checking each template would result in an angry mob of engineers. Thankfully you can capture these phantom template errors using Ivy’s new rich template type checking. Pulling away the mask through configuration flags we can reign in the terror once and for all.

Slides

Click here to watch

Session #2 Q&A

Presented by Jeremy Elbourn, Sander Elias, Deborah Kurata, Brian Love

Click here to watch

Resilient Angular Testing – Jaw dropping magic tricks by the magnificent Shairezniko

Presented by Shai Reznik

How would you like to save time while improving your code design? What about having future-proof upgrades of your 3rd party dependencies?

“Resilient Angular testing” is a magical marvel designed to overload the senses with unbelievable illusions and coding techniques that will get you exponential gains with little to no effort.

Performed by The Magnificent Shairezniko, a legendary showman who’s been hailed by audiences and critics alike as the “greatest code illusionist of our time.”

This talk is a MUST for anyone who’d like to learn this critical coding principle which will benefit you whether you’re testing your code or not.

Slides

Click here to watch

Preload Strategies: Step in Time, Step in Time!

Presented by John Papa

Can you design your app to load progressively and predictively, creating a fast and immersive user experience that steps in time? Impossible you say? “Everything is possible, even the impossible.” (- Mary Poppins)

Your users care about how fast your app works. Learn how to load just what they need when they need it, adapt your user experience to low or no wifi, and experience what supercalifragilisticexpialidocious feels like. See how understanding user behavior and combining that with preloading strategies and RxJS can make a hugely positive impact on their user experience. You’ll never need a reason, never need a rhyme, when you make your app step in time.

Slides

Click here to watch

Common Challenges facing Angular Enterprises

Presented by Stephen Fluin

There are common challenges facing Angular teams who are buliding applicaitons at scale. In this talk I’ll demystify these questions, and start sharing what we know, and what we need your help with.

Slides

Click here to watch

Session #3 Q&A

Presented by Shai Reznik, John Papa, Stephen Fluin

Click here to watch

Day Two

Domain-Driven Design and Angular

Presented by Manfred Steyer

In this interactive session, we explore a case study on how to use proven domain-driven design principles to make the architecture of your Angular project maintainable in the long term. You also learn how to combine these ideas with best practices from the Angular community.

First, we define a strategic and tactical design for our case study, which we then implement with a monorepo that reflects our sub-domains. Then you learn in individual demonstrations how the use of libraries, APIs, facades, domain events, and access rules between libraries can ensure loose coupling and thus better maintainability.

In the end, you have a case study that you can use as a template for your projects.

Slides

Click here to watch

Stronger Type-Checking in Templates with Ivy

Presented by Alex Rickabaugh

One of the new features in Angular Ivy is strictTemplates, a compiler flag that turns on much stronger validation and type-checking of component templates. Discover how to use this new flag with Angular Framework team member Alex Rickabaugh. Learn how the new type-checking works, how best to migrate a large project onto stricter type-checking, and take a peek under the hood at how this feature works.

Slides

Click here to watch

Facing the music when millions of daily users hit Delta.com after every release

Presented by Vishal Kumar

At Delta, our Angular code is put to the test at unprecedented scale. This talk will cover the types of challenges we face and how we address them to successfully support or mission critical e commerce app with millions of daily users.

How code that would work in smaller scale ends up with server crashes due to load failures and application issues due to Javascript errors that happen only in edge case scenarios.

Examples of tough bugs we squashed –

Application does not load in IE for certain scenarios. Also it works if the debugger window is open. Making it hard to debug the issue. Our Angular app won’t load on Firefox 50 (yes we need to support it) and what angular builder package was the root cause. SSR causes CPU and memory spikes when legacy libraries are included.

The process we use to find root cause will be helpful to the audience. And the coding guidelines and architecture choices (micro frontend, feature toggles, metering new UIs, Akamai for caching and security, AEM for content management) could provide useful insights on how to build scalable applications.

Slides

Click here to watch

Getting through the awkwardness of networking

Presented by Wesley Faulkner

There’s a lot about modern networking that we all should un-learn. Showing off your knowledge and targeting the “important” connections is the wrong approach. If you genuinely want to be an effective networker, you have to shift away from looking at these interactions as transactional. That said, it’s still hard to find people to talk to, and even harder to know how to start up a conversation. I’ll give you tips that will help you work through those issues and ultimately make you more comfortable in new spaces with new people. You’ll come away from this presentation with advice you can put to use immediately.

Slides

Click here to watch

Session #4 Q&A

Presented by Manfred Steyer, Alex Rickabaugh, Vishal Kumar, Wesley Faulkner

Click here to watch

From Google Analytics to Universal deploy schematics!

Presented by James Daniels

Learn about some of the new features in AngularFire and how the Firebase team leveraged dynamic imports, ES Proxies, and new features in Angular 9 to build a more streamlined SDK.

Slides

Click here to watch

Revisiting a Reactive Router with Ivy

Presented by Brandon Roberts

The release of Ivy opens up new possibilities of routing in Angular. Optional NgModules, lazy loading components, and dynamically creating components on the fly. The Angular Router is very powerful already, but what if we took a fresh look at a reactive router in this new world. This talk talks about the history of the router, and the process of building a new reactive router.

Slides, Project

Click here to watch

A Journey into the World Of Machine Learning with TensorFlow.js

Presented by Aaron Ma

This talk is the flagship machine learning with TensorFlow.js that delivers unique learning with immersive projects that stretches your mind. We’ll start by learning the basics and perfect your knowledge of Machine Learning and TensorFlow.js by building a digit classifier. Then, we’ll develop our expertise in core TensorFlow.js concepts and Reinforcement Learning(RL) and develop a self-driving car that learns how to drive itself. We’ll finish off by adding a touch of the magic of neural networks to our Angular application by building an image classifier. (all demos made with 💖 using Angular 9+)

Slides

Click here to watch

Session #5 Q&A

Presented by James Daniels, Brandon Roberts, Aaron Ma

Click here to watch

Bazel + Angular Today

Presented by Jorge Cano

Slides

Click here to watch

Debugging Like a Boss with Angular 9

Presented by Anthony Humes

For the first time ever, Angular has implemented a robust debugging api (sorry, ng.probe doesn’t count) that make sense and works. Come and learn tips and tricks that will improve the way you debug your Angular apps using the console in Angular 9.

Slides

Click here to watch

INTO THE UNKNOWN

Presented by Craig Spence

Sven the reindeer and Olaf the snowman have a big problem! They’re creating a new TypeScript library, and they want to give developers who use their library the best possible experience. They know that TypeScript has incredible powers (they’re almost magical! 💫), but they don’t know exactly how to use them to their full potential.

They have so many questions! What is unknown? How is it different from any? How do you use infer? What are conditional types? Unions and Intersections?! It’s almost too much…

Thankfully Elsa, beloved Queen of Arendelle is a TypeScript master, and along with her sister Anna, they love to teach others all about type magic.

Come along with Elsa, Anna, Olaf and Sven, and learn all about advanced TypeScript typing by going INTO THE UNKNOWN 🎶❄️🎵

Slides

Click here to watch

A Whole New Way to Build Ivy Apps ⚡️

Presented by Eric Simons

Ever wish you could quickly prototype Ivy apps without slow npm installs & webpack builds? News flash: the Angular CLI can now run completely in-browser… and FAST. In this lightning talk we’ll explore the latest toolchain upgrades on StackBlitz & how they enable rapid web development!

Click here to watch

Session #6 Q&A

Presented by Jorge Cano, Anthony Humes, Craig Spence, Eric Simons

Click here to watch

Day Three

Keynote

Presented by Igor Minar, Minko Gechev

Slides

Click here to watch (part 1), Click here to watch (part 2)

The Control Container and I

Presented by Jennifer Wadella

Once I use the ControlContainer, my form life will change. Cause once you use the ControlContainer nested forms aren’t strange. No Rob Wormald is unproud of you, no Ward Bell acts ashamed. And all FormControls have to obey you when by the ControlContainer you’re acclaimed. And or this gift or this curse I have inside, maybe at last I’ll know why – when we are hand in hand, the ControlContainer and I.

Slides

Click here to watch

The Role of Effects in NgRx Authentication

Presented by Sam Julien

Building token authentication into an NgRx application can be overwhelming and confusing. Authentication is already a big, scary subject and so is NgRx. When you put them together, things get confusing fast. In this talk, we’ll do a comparison of how authentication in a vanilla Angular app differs from auth in an NgRx app. We’ll then see how the central nervous system of authentication shifts from a service in regular Angular to Effects in NgRx.

This talk will be practical and code-driven, leaving you equipped to tackle adding this feature to your NgRx application at work on Monday. You’ll learn how Effects can handle loading authentication state, navigate users to protected routes, and process tokens received from an identity provider. By the end, you’ll feel way better about tackling auth in NgRx!

Slides

Click here to watch

Stepping Up: Observable Services to Observable Store

Presented by Dan Wahlin

Observable Services (also known as Subject in a Service) provide a great way for components to subscribe to changes that occur in a service. But how do you step your app up to the next level and create a state store that also supports notifications?

In this talk Dan Wahlin will show a simple yet powerful option called Observable Store that works across all front-end applications (Angular, React, Vue.js, and more). Learn how to store your state, access it, work with immutable store state, provide state change notifications, the role of RxJS and Subjects, debugging options, and more.

Slides

Click here to watch

Session #7 Q&A

Presented by Jennifer Wadella, Sam Julien, Dan Wahlin

Click here to watch

The best 20 minute Angular & Firebase video you’ll ever see

Presented by David East

Angular and Firebase have been a great match since day one. That’s why AngularFire, the official Firebase library for Angular, is one of the most popular open source Angular libraries. Angular speeds up front end development and Firebase speeds up back end development. Together you can build awesome realtime UIs without ever needing to run your own server. This talk won’t be your run of the mill slide deck of features. You’ll learn how to get up and running with Firebase by watching the creator of AngularFire build an app. By the end of this talk you’ll know how to use Firebase to stream data in realtime, authenticate users, upload user content like images, run serverless code snippets, monitor app performance, and set up Google Analytics for Angular apps.

Click here to watch

State of RxJS

Presented by Ben Lesh

RxJS has been steadily growing in popularity and usage as reactive programming paradigms become more the norm. RxJS core team member Ben Lesh will talk about upcoming pipeline features for RxJS, ecosystem projects, community updates, and what’s new in RxJS with Angular.

Slides

Click here to watch

The State of NgRx

Presented by Brandon Roberts, Mike Ryan

Mike and Brandon are the creators of NgRx, a collection of high quality reactive libraries for Angular offering solutions for state management, side effects, and more. Learn how the NgRx platform grew in 2018 and get an updated glimpse into how NgRx plans to grow in 2020 in a new Ivy-enabled world.

Click here to watch

Session #8 Q&A

Presented by David East, Ben Lesh, Brandon Roberts, Mike Ryan

Click here to watch

Angular Universal & Our New Prerenderer

Presented by Wagner Maciel

Slides

Click here to watch

Angular Language Service: What’s New

Presented by Keen Yee Liau

A brand new version of Angular language service was released along with Angular version 9 this year, and in this lightning talk you’ll learn how to take advancate of some of the features.

Slides

Click here to watch

Non-Server Side Story: When JAMstack met Angular

Presented by Divya Tagtachian, Tara Z. Manicsic

It was an unlikely duo: rich, powerful Angular and fast, new-kid-on-the-block JAMstack. No one realized their hidden potential could be so powerful. For so long JAMstack was courted by React, Vue, vanilla JavaScript, but, could it be? All along Angular has been there, and Angular was just what the JAMstack needed to live web appily ever after!

Act I will give you a glimpse of the meet-cute of Angular and JAMstack where they realized just what a match they were for each other. Excited by their capabilities you’ll watch them pair code in Act II to create an amazingly light, fast, and functional web app using their two sets of special skills.

You too will be in awe of this beautiful pair.

Slides

Click here to watch

Session #9 Q&A

Presented by Wagner Maciel, Keen Yee Liau, Divya Tagtachian, Tara Z. Manicsic

Click here to watch

✉️ Subscription
Only new content, no spam.
Aspire. Accomplish. Online courses from $9.99