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.
Top comments (29)
I'm an Angular fan.
The Angular CLI has simplified everything about Angular.
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
Complex applications need multiple components
Rxjs was integrated to allow for subscribing to all events in Angular.
Project Getting Too Large?
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
Needs Improvement🍋 <=Lemons
Migrate to Nx. I'm biased ofc, but long-time Nx user :)
I Just read intro doc. Looks like a great library. Tx.
Yeah you should 🙂
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.
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.
My list of pros and cons:
PROS:
CONS
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 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.
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).
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.