Back and Better Than Ever - Takeaways from ng-conf 2022

Earlier this month marked another successful year of ng-conf, Angular's most prominent conference. This year's conference was the first one back in-person since 2020 and hosted more than 50 speakers from around the world. While we wait for more presentations to be released online, our team wanted to share some of our key takeaways from the event, focusing specifically on the areas of security, performance, and architecture.

Let's get started!

Performance

From performance at scale, to tuning, to general best practices, web application performance was a big topic at ng-conf 2022. While we didn't have the opportunity to attend every presentation, we picked out a few highlights we thought were particularly valuable.

Lara Newsom's "The Tell-Tale Code" listed three standard Angular Code Smells:

• Calling functions inside Angular templates causes our method to be called multiple times instead of once
• Optional chaining EVERYTHING, which, when misused, increases the size of the bundle
• Tightly coupled component logic, which will require significant refactoring at a later stage for the application to be maintained and scaled appropriately because it can cause a loss of reusability of components or difficulty in identifying dependencies between them

In a presentation focused on the anatomy of slow web applications, Misko Hevery shared that the amount of JavaScript code in applications has caused performance problems for even the most mature players in the space. This increase, he said, is not necessarily due to bad practices but can be attributed to the evolution of JavaScript itself. Today, JavaScript is capable of so much more and, naturally, developers want to take advantage of that increased functionality.

Misko shared that the most common problem is extraneous JavaScript code. By optimizing that code, we can correct a lot of existing performance issues, even in larger web applications. He demonstrated one method by comparing Replayable (Angular, Vue, React, Svelte), where JavaScript code is fetched from the server and executed on the browser side, and Resumable frameworks (Marko, Wiz, Qwik), where code is executed on the server side, is serialized, and then encapsulated in HTML for user interaction.

Ady Ngom presented seven basic principles to develop faster Angular applications. He mentioned that the size of the application does not matter much when discussing performance. Budget plays a key role. He shared practical strategies, like lazy loading images, optimizing event detection with ngZone, the Ivy engine, non-blocking processes, and prefetching all possible resources. These are captured in his "Angular Checklist"

• a list of practices that will help boost the performance of Angular applications.

Michael Hladky spoke to Runtime Performance, comparing the performance of a regular Angular application with a Zone-Less Angular application. He explained how event detection works in the framework and presented an efficient way of event detection and template re-rendering using the RxAngular library as an example.

Ben Lesh, in turn, mentioned a patch release for RxJS version 7.5.4, where stream operations are performed 31 times faster than in previous versions! So it's worth checking the library version you're working with.

On the last day, Houssein Djirdeh talked about Chrome browser features and improvements in the area of web application performance:

• Updated the Largest Contentful Paint (LCP) metric in version 88 - previous versions did not consider elements removed from the DOM tree
• Automatically inline Google Fonts and critical CSS, so we don't have to make additional HTTP requests
• Image optimization during build time thanks to the new NgOptimizedImage module, which enforces best practices

Finally, we got to experience a deep dive into image optimization best practices for Angular, presented by Kara Erickson during her session called "Image Optimization Best Practices with Angular".

Security

Security is one of the greatest challenges in software development. It is a critical defense mechanism meant to cover any potentially vulnerable surfaces, as it's impossible to predict every form an attack may come in. However, despite its inherent importance, security is often overlooked or treated as an afterthought during development.

After all, we count on the framework to do the security work for us, and the rest of the dependencies... well, since they have been released for production, they should be safe, right? :) Of course not!

In their cleverly-named presentation, "OAyDaBy AAmn=/y SAinRe9L TArT, wait what?" Jessica Janiuk and Joey Perrot raised topics related to the security of the Angular framework. They covered topics on secure software development, operations to deploy and run applications securely in production, and how to ensure that applications are protected by default when using Angular.

Alisa Duncan's session, on the other hand, focused on the TOP 2 OWASP vulnerabilities from 2021:

• Broken Access Control, which is the failure to properly enforce policies such that users cannot act outside their intended permissions
• Injection - the attacker sends data to an application in a way that will change the meaning of commands being sent to an interpreter.

She highlighted what can happen when an attacker has elevated access within the application and explained some of the defenses we have against these attacks, both built into Angular and what we can do ourselves, as developers.

Architecture

As you might expect, architecture was another topic covered in more than a few presentations.

One of our consultants, Alain Chautard, walked us through creating generic components with content projection on Thursday, using the Dialog and Tabs Components in an example.

Manfred Steyer focused on topics related to Micro-frontend architecture and Webpack Module Federation. He discussed Static and Dynamic Federation configuration and showed how to share libraries and modules between independent applications.

In a similar vein, Adrian Iskandar Espinosa Caballero discussed some advantages of using Micro frontends, namely:

• Scalability
• Reusability
• Visual Continuity

Both speakers presented sample Micro-frontend applications using React, AngularJS, and various versions of Angular.

There were also topics related to Monorepos, which have Nx at their heart. Michael Madsen and Erik Slack presented 20 reasons why you should use Nx.

There was also a session on state management using NgRx as an example. Kate Sky and, in a later session, Brandon Roberts talked about some of the best and worst (or suboptimal, at least) practices for using NgRx. They also discussed separating smart and presentational components, clean code, and state management in a monorepo, using Nx as an example.

In another session, Mike Ryan and Brandon Roberts presented the new v14 version of NgRx and its features, such as createActionGroup, the new API for Standalone Components, and @ngrx/eslint-plugin. The topic of new features in NgRx was continued by Marko Stanimirović, discussing the createFeature function that can help us to reduce repetitive code in selector files.

The session with Pawel Kozlowski provided some additional insight into Standalone Components. We learned more about their power, motivation, and how they differ from NgModules. We also found how we can use Standalone Components to drastically reduce the number of lines of code and can break inheritance restrictions.

Manfred Steyer, on the other hand, in his talk on Standalone Components, showed us route handling in an application without NgModules and a recommendation for file and folder structure in such applications.

In his session, Mike Ryan demonstrated ComponentStore in action using a sample drawing application as an example. He explained best practices for sharing states between components, managing streams and lifecycle Subscriptions, decoupling component logic, removing responsibility outside the element, and making them easier to read, write, and test.

We found Ward Bell's session on validating Reactive Forms to be particularly enlightening. He talked about frontend architecture and its role in form validation. He said that it's the model that sets the rules, not the UI; that it's the model that should know if a field is required, not the UI; and that it's the model that should understand the relationships between fields in different forms on a page. He also demonstrated what the model could look like using the ngc-validate library. Ward’s fuchsia-colored outfit also attracted considerable attention. So if you were looking for Ward at the conference, you had no problem recognizing him :)

In the last session of the conference, Deborah Kurata discussed best practices for RxJS, mentioned the declarative approach, and the differences between different Higher-Order Maps.

Final thoughts

The conference ended with a Q&A session with the Angular Team, during which attendees asked questions for nearly an hour. Among other things, they asked about ngUpgrade support for Standalone Components and the future of Observables in Angular. It was an excellent opportunity for the community to learn about the upcoming but more distant plans for the framework.

Each of the three days of the conference presented fascinating information and touched on the essential aspects of Angular development and its community. There were topics on Angular's history, current best practices, and items still in the pipeline.

What were my takeaways? First, I gained a better understanding of the mechanisms under Angular's hood, learned more about the causes of poor performance in web applications, and the power of Standalone Components.

I'm particularly looking forward to doing tests using the new NgOptimizedImage module and playing around with RxAngular a bit more. I'm also curious about the new Qwik framework offering, according to Miško Hevery, the fastest possible page load times.

The only thing I missed was a lack of topics related to hybrid architecture that didn't depend upon using Micro frontends. The Angular Team officially stopped supporting the AngularJS framework in December 2021, but many projects are stuck on the old framework with no clear path for migrating to the latest version of Angular.

Hopefully, the materials from the conference will be released soon. It's worth checking out the videos when they are published, and you have spare time. Next year, I hope there will be another ng-conf, may it be as successful!

Thank you for your attention!

Looking for more support for your Angular projects?

Our team at DevIntent is highly experienced in web development, including framework migration and updates. Check out our offerings or reach out.