Frontend Development Technologies: A Simple Discuss

Introduction

It wasn't too long ago when the Frontend aspect of websites was just built with HTML, CSS and JavaScript. Moreso, there was nothing like the WebApps we have today. Web development has taken a leap in a very short period from the traditional websites to more modern webApps which can handle the bulk of functionalities which is now required of present day WebApps. In this article, we are going to discuss the evolution of webApps from the traditional websites and also, some of the technologies that drive the processes of crafting high performing webApps.

Shift From Conventional Websites To WebApps : Why

In the traditional website, when you hit the url, requests are sent to a server which downloads all the information you requested for and sends it over to you before it is rendered on the page. While this method of rendering pages is fairly okay, and is largely still in use, it is not as efficient.

The reasons why this is not really efficient are:

People want to load web pages much faster especially with the advent of smartphones, and faster internet connectivity.

Another reason is just the fact that not all pages need to reach for information from a server before they are rendered.

The web also got more interactive. Many of the conventional website designs couldn't fit the growing trend of more interactive websites, hence we needed a solution.

These are just some of the reasons that led to the creating of libraries and frameworks, which addresses some of these issues and makes it easier to build large scale production ready web applications.

You can learn more about Frontend technologies and get started here https://hng.tech/internship

React: Meta's Big Solution

Anyone who has taken interest in web development or software development in general must have heard of REACT. React is a JavaScript library created by the engineers at Meta to solve the complex problems of Facebook messenger back in 2012. It has since grown to be the most popular JavaScript library and now, new frameworks like NextJS and RemixJS are built on top of React.

Why ReactJS' Huge Success

Aside ReactJS, there are popular JavaScript libraries like Angular, Vue, Svelte and the much older jQuery. ReactJS' huge success is attributed to the fact that it solves the complexities of web development as opposed to good marketing and the loud mouthed-ness of ReactJS Developers.

ReactJS gives developers the ability to build single page webApps which might not need to send requests to a server before being rendered. React also makes development much easier as we can build custom re-usable components which can be used multiple times in your app development process.

Another major reason for the success and popularity of ReactJS is the community of developers. React has a huge community of developers and also a huge open source collection. People actively contribute to React and projects built with React. That's to tell you that React is not going anywhere anytime soon.

React also made a big break when they introduced React Native for building mobile applications. Hence, a developer that knows React can work on the web and also on mobile applications. This has made React developers much more versatile.

Should I choose Vanilla React Or One Of These Fancy Frameworks Flying Around?

Okay, so you finally chose React but you are confused because the React ecosystem seems so large and for a newbie, it might be overwhelming. I'll help you break it down and tell you what you need to know about some of these frameworks. It's important to note that React is absolutely fine on it's own. These frameworks just makes it much better.

React's Failures

While React is an amazing library, every amazing product has it's own shortcomings. For me, one thing I have observed when using vanilla React is the amount of packages needed to build a simple application. While installing these packages is nowhere compared to the stress of building an entire app with vanilla HTML and CSS, it might be draining considerably. Take for example, we are building an application with an header of links that go to different routes within our page. In React we will typically use React router to achieve this. We'll have to go through setting up React router, and so much more. Whereas, in frameworks like NextJS or Remix, there is the built in Link component for handling routing in your application.

Fullstack Applications with NextJS Or Remix

Frameworks like NextJS and Remix afford the developer the ability to build Fullstack applications. Hence, the developer doesn't have to worry about getting a backend Developer or writing the backend in an entirely different language. This is actually a huge benefit for software developers.

More Benefits of Frameworks

Using these frameworks just makes it much easier for development. Even ReactJS itself advices developers to use one of these frameworks for better performances. For example, NextJS gives your webpages better SEO performances and helps your pages rank high in search results. In NextJS, the Image component loads images lazily on default. What this does is that it significantly reduces the loading time of your website as a bulk of the delay in loading is caused by images. NextJS also gives you the option to cache data fetched from a server. This means that your application fetches data once and can distribute this same data to anyone who accesses the site without having to fetch the data again. This greatly reduces loading time and increases the page performance in general. There are also so many functionalities that frameworks like NextJS offers that I can't talk about right now. In NextJS, there has been server components even when it was absent in vanilla React. Also, the file convention system in NextJS is easy to use. It is also important to note that you can set up an express server in your NextJS application and run the backend directly from your API routes. There's so much you can do with these frameworks. If you feel confident enough in your frontend development skills, you can check https://hng.tech/hire.

Conclusion

The bottom line is that we have transitioned from the HTML CSS and JavaScript website to frameworks built on React like NextJS and Remix. The web has been progressive, to cater for the high end demands of users. Using Frameworks like NextJS gives you the ability to work fast, and focus on much demanding aspects of your webapp development.

In today's world, you can still build a website with HTML CSS and JavaScript but I doubt if it will be close in performance to the popular amazing sites you visit.