Javascript Framework
Client-side Frameworks
#Overview
Client-side frameworks use the client-side rendering approach unlike traditionally where the HTML files are loaded through the server. As the capabilities of what the web can achieve grew, frameworks like Angular, Ember, or React were on the rise to create highly interactive web applications. They render the content on the user’s browser using JavaScript while the server only delivers the initial HTML page as the container to load the rest of the site. This architecture is called a Single Page Application (SPA) where the changes in content are managed by a framework using a single HTML page.
Some of the famous and most used frameworks are React, Angular, and Vue.js. Other frameworks like Svelte, Solid, and Qwik are gaining popularity in trying to solve the performance issue. And now there are also server-side frameworks getting popular due to client-side frameworks being too heavy and taking longer load times.
We will go through the three popular ones in this article and build a simple to-do list app with each to see how they work and differentiate.
#React
React, although termed as a library, is still used like any other JavaScript framework by building an application on its own ecosystem. It is maintained and developed by Facebook and is the most popular of all. React is very flexible and does not have any strict conventions to follow. It also depends on other open-source libraries to implement the complete features of web application development like routing, state management, API query, or animations.
React uses JSX syntax extending the JavaScript which makes it look like you are writing HTML markup inside JavaScript.
In React, we can create a component using function followed by a name with the first letter capitalized like function App(). And inside the return(), you will see HTML markups along with JavaScript logic, this is how you write JSX. All the code returned inside the return is part of the UI which you can see on the browser. All the other codes like variable declaration, functions, and logic can be written before the return() keyword.
function App(){
return(
<h1>
Hello World
</h1>
)
}React provides built-in Hooks that let you use different features inside the component. Here, we use useState hook to keep track of the to-do list items and the input value from the textbox. Each useState returns two elements; one that stores the value and the other to update the value. Another hook used is useEffect, which lets you run code even after the rendering is complete. We are using it to manually add a few items but a better option would be to use the local storage and get from it inside the useEffect hook.
// the hooks needs to be imported to be able to use
import { useEffect, useState } from "react";
function App(){
// Declaring useState hook
const [todos, setTodos] = useState([]);
// Using useEffect hook
useEffect(() => {
// piece of code here that runs on initialization
}, []);
}The others are usual JavaScript functions with basic logic that gets called from eventListener like onChange on the input field and onClick on the buttons. Inside the JSX, we can use curly braces {} to add any JavaScript such as calling functions, using variables for dynamic data, or using logic operations. To create a loop. we can use map on todos array, that renders each of the elements from the array inside the <li>.
// Using map to loop through todos array
{todos.map((todo, index) => (
<li key={index}>
{todo}
</li>
))}If looking at the React code above after learning JavaScript, it may not be hard to understand the code as using JavaScript functions is how it would be in the vanilla. So people usually find React easily adoptable and due to its flexibility, it is suitable for small personal projects to large projects. Moreover, with a large community and ecosystem, there are open-source libraries that help to make development easier with UI developments, routing, complex state management, API calls, animations, and so on. With so many options to offer, it tends to be the first choice for most developers to choose as their primary framework.
Resources
- React Documentation
- List of Resources and Libraries for React
- Scrimba: Learn React
- The Odin Project: React Course
- Some Helpful React Articles by Josh W Comeau
- Video: Do You Know Enough JavaScript to Learn React
#Angular
Angular is an open-source framework maintained and developed by Google and is written in TypeScript. Unlike React, Angular provides robust official libraries for routing, UI, server-side rendering, and many more. This makes development more consistent with a strong focus on the structure of the application.
A component in Angular is mainly divided into three parts; the HTML file, the TypeScript file, and the CSS file. Angular provides a powerful CLI tool so these files can be automatically generated using the command ng generate component-name. This creates the necessary boilerplate along with importing the components on the root module app.module.ts.
On todo-list.component.ts file, we declare the necessary variables like the todos array for storing the list, and inputValue for storing the user input. Then the functions to add and remove items from the array that is going to be called from the event listener on the HTML file. Like useEffect on React, ngOnInit function can be used to run code when the component initializes. And again this can be used for getting the items from the local storage.
// Defining the type of the variable in TypeScript
todos: string[] = [];
// code inside ngOnInit runs on the component initialization
ngOnInit() {
// piece of code
}Now inside the todo-list.component.html, we can write our HTML code and also JavaScript logic. This component is an extended HTML that incorporates JavaScript inside the HTML whereas in React it was the opposite. To add event listeners, we can add the name of the event inside a parenthesis like (click) followed by the function defined on our TypeScript file.
<button (click)="addTodoItem()">Add</button>Angular provides some built-in directives for adding behaviors inside the HTML elements. For the form control, we are using ngModel directive with the two-way data binding process which then looks like [(ngModel)]. Here we pass our inputValue which will now update the variable whenever there is a change in the input field.
<input type="text" placeholder="Enter a new task" [(ngModel)]="inputValue" />For loop, we use *ngFor directive inside an element that needs to be looped thus it is applied to the <li> looping the todos array. The double braces {{}} can used for adding variables and logic.
<li *ngFor="let todo of todos; let i = index">
{{todo}}
</li>Then finally we can add the todo list component inside the app component app.component.html.
Angular may have a steep learning curve unlike other frameworks and due to TypeScript it will look like you are writing a lot more code and repel beginner developers. But with its opinionated design system and structure, developing projects and working with a larger team is more consistent and makes scaling much easier.
Resources
- Angular Documentation
- List of Resources and Libraries for Angular
- MDN Web Docs: Getting Started with Angular
- Video: Angular for Beginners Course by freeCodeCamp
#Vue.js
Vue.js is another open-source framework developed and maintained by Evan You along with the core community members. It defined itself as a progressive framework where you can start with a simple project and progressively add other features if required. It has official libraries for routing and state management but also has a large ecosystem of open-source libraries. It looks similar to Angular but more approachable for an individual developer as well.
The code inside the component is divided into three parts; <template> for UI elements, <script> for JavaScript functions and data, and <style> for CSS.
<template>
<!-- HTML elements -->
</template>
<script>
// JavaScript data and functions
</script>
<style>
/* CSS styles */
</style>Inside the <script> tag, we have data() and methods property where we can declare our states, and functions like event listeners respectively. Then there are also some built-in lifecycle hooks like mounted to run the code when the component initializes.
<script>
export default {
data() {
return {
// Declare state
todos: [],
};
},
methods: {
// Add event listeners
},
// Using lifecycle hooks
mounted() {
// piece of code here that runs on initialization
},
}
</script>Then, we have our HTML elements inside <template>, just like Angular, Vue uses an HTML-based template to add JavaScript. And Vue also provides built-in directives for manipulating DOM and two-way data binding. Here, we use v-model on our input field to implement two-way data binding and v-for to loop the todos array. Event listeners can be added using v-on: or @.
<input v-model="inputValue" placeholder="Enter a new task" />
<button @click="addTodo(inputValue)">Add</button>
<li v-for="(todo, index) in todos" :key="index">
<!-- {{ }} for dynamic values just like in Angular -->
{{ todo }}
</li>