DEV Community

Cover image for Angular Universal is the Problem, not Angular
Jonathan Gamble
Jonathan Gamble

Posted on

Angular Universal is the Problem, not Angular

Angular is finally working hard be something we can continue to use. I absolutely love Angular! Some of the new features we know they are working on include:

  • Standalone Components - This is huge, as it allows you to get rid of more boiler plate modules. This makes it easier to use and closer to functional components.
  • Optional Zone.js - While not completely implemented yet, this will allow smaller packages, and better direct control of rendering.
  • OnPush Change Detection - This is already implemented, and gives you direct control of DOM updates. However, you will have to handle them yourself. This is a good thing.
  • Signals - While already implemented, this gives you exact control of what state you want to update in the DOM. Angular is currently building ways to makes this integration seamless with RXJS.

These are just some of the features, experimental features, and partially implemented features Angular is currently working on. You can view the Roadmap, although it hasn't been updated this year. It is best to follow the Releases and their Twitter.

This is wonderful, and the Angular team has been working extremely hard as they continue to innovate.

However...

The best contribution to Angular in the last year has invariably been the creation of AnalogJS. But why? You can now do things like File Based Routing, use Vite for faster compilation (and yes, ENV variable support out-of-the-box!), and SSR Support.

It doesn't yet support server only routes, form actions, or automatic handling of complex hydration items like transferState, but it is an incredible meta framework. I suspect Brandon will be looking into some of these things.

But Why is Angular Universal the Problem?

Let's put it this way. React is Dead. React is held up by the many innovations from the NextJS team at Vercel. The slowest two Frameworks by far are React and Angular, but no one talks about this. Everyone just assumes React is badass because it is the most popular. There are not a lot of tests these days, but I suspect in larger apps, Angular is way faster than React. Angular has everything built-in, and most tests seem to be basic todo apps. React has to install many external libraries just to function (because it is a library of course).

No, the reason Angular is supposedly dying (trendy influencers are ignorant that it is still the second most popular and mature framework) is because it is not on the SSR Train.

Sure, other Frameworks are smaller, faster, and have incredible new innovations, but that is not why they are popular. They all handle the basics extremely well making the DX faster. Solid Start, Qwik City, NextJS / Remix, SvelteKit, NuxtJS. Literally all of them except Angular Universal.

What Angular Universal Needs...

The Angular Core is already incredibly strong, has mature external packages, and has a great team backed by Google...

But...

Angular Universal is still 10 years behind, and not even on the serverless train!

Here are the basic things it needs:

  • File Based Routing - better DX experience
  • ENV Variable Support - you seriously can't do this currently in Angular without a hack or adding webpack
  • Automatic TransferState - TransferState is way too complicated and should be automatic (like all other frameworks) so that the Developer doesn't have to think about it. This would work with shared server / browser components.
  • Server Only Routes / Endpoints - Creating a route manually is inefficient, and should be easy. I should also be able to import components into the server.
  • More deploy options - you can deploy to Firebase Functions or Cloud Run, but there should be options (or adapters) for Vercel, Netlify, Cloudflare, and more...
  • Code Splitting Components - this would be necessary to deploy to Edge servers and other serverless environments, as each component would be in its own serverless function (how every other framwork works)
  • Type-Safe Form Actions - this gets rid of extraneous endpoints, and would allow you to submit your forms to the server to update your pages... this should work like TRPC with type safety, and be seamless from the server to the browser. It would also have to handle refreshing the page

This is where Angular should focus its time. Without heading in the SSR first direction, I do believe Angular will die one day for web applications.

Do you agree?

Again, all other popular frameworks have meta-frameworks with these options, or a version of them.

See some more articles and things I'm building on code.build.

J

Top comments (26)

Collapse
 
brandontroberts profile image
Brandon Roberts

Thanks for the mention Jonathan! Some of these items are definitely already on my radar also, the two main being Automatic TransferState and Server-Only routes.

Analog already supports Netlify, Vercel, Edgio, and others by way of using Nitro as its server engine.

Collapse
 
jdgamble555 profile image
Jonathan Gamble

Good to know! I think all Angular devs appreciate your work! Excited to see the future!

Collapse
 
slk5611 profile image
shivlal kumavat

@brandontroberts Most welcome of Automatic TransferState and Server-Only routes in new angular world.

Collapse
 
mandrasch profile image
Matthias Andrasch

Thanks for sharing this article, haven't heard of analogjs.org/ yet. Nice!

Collapse
 
slk5611 profile image
shivlal kumavat

@jdgamble555 Thank you for sharing this useful things related to angular.

Collapse
 
quanla profile image
Quan Le

React is not dead. And who say it is slow if it can run super complicated UI smoothly such as this

quanla.github.io/macos-demo

Collapse
 
jdgamble555 profile image
Jonathan Gamble

Compared to Solid, Svelte, Vue, Qwik and even Preact, React is very slow. Angular and React are on a different level. My point about React being dead was that NextJS is a big reason it is as popular as it is.

Collapse
 
quanla profile image
Quan Le

Oh, you mean "not moving" when you say dead. Yeah, I agree it doesn't change much, but it doesn't bother me, since not changing means stable and mature. Who need to change when you are already good enough. Like "pencils" are dead, because they stay the same since forever... yeah.

Anyway, I don't even use Next, so I don't think Next is what keeping React alive. Have built many complicated React systems with the bare minimum (React 6) and still eager to build more with it.

Could be more convincing if you can give examples of how those "super fast" libs can build complex apps comparing to React... or if they can build at all (other than todo list).

Anyway, it's great if you can checkout the Mac OS that I built using React, it's packed with features and silky smooth. Can't complain

Thread Thread
 
jdgamble555 profile image
Jonathan Gamble

My article is NOT about React, although I'm glad it works for you. Not sure how to respond to your assumption that React is the only library that can build more than a todo app. Solid and Qwik are new, but many have used them for complex production. The features are insane. Svelte is mature now, and Vue is nearly as old as React and Angular. Preact can support most React packages, and Qwik and Solid can too.

People don't spend years developing Frameworks, especially meta frameworks with SSR, to build just todo apps. These frameworks have more features than Angular for SSR, and arguably simpler.

All frameworks have something great to offer, and they learn and build off each other. Angular is just slow on the SSR front. I'm hoping that changes.

Thread Thread
 
spock123 profile image
Lars Rye Jeppesen • Edited

Most React people assume React is the only thing in existence. It's the equivalent of iOS users who think iPhone is the only smart phone there is. A good mix of cult and ignorance

Thread Thread
 
quanla profile image
Quan Le

Ok, I take it as React is NOT dead.

Anyway, I just looked at both Solid and Qwik, quite nice. Basically I only care if a lib use Virtual DOM or not. I don't think Solid have a future, just like Angular

And why you bring up Preact? It's basically React. Geez

Thread Thread
 
spock123 profile image
Lars Rye Jeppesen

Virtual DOM? Really?

Thread Thread
 
quanla profile image
Quan Le

Yes. Virtual DOM. What is wrong. I think the naming is stupid but it is the defining feature of React and the like (Vue, Preact or Qwik). What is the problem here?

Thread Thread
 
thien2218 profile image
Huynh Ngoc Thien • Edited

Virtual DOM is an abstraction to DOM. If you already know about the DOM, you know the web. Virtual DOM is another layer of DOM that is created by frontend frameworks that uses it.

Every time you make a change to state of a component, it a new Virtual DOM snapshot of that component is created, replace the old one, and only then is reflected in the DOM. This means that every time you update a state at one place, the entire component re-renders itself.

The changes made to the update the state is called reactivity, and Virtual DOM is the old-fashioned reactivity paradigm which was used by many popular frameworks that dated back in 2012 when state management is a huge overhead and updating states surgically in one place is extremely hard. The way that Virtual DOM works is simple: Re-render everything when there is a change. Therefore, there is no overhead of developing libraries using Virtual DOM and performance is acceptable, at least when the library is not large

However, in modern day frameworks, such reactivity is too expensive and inefficient as the price of performance gets higher and higher as the ecosystem grows. Many benchmarks have shown that Virtual DOM frameworks like Vue, Angular and React, in fact, are very slow, especially React. One single state update in React could last up to 100ms.

This is due to:

  1. Hydration: The web has to install ALL javascript before reactivity gets in action. This means that the cold start is very expensive.
  2. Large update: Updating the entire DOM or parts of the DOM that is responsible for rendering a component being updated is more costly than just updating the place in which the change happens. This is quite obvious so I'm not gonna bother explaining the deeper details.

For these 2 reasons, modern frameworks started to move away from Virtual DOM and design their own reactivity paradigm, most well-known ones being Svelte and SolidJS as they're able to surgically update the state, while Astro and Qwik introduced new hydration strategies and significantly reduce JavaScript bundle.

Hope this help!

 
quanla profile image
Quan Le

Yeah, except that I have almost 20 years of experience and have gone through many things before settling with React (Angular, JQuery, PrototypeJS, Java Swing, .NET, ... ). Call me ignorant, I don't care, have seen so many flashy new techs before. Build something awesome with it (like my MacOS), then we talk

Thread Thread
 
spock123 profile image
Lars Rye Jeppesen

Not talking about you, about generic React beginners. It is a framework that most beginners start with, and get stuck with.

Collapse
 
hakimio profile image
Tomas Rimkus

For ENV variables, you could try chihab/ngx-env on Github.

Collapse
 
jdgamble555 profile image
Jonathan Gamble

Thanks, also wrote this arricle - dev.to/jdgamble555/angular-univers...

Collapse
 
hakimio profile image
Tomas Rimkus

Compared to @ngx-env your approach seems way overcomplicated.

Thread Thread
 
jdgamble555 profile image
Jonathan Gamble

True, but the ngx-env package adds more dependencies and extra overhead. There are tradeoffs. Obviously best option would be if Angular had this built-in.

Thread Thread
 
tmish profile image
Timur Mishagin

Agree

Collapse
 
mateuszroszczyk profile image
Mateusz Roszczyk

Am I the only one who doesn't like file-based routing?

Collapse
 
cesard profile image
César

I find file-based router an abomination. It's leaking into the file system and coupling to it details of the implementation which I don't think should occur.
One thing is having files being named by conventions like app.component.ts or users.service.ts, but you can name them another way and they'll continue working... With file-based routing is the other way around... I'll never understand why anybody would choose to do that.

Collapse
 
tmish profile image
Timur Mishagin • Edited

Of course, it's not a silver bullet but from my experience and observation it is a good architecture choice for 90% of projects (from small to big)

I think first of all author tries to say that we need options to choose from in our Angular world. Not that file based routing is always better than the "classic" way

Collapse
 
kfconeone profile image
kfconeone • Edited

The largest and oldest project I've been involved with using React. I've created the most projects using Vue. The projects for our company's biggest clients using Angular.

We've been talking about Next.js all the time but never implemented any project, We are excited about Nuxt, but only implemented two experimental side projects.

We care less about SSR, the main reason is that we found that it's a challenge for system design and we already have a solid foundation on .Net. We know there are some SEO problems related to SSR, but I don't think that is the appropriate scenario to use Angular in the first place.

And speaking of performance, I personally find that projects suitable for React and Angular usually aren't very strict about performance(or we can boost the hardware). Furthermore, projects that are strict about performance wouldn't choose them(though that's rarely the case).

Personally, my favorite frameworks are Angular and Nuxt, and they've also been used on different purposes.

So in my opinion, even though these frameworks can accomplish similar tasks, I believe they target different groups of developers, there is no "dead" or some terms like that. But I know what you want to say and I agree most of them, great article!

Collapse
 
jdgamble555 profile image
Jonathan Gamble

I could see that and tend to agree. That doesn't mean Angular couldn't become better so that it can target more groups IMHO. Angular is very solid as a framework.