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 ...
For further actions, you may consider blocking this person and/or reporting abuse
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.
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 :)
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!
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.
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.
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.
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.
Truth..
Angular Rocks
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