DEV Community

Cover image for In defense of the Angular framework

In defense of the Angular framework

Žane Suhadolnik on June 01, 2020

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 ...
Collapse
 
jwp profile image
John Peters • Edited

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
Collapse
 
juristr profile image
Juri Strumpflohner

Project too large?

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

Collapse
 
jwp profile image
John Peters • Edited

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

Thread Thread
 
juristr profile image
Juri Strumpflohner

Yeah you should 🙂

Thread Thread
 
jwp profile image
John Peters

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

Collapse
 
michaelbushe profile image
michaelbushe • Edited

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.

Collapse
 
jpkeisala profile image
Jukka-Pekka Keisala

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.

Collapse
 
codecrisp_io profile image
Ryan Teague • Edited

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.

Collapse
 
swapnil0545 profile image
Swapnil Mhaske👨‍💻🎮☕🌄

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.

Collapse
 
josetorresmarin profile image
Jose Torres

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.

Collapse
 
wkrueger profile image
wkrueger • Edited

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
Collapse
 
gc_psk profile image
Giancarlo Buomprisco

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).

Collapse
 
insanenaman profile image
Naman Gupta • Edited

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.

Collapse
 
zasuh_ profile image
Žane Suhadolnik • Edited

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!

Collapse
 
insanenaman profile image
Naman Gupta

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

Collapse
 
kononenkoam profile image
Anton Kononenko

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.

Collapse
 
insanenaman profile image
Naman Gupta

😛😛 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.

Collapse
 
csorbamatyi profile image
Matyi Csorba

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).

Collapse
 
caelinsutch profile image
caelinsutch

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.

Collapse
 
blindfish3 profile image
Ben Calder

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 :)

Collapse
 
learnitmyway profile image
David

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!

Collapse
 
ccheptea profile image
Constantin Cheptea

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.

Collapse
 
joeyprogramy profile image
Joey Programy

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.

Collapse
 
verdaux profile image
Carter Roy

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.

Collapse
 
whyboris profile image
Boris • Edited

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!

Collapse
 
chandlerfang profile image
Chen Fang

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.

Collapse
 
shaaafi profile image
Md. Shafiul Islam

Truth..

Collapse
 
niaro profile image
George Kayzer

Angular Rocks

Collapse
 
mrbugcheck profile image
Said MARAR

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