In March, the Angular community gathered in Salt Lake City for the annual edition of ngConf. If you have been following along with the Angular Renaissance, then you know how exciting this ngConf was. There were amazing sessions from community members (including yours truly) as well as critical updates from the Angular Core team. With that in mind, let’s look at some of the updates and see what this means for Ionic developers using Angular.
A new output on
things
Last month, I wrote about how Angular was
revisiting its core set of component APIs to streamline and
simplify how things work in Angular. At the center of all of this
was the new Signals API, which allowed for smarter reactive data
flow. With Signals, we’re able to have new APIs for
input, view queries, model, and much
more. But one API that is not Signal based is the new
output API.
During the opening Keynote, the Angular team wanted to be very
clear that output was not a signal-based API, but rather a
unification of API models and a simpler approach to creating custom
events. Currently, Angular offers a @Output directive,
which allows developers to create their own custom events:
@Component({...})
export class AppComponent{
@Output()
myEvent = new EventEmitter<{detail: number}>()
someMethod(){
this.myEvent.emit({detail: 5})
}
}This decorator-based API works, but can be a bit cumbersome. For
Instance, it’s not enough to just attach the decorator, you still
have to set the value to an EventEmitter, which can
trip people up. Plus, since the team is moving towards using
functions instead of decorators, this stands out as being an older
API. Instead, the team is providing a simpler output
function:
@Component({...})
export class AppComponent{
myEvent = output<{detail: number}>();
someMethod(){
this.myEvent.emit({detail: 5})
}
}Nothing about how events work has changed, this is simply
aligning on API design and removing the extra new
EventEmitter that developers were forced to remember.
While a small change, it’s a very welcomed one, as now all the core
primitives in Angular are aligned, and we have a consistent way of
setting and emitting data.
The new Wiz kid
If the name “Wiz” means nothing to you, you’re not alone. Wiz is an internal framework at Google that has been at the forefront of providing great performance and is used in mission-critical apps like Search, Meets, Play, YouTube, etc. The big news is that The Angular team and the Wiz team are collaborating and sharing their knowledge and code. While at the conference, the message seemed to be “we’re collaborating,” and on social media, Sarah Drasner (Engineering Manager for both Angular & Wiz) clarified and stated the teams will eventually merge.
This matters because Wiz has some amazing features that come into play for server-side rendered apps. One feature that we get with this merge is something called JSAction. JSAction is a small library that allows server-side rendered apps to capture events, then when the client-side app is hydrated, it can replay all of those captured events and play it back. This isn’t something that is a far off idea, there’s already a pull request from the Wiz team to add JSAction to Angular Core. There’s more about this from a later talk “What’s cooking with SSR in Angular” from Jessica Janiuk and Doug Parker that dives into how developers would take advantage of this in the future.
Sessions Worth-a Mention
With the main keynote out of the way, we had two days of amazing sessions from our community. While tons of great content was shared, some talks that stood out to me were:
Deferred Loading for Code of All Ages
This talk from Lara Newsom
covered a new lazy loading method in Angular templating API. This
new @defer block allows developers to specify which
sections of their templates should be split out into their own
chunks. Meaning you can lazily load portions of your app by simply
wrapping them in a @defer block and setting what
should trigger the loading. Very helpful!
Signals of Change
This was a talk from NgRx core member Marko
Stanimirović about their investments in Signals. If you’ve been
in the Angular community for any number of years, you’ve probably
used NgRx as your state management system. Since NgRx is based on
Observables, the move to Signals is something the team has been
taking into consideration. Taking everything they’ve learned while
maintaining the Observable-based NgRx library, they’ve created
@ngrx/signals, which brings about a whole new way of
managing your app’s state.
Building the next meta-framework with Angular
One of the most exciting talks for me was Brandon Roberts’s talk on Analog. Analog is a meta-framework, meaning it builds on top of Angular and provides similar features to tools like Next or Nuxt. As Analog recently hit its 1.0 release, there’s a lot of opportunity to build your next app with Analog and take advantage of its server-side capabilities, and file-based routing.
Parting Thoughts
This year’s edition of ngConf was another reason why, for me, Angular is going to continue being my framework of choice for years to come. With all the new features coming to the framework, the team has leaned heavily into making sure these improvements are not only faster than past iterations, but also easier to reason about. Add to the mix the merger of Angular and Wiz, and you have the best offerings of server-side app and client side interactions. Let’s see what Angular becomes in 2025!
The post Recapping ngConf 2024 appeared first on Ionic Blog.
