Choosing a Front-End in 2020
Over the last few years, front-end developers have been completely bombarded with front-end frameworks and libraries until the cream of the crop surfaced. While there are way more than just these three of these we’re only going to go over the big 3: Angular, React, and Vue. I find that these have the largest user bases and are the most support. Before we get into the thick of things I wanted to make a distinction between a framework and library. I feel as though these things get used so interchangeably that we forget that there is a big difference.
Framework vs Library
I think the largest difference between a library and a framework is that with a library you have the most control and call the library as needed. On the flip side, with a framework, you plug your code into it and the framework will call your code. Generally speaking, frameworks provide greater structure to your code while libraries provide greater freedom.
Now that we have a brief overview of the difference between a framework and library, let’s go over each of the big 3 individually.
Angular
As far as frameworks go, Angular has one of the best environment of tools. Angular has a vibrant developer environment with every tool under the sun to help speed up your development. I think the best tool in the Angular arsenal is the Angular CLI. The CLI really separates Angular from the pack because it makes going from zero to app a breeze. It takes care of about 90% of the boilerplate code and setup. When you use it to generate components and services it will create the components, wire them up, and as a cherry on top it will also create tests for all these things. When using Angular you will notice that you will rarely have to hook up anything manually.
Angular is different from the other three because it uses TypeScript rather than JavaScript. While the other ones have TypeScript integrations, they mainly utilize JavaScript. TypeScript is an Object-Oriented and strongly typed (ish) superset of JavaScript that transpiles into plain JavaScript. With that in mind, Angular utilized OOP principles like classes, interfaces, encapsulation, inheritance, and has a dependency injection system. If you’re already used to programming languages like C# or Java then it will be a lot easier for you to use. However, if you’re not, then it can have a decent learning curve.
Angular is also bundled with RXJS which is a library for asynchronous programming. This is both a pro and a con because, while RXJS makes asynchronous programming much easier, it has a steep learning curve and can take some time to wrap your head around. However, once you get it you get it and it really does make asynchronous programming a lot easier.
Lastly, Angular is very opinionated on how an application is supposed to be built and how the components are to be used. This means that there is a right and wrong way to do things in Angular, or an Angular way to do things. If you can work within these rules you can make very large and complex apps quickly and in a way that is easily maintainable.
With all of these things in mind, let’s have a quick recap.
Pros
- It has mature tools: The CLI provides everything you need to quickly and efficiently create apps, components, services, and other modules. There are a host of other tools to make your life 100% easier.
- Opinionated framework: When there is an Angular way of doing things it can be really easy to create large and complex applications. Another added benefit is that you can come into any Angular project cold and be productive sooner.
- Maintainability: With such an opinionated framework, it becomes very easy to maintain large projects and keep things looking orderly within your project.
- Utilizing RXJS: This makes asynchronous callback-based programming much easier.
Cons
- Less freedom: This is common of most frameworks, as this restricts some freedom users will have. You often have to learn how the framework works and code within its confines.
- Learning curve: Since Angular uses RXJS out of the box for all of the asynchronous programming, you have to learn how to use it. RXJS has a decently steep learning curve, but in the end, has more benefit in the end. RXJS is a portable library that can be used elsewhere, but Angular is the only one that kind of forces you to use it and comes packaged with Angular out of the box.
- Package size: Angular has come a long way since it started, but it still produces larger package sizes than React and Vue.
Neutral
- TypeScript: Again, all 3 of these have integrations with TypeScript, but Angular is the only one that ONLY uses TypeScript and has no JavaScript version.
React
The first thing to note is that React is a library, not a framework. This means that you have complete control over when and how the library is called, you have complete freedom to use it how you will. Another benefit this gives you is that React does not have as steep of a learning curve and is usually a little easier to grasp. React is based on JavaScript, but that doesn’t mean you can’t use TypeScript as well.
Being extremely popular, React has a ton of developer support and is well supported by Facebook. This is evident with React Native, which allows you to make a React app for mobile platforms allowing you to take your code to mobile platforms.
React also has a unique rendering mechanism called virtual DOM. Virtual DOM is a very cool concept that renders a virtual DOM tree in the host’s memory. Then when the DOM changes it can take a diff of the virtual DOM and update the real DOM only with the things that have changed. This allows you to render large amounts of data quickly and can give the feel of faster page rendering.
Pros
- Complete freedom: You can do whatever you want however you want. The world is your oyster.
- Well supported: Since React has such a huge developer base it has excellent support meaning it is a safe choice for a front-end framework.
- Package size: React, being a library, generally produces smaller package sizes than Angular.
Cons
- Too much freedom: This can be a huge plus for developers experienced with React. However, this means that there is no standardization when it comes to React projects. This also means that it gives you the freedom to make mistakes and no safety to catch it, which can bite you later.
Neutral
- Virtual DOM: While virtual DOM is a cool concept that can help render your application and the data quickly, it has one big flaw: memory allocation. Since the virtual DOM is stored in the host’s memory, large DOM trees can have a negative effect on your app.
- No real CLI: So there is Create React App, but it basically just creates a React app and nothing else, but this isn’t the end of the world.
- Support for TypeScript and JavaScript: Being able to choose to use either JavaScript or TypeScript is a big advantage since you can use the same library with either technology.
Vue.js
Vue is, again, a little bit different from React and Angular. It is touted as an incrementally adoptable library AND fully-fledged framework. I think a little history is required here. Vue started as a spin-off of angularjs in order to fix what was wrong with it. To its credit, I think it was successful because angularjs was pretty much a dumpster fire (hence Angular 2). Vue, as a library, focuses on the view layer of an application. Allowing you to implement Vue with other frameworks and libraries. This is a really cool implementation because you can integrate view into an existing application or create a new application from scratch.
Like React, Vue also makes use of the virtual DOM which helps to render data. Vue also allows you the freedom to use it how and when you want without really restricting you, but while giving you the option to use it as a framework.
Like Angular, Vue also has a CLI tool that helps you create projects. While it doesn’t do quite as much as the Angular CLI, it does have a pretty awesome plugin architecture. This allows you to create your own Vue CLI plugins or use established 3rd party plugins.
Pros
- Incremental framework: Being able to incrementally integrate Vue into your app is a big plus. You don’t have to completely rewrite an existing application to make use of this technology.
- Framework and Library: Kind of playing off of the first pro, being able to use this as a library gives you freedom like react, but you can also use it as a framework to give you some more safety like Angular.
Cons
- Smaller community: While Angular and React have the largest communities of developers, Vue kind of gets the leftovers. This means that it doesn’t share the same level of support as Angular or React.
- Overly flexibility: One of the things that makes Vue awesome is a little bit of a double-edged sword. Since Vue was designed for flexibility, it lacks safety. This is the same problem that React runs into.
Neutral
- CLI Tool: While the Vue CLI tool is a little bit more useful than anything you would find for React, it still has a long way to go to be as mature as the Angular CLI.
Finding your front-end
I understand that this can be a tough decision to make. At the end of this article, I would like to leave you with a quick overview to make this decision easier.
If you’re looking for something with a set structure, strong opinions, and mature tooling then you’re looking for Angular.
If you want something that has a lot of backing, is well established in the developer community, has been tried and true, and gives you plenty of freedom then you definitely want to use React.
If you have an existing project that you want to slowly transition, you want freedom with some nice developer tools then you’re looking to Vue.
I hope these tips have helped some of you make your front-end decision in 2020!
If you’ve enjoyed this article I’d love for you to join my mailing list where I send out additional tips & tricks!
If you found this article helpful, interesting, or entertaining buy me a coffee to help me continue to put out content!
