Everything I learned at ng-conf 2022
Cisco sent me to ng-conf 2022, so here I am to share the love and my notes from the conference!
Note: The following is basically a transcription of my written notes from the conference. It is not a summary of the talks. (I didn’t catch all of the talks; my brain needed breaks and I left early on Friday.) Instead, this is a quick peek at what was discussed, to serve as a starting point for further research.
Enjoy!
The Angular team works really hard for developers
The keynote from the Angular team got everyone hyped. They shared so many great things coming up and already available in Angular. Of those, my favorite are:
1. Strictly typed forms (available in v14)
2. Better error messages in CLI, including advanced template diagnostics. Less cryptic error messages, more happy developers!
3. Page Title in routers for accessibility
4. Standalone components -> No need to learn about NgModules to get started with Angular. Only add it when needed when the app gets complex enough.
5. Inherit from multiple CDKs through the Directive Composition API
6. Better CDK primitives: menu item, dialog box, listbox
7. Image Optimization with rawSrc and ngOptimizedImage
8. Better Angular Developer Tools in browser
Three Code Smells and How to Fix Them
Very proud to say that the first workshop in the conference was by my coworker, Lara Newsom! My takeaways were:
1. Functions are not pure in Angular, so change detection is triggered basically every time. This compounds over time leading to slower applications. Instead, use pipes.
2. Optional chaining may look harmless, but it adds 15 lines in the minified bundle. But it’s not always bad: you should use it when undefined or null are valid states/values.
3. Trim unnecessary code by removing properties of derived states. Don’t use functions to mutate states either.
Sanitization is built into Angular
is what Alisa Duncan reminded me in her talk. I feel like I take this for granted, but Angular really makes it easy for applications to be sanitized. So easy that I’ve never really thought about it until this talk.
Favorite feature? Interpolated values are automatically escaped, and there is safe markup.
Not just Test-Driven Development, but Test *Effective* Development
This was my first experience listening to a Shai Reznik talk. My coworkers urged me not to miss this and I’m glad I listened.
Rather than thinking of them as unit tests, they should be thought of as Single Action tests with 3 parts: given (the setup), when (action/input), and then (outcome/validation)
Start by writing the When: “What is the action/functionality that we are testing?” Followed by the Then: “What is the assertion? What do we expect?”. And finally, the Given: “What needs to be in the setup for this test to run?”
NgRx Feature Creator as a Selector factory
Instead of creating many selectors, you can use createFeature to generate many and export easily.
This reduces code duplication and makes use of the template literal types. A huge benefit for people with huge feature states.
When Marko Stanimirović demoed just how much your code will simplify with this, I cheered.
Everything is a stream
Even arrays. As long as you incorporate “time”. RxJS is rather complicated but a lot of the APIs we are used to in Promises are also mirrored in RxJS. Plus, the documentation is very detailed.
fromPromise is really pronounced “from PRUH-mise”, because it’s a compromise. Gotta thank Kim Maida and Sam Julien for this brilliant talk and that pun that had me questioning life.
Site Reliability is an “everyone” concern
I really like the way Brian F. Love described site reliability.
He measures reliability as “successful requests divided by the total requests.” With that definition, it really makes absolute sense for front-end engineers to be in the conversation for site reliability.
Aiming for 100% reliability leads to diminishing returns. Instead, have an error budget. Also, make sure to pause new innovations/features when the error budget is spent. This should signal you to focus on stability (fixing bugs, addressing tech debt).
Faster Angular applications are B.L.A.Z.I.N.G.
I do not have the heart to spoil Ady Ngom’s talk and reveal to you what B.L.A.Z.I.N.G. means. I’ll just link his talk here when it becomes available on Youtube.
One thing I will share: “Let Ivy do her thing.”
Create more WIP PR’s
That’s one of the things Jennifer Wadella suggested in her talk for how to scale engineering teams successfully.
Essentially, we should all make it a habit to commit daily and review things before the final PR. Otherwise, it might be too late to course-correct when someone has completely finished their feature.
WIP PR’s will also provide more mentorship opportunities. This is important for junior developers to grow and can also bring your team’s skills up in a more holistic way. (As opposed to one or two senior developers Superman-ing the whole thing.)
Inject Abstract Control Types to simplify forms
Self-explanatory. But also, Rafael Mestre shared his slides and additional resources in this handy link.
There are at least 20 reasons to use Nx
And one of them is because my Cisco teammates, Erik Slack and Michael Madsen, said so in their talk. :)
But on a serious note — my favorite reason is #4: Discoverability. Imagine being able to search for everything from your IDE. Like, how many components use or depend on this other component? How is this component API’s structured?
Please take my word for it that this benefit is so, SO beneficial, and not just because I’m a component library engineer.
Accessibility matters AND it’s easier with Angular CDK and Material
said by Emma Twersky and Zach “not on Twitter” Arend. And, if you know me, you already know I cheered hard for this talk.
When checking for accessibility, go beyond colors. Also test for zoom (scaling) and strong-focus indicators.
Enable the new ESLint rules focused on accessibility in order to catch common ARIA pitfalls in your template code.
Note to self: Look up high-contrast and forced-colors media queries.
Make good use of what is provided by Angular CDK and Material so you won’t need to reinvent the wheel. Especially the tricky datepicker.
Have images on your app? Use NgOptimizedImage
This new directive dramatically improves image loading performance. It makes sure the Largest Contentful Paint (LCP) image is prioritized and lazy loads non-priority images by default. Brilliant!
Thanks for the hard work, Kara Erickson!
Never write a control ever again
Template-driven Forms > Reactive Forms. When the Ward Bell said this, I cheered in my seat. (Very awkward when no one else did, but I stand by my joy for this.)
Instead of working with cumbersome boilerplate code, make use of directives. Custom validation should be handled in the backend, not on the client-side.
Angular developers are SO FUN
This one’s from me. :)
It was my very first in-person Angular conference and I loved every minute of it. I learned so much about Angular and how to present compelling tech talks. I also met great people and got to see my coworkers for the first time.
Definitely looking forward to the next conf in 2023!
