Photo by Luke Chesser on Unsplash
Getting started with Frontend development
A choice of framework: ReactJs or Vuejs?
In the modern front-end, several libraries have evolved so much that the choice of framework has become a debate. Many new tools are being developed. Choosing a framework/library/tool becomes hard when starting as a beginner or a new project. I have been developing the web for several years now. I have as much experience as to decide a framework for a project. In this article, I will share my experience as a front-end developer and which library I prefer when working on a project.
First I would like to acknowledge HNG for this opportunity to share my experience with a vast crowd. I wouldn't have had the courage to work on this if not for the chance I have been given during this season (HNG11). To participate this season, you can register at https://hng.tech/internship. Do you want to become a premium member? Register at https://hng.tech/premium.
- As a ReactJS fan, I would to start with it! React is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta and a community of individual developers and companies. React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js (Wikipedia). React lets you Create user interfaces from components. A component is a self-contained piece of UI that can be reused. It is made of JSX syntax (JavaScript and XML). Think of it like Javascript Functions that let you incorporate HTML as part of the UI layout. Like JavaScript Functions, React components receive data and return what should appear on the screen. You can pass the new data in response to an interaction, like when the user types in an input. React will then update the screen to match the new data.
The component architecture of React allows developers to build reusable user interfaces. Example of a simple react component
function HelloWord(){
return <h1>Hello World</h1>
}
The above function returns "Hello World" on the web page when the application is running. The HelloWord Component can be reused in several areas of the webpage.
- Vue.js is an open-source model–view–viewmodel front-end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You and is maintained by him and the rest of the active core team members (Wikipedia).
Vuejs is An approachable, performant and versatile framework for building web user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative, component-based programming model that helps you efficiently develop user interfaces of any complexity.
Vue is a framework and ecosystem that covers most of the common features needed in frontend development. But the web is extremely diverse - the things we build on the web may vary drastically in form and scale. With that in mind, Vue is designed to be flexible and incrementally adoptable. Depending on your use case, Vue can be used in different ways:
Enhancing static HTML without a build step
Embedding as Web Components on any page
Single-Page Application (SPA)
Fullstack / Server-Side Rendering (SSR)
Jamstack / Static Site Generation (SSG)
Targeting desktop, mobile, WebGL, and even the terminal
In this article, we shall focus on the SPA using the Single-File Component structure (.vue) approach. The file basically divided into 3 sections which include: script, template, and styles. Each of which has a single purpose. Script is used for Javascript, Template for HTML and styles for CSS.
Example of a typical `.vue` file
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>
SFC is a defining feature of Vue and is the recommended way to author Vue components if your use case warrants a build setup.
The Choice of Framework
Why choose ReactJS?
Flexibility
React allows you to build flexible reusable components. A component can be anything; Button, Text, Video, etc.
Great Developer Experience
With Flexibility comes a great developer experience. It's API's are very easy to learn adapt. JSX is a special syntax that looks like HTML, which converts React's API calls and finally renders HTML.
Traditional frameworks like Angular and Vue power up the HTML. They use JavaScript inside HTML. They have created HTML attributes that give extra capabilities to it.
The main problem with this approach is that you have to learn those new HTML attributes or always keep looking at the official documentation.
React Has Meta's Support/Resources
React is maintained mainly by the React team at Meta (formally Facebook). Despite being open-source, the Meta Team continuously work on React and it's accompanying tools for improvement.
React Has Broader Community Support, Too
A lot of companies use React for their development
(Image from freecodecamp.org)
Why choose VueJS?
Easy Learning
One of the greatest advantages of Vue is it's easy learning curve, an experienced developer can easily switch to VueJs
Light Weight
VueJs doesn't take a lot of space. It's small size let developers ship lightweight production apps.
Customizability
Vuejs framework is easily customizable when compared with other tools such as Angular. This allows a choice of framework among developers when compared with a framework such as Angular
The above outlines the advantages of VueJS and ReactJS. As an experienced developer, choosing a frontend framework or library always depends on the use cases. My familiarity with ReactJS always is an extra benefit as it's a Library and not a framework, and this has a greater advantage.