Angular vs. React vs. Vue – A Newcomer’s JS Frameworks Journey

The Big Announcement

Today, I’m proud to announce that I’m pretty sure I’m gonna probably learn (dramatic pause) React.js. Wait, no — I mean just, React. According to the internet, I don’t think the “js” is really necessary anymore. And while you’re all here, I also need to get better at plain old JavaScript. Hold me to it, y’all.

– Me

Chirp. Chirp. Chirp.

Ok, now that the big announcement is over and the raucous crowd of crickets has quieted down, here’s a little background on me and the process I went through to pick the next technology to learn. Maybe you’ll find it useful.

A quick background on a “self-taught coder”

I can write code, but I’m a far cry from a developer or engineer. From a technical perspective, I can hack stuff together pretty well. Which is sometimes nice and quick, but sometimes painful and slow. “Self-guided” is a better descriptor than “self-taught” for my technical expertise as I have guided myself through enough internet tutorials, code projects, forums, and discussions with colleagues to learn most of what I need to know to accomplish most of what I want to do.

At my day job, I’m stuck with hosted Windows Server boxes running IIS and SQL. And the app I manage has me writing .NET/C# and HTML/CSS/JavaScript. When it comes to side projects, I jump between WordPress, Bubble.io, and Azure platforms, utilizing HTML/CSS/PHP/JavaScript/jQuery for most front-end stuff. I almost always find something template-y to start with and then tweak or build on top of it. Pretty basic stuff.

Building websites and simplish web apps is a snap and growing easier by the day with the growing number of easy to leverage frameworks and low-code/no-code tools. Both WordPress and Bubble have allowed me to put together more advanced (by my standards) apps in surprisingly short time. But I want to be able to build more scalable, fully featured web apps and mobile apps. So I decided I needed to take a break from wandering through brief online tutorials and commit to a complete course on one of the countless coding technologies.

In the early stages of this surely-soon-to-be-made-for-TV-movie journey, my lack of a “classical” developer background had me quickly tripping over the proper technical terms to guide my initial Google searches. For a real developer, it’s surely a less winding path to decide which technology you’ll throw in the ol’ codin’ toolbelt next. For mere mortals like me, it’s been a zig-zaggy journey filled with self doubt and nested research tangents. A single paragraph or sentence in a semi-technical overview article could spurn multiple mutterings of “awwww, shit — now I need to go look up what that is and how it relates to this other thing up there that I just learned about.”

My internet searches eventually evolved from “which programming language should I learn in 2020” to “which framework should I learn in 2020″ as I shifted my focus to learning a framework that was in the “family” of stuff I was already familiar with.

Angular vs. React vs. Vue

Then, I narrowed it down to Angular, React, and Vue since they seem to be the most popular front-end JS frameworks (source: general internet consensus). I read a bunch of stuff and listened to a bunch of podcasts and watched some videos (but definitely not a bunch of videos) because watching code I didn’t really understand was boring.

Here’s a good article from a guy that teaches all 3:

And here’s some takeaways from that article and others:

• There’s no best one. Just the one that’s best for you. Ughhh, that doesn’t make the decision any easier.
• Each framework differs in more than just syntax and general structure. Each has unique conceptual approaches.
• Angular is the “biggest” framework as it includes the most features out of the box.
• Vue is easiest to learn due to its syntax that has closest resemblance to HTML markup. Sits between Angular and React in terms of features. Least popular but not unpopular by any means.
• React is laser focused on UI components. Requires other libraries (like Redux and Router) to build more complex apps. Most popular.
• React and Vue both have specific libraries for developing native mobile apps.

OK, so they’re all super great, but which framework is best for me?

As I read about the 3 different frameworks (turns out React is technically a library), I realized I needed to make a list of considerations most important to me:

• Learning curve – I have finite time and mental capacity to learn a new framework. And I transferred out of Computer Science in the first 18 months of college. Doh!
• Mobile app support – Ideally, I can learn one framework and use it to develop both web apps and mobile apps.
• Support community and available courses – I’m gonna need a lot of help.
• Required stack – What other libraries, tools, and technologies are needed to use these frameworks effectively?
• Podcasts – I listen to a lot of podcasts so bonus points for the framework with good podcasts.

And here’s how those considerations played out after lots of Googling:

• Learning curve – Vue is the easiest. React and Angular are kinda tied. Given that React is the most “stripped down” of the three, you could argue that’s a negative because you have to find and learn additional libraries. But it could be a positive because you can focus on its core feature set and bolt on only what you need as compared to Angular which includes more functionality out of the box, but some of that functionality could be unnecessary and slow you down. Or speed things up. Hard to say at this point.
• Mobile app support – React seems to be the clear winner here as it can be a stepping stone to React Native which is the most popular (and best supported?) framework for building mobile apps on iOS and Android. To be clear, React is not React Native but there is obviously some overlap with concepts.
• Support community and available courses – All three seem to have lots of courses and Googlable resources but React has the most?
• Required stack – A smaller stack* is better I thought. But not so fast. We touched on stack earlier as it relates to Learning Curve, but React potentially requires the most additional libraries depending on what you’re building. Vue has more features than React. And Angular is the most complete out of the box. Angular wins this one, right? Not exactly. I realized I needed to figure out which “features” I was going to need. More on stack and “features” below, but I don’t think there’s a clear winner here.
• Podcasts – I found some podcasts on React (like React Podcast, React Native Radio, and React Wednesdays) and despite the blatant lack of creativity or clever puns in their names, they were quite good. And I never really got around to searching for podcasts on Vue and Angular.

*Stack – In this case, I use stack loosely to encompass all the tools, libraries, components, plugins, add-ons, doo-dads, databases, and other technologies I would need to create apps. Some (smarter) people might consider things like libraries to be horizontal stack and not vertical stack, but I didn’t bother checking on this technicality.

WTFeatures

OK, so at this point I was leaning towards React because I liked its approach to front end UI components. And I really liked its potential advantage for transitioning to native mobile app development. The internet said it was harder to learn than Vue, but not impossible by any means. And its popularity meant there was a good support community behind it. But I needed to dig into this whole “features” thing a bit deeper.

In the comparison article I mentioned above, the author was nice enough to include a feature comparison but ignorant enough to assume I knew the meaning and context of each. Reminder: I went to Google U for most of my technical training. Anyways, on to my features breakdown.

Feature 1: UI/DOM Manipulation

Loose definition: The ability to create and manipulate the stuff users see on their screen.

Comparison: This is essential to front end development so of course Angular, React, and Vue all do this.

Feature 2: State Management

Loose definition: “State” refers to the series of changes the user may have triggered since the page was loaded and how these changes are “managed” or tracked. JavaScript enables users to interact with the page without having to refresh the page so managing these changes is crucial.

From the article linked below which explains state management: “With a state management system, to find out what the state of our application is, we check our state data structure. The DOM should reflect the data, but the data is the Source Of Truth.”

Comparison: Angular and Vue have State Management built in. Since React is so component focused, state is managed by each component. This might be fine for your application. For more advanced apps, you might opt to use an additional library (like Redux) to manage state in a more centralized way. At least that’s my understanding so far. 🤷‍♂️

Feature 3: Routing

Loose definition: The process of handling navigation in a web app. For instance, when a user clicks on a link or button that triggers some sort of navigation request, what happens? In a single page app (or any app for that matter), routing can be used to change the content of individual components on the screen, like leaving the header and menu in place, but replacing the contents of the main content area when the user navigates from the “home page” to the “about page.” Routing is also what enables things like bookmarkable URLs in your app.

Comparison: Angular and Vue have Routing built in. React requires an additional library, like React Router, to manage routing.

Feature 4: Form Validation and Handling

Loose definition: This one kinda explains itself. Form validation allows you to do things like check that required fields are completed and present the user with specific messages related to their inputs and your requirements. Form handling refers to how the data from a submitted form is handled.

Comparison: Angular includes advanced form validation and handling out of the box. React and Vue can be used for “basic” form validation but require additional libraries to handle more complex form validation and error handling.

Feature 5: HTTP Client

Loose definition: Allows the front end of your app (browser) to communicate with the back end (server) or some other remote server. Obviously, this is essential for sending data to and from your app’s users.

Comparison: Angular has its own HTTP Client built in. React and Vue require additional libraries (or JavaScript’s built in fetch method) to manage HTTP requests between the front end and back end.

Stacks on Stacks

This is a tangent and a wiser person would probably tell you to focus on choosing the best framework for your needs before jumping into larger stack considerations, but I’m not that wise and I’m easily distracted. And if you’re like me, you also might be curious what the development stack looks like for Angular, React, and Vue.

Regardless of which framework you choose, the overall stack is going to be similar. Angular/React/Vue will handle the core of your front-end needs, then you’ll need to choose a database solution and application server solution, to round out the conventional 3-tier architecture stack. As an example, MEAN is an acronym used to describe the popular javascript-based stack that uses Angular for the front end, Express.js and Node.js for the application server component, and MongoDb for the database component. Swap out React for Angular and you get MERN. I’d advocate for VENM over MEVN, but MEVN seems to be the acronym of choice when using Vue for the front end.

In addition to these common stack options and variations within the MEAN/MERN/MEVN stacks, like which database solution you choose, there are also solutions available through major cloud platforms such as AWS, Microsoft, and Google that widen your stack options.

And let’s not forget about the stack within your front end to consider. Stacks on stacks! 🤯 Depending on which framework you choose and the requirements for your app, the makeup of your front end stack can vary greatly. In the case of Angular, you’ll likely have a smaller stack than if you choose React. Here are some examples of the considerations and the libraries you might add when building out your front end React stack:

Conclusion

As I mentioned earlier, I was already leaning towards React before I dug deeper into some of the specific features offered by these frameworks. Even though Angular is the only framework that ships with all the features outlined above, React and Vue both offer comprehensive, well-documented libraries for the features they might lack out of the box. In the end, I don’t give any of the frameworks a “features” advantage. For all three, you can find supplemental libraries that might be required by your app and all frameworks can be configured to “leave out” unnecessary features when compiled for production.

So, I’m going with React due to its hyper focus on UI components, its massive popularity (notably in the USA), and the possibility that it’ll get me a little closer to mobile app development. But, before I jump into React, this process made me realize I need to take a vanilla JavaScript course first to ensure I have a solid JavaScript foundation that isn’t built on hundreds of arbitrary Google searches and code snippets I’ve written over the years. 🙄 🤦‍♂️ I should probably learn to crawl confidently through JavaScript’s underbelly before I can expect to even stumble through the React universe.