Better than React, Angular, Svelte or Vue? The Front-end Framework of Tomorrow

I can't believe how little I've updated this blog during the COVID quarantine this year! I've had nothing but time on my hands, but it has all gone to other projects and productive output. I'm excited to start sharing more about those things soon. Until then, here are some recent musings about how to build a better front-end framework than the big contenders out there today like Angular, Vue, React and Svelte.

I wrote an email to Gleb Bahmutov about one of his NPM packages, and he wrote me back pretty quickly. I honestly didn't expect that! Gleb is a world-class JavaScript genius and the VP of Engineering at Cypress.io: hands-down, my favorite framework for testing everything on the front-end. He's also one of my all-time top JS heroes, especially for his insightful blog posts and the hundreds of NPM packages he's contributed to the FOSS community!

I asked Gleb if anyone ever tried wiring up bottle-service to perform instant reloads on immutable React apps. In theory, if you had a way to cleanly resurrect the state of every component (ie. using local storage with a custom hook), you could make it possible to refresh any React web page or app and have it immediately be right where it was previously. Gleb replied that he's always wondered about it, but hasn't figured out a way to make that work yet.

This concept is really useful and powerful - not only on the web, but especially when it comes to Progressive Web Apps (aka PWAs) or apps wrapped with Cordova or Ionic. Frequently, Android and iOS will terminate an app that's already running to save on memory. Using the instant reload method outlined by Gleb and supported by his bottle-service NPM package, when the app reloads, it would appear like it never crashed/closed in the first place.

Combine those two things with SSO mobile refresh tokens and proper auto-redirect after login (in case the token lapses), and now you've got a proper app approach that always works right and is super resilient.

(Note that the example I referenced for auto-redirect above is pushing users to the home page... In my approach, I would store the last-visited URL in localStorage, and redirect the user back there after login instead.)

Now, you can even intentionally pause or kill the app whenever the user isn't looking at it, for better performance on your device in terms of battery, CPU and memory consumption.

It's most intriguing to me because as far as I know, nobody is doing this effectively yet. It's sort of like discovering Redux or React Hooks for the first time. It could achieve a similar level of popularity as these, and get just as much use as they do, if someone built these things into an NPM package specifically designed for making React apps more resilient and performant.

In true hacker fashion, I'm testing this out on my own project as I prove the concept out. I've already got sticky state resurrection working on my VieDay productivity and mindfulness app, so now I just need to find a way to force all component changes to refill the "bottle" every time each component updates without being too taxing on performance. Once I've conquered that, all of the hardest parts are done.

The one area in which my approach might suffer is around the minification of the data set stored in state, as I'm using localStorage, which has a finite (and fairly low) cap per domain. I can either move that to IndexedDB, or minify the data to save space, or both.

I want to get this working with React for sure, simply because of how popular that framework is. Based on some of Gleb's other blog posts and sample projects, I'm also very curious about the prospect of building an even lighter-weight front end framework that uses some smaller virtual DOM tools to achieve the same thing that React does.

My goals would be speed, efficiency, ease of coding, legibility of the code that's written, testability, and compatibility with concepts that are emergent in the field today (like PWAs). When you take a look at Gleb's example code for an instantly-refreshed app, it becomes pretty clear that a fully-declarative syntax for HTML markup, stored entirely in JSON format, makes a TON of sense and has a lot of potential.

I've been talking a lot lately with friends and peers of mine about the power of immutability, and specifically of functional programming with tools like Ramda, or Sanctuary or Folktale. When we take those concepts and combine them with the ones put forward by Gleb in his instant web app (source linked here), we end up with something truly brand new in the field of front-end development today.

With these principles, we could have much heavier operations and data manipulation on the client-side, while taking advantage of memoization and composed functions to ensure that those operations happen very quickly and efficiently. React and Angular have solved a lot of problems and come a long way, but they are also started to feel a little bloated and dated to me. I think there's a better way, and it would need to be built around these concepts to work effectively.

Perhaps that will be one of the things my team will be focusing on after we've got some apps out there that people really enjoy and some funding to help keep everything moving. If I were working for myself full-time, I would be taking a very critical look at developing a framework like that. Even if it didn't reach React levels of adoption, it's great resume fodder!

The code in that repo produces this beautiful demo, which loads in under 500ms, and reloads pretty much instantly without any flash of unstyled content or things bouncing around on the page. Even Google has the problem of side-loading content that causes the markup to "dance" around the page. This frequently causes me to accidentally click the wrong thing because Google is playing around with markup when the page loads.

Using a framework built around these concepts, the page would always be there, and wouldn't do the same kind of dance when new content is loaded (in theory). You can further combine this with server-side rendering for an isomorphic app that builds the first page load from the server, and subsequently hydrates the app dynamically, in a way that is far more performant than any of the currently-popular frameworks out there.

If you're excited about functional programming and its potential, check out this awesome list of curated functional programming references to dive deeper and learn more! Don't forget to leave some comments on this post and tell me what you think of these ideas... and thanks for reading!