There are quite a handful of JavaScript frameworks that can be used to build web apps and UI, i think this brings about a little bit of indecision in a developer when they decide to pick a JavaScript framework they want to work with; we have Vue, Angular, React, Svelte just to mention. If you are an experienced developer you will agree with me that at some point you had a hard time picking which one to learn. let me try to present beginners and intermediates with a solution that will make the decision easier and more straight foward.
What are JavaScript Frameworks
In the context of this article, JavaScript frameworks simply refer to modern JavaScript libraries/compilers that can be used to make SPA (single page applications). JavaScript frameworks offer much more than the ability to make SPA, they also make our code base much easier to manage by providing some directives (angular, vue) or syntax (react, svelte) that abstracts away a lot of code and avoids unnecessary duplication of code, they also provide out of the box features like conditional rendering, conditional styling, ability to emit custom events , central data store and much more amazing features, the most popular/used JavaScript framework includes
- React you can visit the react homepage here
- Vue, you can visit the Vue homepage here
- Angular, you can visit the angular homepage here
- Svelte, visit the svelte homepage here
Let us take some time to look at each of these frameworks in turn and see what they offer and the drawbacks attached to them.
React
React is a JavaScript library for building UI, it was created by Jordan Walke in
2013, it is currently sponsored by Facebook. React is one of the most downloaded projects on npm, and is the most downloaded and used JavaScript framework. React uses a virtual DOM under the hood, it compares the virtual DOM with the real DOM and if there are inconsistencies, it updates the real DOM to match the virtual DOM only where there is an inconsistency (where the state of our application has changed or where the data had been modified) so we see changes as they happen. React uses JSX which is JavaScript mixed with XML superpowers, thus we can write declarative and expressive HTML templates inside JavaScript files, outside JSX react uses plain JavaScript and it's syntax is quite easy to learn and pickup. React supports both class based and functional components
Pros of learning React
- React has a short learning curve and if you are a fast leaner, inside a 2 weeks to 3 weeks, you should be able to build simple UI's with react.
- React allows you to chose the pattern you are going to implement in building your web app, MVC, MVM, MVVM etc.
- Since react is the most used frontend framework, there is no shortage resources to learning react, and jobs that require skills with working with react are quite easy to find.
- React supports both functional based and class based components, if you are not comfortable using a class based component, you can also use functions as components and i used stateless functional components a lot.
Cons of React
- Building large complex web apps with react can easily become a nightmare, since there is freedom to choose your structure, things can easily get out of hand if not carefully thought out.
- React supports a one directional flow of data, that is only parent components are allowed to pass data to their children component and not the other way around.
- JSX can be make your head spin for a few hours if you are new to it.
Vue
Vue Js is the second most used JavaScript framework behind react, it supports a class based component system, it was created by Evan You in 2014, vue lacks the backing of a huge cooperation, however there is huge community of vuejs developer, vue js is simpler than react to me and it is very easy to learn. It incorporates some react features, eg: you can define a render method to render your app to the DOM, vue also has a virtual DOM. Vuejs also incorporates some angular features like directives and filters.
pros of learning Vue
- Easy to learn, active community of developers working to improve and develop the framework. It is easy to find resources where one can learn and the docs is a great place.
- Vue is a mix between angular and react thus it incorporates some of the best of both worlds, it doesn't matter what background you are coming from, react or vue or no background at all.
- It is easy to extend and incorporate your own custom directive/filters to allow for more customized declarative style template.
cons of vue
- Vue lacks the robustness of angular and cannot be used to build advanced front end projects.
- Working with assets like external stylesheets, fonts and images can be a nightmare for a beginner.
Angular
Angular is a super-heroic JavaScript framework built for making advanced and complicated web apps, angular was built by Misko Hervey in 2009, it is backed by google. Angular js is a full fledged robust framework for complex frontend projects, it is built on TypeScript and this allows for cool features like dependency injection, static typing and much more. Angular has some other cool features like declarative html template through the use of directives, Reactive X(Rxjs) programming using observables, and a rigid application structure where we can have services, guards etc. Angular also makes two way data binding a breeze, there is property binding and event binding, angular is like the superman of other frameworks. (personally i enjoy working with angular a lot).
pros of learning angular
- Declarative HTML template which is made possible by via angular directives, Reactive x (Rxjs) programming using observables which are super cool.
- Two way data-binding is a breeze, you can bind data to HTML attributes and events, and you can also fire a custom event.
- TypeScript usage allows you as a developer to take advantage of all the cool features that TypeScript provides in your angular application.
- Dependency injection, this allows keep components and methods separated from each other, supporting a MVC approach.
cons of angular
Long learning curve as one has to learn some extra things like TypeScript and Rxjs first before one can become proficient with angular.
Build bundle size is quite big compared to other frameworks significantly affecting load times.
svelte
Svelte is a new kid on the block of javascript frameworks however it has some cool features, it was built by Rich Harris in 2016. Svelte is kind of new in the way that it works, rather than being a library, svelte is a compiler, this means that svelte only compiles and ships our bundle without the svelte library, svelte is easy to learn, much easier than vue or react. It's syntax is quite different and allows of smaller LOC(lines of code) compared to other frameworks, apps built by svelte has smaller bundle size compared to other frameworks and thus faster load times, it also supports bi-directional flow of data.
pros of learning svelte
- Svelte is a compiler and it will only compile and bundle your code, it doesn't ship along the svelte library thus apps built with it are faster.
- Svelte syntax is easy to learn and has shorter LOC compared to other frameworks.
cons of svelte
- svelte is quite new thus it lacks some the community of angular, vue or react.
- Jobs that require svelte as a skill is not so common.
Which to learn?
It is to point out that all these frameworks discussed above are just different ways to do the same thing, so just which one might be best to learn in 2021? let's look at a few things to consider before we can pick one
- The time curve that it will take you to learn the framework.
- The community behind the framework and availability of learning resources.
- The amount of jobs that require the knowledge and skill working with the framework.
I think to me these are the most important things to consider when choosing a frontend framework, avoid comparisons between them as this might make you miss out on some cool features that they posses, rather pick one and learn that one properly then you can move on to another.
I cant choose for you so sorry, you have to make your own choice but i hope that i just made a little contribution in making that choice easier for you. For me i learned React in 2021 and i'm enjoying building web apps with it, check out this Todos app i made with react.
Top comments (0)