This content originally appeared on DEV Community and was authored by Damilola Babatunde
Introduction
Rose owns a cake shop; Margaret stops by every morning to get some freshly baked chocolate cake from the cakes displayed on the shelf. She only sees the cakes freshly baked sitting nicely on the shelves. There are a lot of processes that have taken place in the background like mixing, icing, and baking before the cake is displayed on the shelf.
In building a web application, that is, applications that run on the web, we need two layers of technology which are the backend technology and the frontend technology.
In this article, I will be talking about only front-end technologies (the technology behind the nice cakes Margaret sees on the shelf every morning). Let’s go!
What are front-end technologies?
Frontend technologies are the technologies that are used to build the user interface side of an application; that is where the user sees and interacts with.
Some frontend technologies used to build modern-day web applications are HTML, CSS, and JavaScript, ReactJS, Vue JS, Angular, Svelte, Gatsby just to mention a few.
In this article, I will be comparing two front-end technologies. I will be comparing the trio (HTML, CSS, JavaScript) with a popular JavaScript library known as React.
The Trio (HTML, CSS, JavaScript)
Just like three cords that cannot be broken, these three have worked together for a very long time and are still working together. HTML, which stands for Hyper Text Markup Language is used to build the structure of a web page. You can liken it to a human skeleton.
CSS (Cascading Style Sheet), on the other hand, is used to style a web page that has been structured by HTML and make it appealing to users. Remember our example of a skeleton, now CSS can be likened to the flesh that covers the human skeleton and makes it look beautiful.
JavaScript is used to add interactivity to a web application. When you visit a page through the web, maybe your Facebook page, and you can like a picture, comment on a post, make a post, or delete a post, that is the power of JavaScript at work. Without JavaScript, a page will just be static, with no interactivity.
REACT JS
React JS is a JavaScript library that is used to build interactive and dynamic web applications. It is an open-source library built by Meta (Facebook). It works by creating a virtual DOM(Document Object Model) rather than directly manipulating the browser’s DOM.
One good thing about React is that it is used to build single-page applications. A single-page application is an application designed to be displayed on a single page. Unlike HTML where several pages are created and when a user wants to navigate to a page, it refreshes and loads the entire page, React only updates the elements that change on the page.
What makes it better than traditional HTML and CSS is its simplicity, it allows users to easily develop and maintain their applications. Another advantage is also its reusability. With React, one can create components that can be reused in different pages, it is called reusable components. This saves time writing the same functions on multiple pages. It is also used to build secure applications.
CONCLUSION
In conclusion, the type of technology you want to use sshould be determined by the kind of application you want to build. If you want to build a static web page, or a web page with less interactivity, you can go for HTML, CSS, and JavaScript.
But, if you are building a dynamic, interactive, and robust application, React will be a better option for you.
I will be building amazing solutions with React in HNG 11 internship https://hng.tech/internship https://hng.tech/premium.
Watch this space for more updates.
I hope you learned something new about frontend technologies from this article.
Thank you for reading.
This content originally appeared on DEV Community and was authored by Damilola Babatunde
Damilola Babatunde | Sciencx (2024-06-29T16:56:58+00:00) FRONTEND TECHNOLOGIES. Retrieved from https://www.scien.cx/2024/06/29/frontend-technologies-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.