Deciding between Angular and React for Hobbyist Web Developers

Deciding between Angular and React for Hobbyist Web Developers

…and why I chose to teach myself Angular instead of React

I was deeply conflicted about whether to use Angular or React for a long time. I’ll confess I haven’t used React at all, but I did do a lot of research beforehand and thought I’d share my 2 cents on why I settled with Angular. The JavaScript community that I’ve come to know online is very hyped regarding React, so I thought I’d make the case for why hobbyist developers should go with Angular.

A bunch of Angular vs React articles that I’ve read do seem to come from people who have tried both, but honestly I don’t think you can really use that argument unless you have used both extensively and professionally. What works for a small private project may not work so well in the enterprise world. Note that this article is strictly referring to Angular (v2 and above) not AngularJS… AngularJS is dead.

Angular is a framework not a library

Yeah yeah I know you’ve heard that a million times. But even for a small project, I think this has a lot of advantages, especially if you’re a new developer or doing a full-stack website. Angular provides all the build tools you need the command line for you too. No dealing with TypeScript transpilers, Babel, uglify/minify, which test framework to use, etc. Everything you need to make your code ready for production is setup for you.

When you are a new developer, convention over configuration tends to be the better option. Working with Angular can introduce you to new tools/ideas like the front-end development server and building/packaging your code when getting ready to deploy. Instead of countless hours spent Googling for the next thing you think you need to install or which tools you should use, everything is ready with just a single command: ng new “project name" .

Lastly, don’t underestimate the importance of testing. Many developers aren’t in the habit of unit-testing front-end code. But an element on a webpage whose behavior changes based on user interaction, should always always always be unit-tested. Even my personal professional website I’ve unit-tested using Angular’s karma and jasmine tools because it makes me sleep easier at night knowing I’ve gone back through my code in detail and done my best to make sure some user isn’t going to easily end up breaking something. With Angular, your framework and drivers for both unit and end-to-end testing are setup for you.

Performance

Of course Angular being a full-fledged framework is going to take up more storage space than React which is just a library. But the difference is negligible; it’s in the kB range. What really matters is how fast the elements on the page are going to render and how responsive they’ll be. When your Angular project is ready for production, you just need to build it with ng build --prod --aot and you’ll be ready to deploy. That is, everything will be compressed and packaged for maximum performance.

I can’t speak from personal experience regarding speed, but I did look up some benchmarks. In the following article: https://itnext.io/angular-5-vs-react-vs-vue-6b976a3f9172 , a benchmark was done by rendering a 1 month calendar (24x31 table cells) in Angular, React and Vue. Angular beat out both React and Vue with React being the slowest one: it took almost twice the amount of Angular.

Source: itnext.io | React : 1819ms, Vue : 1191ms, Angular : 931 ms

This next benchmark may be a tad dated, but it wasn’t when I was still deciding which framework to use. It was probably the most detailed benchmark I could find comparing Angular React and Vue: https://www.stefankrause.net/js-frameworks-benchmark6/webdriver-ts-results/table.html . In that article, if you compare the standard Angular v4 results to the React/Redux v15 results, you’ll see that there’s no significant difference in performance. However, Angular still outpaces React for most operations on creating, updating, and deleting rows on a table.

Feel free to post comments if you know of any detailed benchmarks that have been posted online since then which may add more insight.

Angular vs React: Stefankrause.net

You have to use TypeScript, that’s a good thing.

Standard JavaScript is sooo yesterday; it has way too many problems. Cross browser compatibility (that’s why Babel was created), different versions of NodeJS (your machine at home may have a different one than what’s on your server), no type safety which is a hassle with any project with more than one developer, and only quasi object-orientedness with ES6. TypeScript transpiles to clean ES5 (an older version of JavaScript) code which eliminates nearly all of the compatibility problems.

React does come with the option of using TypeScript, but I wanted to be forced to use TypeScript. Working with TypeScript has made me a better developer and helped me at my day job which uses Java in the back-end, since there are many more similarities between the two than with regular JavaScript.

I understand concepts like interfaces, inheritance, protected and abstract methods and variables etc. much better now thanks to TypeScript. Also, keep in mind that object oriented skills are a common skill requirement when looking for new jobs. If you come from a traditional object-oriented background then learning TypeScript will feel way more natural to you than working in pure JavaScript, especially if you’re a freak about the “ Seperation of Concerns ” principle like I am.

More freedom when working with preprocessors

I hate hate hate working with HTML and CSS, but I love Pug and Stylus. I know what you’re going to say, “Oh I can use those with React too.” Yes it’s true you can, but template preprocessors require separate plugins in order for them to work inside React.

Because Angular’s template code is loaded from separate files outside of the TypeScript, it doesn’t matter which preprocessor language you want to work with. You don’t necessarily have to install a separate plugin and you never have to worry about some new feature of the preprocessor in the future not being compatible. The Angular command line also has quite a few CSS preprocessors built into it including the most popular ones: Stylus, LESS, and Sass. These will all be converted internally when building your code or when you starting the development server.

There are more job opportunities with… actually I don’t think it really matters.

When searching through the horde of job opportunities there are for front-end/full-stack web-developers, one thing I’ve noticed is that while they might say it’s an Angular or React job, having experience in either one doesn’t really matter as long as you have solid JavaScript experience and have worked with some framework whether it be Angular, React, jQuery or whatever. In my home city of Seattle, React jobs far outnumber Angular jobs, but never have I seen a job posting or been told by a recruiter that I MUST know React. In the tech world, once you have the interview, the only thing that’s important is how you perform on the technical screening questions, experience really only gets you to the interview.

Long story short, don’t pick a framework based job opportunities, pick one based on which is going to be more fun and convenient for you. But hey if you really want to work for one of the big companies that made Angular/TypeScript (Google and Microsoft) or React (Facebook), use the framework that they invented.

Conclusion

Every single Angular vs. React article seems to end with the cliche, “Use the framework that is right for you.” Since I’m sure we’re all tired of hearing that I’m going to say this, “Use Angular.” Don’t use React unless you’re an extreme hobbyist who wants to experiment with different libraries for building, doing http requests, testing, blah blah blah.

I’m a hobbyist when it comes to actually making websites and getting something out there, not in learning every web-development tool under the sun or discovering what the ultimate combination of libraries is. If you want to experiment with different tools, I guess you can give React a go. If you actually want to sit down and start pumping out some websites that are thoroughly tested and production ready, use Angular.

Happy web-deving :)