
Paths
ng-conf: Hardwired 2020
ng-conf is the world’s largest conference devoted specifically to Angular.
What you will learn
- Angular Language Service
- Bazel
- Angular Universal
- NgRx
- RxJS
- Ivy
Pre-requisites
None.
Keynotes
Keynote: Community Update and What's New in v9
40m
Description
Join Jules Kremer and Kara Erickson for the ng-conf Hardwired Day 1 keynote.
Table of contents
- ng-conf Hardwired Day 1 Keynote
Keynote: The State of Angular Deployment, SSR, and Prerendering
29m
Description
Tune in for The State of Angular Deployment, SSR, and Prerendering keynote.
Table of contents
- ng-conf Hardwired Keynote - The State of Angular Deployment, SSR, and Prerendering
Breakout Sessions
A Journey into the Worlds of Machine Learning
21m
Description
This talk is the flagship for machine learning with TensorFlow.js that delivers unique learning with immersive, mind-stretching projects. We’ll start by learning the basics and perfecting your knowledge of Machine Learning and TensorFlow.js by building a digit classifier. Then, we’ll develop your 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 the Angular application by building an image classifier.
Table of contents
- A Journey into the Worlds of Machine Learning
A Philosophy for Designing Components with Composition
22m
Description
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.
Table of contents
- A Philosophy for Designing Components with Composition
A Whole New Way to Build Ivy Apps
9m
Description
Ever wish you could quickly prototype Ivy apps without slow npm installs and webpack builds? News flash: The Angular CLI can now run completely in-browser and it's FAST. In this lightning talk, we’ll explore the latest toolchain upgrades on StackBlitz and how they enable rapid web development.
Table of contents
- A Whole New Way to Build Ivy Apps
Angular Language Service: What's New
9m
Description
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 advantage of some of the features.
Table of contents
- Angular Language Service: What's New
Angular Universal & Our New Prerenderer
19m
Description
Join Wagner Maciel in this talk about Angular Universal and the new prerenderer.
Table of contents
- Angular Universal & Our New Prerenderer
Bazel + Angular Today
19m
Table of contents
- Bazel + Angular Today
Common Challenges Facing Angular Enterprises
22m
Description
There are common challenges facing Angular teams who are building applications at scale. In this talk, Stephen will demystify these questions, share what is known, and what the teams need your help with.
Table of contents
- Common Challenges Facing Angular Enterprises
Debugging Like a Boss with Angular 9
22m
Description
For the first time ever, Angular has implemented a robust debugging API (sorry, ng.probe doesn’t count) that makes 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.
Table of contents
- Debugging Like a Boss with Angular 9
Deep Dive into Angular CLI Builders
21m
Description
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 look at how this happens and take a look at the API involved so you write your own builder.
Table of contents
- Deep Dive into Angular CLI Builders
Domain-driven Design with Angular
1h 53s
Description
In this interactive session, we'll 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 and how to combine these ideas with best practices from the Angular community. First, we define a strategic and tactical design for the case study, which we'll then implement with a monorepo that reflects our sub-domains. Then, you'll 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.
Table of contents
- Domain-driven Design with Angular
Facing the Music
20m
Description
At Delta, Angular code is put to the test at unprecedented scale. This talk will cover the types of challenges Delta faces and how they address them to successfully support their mission critical e-commerce app with millions of daily users.
Table of contents
- Facing the Music
Farewell Entry Components
5m
Description
With Angular Ivy, entry components are no more. Join this talk to reminisce about your time with entry components and learn how these type of components are being handled today in Angular 9.
Table of contents
- Farewell Entry Components
From Google Analytics to Universal Deploy Schematics
24m
Description
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.
Table of contents
- From Google Analytics to Universal Deploy Schematics
Getting through the Awkwardness of Networking
28m
Description
There’s a lot about modern networking that we all should unlearn. 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.
Table of contents
- Getting through the Awkwardness of Networking
How Ivy Will Improve Your App Architecture
19m
Description
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. In this talk, you'll encounter 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.
Table of contents
- How Ivy Will Improve Your App Architecture
HttpInterceptors: The Room Where It Happens
20m
Description
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 this talk, you’ll be in the room where it happens.
Table of contents
- HttpInterceptors: The Room Where It Happens
Into the Unknown
23m
Table of contents
- Into the Unknown
Non-server Side Story
20m
Description
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! You'll get glimpse of when Angular and JAMstack realized just what a match they were for each other. Excited by their capabilities, you’ll watch them pair code 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.
Table of contents
- Non-server Side Story
Preload Strategies: Step in Time, Step in Time!
20m
Description
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.
Table of contents
- Preload Strategies: Step in Time, Step in Time!
Resilient Angular Testing
25m
Description
How would you like to save time while improving your code design? What about having future-proof upgrades of your third 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.
Table of contents
- Resilient Angular Testing
Revisiting a Reactive Router with Ivy
18m
Description
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 already powerful, but what if we took a fresh look at a reactive router in this new world? This talk covers the history of the router, and the process of building a new reactive router.
Table of contents
- Revisiting a Reactive Router with Ivy
State of NgRx
23m
Description
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.
Table of contents
- State of NgRx
State of RxJS
32m
Description
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.
Table of contents
- State of RxJS
Stepping up: Observable Services to Observable Store
19m
Description
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.
Table of contents
- Stepping up: Observable Services to Observable Store
Stronger Type-checking in Templates with Ivy
21m
Description
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.
Table of contents
- Stronger Type-checking in Templates with Ivy
The Best 20 Minute Angular & Firebase Video You'll Ever See
21m
Description
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.
Table of contents
- The Best 20 Minute Angular & Firebase Video You'll Ever See
The Control Container and I
16m
Description
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.
Table of contents
- The Control Container and I
The Makings of Scully
25m
Description
In this talk, peek under the covers of the new Angular Static site generator.
Table of contents
- The Makings of Scully
The Phantom of the Template Error
6m
Description
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.
Table of contents
- The Phantom of the Template Error
The Role of Effects in NgRx Authentication
18m
Description
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!
Table of contents
- The Role of Effects in NgRx Authentication
Why Should You Care About Higher Order Mapping Operators
21m
Description
What is a higher-order mapping operator? When would you use one? 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 an “inner Observable” is, or what a higher-order mapping operator does, this session is for you.
Table of contents
- Why Should You Care About Higher Order Mapping Operators
Workshops
Workshop: Angular Basics Day 1
5h 16m
Description
Angular is a robust, highly performant, scalable, and batteries-included framework for building mobile, desktop, and web applications. In this hands-on workshop, you will learn from Brian Love as he teaches you the fundamentals of Angular. You can expect to learn project structure and architecture, the basics of TypeScript, RxJS, directives, components, templating, services, pipes, forms and routing. At the end of this 2-day ng-conf Hardwired workshop, you will be able to effectively build applications using Angular following best practices.
Table of contents
- Workshop: Angular Basics Day 1
Workshop: Angular Basics Day 2
6h 7m
Description
Angular is a powerful and capable frontend framework. In fact, it’s so full-featured that it can feel a little overwhelming when you first dive in. Come learn the details from two Google Developer Experts. Let Aaron and Brian share their expertise with you as you blast off with Angular. Attendees will cover many topics, including TypeScript Basics, RxJS Basics, the Angular CLI, Project Structure and Architecture, Components and Templates, Services, Pipes, Forms, HTTPClient, Directives, Routing, Animations, and Testing.
Table of contents
- Workshop: Angular Basics Day 2
Workshop: Angular in the JAMstack
3h 44m
Description
The JAMstack is a modern architecture that helps you create secure, dynamic sites faster. It uses JavaScript, APIs and prerendered Markup, served without web servers. Using Angular on the JAMstack is a “ripe” concept that’s taking off fast. This workshop will cover the core concepts and benefits of the JAMstack, so you can confidently tell your co-workers, “I know exactly what the JAMstack is!” You'll learn how to code individual JAMstack sites using Angular and how to handle search, forms, data, serverless functions, and more, all through coding out an application deployed with CI/CD for you to show off to friends and family.
Table of contents
- Workshop: Angular in the JAMstack
Workshop: Cross Platfom with Ionic
3h 30m
Description
Ionic has revolutionized the way web developers take part in making cross platform native apps. Now, with the rise of Progressive web apps, developers are moving back from the native platforms and returning to the web. Ionic continues its work in enabling developers to create not only high quality native apps but also high quality progressive web apps that can run everywhere.
Table of contents
- Workshop: Cross Platfom with Ionic
Workshop: Develop at Scale with Nx Monorepos
4h 29m
Description
In this workshop, Nrwl co-founders and creators of Nx, Jeff Cross and Jason Jean, will teach you the key skills to effectively develop in an Nx Workspace with many projects and many contributors. Some of the key concepts and techniques that they'll cover include: Monorepo principles for development at scale, guidelines for partitioning projects and constraining the dependency graph, using custom workspace schematics for consistency and speed, managing cross-cutting breaking changes, optimizing CI environments, and release strategies. This workshop assumes a basic understanding of Nx.
Table of contents
- Workshop: Develop at Scale with Nx Monorepos
Workshop: Learn NgRX from the Creators of NgRX Day 1
4h 33m
Description
Do you know Angular but want to embrace more reactivity in your applications? Or maybe you already know NgRx and want to level up? In this two day ng-conf Hardwired workshop, you will go from inactive to reactive when building Angular apps. The creators of NgRx, Mike Ryan and Brandon Roberts, will show you a ground-up approach to building scalable applications using the NgRx architecture. This workshop teaches you how to use NgRx and how to think “reactively” when building applications. Walk through the fundamentals of NgRx with in-depth discussions, exercises, and code labs. Learn about writing actions to describe your application flows, reducers to handle state changes, and effects to communicate with your backend APIs. Whether you’ve just started learning or you are already building applications with NgRx, there will be something for you.
Table of contents
- Workshop: Learn NgRX from the Creators of NgRX Day 1
Workshop: Learn NgRX from the Creators of NgRX Day 2
4h 54m
Description
Do you know Angular but want to embrace more reactivity in your applications? Or maybe you already know NgRx and want to level up? In this two day ng-conf Hardwired workshop, you will go from inactive to reactive when building Angular apps. The creators of NgRx, Mike Ryan and Brandon Roberts, will show you a ground-up approach to building scalable applications using the NgRx architecture. This workshop teaches you how to use NgRx and how to think “reactively” when building applications. Walk through the fundamentals of NgRx with in-depth discussions, exercises, and code labs. Learn about writing actions to describe your application flows, reducers to handle state changes, and effects to communicate with your backend APIs. Whether you’ve just started learning or you are already building applications with NgRx, there will be something for you.
Table of contents
- Workshop: Learn NgRX from the Creators of NgRX Day 2
Workshop: Reactive Fundamentals with RxJS Day 1
4h 51m
Description
Observables are a powerful tool for building asynchronous code. While Observables are just as easy to start using as Promises, they are significantly more difficult to master. This workshop will walk you through authoring your first Observables and your initial steps through the long list of Operators that exist. This workshop will cover the following: Reusability of Observables, composing child Observables, cancellation via SwitchMap, completion vs. incomplete (Subscription Tracking), operators, Subjects and BehaviorSubjects, Async Pipe, and OnPush Change Detection.
Table of contents
- Workshop: Reactive Fundamentals with RxJS Day 1
Workshop: Reactive Fundamentals with RxJS Day 2
5h 45m
Description
Observables are a powerful tool for building asynchronous code. While Observables are just as easy to start using as Promises, they are significantly more difficult to master. This workshop will walk you through authoring your first Observables and your initial steps through the long list of Operators that exist. This workshop will cover the following: Reusability of Observables, composing child Observables, cancellation via SwitchMap, completion vs. incomplete (Subscription Tracking), operators, Subjects and BehaviorSubjects, Async Pipe, and OnPush Change Detection.
Table of contents
- Workshop: Reactive Fundamentals with RxJS Day 2