Comparison of some popular Javascript Frameworks

Javascript is with us what feels like ages already. Its first appearance is dated back to 1995! Therefore no wonder that there has been improvements since 25 years. Some of the improvements comes in the so called frameworks, which are supposed to make the work with the scripting language easier and hold onto standards.

There are several JavaScript frameworks that are used for web development. In this article we will discuss and compare three of them.

  • Vue.js
  • React JS
  • Angular JS
Vue.js

Vue.js

Vue.js History

This framework of JavaScript was released in February 2014. It is used to develop single page applications and to build attractive user interfaces. It was developed by an engineer who was working in Google. He was using Angular JS in number of projects and maybe thought that things might be done also other (easier) way.

Following are the main features of Vue.js:

  • Virtual DOM
  • Data Binding
  • Components
  • Event Handling
  • Animation/Transition
  • Computed properties
  • Templates
  • Directives
  • Watchers
  • Routing
  • Light weight

Vue.js Advantages

  • Small size
  • Versatile
  • Reactive two way data binding
  • Virtual DOM binding
  • Ease of performance
  • Scalability
  • Easy development
  • East to learn

Generally we can see, that most of the advantages lie in its flexibility (which can also be seen as disadvantage – see below) and actual very small size in comparison with other heavy duty frameworks.

Vue.js Disadvantages

  • Fast evolution
  • Problems in iOS and Safari
  • Less amount of plugins support
  • Over flexible

Future of Vue.js

Current stable version of Vue.js is 3.0.2 (Version 3 was introduced in September 2020). It is not expected in the near future that Vue.js would overcome React JS in its popularity (currently React JS is cca. 2 times more popular between developers), but based on the releases we can be almost sure to say that this project is not dead and will stay with us in the upcoming future.

Vue.js Conclusions

 It is one of the most convenient frameworks, for both learning and usage. Gaining popularity and love from the open source community since the very beginning, Vue.js just feels much more flexible and lightweight in comparison to Angular JS. We also cannot say that it is not capable of handling large enterprise size projects, so what does actually speak against it?

Useful Links about Vue.js

  1. https://www.youtube.com/watch?v=Wy9q22isx3U
  2. https://www.youtube.com/watch?v=Wy9q22isx3U&list=RDCMUC29ju8bIPH5as8OGnQzwJyA&start_radio=1&t=0

React JS

React JS

React JS History

React was created by Jordan Walke, a software engineer at Facebook, who released an early prototype of React called “FaxJS”. He was influenced by XHP, an HTML component library for PHP. It was first deployed on Facebook’s News Feed in 2011 and later on Instagram in 2012. It was open-sourced at JSConf US in May 2013.

ReactJS Features

The important features of React JS are as follows:

  • JSX
  • Components
  • One way data binding
  • Virtual DOM
  • Simplicity
  • Performance

React JS Advantages

  • Updates process is optimized and accelerated.
  • JSX makes components/blocks code readable. It displays how components are plugged or combined with.
  • React’s data binding establishes conditions for creation dynamic applications.
  • Prompt rendering. Using comprises methods to minimize number of DOM operations helps to optimize updating process and accelerate it.
  • Testable. React’s native tools are offered for testing, debugging code.
  • SEO-friendly. React presents the first-load experience by server side rendering and connecting event-handlers on the side of the user:
  • React.renderComponentToString is called on the server.
  • React.renderComponent() is called on the client side.
  • React preserves markup rendered on the server side, attaches event handlers.
  • Up to date. Facebook team supports the library. Advice or code samples can be given by Facebook community.
  • Using React+ES6/7, application gets high-tech and is suitable for high load systems.

React JS Disadvantages

  • Learning curve. Being not full-featured framework it is requered in-depth knowledge for integration user interface free library into MVC framework.
  • View-orientedness is one of the cons of ReactJS.
  • Not using isomorphic approach to exploit application leads to search engines indexing problems.
  • Lots of developers dislike JSX React’s documentation, manuals are difficult for newcomers’ understanding.
  • React’s large size library.

Future of React JS

2019 was a crucial year for React. The major changes were React Hooks, React.Lazy and Suspense. It is well supported and reliable. It has to be. It is used by Instagram, WhatsApp and Netflix (among many others). It is the future framework for developing JavaScript applications. As of 2020 it is the most popular JS Framework and looks like it will continue to be in the upcoming future.

React JS Conclusions

Made by Facebook, perhaps it does not provide as many tools as Angular (we need some libraries to achieve the same level of functionality). However it is faster, lighter and easier to learn. React uses virtual DOM for DOM manipulation (Angular doesn’t do that). In comparison to Vue.js, while both are nicely lightweight and flexible frameworks, Vue.js just seem to have much better documentation making it easier to start with.

Angular

Angular

Angular History

AngularJS was created, as a side project, in 2009 by two developers, Misko Hevery and Adam Abrons. The two originally envisioned their project, GetAngular, to be an end-to-end tool that allowed web designers to interact with both the frontend and the backend. Angular JS was then rewritten and improved and since that time it is called just Angular. To avoid confusion here it the definition from Wikipedia:

“Originally, the rewrite of AngularJS was called “Angular 2”, but this led to confusion among developers. To clarify, the Team announced that separate terms should be used for each framework with “AngularJS” referring to the 1.X versions and “Angular” without the “JS” referring to versions 2 and up”

Wikipedia

Angular Features

Following are the main features of Angular

  • Helps in the development of progressive web applications
  • High speed and optimal performance
  • Angular applications are supposed to be for everyone
  • MVC Architecture
  • Efficient two way data binding
  • Less code framework
  • Angular CLI
  • CDK and Angular material

Angular Advantages

  • Two way data binding
  • DOM Manipulation
  • Improved server performance
  • Faster application prototyping
  • Responsive website
  • Highly testable products
  • The MVVM architecture
  • The use of directives
  • The plain HTML templates
  • Fast development

Angular Disadvantages

  • JavaScript Support mandatory
  • Inexperience with MVC
  • The scopes
  • Other difficult features
  • Possible time consumption
  • Difficult Learning

Future of Angular

With Angular, the future still looks bright as it is attractive for large scale projects. They tackled the issue of its size in comparison with the others – Vue.js and React JS – In version 8.0 there was a new rendering engine available called Ivy and it can provide up to 40% less bundle size so that partly tackles the biggest Angular disadvantage. As of 2020, in November a new version Angular 11 came out so the product is pretty up to date when writing this article.

Useful Links about Angular

  1. https://www.youtube.com/watch?v=zKkUN-mJtPQ&list=PL6n9fhu94yhWKHkcL7RJmmXyxkuFB3KSl
  2. https://www.youtube.com/watch?v=FlUCU13dJyo&list=PL4cUxeGkcC9gsJS5QgFT2IvWIX78dV3_v
  3. https://www.youtube.com/watch?v=Fdf5aTYRW0E

Angular Conclusion

The one that is the most complex, sophisticated and difficult-to-learn framework compared to the other two. However, it does provide a whole platform to develop an app with. No additional libraries are needed for things like routing or global state management. It is based on Typescript (a big advantage) and well it is created and maintained by Google, which almost guarantees its bright future. All this makes it perfect for big enterprise projects.

Final words

If you are wondering, which frameworks could be suitable for you. The recommendation might be something in sense of: For heavy duty enterprise applications, we would still recommend to stick to Angular if you have time to invest to learning, for agile and flexible project stick to Vue.js and for something in between, go with React JS (Given you have the nerves to go through the documentation).

[The original article was written in English. To other languages it was automatically translated by Google Translate]

Leave a Reply

Your email address will not be published. Required fields are marked *