React vs Vue, The choice for an HNG 11 Intern
It can be said that the process of web development has improved significantly over the year. From the introduction of HTML5 semantics to responsive design implementations using CSS3 and ECMAScript6 in JavaScript, building websites are now easier and interesting.
In the quest to make the web development process easier and more effecient, especially on the front end, modern technologies were built to fix and eliminate some of the problems that arise from using the core frontend tools. Tools like Anglular, Vue and React help to reduce development time, build tools like vite and webpack optimize code and reduce load time, CSS preprocessors, libraries and frameworks allows you write maintainable styling code.
Let us look at the features of two popular frontend technologies and how they differ in providing solutions to web development.
React.js
React is a JavaScript library for developing user interfaces (UI). It was developed by Facebook in 2011 and is by far the most popular JavaScript library to build UI.
React makes use of components. Components are JavaScript functions that return markup with JSX (JavaScript XML) syntax. A single component is an independent UI.
React also uses a virtual DOM. When there are changes, because the virtual DOM remembers the content of the real DOM, only the parts of the code where there are changes are updated. This improves speed and user experience.
Interactivity is maintained by the use of state in React. React components receive data and return what should appear on the screen. Data can be passed in response to an interaction and the screen is updated to match the data.
Vue
Vue is a JavaScript framework designed for building user interfaces (UI). It was developed by Evan You in 2014 and has since then gained popularity. It is also open sourced. It extends standard HTML, CSS and JavaScript
Vue uses a component-based architecture. It uses a template syntax to extend standard HTML. Each component can contain its own template (HTML), styling and logic.
Vue uses directives that are built-in like v-bind, v-if, v-for, and v-model to provide functionality directly within a template.
Similarities between React and Vue
Use of Components: Both technologies are component based. Components represent independent pieces of UI. They can be nested to form a component tree which in turn makes up for the entire web page.
Virtual DOM: A virtual DOM is used in React and Vue to minimize writing into the real DOM. When changes are made in the application, the virtual DOM remembers what the real DOM looked like before the changes were made and only updates the parts that need to be updated. This increases the speed and perfomance of the application.
Declarative Rendering: Both technologies allow developers to describe the output of the HTML based on the state (JavaScript). The UI is then updated to match that state.
Active Community Support: React and vue are open sourced. They have large communites that provide support by contributing to the existing libary/framework with well written documentations.
TypeScript: Both React and Vue have typescript support
Differences between React and Vue
Just as there are many similarites between React and Vue, they both have there differences that make them unique. Some of them are:
Design:
React is library with the primary aim of building user interfaces while Vue is a complete framwork for application development.
Syntax:
React uses JSX that looks like writing HTML in JavaScript while Vue uses the HTML based template syntax that seperates your HTML, CSS and JavaScript into different sections.
State Management:
In React, there is no built-in way to manage state rather are several third-party libraries like redux, zustand, etc. that can be used for state management in React. Vue however has an official state management system called Pinia managed by the Vue team.
Routing:
Just like with state management, there is no official router provided by React but React Router is most commonly used. Vue on the other hand uses and official router managed by the Vue team.
Both React and Vue are truly powerful frontend technologies and can be used to build user interfaces that satisfy the expectations of frontend developers. The choice of which to use depends on the developer in question and what they hope to achieve at the end of the project by comparing the features, similarites and differences stated above.
HNG and React.js: My Expectations
The HNG Internship is a project-based 8-week internship for learning digital skills. It is designed for intermediate to advanced learners to experience hands-on learning, expert mentorship, community collaboration and skill showcasing. You can learn and practice coding, design, product management, data analysis and digital/video markerting.
It also provides a premium mebership that provides you with a certificate after prograam, access to job offers/interviews from local and international companies, CV reviews, networking opportunites and much more.
The cohort for 2024 (HNG 11) begins on the 1st of July and I am priviledged to be a part of it in the frontend track. In the frontend track, the technology used is React.js.
As someone who has worked with both React and Vue before now, I can say that I look forward to fully exploring the power of React and building projects with other React supported technolgies things like TypeScript, Redux, etc. I hope to also test my ability to work under pressure with during this internship as we would be expected to build at least one project every week. Overall, I look forward to improving my skills and networking the many developers and mentors the program has to offer.
Feel like your skills are a bit rusty? Sign up for HNG 11 today and gain a wealth of experience.