AngularConnect 2018 talks

This talk walks you through how to create dynamic components and custom templates using the view container API and using the NgComponentOutlet or NgTemplateOutlet directives. It demonstrates how to create dynamic components using the brand new feature, Angular Elements. The talk explains the relationship between structural directives, ng-template, the HTML template element and template reference variables and explains terminologies such as host view, embedded view, view container. It also covers using the platform agnostic Renderer service for DOM access.

This talk will provide an understanding of the core principles Ivy is built around. Look at the instruction architecture, component factories and injection, and the locality principle. You will leave the talk with the basics you need to get started with Ivy.

In this talk, we show the correct way to construct Angular components by deconstructing a number of existing components. Through examples that categorise as "the good", "the bad" and "the ugly", we will look at common pitfalls and how you can avoid them. This way we will end up with simple, testable and highly reusable components. Join us on this adventure!

Geolocation and Augmented Reality (WebXR) are tools we can use to create engaging experiences in mobile web but great user experiences require your apps to be fast. Angular makes it easy to write reusable components that integrate such experiences in a seamless way. Join me as I explore the capabilities of Geolocation and WebXR APIs and how they can enrich your applications while writing reusable and performant Angular components.

Are you experienced with Angular, but you also need to do some backend work? Why don't you choose a framework that has the same terminology and is also offers typescript support? How can these two frameworks integrate with each other, and run on the same server?

WHHHHOOOOOSSSSSSHHHHHHHHHH!!!!!!

Did you hear that!? It’s the sound of a blazing-fast Angular Universal application, rocketing it’s way straight to a users' device! Angular Universal promises a solution to all the super hard problems - improved first render performance, search crawler support, and server-client state-transfer… but what does it really look like in the real world?

Let's explore what is actually involved in getting Angular Universal up and running, as we go through some of the lessons learned from moving a big Angular application to the server. Come to unlock the secrets of the universe, as we explore how to launch our Angular apps to Infinity and beyond!

In January 2017 Megabus embarked on a complete rebuild of their website. Six months later it launched. In this talk, I'll explain how Megabus used Angular to add zing to their website. How they used Angular to build fast, attractive, engaging components and how they integrated those components into their CMS. Angular made it possible to deliver high-quality code in less time and with fewer bugs. But integrating Angular into a real-world multi-discipline IT department was challenging.

By the end of this talk you will understand both the technical and non-technical issues, the solutions and the compromises. I'll even talk a little bit about what we've got planned for the future.

It's been two years since NgUpgrade was first introduced, and there are thousands of companies upgrading from AngularJS to Angular, developing new patterns and best practices. Elana has spent the last six months digging deeply into the experience of migration from AngularJS to Angular, talking with developers and companies from all over the community. She will share her insights about the challenges and success that come with the various tools and strategies.

She will cover two new tools recently released, ngMigration Assistant and ngMigration Forum. These tools are designed to improve the migration process and guide Angular developers to a better migration experience. Check out this article to learn more about these awesome new tools.

Many apps can install ngUpgrade and begin rewriting components, but it's not so easy when those components make up a library that is used by several teams to power their production apps. Instead of rewriting everything at once, this talk shares how we first created a common interface with custom elements, and then upgraded one component at a time to Angular Elements.

One of the reasons for the success of React is down to the popular architecture style Redux. With the "Reactive Extensions for Angular" (NgRx), Redux has finally arrived on the Angular scene. Complex applications are becoming more easily controllable and components can be strictly separated from domain/business logic.

In this session, Angular book authors Ferdinand Malcher and Johannes Hoppe will introduce you to all the building blocks of Redux. They will show you how Redux and RxJS work using specific examples of NgRx. With the help of clear examples, you will learn how to apply the most important components and patterns. By the end of the session, you will be able to understand terms such as Observables, Immutability, Actions and Reducers as well as Effects. Thanks to the demo materials that are provided, you will be able to create your own Angular application with RxJS and NgRx.

One of the most challenging requirements when building enterprise web applications for financial services is capturing large amounts of information through user input, this information is normally typed in large forms that contain a dozen to hundreds of fields with complex validation logic and multiple dependencies on field's completion. This talk will explain the design behind a framework that fixes it elegantly, using reactive forms, dynamic component loader and GraphQL.

Web development changed dramatically during the last years. With the enormous amount of JavaScript libraries and the HTML5 standard, today it is much easier to create web apps. When building a web app, you will probably want to reuse some of the web components you built. But how can you do that with the current state of HTML?

One of the new and emerging web standards is Web Components. The Web Components standard enables you to create reusable web components that include HTML, CSS and JavaScript. On the other hand, crafting raw components can be cumbersome. This is were Stencil comes into place.

In this mini workshop you will get familiar with Stencil, a compiler that generates standard-compliant Web Components. Then, you will create an Angular app that uses Stencil generated components to show you how to combine both Stencil and Angular in your app development.

Google Apps Script provides a layer of abstraction for interacting with Google APIs, from Gmail to Google Sheets and Calendar. Angular provides a complete client-side solution for web applications. In this talk, I'll show you how together, with Apps Script and Angular, you can build powerful web apps to automate tasks in minutes.

Want to have a glimpse into what the CLI and DevKit have in store in the future? Join Filipe to look at the latest and upcoming features. Go through the concrete situations where Bazel is helpful for small, medium and large projects, and see how you can convert your CLI project to using Bazel today (experimental, many caveats apply!).

Ivy opens up a whole new world of options for developing Angular applications. Some of these new options include dropping dependency on Zone.js, or developing without dependency injection. Or how about building custom templates or higher order components? See these examples and more in Angular Ivy by Example.

Cypress.io has emerged as a strong competitor to Protractor and WebDriver. It has a unique set of features that make it a great choice for end to end testing with Angular. In this session, we will see how to write tests against our Angular apps, and leverage the power of Cypress.io.

How do you debug so easily in VS Code? How can I debug remotely in the cloud or locally in a docker container? What are those key combinations to edit code so quickly? What extensions are the ones I shouldn't code without? Get ready to hit the ground running in this fast-paced, demo-heavy talk that takes you through some of the best and most effective tips and tricks in VS Code. Learn how to setup your environment and customize it the way you like it. We'll also learn how to use Live Share so we can pair program on the same app! You'll walk out with several tips on how to be more efficient with one of the hottest tools on the Web today!

Learn how to build good-looking, performant, scalable and accessible apps using the stable release of Angular Material, Angular Flex layout and the Angular CDK. In this workshop, we'll build a production-ready app from scratch that is lightning fast, uses the latest features, supports server-side rendering and is accessible to people with disabilities.

Nowadays, we build large enterprise applications with Angular. But how to best structure such projects to ensure long-term maintainability and reusability?

This session provides multiple answers to this question. We explore how to split large projects into individually reusable npm packages and how to deploy them through an internal and public registry. As an alternative, we discuss the Monorepo approach that is used successfully by big companies like Google and Facebook and which compensates for some of the disadvantages of npm packages in internal projects.

The use of micro apps is also discussed and implementation options, advantages and disadvantages are investigated. By the end the audience will know the options for architecting enterprise apps.

The Pull Request is the unit of change and the outcome of the work that goes into Angular. We start with the outcome and look at the processes and milestones that help us achieve that outcome.

Traditionally, we've built web apps with little more than a few files scattered around the disk. Then came development servers, and transpilers, and assemblers, and everything was a mess of plugins. This talk walks you through what a build system is, how it helps you organize your software development flow, and what properties to look for in a good build system.

Change detection is the key area affecting an application’s performance. It’s where most of the optimization efforts like using OnPush strategy are put. But using optimization strategies without solid understanding of the change detection process is tricky and can cause inconsistent behavior. Also insufficient knowledge often leads to a painful experience when debugging Change Detection errors, like ExpressionChangedAfterItHasBeenChecked. In this talk, I'll use simple concise examples to present the change detection mechanism under the hood. We’ll also take a look at how an existing implementation has been improved in Ivy. By the end of the talk, you’ll have enough knowledge to choose the right optimization technique and even come up with new techniques yourself. What you’ll learn from the talk will also help you debug change detection errors much faster and fix them in a proper way.

There is no doubt that 2018 is the #YearOfPWA. It’s the year when Progressive Web Apps will get the really broad adoption and recognition by all the involved parties: browser vendors (finally, all the major ones), developers, users. Angular developers are lucky to have some really nice options to automate their PWA’s main functionality exposed by Service Worker API. The first option is 100% native to the Angular and created by the Angular team: Angular Service Worker. The second one is a framework-agnostic library called Workbox.

Both approaches are robust, convenient and unique! Let’s go through the main features of PWA implemented using NGSW vs Workbox and the resulting application lifecycle management. After the session, everyone will give their own answer on what’s easier to start with, which library is simpler to use, which resulting PWA is more convenient to maintain.

Is an observable executed synchronously? You might think you know it, most people don't. In this talk, I'll introduce you to the world of schedulers, its secrets and advantages. I will show you how to use them in basic cases, as well as advanced scenarios.

After this session you will master smooth animations, solving complex timing errors and controlling execution context like an expert. And all this with schedulers.

NgRx is a Redux-inspired framework for Angular applications. It manages state and side effects, helping you build applications that are easier to test, strongly typed and more performant; however, these benefits can add complexity. Luckily, there are a set of hard rules and principles that will guide you through these tradeoffs.

This year, Angular CLI have known a lot of changes. Angular/devkit, with schematics and build architects, brought adaptability and extensibility. Ng-packagr (now integrated thanks to the devkit) brought libraries support. With that came a lot of underlying tools upgrades, the main one being Webpack. But what does 7 bring? What issues still needed to be solved after version 6, and how have they been (/ will they) so?

Let Noël bring you with him into a journey to Angular CLI core and top features comprehensions, and you will finally be able to really use the CLI at his full power!

There are tons of resources out there on *how* to upgrade from AngularJS to Angular, but no one ever talks about how to approach such a monumental task - and if you even should. How do you figure out where to start, which path to take, and whether it's even worth it for you or your company to spend the time and money? Should you do a top-down, bottom-up, upgrade shell - or just rage-flip your desk over and rewrite everything in Perl? Should you rewrite your architecture first, or your build process? And how do you show the business side of things that spending hundreds of hours on technical debt is actually worth it - even if you're not adding any functionality?

In this talk, you will learn the WHY and the HOW of each building block of the upgrade process for your application. I find that when teaching (rather than simply presenting information), if you can convey the thought process behind WHY you did something the way you did, as well as the payoff for making that decision, you get a greater understanding, acceptance and application of the student learning.

This is the meta-level talk I wish I had seen a couple of years ago: a toolbox I could use to identify the gaps in our app's architecture and tooling, but also how to balance it against our budget and time constraints. Instead, I just had to throw stuff at the wall and see if it stuck - and try not to get fired along the way. The talk will include a game plan cheat sheet you can work through on your own and show your boss or your teammates.

Web, Mobile & Desktop are the 3 standard platforms we develop for today especially in the Enterprise world. Each platform has its own unique features and needs. When faced with requirements where we need to develop one application for all 3, it can be a nightmare to get it right. How do you share code effectively? How do we solve a white labelling requirement? In this talk, I will show you based on a real-world Enterprise Healthcare application on how Angular can be the glue for such a monumental task where we will end up with a Mobile Solution, A Web Responsive Solution as well as a Desktop solution with electron while using 100% the same code base.

"Yes, one day we will test our code, just not now, soon, right after this next release... we promise..."

Hi, My name is Shai Reznik and I've got an interesting business opportunity to discuss with you. At the end of the day, we all want to feel more confident in our code stability and design so we could make changes without the fear of breaking something. There’s a cure - it’s called Test Driven Development and it’ll save your life. Don’t believe me? I’ll show you, wait and see.. We’ll develop a real feature together… then you’ll see… yeah… you will… I’ll also share a few new testing techniques I’ve been working on that will jump start your way into testing success, a great love life, worldwide fame and a multi-billion company with lots of profits and money!

But mostly testing success...
And money.
And a hug
No?
Why not?
Come on...
There you go!
That was a good hug!
Now you can go...
Go I tell you, go have fun!
Don't worry about me, I'll be fine.
Just come and watch my talk and convince 10 other people to watch it too.
In the meantime, as a preparation, watch the free Unit Testing theory course on HiRez.io (so you'll know what we're talking about)
OK, Bye!
Mom.

The main use-case for using dynamic components is when we can decide only in run-time which component is loaded. They’re also the only solution when we want to embed Angular components in non-Angular ones. In many cases, replacing in-template components with dynamic ones is beneficial to performance and code quality. In this talk, we’ll learn how to create and use dynamic components, and discuss several types of usages.

NativeScript opens up a whole new world for the Angular developers - a world where you can use your web skills to build truly native mobile apps that run both on Android and iOS.

But we can go even further - what if I told you can extend your existing web application with a shiny mobile app? It is true - Angular's platform agnostic nature allows you to reuse your business logic across multiple platforms.

Come and see it for yourself! Together we'll transform an Angular website to a multi-platform application running on web, Android and iOS.

Design systems and pattern libraries help designers and developers to get a common understanding of user interfaces. But even with such tools in place, there's a ton of processes and handovers involved. Each one causing possible friction and information loss. Especially over time. This might lead to new features feeling outdated on release, and screens and mock-ups getting too old too fast.

With our recent move to Angular and Sketch, we were able to automate 70% of our UI development. Helping our developers to focus on the real problems, and reducing the UI review efforts tremendously. Join us and see how we produce a single source of truth for developers and designers, and how we are able to consume this source in our tool of choice.

Dependency Injection is at the heart of Angular. We don't even think about it too much — we ask for a dependency, we get it. However, once our app grows and we have multiple NgModules, lazy loading and use third-party components, things start to get more complex. In this session, you will learn about ElementInjector and ModuleInjector, how they work together, and the two-pass dependency resolution process. Did we mention it is going to be fun? 💉🌲

Most Angular applications need to customize their display, features and behaviour depending on multiple and complex criteria serving different use cases like white-labeling, A/B testing or progressive deployment.

In this talk, I will show you how to architect your Angular apps by providing loosely coupled and interchangeable components that will allow you or even your applications’ end-users to customize the application experience dynamically by simple configuration (and without any switch/case).