Frontend Technologies
Published: 2024-07-03 09:51:04

As a beginner frontend developer you most likely have heard and used technologies such as HTML, CSS and plain JavaScript. These are the stepping stone and building blocks of frontend development.
   However there is more. Concepts such as URL routing, state management, component-based architecture and much more can really be difficult when using these basic blocks. There is the need for a tool to make these task easier. These tools are called library or framework. In frontend development, majority of these tools are built on JavaScript. In these article we will discuss the pros and cons of two of these framework.

## **React**
This is the most popular frontend framework. It was created by Facebook and first released in May 2013. Ever since React has continued to show its dominance in the dev community. Currently React has over 150 million downloads every week. Major companies such as Facebook, Instagram, Airbnb, Netflix all use React. React uses JSX which is a syntax for writing HTML within JavaScript. React focuses on component based architecture and a virtual DOM. Components are reusable pieces of the UI that manages their own state and login. React uses a virtual DOM to efficiently update and render components, minimizing direct manipulation of the actual DOM.

## Pros

- Facebook provides React with significant corporate support and a sizable, vibrant community. This guarantees ongoing improvement and a plenty of resources.

- JSX allows you to write HTML within JavaScript, providing a seamless way to define UI components and enhancing developer productivity by combining markup with logic.

- React's virtual DOM implementation can lead to efficient updates and high performance, especially in applications with a lot of dynamic content.

## Cons

- Some developers find JSX less intuitive compared to the template syntax used by Vue and Angular, particularly those with a traditional HTML/CSS background.

- React often requires more boilerplate code and manual configuration (e.g., setting up state management with Redux or MobX).

- While React itself is relatively easy to learn, mastering state management libraries like Redux or Context API can add complexity.

## **Vue**
Vue.js is a popular JavaScript framework for building user interfaces and single-page applications. It is the second most popular framework behind React. It was developed by  Evan You and first released in February 2014. Currently Vue has over 3 million download weekly. Major companies such as Alibaba, Xiaomi, and GitLab uses Vue. Like React, Vue.js uses component based architecture to build reusable user interface. Unlike React Vue.js uses a HTML based template syntax which binds the DOM to the Vue's instance's data. Vue’s reactivity system automatically updates the DOM when the underlying data changes.

## Pros

- Vue has a gentle learning curve, making it accessible for developers with a basic understanding of HTML, CSS, and JavaScript. The documentation is comprehensive and beginner-friendly.

- Vue has its own built-in state manager and router and do not need and external library unlike React to handle these task.

- Vue is designed to be incrementally adoptable. You can use it to enhance parts of an existing project or build a full-fledged single-page application from scratch. It can also integrate smoothly with other libraries or existing projects.

## Cons

-  When compared to React, Vue has a smaller community and hence Fewer third-party libraries and tools for niche use cases.

- May not be as robust for very large-scale applications as React with a comprehensive setup.
 

Personally I have been using React for quite sometime and I have found it very useful and easy to use. The knowledge of React is not sufficient. In other to fully master React I must have hands on experience in the use of React. HNG has provided a platform for me to do just that (https://hng.tech/internship). I aim to increase my experience in the use of React and to learn from others as well as network with people (https://hng.tech/premium).