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 ✨SPAs✨ (pun intended).
SPAs (Single Page Applications)
This style was popularized by frameworks such as React, Vue and Angular.
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. This makes any UI change costly in terms of computation. :( (Svelte does not have a VDOM)
- Not SEO friendly: SEO stands for Search Engine Optimization. All search engines, such as Google, DuckDuckGo or Bing use crawlers. Crawlers "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, NuxtJS 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(Server Side Rendering)).
"There is no sadder sight than a pessimist." ~Mark Twain
The Positive Side
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). Websockets for changing DOM contents (say LiveView) 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🔥.
Top comments (0)