Do We Need a New Framework?
Tags: webdev, javascript, react, frontend
Published: 2023-11-29 18:07:22

In the past few years, the frontend world has seen a surge in various frontend frameworks, all offering new solutions. However, do we really know what the problem in hand is? 🤔
 
## Background and History 🤓

Frontend frameworks have been on the rise recently. Developers wanted more responsive applications; hence, the comfortable [✨**SPA**s✨](https://en.m.wikipedia.org/wiki/Single-page_application) (pun intended).
 
### SPAs (Single Page Applications)

This style was popularized by frameworks such as [React](https://reactjs.com), [Vue](https://vuejs.org) and [Angular](https://angular.io).
These made UI development faster and were more modular than VanillaJS. Truly a revolution 🗣️.
 
 
#### What's wrong with SPAs?
Nothing. 
Spas help you relax. Oh, my bad. I needed to talk about SPAs. You can still use SPAs; they are well supported. However, they do have demerits. After all, every coin needs to have two sides.
 
- **Bundle Size**: The applications have a lot of things bundled together. This makes the initial page load rather time consuming.
- **Not as Performant as Vanilla**: As a general rule of thumb, smaller is faster.
React, Vue, etc. use a [Virtual DOM](https://en.m.wikipedia.org/wiki/Virtual_DOM). This makes any UI change costly in terms of computation. :( (*[Svelte](https://en.m.wikipedia.org/wiki/Svelte) does not have a VDOM*)
- **Not SEO friendly**: [SEO](https://en.m.wikipedia.org/wiki/Search_engine_optimization) stands for **S**earch **E**ngine **O**ptimization. All search engines, such as [Google](https://google.com), [DuckDuckGo](https://duckduckgo.com) or [Bing](https://bing.com) use crawlers. [Crawlers](https://en.m.wikipedia.org/wiki/Web_crawler) "crawl" through the internet (the "web") and find the best pages to show in results. They DO NOT index JavaScript in the results. Only HTML. Pure, H-T-M-L.
SPAs rely heavily on JS, and in fact, the initial loaded page hardly had any information in HTML. This makes them less SEO-friendly. ([NextJS](https://nextjs.org), [NuxtJS](https://nuxtjs.org) and others of their kind let people use their favorite frontend framework such as React or Vue and render the content on the server. This is called [SSR](https://en.m.wikipedia.org/wiki/Server-side_scripting)(**S**erver **S**ide **R**endering)).

> "There is no sadder sight than a pessimist." ~Mark Twain



## The Positive Side

![The bright side ❤️](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ma4zmcl71bzpdr2c7vm.jpg)

VanillaJS seems to be difficult to maintain. These frameworks with a VirtualDOM are not performant enough.
What can be done now?
 
### Well....

We do have NextJS and other SSR options to improve the condition we are in right now, but it too has its downsides.
Moreover, it's limited to JavaScript. All data fetching and other things need to be DONE-IN-JS. This is not ideal for a full-stack situation (IMO).
 
## Tying Existing Pieces Together

We know that SSR is better for SEO. SPAs are better for interactivity but are not performant enough.

Let's create... ✨ A new framework ✨.
 
### "Seriously 😒"
Yes, I just grumbled about how there are too many frameworks out there.
HEAR ME OUT, PLEASE!
We will not implement "Yet Another React/Vue/Svelte." Our framework is new in terms of architecture and principles.
 
## The Idea

If you made it this far, kudos. Take a cookie 🍪 <3.
 
**TL;DR:** Async page loads to make the app feel faster (say, [Hotwire Turbo](https://turbo.hotwire.dev/)). Websockets for changing DOM contents (say [LiveView](https://github.com/phoenixframework/phoenix_live_view)) and interactivity.
 
Async page loads will make the user experience better.
For the DOM part, using Vanilla JS is not so maintainable (as aforementioned). Using the popular frameworks makes the page heavier. We seek a median. More maintainable than JS and lighter than Svelte. Much lighter than React, Angular, etc.
 
## What next?
 
In the upcoming posts, we will create our very own JS framework. Yup!
For now, kindly drink some water and take some rest. Thanks a ton for reading through the article. The upcoming parts of this series will be worth it🔥.
 
### Adios
 
![Cute kitten waving to say bye](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/742nrqzbfd9n1frsrbid.gif)
[Will you buy me a coffee? >_<](https://www.buymeacoffee.com/remasashi)