An Exposition into Vue and React

Introduction

As part of the tasks on HNG Internship 11, I'm supposed to talk about two frontend technologies, So let's get into it! ReactJS and Vue are the most popular JavaScript frameworks used to create front-end applications. In this article, we'll be diving into the similarities, differences, and various pros and cons of using either of them.

What is a JavaScript Framework?

A JavaScript framework, also called a component framework is a set of JavaScript libraries optimized to build reusable chunks, or components of markup (HTML), styles (CSS), and logic (JS) to build performant web applications.

React

React is the first framework to popularize compartmentalization of the user interface. Found in 2013 by Facebook, React revolutionized the web with functional components, where a component is as simple as a JavaScript function. React can be written in .jsx, or .js files. This makes it extremely flexible, and you can build pretty much anything you want in your way.

React's Virtual DOM (Document Object Model) is a lightweight, in-memory representation of the real DOM. It allows React to efficiently update the UI by comparing the current virtual DOM with a previous snapshot, identifying the differences (or "diffs"), and applying only the necessary changes to the real DOM. React also brought JSX, or JavaScript Expression, an "HTML-looking" syntax that brings the powers of JavaScript functions to HTML. Here's an example of some React Code:

function HelloWorld(props) {
    return <h1>Hello {props.name}</h1>
}

This component takes in a name prop (or argument) and interpolates it into the template, if the name prop ever changes the framework reacts and changes it in the template as well.

Vue

This is a framework created by Evan You in 2014. It also helps in building components but is a little more opinionated. Vue Components are placed in .vue files, and each file is split into three parts. The script, the styles, and the markup. It, like React also has a virtual DOM for efficient updates. Here's an example of a Vue component (Vue 3):

<script setup>
    import {ref} from "vue"
    const name = ref("John")
</script>

<template>Hello {{name}}</template>

<style></style>

Differences

Although Vue and React do the same thing (they help build components), they have different styles and rules. Here are some of the pros and cons of each of them

React - Pros

• Huge Community: You can find a lot of people to help you along the way
• Popularity: There are more job opportunities with React than with any other framework out there
• Libraries: There are a lot of libraries for most tasks and use cases
• Flexibility: Because the framework is very minimal, you can create your applications with whatever tools you wish; you're not locked into just one pattern

React - Cons

• Lack Of Standards: Since the framework is very minimal and doesn't care about routing, state management, and other things it's easy to get into bad coding practices, or get overwhelmed by the choices available
• Rapid Changes: The React ecosystem is ever-changing, and it's straightforward to get left behind
• Steep Learning Curve: It can be challenging to learn and understand some concepts like lifecycle methods and hooks in React

Vue - Pros

• Standards: Vue has well-defined standards. They have official, well-thought-out libraries for routing, state management, etc. which can speed up the development process
• Stability: Since Vue 3's inception in 2020, the ecosystem has been stable meaning consistent performance and support for long-term projects
• Performance: Even though Vue and React use the Virtual DOM, Vue has some extra optimizations that allow it to be extremely performant

Vue - Cons

• Less Popularity: Since Vue is not as popular as React, there are fewer positions for Vue developers
• Migration Issues: The migration from Vue 2 to Vue 3 is one of the roughest transitions a developer could make. The syntax and design patterns were very different from each other

HNG....What?!

So, some of you are probably wondering....what is this HNG internship anyway?

HNG internship is a two-month long internship meant to hone your skills to world-class levels by having you work on real-life projects. I just started, and I'm already seeing some benefits...like writing this article in the first place. I never would have done this on my own. Continuing with HNG, I would like to work on exciting front-end projects, improve my skills, meet people, and make friends. You can:

1. Check out the internship on https://hng.tech/internship or,
2. Hire top-tier experts at https://hng.tech/hire

Conclusion

React and Vue are the most popular JavaScript frameworks for building robust, performant applications. However, they have different styles for different aspects of their functionality. If you want maximum freedom on how to build your components, you might want to consider React, but if you want a more opinionated tool, where there are standardized ways of doing things, Vue might be the way to go.

If you found this article useful, like and follow. And, this was my first article, how'd I do? Tell me in the comments.

Happy Coding,
Ayobami.