Angular - All Talks from AngularConnect 2019

September 27, 2019 14 min read Angular

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

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 Stephen Fluin and Igor Minar

Stephen and Igor team up to deliver this year’s Keynote session with the latest on Angular in 2019.

Deep Dive into the Angular Compiler

Presented by Alex Rickabaugh

For most of us, the Angular compiler is just a part of the build - it’s that thing that happens before the “real” work of compilation: 92% chunk asset optimization. But how does it actually work? What does the Angular compiler do when it’s taking our Angular code and generating Javascript?

Alex Rickabaugh has been preparing ngc for Ivy, and will unwrap some of the deep mysteries of the compiler. How does @NgModule really work? What are metadata.json files? Come learn these and many more secrets of the Angular compiler.

How to save the world … one line at a time?

Presented by Asim Hussain

The world is dying; you can help save it. Data Centres consume 2% of all the power in the world and produce about 3% of the greenhouse gases. This is set to treble in the next 10 years. When building apps, we focus on minimising costs, time to market, bugs, bundle size, application speed, SEO, but we spend almost no effort trying to minimise the damage our applications are making to the environment. In this talk, I’ll show you how to write, deploy and run a green web application.

Slides

Less servers for your Angular app

Presented by John Papa

Fast, secure, and easy … serve your angular app from cloud storage, deploy your APIs to serverless functions. The right tool for the right job - this is an important decision to make. You can build your Angular client and back-end infrastructure using Node.js and express with TypeScript and host it on a server with docker in the cloud. You can build your Angular app and your same APIs in serverless in the cloud. What’s the difference? Learn how these architectures work, where they each shine, and how you can leverage them today.

Angular and the OWASP top 10

Presented by Philippe De Ryck

The OWASP top 10 is one of the most influential security documents of all time. A couple of years ago, these 10 security issues impacted almost every web application. However, today, the web application landscape has vastly changed, and so has security.

In this talk, we explore the relationship between the OWASP top 10 and Angular applications. We will see how some issues are barely relevant in an Angular world. We will discover that Angular addresses some issues out of the box. Moreover, we will learn which issues require the most attention in an Angular application.

The science of authenticating Angular apps

Presented by Kim Maida

Authentication can be a daunting topic for many developers, including those of us working in the landscape of web apps. How does cookie-based authentication work? How does token-based authentication work? Don’t store tokens in local storage? New SPA authorization best practices from the IETF?! What are the shortcomings and advantages we need to consider when adding authentication to Angular Single Page Applications? I’ll also talk about the tools the Angular platform provides out of the box to make adding authentication and protecting routes easier for the developer.

Slides (video format to preserve animated diagrams)

My journey on the Angular Team

Presented by Manu Murthy

I’ve been on the Angular team for the last year and a half. Seen high and low moments. In this session, I’ll share real stories and what I learned while on the Angular team. Guiding principles, experiences and pitfalls that would help you in your projects.

How we make Angular fast

Presented by Miško Hevery

During Ivy’s development, the team has focused intensely on performance. Learn about how to think about and measure metrics such as execution speed, memory pressure, and compressibility. Learn about some of the gotchas we have encountered along the way while building the new compiler and runtime, and how our design choices around performance will drive user experiences in the future.

Slides

It’s Alive! Machine Learning writes your code! 🧠

Presented by Dominic Elm and Uri Shaked

As developers, we get paid to write bugs and then fix them. At first, it’s exciting, but after some time, bugs tend to start repeating, and that’s why we come up with new libraries, tools and framework all the time - to make things more exciting (and our lives easier). But what if the code could be written for us instead?

In this session, Dominic and I are going to employ state-of-the-art machine learning algorithms to automatically write TypeScript code. You will see how we trained a model using a large dataset of open-source code, and learn how we cleaned up and prepared the data. We will also go over the basics of machine learning as we show you what we did. It’s going to be mind-blowing, much fun, and a little bit dangerous. Are you prepared?

Slides

The architecture of components: Managing complexity without a State Management Solution

Presented by Erin Coughlan

In the past few years, centralized state management (NgRx and others) has grown in popularity, with some teams saying it saved their application while others swearing never to use it. How far can we reduce complexity without a Reducer?

This talk will show you how to build your application in small, manageable chunks that increase reusability. You will learn how to create simple interfaces between components and maintain a single, focused responsibility all without a state management solution.

Slides

Finding Angular

Presented by Elana Olson

Learn how to swim in the big blue sea! Grab your fins and take a dive into the Angular ecosystem to discover the best practices for building web applications. Angular.io’s recently updated Getting Started guide enables new developers to hit the ground running on day one. In addition, Angular’s new search engine, Angular Ecosystem, brings together best practices and community tooling to allow developers to compare recommend resources and improve collaboration across the Angular world.

Slides

The secrets behind Angular’s lightning speed

Presented by Max Koretskyi

Angular developers rarely have the need to write super optimized code. In application development we tend to favor readability over optimization. But this approach doesn’t guarantee fast execution of the code. With frameworks, the situation is reversed. Frameworks have to be really fast. Interestingly, there are techniques that make JavaScript code run faster. You’ve probably heard about monomorphism, bit fields or bloom fliters, right? Maybe you’ve even used some of them. Over the past year I’ve seen them all and a bunch of other interesting techniques while reverse-engineering Angular. In this talk I want to share my findings with you. You may end up applying this knowledge at work or, who knows, may even use it to make Angular run even faster.

Mocking made easy

Presented by Dave Cooper

Injecting mock data into web applications is still an absolute pain in 2019. I’ve come up with some opinionated opinions and built some cool things to hopefully tackle that problem. Join me in a live coding journey to hopefully change your mind about how you’ve been dealing with mock data until now :)

Profiling Angular apps like a shark

Presented by Gil Fink

As front-end developers we strive to build fast and fluid web apps. But how can you find performance problems or memory leaks? How do you profile a web app or Angular oriented app? In this session you will get to know how the browser works. Then, you will learn how to use that information to profile web apps and Angular oriented apps.

Offline first in Angular

Presented by Marta Wiśniewska

Are your apps fast and stable when the network isn’t? Let’s take a deep dive into Progressive Web Apps and Offline First approach! I’ll show you some tricks how to handle offline state and manage your app and its resources in various network conditions. We’ll build fast and reliable apps using Angular and PWA features.

I’ll show how build a PWA using Angular with Offline First approach. I’ll introduce fundamentals of this strategy and show how to manage an app’s resources in various network conditions, how to use PouchDB and CouchDB for data sync and make an app fast and reliable. I’ll also share useful web APIs to do this.

Slides

Automating your Angular projects with Schematics

Presented by Brandon Roberts

When building Angular applications, each project is different but there are things you can do to provide some consistency. Angular Schematics provide you a way to standardize on how your apps and libraries are constructed, generate custom code, adding custom install logic and handle upgrades. This talk shows you how schematics work, how to write schematics, including migrations to upgrade your projects automatically.

The coming FAD: Future of accessibility for developers

Presented by Gerhard Boer

Currently, there is a specification floating around on GitHub called the Accessibility Object Model (AOM). This specification will make it easier to make applications more accessible, by leveraging the power of JavaScript. The AOM specification will allow for a dynamic and easy to maintain application without having to diminish the Accessibility. There is also support for ShadowDOM & WebComponents, something ARIA is unable to do at the moment.Other cool features include processing specific events from Assistive Technologies, which means giving the user a better experience using the web application. Even better, it will be possible to make the HTML5 Canvas accessible.

This basically means that we can allow people to play games using Assistive Technology. In the end, this specification will allow the developer to apply the Inclusive Design Principles in a familiar way, through javascript. In this talk we’ll go over the current technology and how browsers process application to make it available for Assistive Technology, and what the AOM will solve and add to the current state of accessibility.

Day Two

Keynote

Presented by Minko Gechev

Minko takes to the stage together to share the latest technical Angular updates.

Slides

GitHub at scale: How Angular manages community contributions and repositories

Presented by Joey Perrott

Ever wondered how the Angular team manages the hundreds of issues and pull requests we receive? Come by and gain some insight into the processes and tooling we use to do our best as we build Angular and engage with the community. We’ll cover some of our pain points, successes and touch on some ideas we have for what else we can try to do.

Slides

Let’s build a form around it

Presented by Sani Yusuf

Reactive Forms are a mainstay in the Angular ecosystem yet a lot of developers limit their usage to just Login pages or traditional input collection. In this talk, I will showcase how you can take advantage of the full power of Reactive Forms to build some really powerful state-driven solutions. This talked will be based on real-world personal experience of building complex data-driven healthcare solutions with Reactive Forms. I will also showcase some really common use cases in a lot of angular applications that may not be obvious for the application of Reactive Forms. We will explore the hierarchy of Reactive Form Controls and showcase some smart ways to implement custom validation inside of your Angular application. The main aim of this talk is to enable users to be aware of what is at their disposal and how they can take advantage of the full power of Reactive Forms.

Performance optimizations in Angular

Presented by Mert Değirmenci

Angular and RxJS are cool technologies that make it easy to develop web pages. Unfortunately, they also make it easy to build an inefficient page that will bring the browser to its knees. While rewriting Google Cloud Platform (GCP) in Angular, we have observed and tackled significant performance degradations. In this talk, a summary of learnings and common pitfalls will be shared.

Slides

The art of humanizing Pull Requests (PR’s)

Presented by Ankita Kulkarni

Code reviews are an important part of a developer’s life. It’s very easy to perform code reviews, but hard to do it with empathy. In today’s online world, online criticism can be misinterpreted easily. Hence in this talk, we will go through what is a pull request, how to effectively create one, how to give constructive feedback and also how to respond to one using empathy. This talk will also teach you techniques to breakdown your feature, testing strategies, learning when to take the conversation offline, resolving disagreements, going above and beyond in your job as a developer and more. We often forget that we are reviewing our co-workers PR who we like to hang out with.

After this talk, you will learn how your choice of words will help you get the point across but also build a positive relationship with your team and you are all set to focus on the most important thing i.e. writing great software.

Slides

Creating a better culture in tech through diversity and inclusion

Presented by Tracy Lee and Rob Ocel

Everyone is talking about diversity and inclusion these days. But why does it really matter? And if you’ve had a hard time finding women to hire, how do you solve that problem? What are some ways companies have done D&I right, and how can you learn from them? We’ll explore some practical reasons why you should be aware of how D&I impacts your business and easy tips to begin changing how you and your team think today. We’ll also cover do’s and don’ts of how to build an inclusive team culture and creating a sustainable environment that includes everyone.

Power in constraints

Presented by Rado Kirov

Have you ever worked in a system that didn’t let you do something? Did that leave you frustrated and wanting to rant on Twitter? This talk will help you cope with that frustration by showing you the number of wonderful things constraints provide - performance, security and ease of change. We will show examples from TypeScript, Bazel, and Angular where the tool/frameworks critically rely on the inability to do something, to allow even better outcomes.

Slides

How Angular works

Presented by Kara Erickson

Angular is many things to many people, but at its heart, it’s a set of tools to render content, organize applications, and manage data. Find out about how Angular works under the hood and get insights into the challenges we faced and the decisions we’ve made by learning how everyday Angular features from change detection to queries actually work.

Slides

ngTemplateOutlet: The secret to customisation

Presented by Stephen Cooper

Are you trying to create a customisable component with Angular? TemplateRefs and the ngTemplateOutlet directive could be the secret you are missing to achieve full user template customisation. Join us in this talk to see how we transformed our components to achieve this.

We will show how TemplateRefs enable you to provide default templates whilst accepting custom display templates that seamlessly integrate into your component. Users can even target variables from your component’s internal scope that you choose to expose. Most importantly we will examine the differences between ngTemplateOutlet and ngInclude (Transclusion) and give examples when you should use each approach to template customisation.

After this talk you will have all the knowledge and skills you need to start using ngTemplate and ngTemplateOutlet in your own components and wonder how you ever survived without them!

Building with Ivy: Rethinking Reactive Angular

Presented by Mike Ryan

Ivy is making fundamental changes to the way Angular renders our applications and in doing so unlocks new patterns and techniques for writing components. Explore how these new techniques allow developers to layer in reactive programming at the view level with higher order components, observable life cycle methods, and Zone-less change detection. In addition to these new changes you will also get a sneak peak into how Ivy may transform state management libraries like NgRx.

Slides

Building Angular apps with internationalization (i18n) in mind

Presented by Naomi Meyer

At Adobe we build products for the world, this talk with provide a high level overview of internationalization (i18n), globalization (g11n), and localization (l11n) learnings. Why these are important and how to implement in design, UX, and within the codebase - using Angular code examples and 3rd party library recommendations.

Quantum Facades: Why NgRx Facades are terrible or awesome depending on how you observe them

Presented by Sam Julien

NgRx facades are terrible! No wait, they’re the best thing ever! What the heck is a facade, anyway? You may have heard recently about a topic whizzing around the Angular community: facades in NgRx. But are facades good or bad? Much like the age-old controversy of whether light is a particle or a wave, the answer depends on how you look at them. In this talk, you’ll learn what facades are, why you should embrace them, why you should never, ever use them, and how to implement one without making Mike Ryan wake up in a cold sweat somewhere in Alabama.

Slides

Migrating breaking changes with TSLint and Schematics

Presented by Stanimira Vlaeva

Have you ever been scared to update because of breaking changes? Worry no more - the Angular CLI comes to rescue! The command ng update will migrate your project to the latest, automatically applying all necessary changes along the way. But… what kind of sorcery is this?, you may be wondering. Let’s demystify the update process! At the end of this session, we will have the answers to the following questions: What is a TSLint rule and how to write one? What are these schematics things everyone is talking about? How to combine the powers of TSLint and schematics to write our own migration scripts?

Angular Panel

Presented by the core team