Day One
Opening Remarks
Keynote
Presented by Brad Green, Miško Hevery and Kara Erickson
Authentication with NgRx
Presented by Brandon Roberts
As the lead developers of NgRx, the number one question we get asked is how to implement authentication with a reactive store. In this talk, Brandon sets out to answer this question by building an auth-based app with NgRx Store, Router, and Effects.
Make your JS app search engine friendly
Presented by Igor Minar
The internet has around 4 billion users, most of them come online to find information and answers. Is your application accessible to search engines? Can your users access information your application provides? Do you really need server-side rendering to be successful? In this talk we’ll cover answers to these questions as well as gotchas and real-world stories from running angular.io, a client-side-only PWA visited by over a 1 million unique visitors each month.
How to hack an Angular app?
Presented by Asim Hussain
Thought hacking was hard? It’s not, it’s easy and he is going to show us how! In this episode of CSI Salt Lake City, we’ll investigate a series of hacking stories and break them down step-by-step to see exactly how they did it. By the end, you’ll walk away a little bit more scared and a lot more prepared with some great practices you can apply immediately to your own applications.
Increasing Performance – more than a pipe dream
Presented by Tanner Edwards
You just finished your awesome component only to realize it is dog slow! While there are a number of things that could be causing this, the most common is calling functions from your template. These function get evaluated every time change detection run and can be a real ng-buzzKill. In most cases, changing that function to a pipe can get your app’s performance back on track. We’ll talk about both why functions slow down your app, and why/how pipes make it faster.
Reusable Animations
Presented by Sam Brennan
In this lightning talk we will go over how to take your animations to the next level. By using reusable animations, your project will not only be more efficient but more manageable than it was before learning these best practices. (and of course, this will be 80’s themed!).
Angular, Docker and Containers….in 5-ish Minutes
Presented by Dan Wahlin
In this 5-minute (ultra-focused) talk Dan Wahlin will show you how to get started “containerizing” Angular applications using Docker containers. While we can only scratch the surface of what’s possible in 5 minutes, you can learn more in the full 1-hour session at ng-conf.
StackBlitz + Angular: A Better Way to Build PWA’s
Presented by Albert Pai and Eric Simons
Building & debugging progressive web apps can be a painful experience, especially on mobile devices. In this session, we’re excited to announce a suite of new developer tools that make developing PWA’s a total breeze—all of which run entirely in your browser, no setup or configuration required.
Adventures in Angular Podcast
Presented by Charles Max Wood, Joe Eames, John Papa, Lukas Ruebbelke, Alyssa Nicoll, Ward Bell and Shai Reznik
Grid Layout: CSS is Awesome
Presented by Dave Geddes
CSS Grid is here and it’s epic. Let’s take a quick look at what makes this game-changing tech so amazing, and see if we can’t use it to solve front end development’s ancient unsolved mystery.
Angular CDK and Material in 2018
Presented by Jeremy Elbourn
What’s new in Angular CDK and Angular Material? Let’s find out by doing some live coding with the newest additions!
I switched a map…
Presented by Pete Bacon Darwin, Shai Reznik and Mike Brocchi
If you always forget what switchMap does, or when exactly should you use it, this talk will make sure you’ll NEVER again forget what switch, map and switchMap do… in a very unusual and entertaining way.
Google’s serverless tools
Presented by Bret McGowen
Whether your app is mobile, web, or cloud native, Google Cloud Platform and Firebase have an entire suite of serverless tools that can help. What is serverless? It means cloud power available instantly and transparently, without having to create any virtual machines or manage scaling or application runtimes. See how GCP and serverless can make your app’s backend more powerful, easier to build, easier to manage, and cheaper. We’ll explore compute products like Google Cloud Functions, big data tools like Firestore and BigQuery, and machine learning tools.
Modules are not what you think they are
Presented by Maxim NgWizard Koretskyi
Some developers believe that Angular has different types of modules like shared, feature or routing module. They’d be surprised to learn that Angular has none. Using a simple application, this talk will demonstrate how Angular uses a compiler to merge all modules into a single injector. We’ll learn where lazy loaded modules fit into this picture and why modules hierarchy and encapsulation simply don’t exist at runtime. By the end of the talk, you’ll have enough knowledge to avoid unexpected results and will be able to link, load or compile modules like a pro.
Elements in v6 and Beyond
Presented by Rob Wormald
The first version of Angular Elements is now available. Learn about how we use Angular Elements on angular.io and about our plans for the future.
Super-Powered, Server-Rendered Progressive Native Apps
Presented by Nathan Walker and Jeff Whelpley
Angular is built from the ground up as a multi-platform JavaScript framework. You can use Angular to build an app for almost any environment. In this talk, we will go over a “real world”, open source app built in Angular that renders on 3 different platforms: the browser (i.e. your typical web app), the server (via Angular Universal) and native mobile (via NativeScript). Learn from two of the leading pioneers in Angular multi-platform development to establish a solid set of pros and cons to various approaches in project setup and organization. Don’t go wandering down the rabbit hole any longer but rather find the light at the end of the tunnel in this talk.
Testing Best Practices for Angular Applications
Presented by Yi Qi
In this talk we will look at the best practices while testing Angular Applications like setting up AOT for unit tests and go through testing strategies for specific situations involving Router, Animations, Component with OnPush etc. We will also look at moving away from ControlFlow for Protractor tests and using async/await.
Building a Karaoke Machine
Presented by Sergio Cruz
Every framework wants to rule the world, but only one framework can help us build a classic 80’s karaoke machine—Angular. We’ll use Angular, the HTML5 Web Speech API, and RxJS to create a web app to select songs, sync lyrics, and grade singers as they sing along. Watch one audience member bite the dust as they jump on stage at the end to test the final application and sing along to classic 80’s hits. Don’t stop believing in the power of Angular.
Day Two
Reactive Testing Strategies with NgRx
Presented by Brandon Roberts and Mike Ryan
In the world of Angular applications, testing is key to protect against regressions and validating functionality. With apps becoming more reactive with observables, testing how these independent pieces work becomes more important. Learn how these testing patterns and practices will ease the burden of testing your Angular application. From unit testing presentation components, integration testing with smart components, testing observables, state management, and end-to-end tests, you can use these strategies to make your testing your reactive application easier and to simplify your testing triangle.
How to score 100 on an Angular PWA Audit
Presented by Anas.R.Firdousi
Angular now ships with service worker modules that makes building Progressive Web Apps (PWAs) easier than ever before. In this talk, we will live code the standard test app for PWAs “The Hacker News PWA”. You will show how to build an impressive app by using the angular worker modules to score a 100 on progressive web app audit and also how to customize the worker to fit the needs of your specific application. Hacker News PWA or HN-PWA is the modern gold standard for comparing performance and usability across various PWAs built with different JS frameworks. This talk will take a step-by-step approach of converting a regular app to an Angular PWA and then challenge the browser audit tool to score a max on PWA, Performance, Accessibility and best practices. This is more of a code show than a talk show – Buckle up as we take an information intensive fun-filled ride to the amazing world of progressive web apps with Angular!
Optimizing an Angular application
Presented by Minko Gechev
A hands-on training on optimizing the runtime performance of an Angular application. We will go through several steps, including: – Using OnPush change detection strategy. Here we’ll go through the gotchas of the strategy. – Optimizing the watched by Angular expressions. We’ll use pure pipes and memoization, explaining the difference. – Changing the change detection behavior for handling real-time updates. We will run code outside the Angular’s zone.
SIX APPS ONE CODE WITH ANGULAR
Presented by Sani Yusuf
You and your team have this great Idea and you have your users using different devices and operating systems to access the same application. Some users are on the Web, some on Mobile some of their Desktop and you also have to worry about what operating system they are on and also have to consider how your application is presented on each device & operating system.
What if there was a way to code your app without worrying too much about operating systems/devices/screen sizes and just focusing on getting your idea across to your users regardless. Join Sani on a journey where he shows us how to use Angular, Ionic & the PWA standard to build apps for IOS, Android, Windows, Web, Mac & PC with the same code all using just HTML5.
Jest Testing
Presented by Jesse Sanders
There have been lots of talks about proper ways of testing our Angular applications but no one in the Angular community is talking much about the jest.js snapshots and how we can effectively and quickly test our applications. Snapshot testing allows us to quickly validate our UI when given a deterministic state. Snapshot testing also allows us to validate our reducers post state quickly and easily. This 20-minute talk is a great overview on how to quickly integrate jest.js into our angular-cli app, what files to check in, and how to write tests that effectively validate state and ui rendering.
VR Hero – Ready Observable One
Presented by Alex Castillo and Uri Shaked
Welcome to the amazing world of the Web, where everything is possible! In this session, we are going to combine Angular, RxJS and Firebase with cutting edge web technologies to create a collaborative Virtual Reality gaming experience. We will get a good taste of WebVR and Web Audio, and even connect a smart guitar using Web Bluetooth. Then we will all put on Cardboard VR viewers, and play together. Join us for some hardcore live-coding, cutting-edge technologies, and a unique VR experience!
NgRx Schematics
Presented by Vitalii Bobrov
NgRx is the great way to manage complex app state. Unfortunately, it is not a silver bullet and as the downside, it requires so much boilerplate code. Developers are lazy and machines must work for us. NgRx Schematics is a huge time-saver. It will automate NgRx code generation and give you the ability to focus on application business logic.
VS Code Can Do That?
Presented by Burke Holland
Visual Studio Code is on 🔥. Everybody ❤’s this unexpected Electron-based text editor, and for good reason: it can do A LOT. It can compile Angular templates on the fly, debug native mobile applications, execute JavaScript inline and so much more! In this session, we’ll take a look at the most powerful features and plugins in Visual Studio Code, many of which, nobody knows about. This is Visual Studio Code like you’ve never 👀 it before.
N Things You Didn’t Know About the Router
Presented by Deborah Kurata
The Router can do so much more than just route the user between the views of our application. In this intermediate-level presentation, we’ll explore many facets of routing in an Angular application, and cover a lot of awesome yet practical techniques.
Good Action Hygiene with NgRx
Presented by Mike Ryan
The Action is the building block of all NgRx libraries. We use actions to describe events that arise in our applications by including enough information in an action to make a state transition or perform a side effect. Learn how to write clean actions and avoid common anti-patterns.
Complex Forms Build Character
Presented by Natasha Carlyon
It often starts simply. You add an input field for a name, perhaps you add some validations for a password, and then suddenly, you’re grappling with nested forms and dynamic data. To create a smooth user experience, the form spans over multiple pages, where the user can save/reset her progress at each step. This simple form has transformed into a formidable beast.
For this presentation, We will start with a simple, prepared reactive form that allows users to create a role-playing character similar to ones you would find in Dungeons and Dragons. The form will slowly grow in complexity with a nested form and dynamic data. In order to get the most out of this talk, you should have basic familiarity with Angular’s reactive forms and HTTP calls. As long as we know how to write a reactive form with an input field and a submit button that makes a post request upon being clicked, then we should be fine.
Build a look alike engine
Presented by Simona Cotin
You’ve always thought you looked like Marty McFly but your friends say you look like Yoda, take the 80s doppleganger challenge and find out for sure! In this talk, We’ll show how to use a little bit of machine learning and serverless tech to build an application that can match faces to their dopplegangers. All written with Angular and Node!
NgRx Complex Form
Presented by Jesse Sanders
This talk is a deep dive into how to handle complex forms using ngrx. We will start out with several use cases in our sample app that typically cause problems such as race conditions, dynamic forms, and duplicated data. This presentation is a combination of slides explaining use cases, core concepts, and possible solutions. We will be moving between the slides and live coding to show the problem conditions and then fix the problem by restructuring or modifying the code. Everyone wants to learn more about ngrx and hw to implement complex forms while understanding how to avoid some of the common pitfalls we often run into.
Angular Performance Workshop
Presented by Manfred Steyer
Angular is impressively fast. However, in some situations, for instance, when building complex enterprise applications, this is insufficient. In these cases, Angular provides several approaches to dramatically increasing performance. This workshop shows how to use these possibilities by means of a systematically optimized application.
Use the Custom Operator Force; Become an RxJS Jedi
Presented by Ryan Chenkie
In this workshop we’ll dig into RxJS by crafting our own operators. This will be hugely beneficial for you because, to do so, we’ll really need to get to know some of the more advanced native operators. If you want to become an RxJS Jedi by getting to know RxJS inside and out, this workshop is for you.
Writing A Custom Angular Build
Presented by Steve Belovarich
In this session, we will learn how to architect a custom Angular build. We will write a NodeJS script that AOT compiles and bundles an app. You’ll learn how to use the AOT compiler for development and production and see the benefits of optimizing with Closure Compiler. By the end of the workshop, you will have the tools to be able to implement your own custom build script for Angular.
Reducing the Boilerplate with NgRx
Presented by Brandon Robert and Mike Ryan
Action interfaces, action factories, action union types, state interfaces, reducer functions, selectors, effects, and more. Oh the boilerplate! NgRx solves real problems when building reactive Angular apps at the cost of multiplying your file count by 100. Learn how to effectively reduce the boilerplate without sacrificing flexibility.
Streamlining the AngularJS-to-Angular migration
Presented by Hanyu Xiao
Many organizations that have AngularJS applications in production face a tough choice: stay put and miss all the advances that Angular has to offer, or start the migration journey that is often no easier than rewriting the entire application. While there are online documentation and tutorials that describe the general migration process, they are often too high level to be practical, or too tedious to follow with multiple manual steps.
Migrating a large code base requires a lot of resources and commitment, and doing everything manually is a non-starter. This is when tooling can be a big help. This talk will walk through a migration example, showcasing Angular Copilot, an Electron based tool for teams to plan, manage, and automate the migration process.
Advancing Unit Tests
Presented by Courtney Christian
This fun and informative talk would discuss and demonstrate writing unit tests for components which utilize the more advanced Angular API’s such as OnPush, ContentChildren/ViewChildren, etc. The talk would include an example/demo for unit testing onPush change detection components and other advanced components.
NgRx Selectors
Presented by David East and Todd Motto
Selectors are the best-kept secret in NgRx. They allow you compute state from your store, which acts like a view model. This removes computed properties from the store and into their rightful place: a simple function. Selectors are easily tested, memoized for performance, and compose-able for re-usability. Selectors are easy to create and work well with teams. We’ve used them in high traffic production apps like the Firebase Console. By the end of this talk you’ll shake any Store structure fears you once had and move forward boldly with selectors.
Global Thermonuclear Templates
Presented by Mike Brocchi
Imagine being able to wield incredible power directly from your computer that will make your life as a developer easier. The Angular CLI creates a lot of files for you, but what if you wanted to tweak what gets generated or generate something completely different?
Firebase/Cloud Functions/ML Workshop
Presented by Jason Dobry
In this workshop, you’ll learn how to use the Firebase SDK for Google Cloud Functions to improve an AngularFire Chat Web app and how to use Cloud Functions to send notifications to users of the Chat app, use the Google Cloud Vision API to process images, and use the Google Natural Language API to process chat messages.
Building components with the Angular Component Dev Kit
Presented by Elad Bezalel and Kristiyan Kostadinov
The Component Dev Kit is a collection of robust, well-tested, versatile and performant APIs that 7 are the foundation of the Angular Material component library. It is written and maintained by the Material team and is intended to be a tool for building everything from small, one-off components, to complex UI libraries that are shared across teams and products. The CDK abstracts away all the complexities around areas such as content projection, positioning, accessibility, directionality, selection, and gestures, allowing you to write components that look great and behave consistently across devices.
In this workshop we’ll go through the available APIs, as well as hands-on examples of how you can leverage the CDK in your own projects to build components like dialogs, form controls, menus, tooltips and much more, without having to re-invent the wheel.
Just Another Marble Monday
Presented by Sam Brennan and Keith Stewart
In this super fun interactive workshop, Keith and Sam will teach participants how to write unit tests for RxJS and ngrx effects.
Using a simple clone of Tour of Heroes, we will lead participants through building a new feature (80’s themed dance offs!!!) with test driven development. Using jasmine-marbles with hot and cold observables, we will show how easy it is to write tests for RxJS, ngrx effects, and more. We’ll cover marble syntax, mocks and spies, and race conditions, ending up with easy to read marble tests.
Implementing advanced DOM manipulation scenarios
Presented by Maxim NgWizard Koretskyi
Do you know all the tools Angular gives you to work with DOM? You may have heard about the view container or even worked with some of its API but what about other UI abstractions like element and template references? In this workshop, we’ll implement a couple of advanced DOM manipulation scenarios requiring an extensive knowledge of ViewContainerRef API. I’ll also describe the implications and show examples of working directly with DOM bypassing Angular’s view layer. Along the way, we’ll explore the fundamental building block used internally by the framework to represent UI, which is View, and see what role it plays when working with a component’s view. By the end of the workshop, you’ll have a coherent mental model for view layer in Angular which will enable you to efficiently and correctly implement complex DOM manipulation scenarios.
Hands-on Full-Stack development with Nx and Bazel
Presented by Alex Eagle and Torgeir Helgevold
Learn how the Bazel build tool helps you be productive working across your Angular frontend and your backend server code. We’ll describe the tool briefly, then do some real coding in an Angular app and a backend application in watch mode. We recommend installing Bazel before the workshop to ensure you’ll be able to follow along on your computer.
NgRx Mobile with Ionic
Presented by Jesse Sanders
Creating mobile applications has never been easier using frameworks like Angular and Ionic together. You can quickly create a new application, install cordova plugins, and begin to create the newest and hottest application for the App Store. But how do we manage the complexity when our mobile application grows, data slows, race conditions occur, and we need to get it under control. NgRx is a great solution for mobile applications to help you solve these issues. We will be showing you step-by-step how to introduce NgRx into your mobile application, avoid common pitfalls, and teach you best practices. By the end of the talk you will have the tools and knowledge you need to tackle your next mobile project with NgRx.
“Containerizing” Angular with Docker
Presented by Dan Wahlin
Interested in getting your Angular application on a real production server such as nginx or others? In this session, Dan Wahlin will show how (and why) to “containerize” your Angular apps and move them to an on-premise server or to the cloud using Docker and other tools. Learn why containers are all the rage these days, learn about Docker Community Edition, key Angular CLI features you’ll want to know about when using Docker containers and volumes, Dockerfiles, Docker Compose, working with images/containers on your machine or in the cloud and more!
RxJS Observables in Angular
Presented by Sander Elias and Ward Bell
In this session, we’re going into the why we need to unsubscribe on some observable, and not on others. We’re going into detail and will explain it’s magic.
This session covers the basics of RxJS observables for Angular developers. You’ll learn how to work with Angular observable APIs, which RxJS operators you should know, and how to write your own observable APIs.
Deep dive into content projection
Presented by Eudes Petonnet
To write reusable components in Angular, you’ll need to leverage content projection at one point or another. Interested? Just go read the do… Oops. While we’re waiting for the documentation on content projection to be ready, come to this talk to learn everything you want to know about content projection, and then some more that you didn’t know you wanted to know. We’ll go over the different options and hidden feature, then spend some time understanding the lifecycle of projected components.
Protractor - A New Hope
Presented by Michaek Giambalvo and Craig Nishina
It is a dark time for Angular developers. Although unit testing has uncovered most use cases for components and services, hidden deep across your repository remain untested workflows. But there’s a new hope – a trilogy of testing tools that will save your application from unexpected bugs. We’ll demonstrate how to write better Protractor tests by debugging with Chrome Devtools, visualizing WebDriver actions with Highlight Delay, and writing screenshot-based tests.
Customizing your Angular build with Bazel
Presented by Greg Magolan
This talk will introduce how and why to build your Angular application with Bazel. Bazel lets you have nearly zero configuration in your build toolchain by composing your build with the building blocks of a handful of rules. Learn how to setup and build an Angular application with Bazel by defining what to build without having to configure how to built it. Use just a handful of Bazel rules to completely customize your build with nearly zero configuration. Build your Angular application the way Google does.
Using StackBlitz & Angular for Rapid App Prototyping
Presented by Albert Pai and Eric Simons
In this session we’ll be demonstrating Angular specific features in StackBlitz that take you from “idea” to fully fledged prototype at lightning speed ⚡.
Day Three
Keynote
Presented by Rob Wormald and Stephen Fluin
Ready for Readable Code?
Presented by John Papa
Can you read the code you wrote today, last week, last year? The positive impact authoring readable code can have on your career can be enormous. We spend far more time reading code than writing it. So how can we turn this to our benefit? We’ll explore actionable techniques that will enable you to craft code that lives longer and is easier to maintain. Learn how to make Readable Code by using some of the methods such as separation of concerns, above the fold, the five-second rule, consequential commenting, contextual clarity, and many more that can improve your code right away! Is your code readable?
The magic of template reference variables
Presented by Alain Chautard
Template reference variables are a little gem that allows getting a lot of nice things done with Angular. Ever wondered what’s hidden behind the syntax #form=”ngForm”? Now is the time to see what these variables are all about.
Angular Material’s Trees
Presented by Tine Gao
One of the top requests for Angular Material team has been to represent trees of data. We’re now introducing new Tree Components in Angular Material and the CDK. We’ll dig into what’s available, provide insights into how they were built, and provide a tour of how to use them.
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, Sani 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 a 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.
Angular at Large Organizations
Presented by Victor Savkin
Small teams can often get by with informal, ad-hoc dev processes. Large organizations cannot. Large organizations have to rely on tools and automation, which is one of Angular’s biggest strengths. In this talk Victor Savkin will share his experience with helping organizations with hundreds Angular engineers use the Angular platform the right way.
Introducing RxJS6!
Presented by Ben Lesh
Learn what’s new in RxJS 6, what’s changed, and how the RxJS Team and the Angular Team cooperated to provide backward compatibility tools to make your upgrade smoother.
Strategies for Server Side Rendering Angular Apps
Presented by Vikram Subramanian
Different Angular Applications have different needs for Server Side Rendering. A content heavy site might require full pre-rendering. An application with more dynamic content might be interested in only pre-prendering the App Shell. In this talk we will discuss strategies for server side rendering for these extremes and everything in between.
Angular for Designers
Presented by Stephen Fluin
The Angular team wants to make Angular great for designers, and to empower designers and developers to collaborate better. Get a sneak peak about our early plans and hear about our vision for the future.
Adventures in Universal and Zone.js
Presented by James Daniels
Getting Angular Universal working in your application (or supported in your library) and ironing out your Zone.js issues can be a beast. Follow the journey of the AngularFire maintainers adding Universal support to their popular library. Learn some tips, tricks, and hopefully have some laughs as we continue to define best practices for @next and beyond.
Angular Service Workers & Cows — a love story
Presented by Alyssa Nicoll
(In deep-theatre-guy voice) In a world, where Internet speeds can reach up to 6 megabits per second and cows reign supreme, one developer stands alone to discover the simplest way to cache EVERYTHING! Join her on this epic journey fraught with lag and peril where she’ll battle config files and caching external assets, all the while dealing with the conflict of freshness vs cache-first styles looming ominously over her every move!
Will her love for cows be forever destroyed by slow network? Or will she embrace the challenge and overcome the lag with service worker power?! Find out, at ng-conf 2018’s talk “Service Workers & Cows — a love story”.
Angular Panel
Presented by Mike Brocchi, Pete Bacon Darwin, Alex Eagle, Jeremy Elbourn, Kara Erickson, Stephen Fluin, Tina Gao, Brad Green, Miško Hevery, George Kalpakas, Hans Larsen, Ben Lesh, Greg Magolan, Igor Minar, Manu Murthy, Yi Qi, Filipe Silva, Vikram Subramanian and Rob Wormald
