loading...
Cover image for In defense of the Angular framework

In defense of the Angular framework

zasuh_ profile image Žane Suhadolnik ・4 min read

Over the past month and a half I've been working on a single-page app with Angular. When I heard that we had to use Angular I squirmed and thought to myself 'Why? There are so many better options out there'. I like many others out there have heard stories about how Angular was completely re-written for version 2 and ruined it's reputation. I've heard that the framework is bloated, complicated and overall too large for most projects.

I'm here to share my experience of being a primarily React developer, shipping React code in production to using Angular for a production application.

History

This wasn't my first rodeo with the framework. For my diploma I made the same app with React, Vue and Angular in an attempt to try and compare the 3 and see if one is better than the other (all 3 are great, all 3 have flaws, there is no 'best option'). I wasn't completely unfamiliar with Angular when I started working at this current company, but I was more inclined to using React because I was just more comfortable with it.

Before starting work on the new project I had a 3 days weekend and so having a more open mind I went through the Angular tutorial once again, skimming the TypeScript quick start and occasionally looking at the RxJS documentation before I started working on the project the next week.

Growing pains

Angular has a LOT of files per component. 3 at the least, one being the .html or template, then the .ts file for logic and a .css or more likely .sass file for styles. This was hell for a while untill I got used to it. Coming from React where everything is shifting to a single file component with JSX and CSS in JS, this was frustrating for the most part.

At the same time however I understand that 'separation of concerns' is a good architecture choice so I have nothing to complain about. The problem does become apparent however when you have a lot of components to work on and passing data between them can get a little messy. Still, nothing someone can't get used to and understand why it's important.

TypeScript

TS in Angular is not the same as TS in any other framework. It's used heavily and in way I still don't quite understand. But at the same time it was a great learning experience, because I can now write TS with no issue on any other project, which was one of my learning goals for 2020 anyway. Also you get to use it as much as you want, it's more of another 'testing' and 'linting' layer to help developers write safer and cleaner code. Throw in TSLint and the code base looks the same for all developers.

RxJS

I read somewhere that this was the most confusing and hard part of working with Angular. I maybe haven't delve deep enough into observables to actually encounter a specific thing that I find confusing because working with RxJS, the operators, subscriptions was not at all hard or confusing.
You just subscribe to an observable like a http GET request and once the server returns data you resolve it just like you would by using a then on a promise. It also provides a great deal of operators to help you manipulate and edit observables without much hassle.

RxJS gets a plus from me. No complaints so far, but I don't really see why I would use observables outside of Angular.

The complete package

Angular isn't just a view layer where the developer can use whatever packages and modules they desire, instead it's a bit opinionated and comes with a variety of different funcionalities from routing, forms, http requests, the before mentioned RxJS and TypeScript.

And this isn't a bad thing. It's a choice. Do you want to use React where you have a choice of what to use so you can be flexible and develop apps the way YOU want them to, but at the same time risking shooting yourself in the foot because you didn't account for something. The reverse goes for Angular. You have a complete package of tools that allows you to build a complete app without having to implement or think about outside solutions, but you give up some of that freedom you might have with React, which in my opinion is understandable.

This is why Angular is still more popular than React in enterprise solutions, but less so in smaller communities where people want flexibility.

Closing thoughts

Don't limit yourself to technologies just because they aren't as popular or because you think those technologies are doing something bad, instead try them out and form your own opinions on the ecosystem and developer experience by making some small apps. Same goes for languages and other things in the technology world.

Thank you for reading.

Posted on Jun 1 by:

zasuh_ profile

Žane Suhadolnik

@zasuh_

Web Development, Programming, Computers, Films, Books, Outdoors, Metal, Games, Random thoughts.

Discussion

markdown guide
 

I'm an Angular fan.

The Angular CLI has simplified everything about Angular.

ng new projectName
ng serve

Just 2 commands to create and serve a web application. It takes 2 minutes, and is perfect for a simple web site.

Growing the Web App through Components

// create a new component
ng g c Componentname

  • Complex applications need multiple components

    • Custom Components
      • Allow us to create custom html tags which contain specific function
      • Four files are generated in the 'Componentname' folder, the Html, Css, Typescript and Test file.
      • Include them anywhere in application by using the new HTMLTag app-componentname
      • Same concept as the native HTML 5 WebComponent
  • Rxjs was integrated to allow for subscribing to all events in Angular.

    • No more addEventListener('eventname') necessary
    • But Rxjs can be added to any framework.

Project Getting Too Large?

  • Break up areas into modules
    • There is always a root module named app.module
    • New modules define all the components for that 'area'
    • The modules allow 'group' imports of components defined within each module.

HTTP Support

  • Built in, but uses observables instead of promises!

  • The request method has 17 overloads, meaning it can do many things.

  • The get method has 15 overloads.

  • etc. etc.

Client Side Routing

  • Routes are tied to the incoming path and related to the component to handle.
  • Router Guards (add to security)

Needs Improvement🍋 <=Lemons

  • Example Documentation is poor.
  • Api Docs are a mess (IMO)
  • Migrations are messy ng update
  • Installing Angular can be difficult
  • Relatively long learning curve
  • File and folder renames don't update everything
 

Project too large?

Migrate to Nx. I'm biased ofc, but long-time Nx user :)

 

I Just read intro doc. Looks like a great library. Tx.

Tx, once again. This one looks like a winner.

 

I've written apps on nearly every major UI platform for the past 30 years and Angular 9 is the best. Once understood, you realize you are doing it right when you code is incredibly terse and expressive. No state management needed if you just use Observables in service with Subjects (often ReplaySubjects). Your services express the state and how it maps, both ways, to the backend, the templates (especially when using "data$ | async") are what a UI should be - a rendering of the current UI State, streaming.

You can have the one-file experience in Angular easily. When you create a new project, use -t -s and anytime you use ng g c Foo, it will generate two files - component and spec. For existing apps, ng g with -s -t will make two files instead of 4. The component uses the "template" and "style" attributes instead of "templateUrl" and "styleUrl". One downside to that approach is that style is only CSS, not SCSS. If you need SCSS, you must use a separate .scss file. However, unexpectedly, I consider anytime I have to do this a bad smell.

Angular kind forces you, once you learn it, into very terse and expressive scss too. Any use of SCSS outside of styles.scss (and it's imports) is a bad smell (in structure and in bundle size). Moreover, in general, the less CSS at the component level, the better. This is my favorite line and most common line in my angular components:
styles:[``]

More commonly, I have CSS in styles, but only for layout. CSS in components should be limited to layouts - flex/grid/widths, etc. Using anything else and you themes are likely broken.

Ideally, and it's such a sweet easy ideal to acheive, component styles should come from CSS theme variables defined in styles.scss and available to all components. Like so:
// Using material theming...
in styles.scss (or an import of):
$primary: mat-color(map-get($theme, primary));
--primary-color: #{$primary};
.my-card {
color: var(--primary-color)
}
In the component:
<!-- Look ma, no CSS! -->

Anything other styling, that's not layout specific to this component, is not DRY.

 

I haven't done enough in React to compare the two, but I definitely know that Angular is working like a charm for big projects and large teams.

The problem with the idea of using "smaller" frameworks (is there such a thing at all, and is React small indeed?) for smaller projects is that in most cases you cannot decide right from the start what is a small and what is a bigger project.

The problem with small projects is that they have the tendency to turn bigger.

However, it is true that Angular is a fully-fledged framework, so you will naturally have to learn its idioms. That, though, has turned out to be a good thing as Angular guides you through the process and makes you adhere to certain standards right from the start.

 

Angular is very popular framework and will be for long time. I do Angular on projects that has to last years but if I need to do something small I rather jump to Vue. Probably on Vue3 when TypeScript is first-class citizen I might warm for using it on bigger projects as well. React on the otherhand has never really fit to my toolbelt.

 

Nice write up, full disclosure I work on a large Sass Application using Angular for 3-4 years now. For this type of application Angular is a solid choice. The larger the project / team is when Angular begins to shine.

Somethings to highlight for other devs:

  • The default may be separating components into 3 files but you are not forced to, everything can go in the component file

  • Can't imagine not using RXJS now that I have gotten use to it.

  • For large projects/teams would highly recommend NXDev Tools, works with both Angular and React, takes a lot of the pain points away. In the end your mostly writing es6 business logic, makes framework code secondary concern.

 

Well, from my experience I say angular is a framework which is good for big and complex projects.
I still suggest using jQuery for very small projects or then use ReactJS.
React is also good for big project but then its a library, you need to define and standardize the modules, components and structure of the project flow.
Putting in ngRX on a Angular project does feel like increasing the complexity but it does help in the overall gains, same goes for state management in react.

 

Heads up, you can use the --inlineTemplate and --inlineStyle CLI flags to have a single file per component.

I don't know that Angular is more popular in enterprise solutions. It's something people always say, but I've yet to see any evidence that it is case and it goes against what I've experienced from enterprise projects.

 

Angular was my first love framework wise, but I've found React to be wayyy lighter weight, easier to write, more publicly supported, and more adaptable to fit different size situations. I've never liked how clunky Angular applications tend to be, and how little support there is for SPA development. However, for massive projects, I do find it's opinionated architecture to be better for working with in teams, and the routing and module structure to be a lot more intuitive and expandable than React.

 

I'm going through the same thing, but I'm struggling. Everything in React (or Vue) just felt more simple, which makes Angular less enjoyable for me. Thanks for adding some positivity!

 

Interesting to read this perspective given that I've just gone through a similar experience: I worked with AngularJS a few years back; then worked with React (+ TypeScript) and just completed an Angular project. I do totally agree with your closing thoughts: ultimately these libraries/frameworks are all just tools and every tool has its pros and cons; but I would never use Angular for a personal project and would only recommend it if the perceived benefits are absolutely essential.

The main argument I'd make against Angular is that it is comparatively complex: there is a lot of boilerplate to learn and you land up generating a lot of project code that at some point you will have to come back to and work with. The CLI does help generate the boilerplate; but you'll still need familiarity in order to work with that code.

You can argue that the complexity is justified because it provides robustness and scalability; but that's also what makes Angular an expensive choice. Onboarding of new devs will take longer (I found the documentation really hard to work with: far too wordy) and working with code just takes longer. Over time that all adds up and you will have to pass on that cost to your clients...

TBH I think Angular's reputation is justified; but that doesn't mean it doesn't have its place :)

 

Good Article!
I'm an Angular fan, and as it mentioned before me, the Angular CLI is a BIG Plus for me here.
BUT I can understand that Angular could be an elephant for smaller projects.
Everybody use what she/he likes, but don't choose framework/library for yourself. Choose what is best for the project, you are working on. I don't wanna ride the Angular vs React vs Vue hype train here. I used React for smaller projects, and used Angular with Ionic for bigger applications (from Ionic 5+ you can use React.js and Vue.js too).

 

I agree with everything you have mentioned above. I have been using angular for 3-4 years and now have just switched to react in current company😛(Reverse story of yours). In my view, if my app is going to be small then I would go for react. No need to write more code for simple things but if I know that the app is going to be huge and needs scaling on larger scale then I would prefer angular. It has everything for a fully fledged app, maintainable code and with new advancements, it's just getting better and better in terms of performance & build size. Also, You can use Rxjs to write async code anywhere. Promises do provide a way but when you need to do complex async operations like shooting 20-30 request at the same time and doing some computation with the incoming response then Rxjs provides a nice, easy syntax. I have used Rxjs in node and it really works well in writing async code for many cases. At last, thank you for this awesome blog. Keep writing.

 

I agree that I should have expanded on the RxJS thing a bit. It also handles http responses in a better way by providing options for success codes and failure code. Something you need to manually handle in React or use a third party package like Axios.

Thank you for the kind words!

 

Indeed. Initially I was also scared of Rx but when I got used to it then things changed. It's good. 😇😇

 

Well, in reality if you have very complex app React would be more suitable solution, as it's works better in such cases. Angular is good when you want to scale (in terms of people) +/- common project, that's the place very Angular is really shine.

On other hand React for simple apps is overkill as well, there is better and simpler solutions.

React works best for the fixed teams (which has at least 1 senior developer), and complicated projects.

Popularity of Gatsby shows that React overused, as Gatsby in general kills main idea of React, and React on it's own not very simple as it may see on the first look.

 

😛😛 Well I agree with you as well. Atlast everything will come down to developer preference. Its just I like angular's idea to maintain code i.e three different files and yes more easy solutions are there for small apps. Indeed. I am happy to see frameworks like svelte which are simple.

 

My list of pros and cons:

PROS:

  • Closer to "default" web dev - mostly because templates and CSS are used instead of a dozen of CSS-in-JS alternative;
  • Abstracts away state change, no need to worry about immutability; Very simple state management.
  • Contexts in angular (providers and viewProviders) are way easier than in react. And very powerful.
  • Very fast learning curve in our company (when we can mentor new users so they are are less reliant on the average Angular docs)

CONS

  • Bigger payload and a bit slower performance
  • Splitting code into multiple libraries is painful
 

I think that a very well-architected app that makes use of lazy loading everywhere it can can actually be pretty small(ish). Nothing in the MBs-realm on initial load, which for modern apps is OK(ish).

 

I totally agree one shouldn't limit himself to technologies based on popularity or rumors. People are inclined to build prejudices about the unknown out of fear. Either of not understanding it or not having time for it or simply because of a gut feeling.

But these are just tools. They are not good or evil. They are simply suited or not to solve your problem. And as the logic goes, the more tools you know the more problems you can solve.

RxJS, for instance, is one tool that most people might want to at least know what it is about (check this out: rxmarbles.com/). I am doing Android development primarily, but around a year ago I started working on an iOS project. And if there is any tool that saved me the most dev time it is RxSwift, which is the Rx implementation for Swift. That is because I already knew about RxJS (from personal projects) and RxKotlin.

So, more people should follow your example - explore, analyze, and test your tools before jumping to conclusions. It may be harder at the beginning but definitely worth it in the long run.

 

The words in the closing thoughts are pure gold. Whatever floats your boat. There's no silver bullet, which is why a variety of options exist. We gotta make use of the one that works for us.

 

I agree on this one, gotta love the fact that angular, has more files for just one component, I don't know why, but I preffer that way, just have to say, that angular is not that good, if you're starting in the front-end developing because you get tangle after some time. Thats why I decided to move to Vue, the learning curve got better for me, but when I have the experience and practice with Vue, I would totally go back to Angular, without a doubt.

 

At our job we use Angular and we also have college interns join our team for half a year. Angular is so good that within a week or two the interns contribute meaningful pull requests!

Everything is nicely compartmentalized that we barely ever have merge conflicts. Angular is fantastic for large projects.

I also wrote Video Hub App - an Angular application that runs silky-smooth and people with even little coding experience were able to contribute good features. The power of Angular!

 

Rxjs is probably the BEST thing I have ever learnt from 2018!
There is no such thing confusing or hard after spending time to learn.

 
 
 

Angular is Love, i can feel the code! i like things to be well organized, i am that guy who is writing modules like this:

- CoreModule
- SharedModule

What guy are you ? :D