DEV Community

Cover image for Minko Gechev on Angular 16 & 17 — game changer or loss of identity ?
Daniel Glejzner for This is Angular

Posted on • Updated on

Minko Gechev on Angular 16 & 17 — game changer or loss of identity ?

Generated by MidJourney AI

In a recent podcast, Minko Gechev — Lead and manager for Angular developer relations - shared valuable insights into the future of Angular and its planned developments. Let’s go over key takeaways from that interview, focusing on the framework’s future direction.

Generated by MidJourney AI

Hydration API

Angular Lead mentioned the new hydration feature that Angular is introducing, which helps in server-side rendering and improves performance. Angular is now focusing on partial hydration, which will result in faster rendering times for applications.

The goal is to have better SSR support and more seamless transitions between server-rendered and client-rendered content.

Generated by MidJourney AI

Introducing DestroyRef

One of the most notable enhancements discussed by Minko is the introduction of DestroyRef. This feature enables developers to invoke the ngOnDestroy hook more flexibly and integrate it with various parts of the component’s lifecycle.

class ExampleComponent {
  constructor() {
    inject(DestroyRef).onDestroy(() => {
      // do something when the component is destroyed
    })
  }
}
Enter fullscreen mode Exit fullscreen mode

This was previously impossible, as developers had to place the ngOnDestroy code directly in the method itself. DestroyRef will improve integration with libraries like RxJS, making Angular development more efficient.

Angular Material Libraries and Design Tokens

Minko highlighted the impact of design tokens on Angular app development, particularly within Material 3. Design tokens provide developers with greater flexibility for customizing existing Material components.

The Material team at Google will ensure that these tokens remain stable, allowing developers to create finely-tuned components without worrying about frequent changes.

Generated by MidJourney AI

Flattening the Angular Learning Path

Simplifying the Angular learning path is a priority for the Angular Team. Minko outlined several incremental improvements aimed at making it easier for developers to learn and work with Angular.

He says that RxJS is overwhelming for new developers and Angular Team aims to satisfy both sides. If you want to use RxJS go for it, that’s okay. If you don’t want to use it, go with Signals. Mix of both? Feel free.

Example of interop:

const counter: Signal<number> = toSignal(counter$);
const counter: Observable<number> = toObservable(mySignal);
Enter fullscreen mode Exit fullscreen mode

Over time plan is to reduce the RxJS involvement in core parts of the framework. Are both new and existing developers going to be happy with the changes? Looking at recent discussions in RFCs — some veteran developers have major concerns about the approach for the future.

Generated by MidJourney AI

Standalone Components

The introduction of standalone components is a foundational step towards simplifying Angular. This feature will make learning about NgModule and scoping optional for developers working on standalone apps.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}
Enter fullscreen mode Exit fullscreen mode

There are also improvements expected for how standalone components are handled today.

Generated by MidJourney AI

Simplifying Component Authoring Experience

Minko briefly mentioned that the Angular Team is considering making component, directives, and pipe decorators optional. Aim would be to further simplify the component authoring experience and reduce complexity.

This will result in a simpler, more functional-based approach for creating inputs and outputs.

Generated by MidJourney AI

Angular CLI Simplification

The CLI will be updated to have less conceptual overhead, and improvements will be made to the project structure, making it easier for developers to navigate and work with Angular projects.

Generated by MidJourney AI

Improved Documentation and Learning Experience

Angular Team will focus on creating more engaging and digestible tutorials, helping developers learn Angular more efficiently and enjoyably.

This would be a giant help and improvement over current shape of Angular documentation available today.

Generated by MidJourney AI

In summary, the future of Angular looks promising, with a focus on simplification and improved learning experiences for developers. The introduction of DestroyRef, design tokens, and the flattening of the Angular learning path are just a few of the key developments that will shape the framework’s direction moving forward.

On the other hand it sounds like it brings Angular more towards functional components and closer to main competitors on the framework market — React & Vue.

This is a very brief summary — I recommend watching the whole podcast!

Before I have summarized what is happening around Sub-RFC3 & Sub-RFC4 — looking at how things are shaping up — are you excited about the future of Angular?

Or a little bit worried that the framework might lose it’s identity with all of the changes that are coming?

You have a last chance to participate in Signals RFC! — Angular Team is closing it on Monday, April 24! — see here.


I hope you liked my article!

If you did you might also like what I am doing on Twitter. I am hosting live Twitter Spaces about Angular with GDEs & industry experts! You can participate live, ask your questions or watch replays in a form of short clips :)

If you are interested drop me a follow on Twitter @DanielGlejzner — would mean a lot :). Thank You!

Top comments (14)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
hakimio profile image
Tomas Rimkus
  • "OnDestroy" is usefull for those who are using RxJS in imperative way. See "ngneat/until-destroy" library for more info.
  • In most cases Signals is a much better solution than plain RxJS in Angular. It's easy to learn, integrates well with Angular, performant out-of-the-box without any need for stupid RxJS hacks ("debounceTime(0)", "shareReplay()", "distinctUntilChanged()", etc), can be converted to RxJS Observable if you want to use RxJS operators.
  • Standalone Components is extremely nice feature, because it reduces boilerplate code, allows you to have a nicely structured tree of dependencies (unlike the "NgModules" way where people just throw everything in their bloated modules (especially "SharedModule")), allows you to clearly see what component depends on other components, allows you to have "standalone" directives and pipes without modules. In general, "NgModule" became a bloated mess over the years with 9 configs, out of which only 4 are actually used in most apps. You can also lazy load standalone components by using "loadComponent" or "loadChildren" Route configs.
Collapse
 
marcinborowski95 profile image
Marcin

OnDestroy ref could be very useful to get rid of unsubscribe event emitters/subjects.
While there is a package called until destroy it will become pointless when angular will have it's own observable point of reference to know when a Component is destroyed. Simply - Less boilerplate

Signals are far easier to learn/understand/use and will be quicker to implement than let's say BehaviorSubject. At least that seems to be the idea.

For me standalone components are a lifesaver when it comes to largely reusable components. Something that would otherwise have to be stuck inside a shared module can now be it's own thing without the need to create a module.
And then there is the SCAM pattern that is pretty much replaced by standalone components.

Collapse
 
danielglejzner profile image
Daniel Glejzner

We are going to talk about it live next week on Twitter:
https://twitter.com/danielglejzner/status/1648622946464792577?s=46&t=O3K13poFxIpAs5QEGn_LLA

Make sure to join or listen to replay :)

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

You missed everything... watch a few youtube streams of ryan carniato explaining signals.

Collapse
 
michaelodumosu57 profile image
Michael Odumosu

How can I join the war against React! I love angular angular is the future!

Collapse
 
pterpmnta profile image
Pedro Pimienta M.

While Angular Team keep separate HTML, CSS and TS an each one in respective files, welcome the new changes that is expect to bring benefits.

Collapse
 
spock123 profile image
Lars Rye Jeppesen

You can have them in same file

Collapse
 
pterpmnta profile image
Pedro Pimienta M.

I know, but I would not have see the angular Team take the decision like JSX

Thread Thread
 
spock123 profile image
Lars Rye Jeppesen

I would definitely not like TSX, but it's individual I guess. I like the clean interface between declarative and a component with an interface.

I've been working too much with React and the absolute mix of js and css and html is just killing me /s

Collapse
 
intermundos profile image
intermundos

Angular lost its identity since v5 :)

Collapse
 
srbhr profile image
Saurabh Rai

As an Angular Developer, I'm waiting for this release & excited to see how it's going to be. 🔥

Collapse
 
spock123 profile image
Lars Rye Jeppesen

Super excited

Collapse
 
expertise7 profile image
Robert Medved

Angular FTW