The world of web development is not the easiest to keep up to date on. Over the past ten years, we tried to solve a lot of problems with a lot of frameworks. It’s a good thing, it means that our industry is evolving along with other parts of it. Inspired by Kent C. Dodds talk at InfoShare 2022 I decided to dig deeper into upcoming trends in web development.
The beginning
Our journey started in a completely different state of web development and over ten years ago we didn’t have a standardized world to the extent that we have now. Just 10 years ago I was still supporting Internet Explorer and was concerned with completely different things.
During JavaScript development, one of the major problems was compatibility with other browser engines so jQuery seemed like salvation and Prototype was a choice too but now that’s not the case - right?
jQuery isn’t going away - the new Almanac gives us light on what is the state of the web, and you may think that new JS libraries took over the world - no they didn’t. - Alamanac Report
The return of progressive enhancement
The next stage of web transformation as some may say - PEMPA’s which goes for Progressively Enhanced Multi Page Apps, if you have trouble remembering what stands for progressive enhancement here you have the official definition:
Progressive enhancement is a design philosophy that provides a baseline of essential content and functionality to as many users as possible, while delivering the best possible experience only to users of the most modern browsers that can run all the required code.
After all, it’s not as scary as it may seem. But React is not progressively enhanced by default you need to bring it in - and that’s where Remix could help you a lot. From a technical perspective, is just a compiler for React Router, and like other frameworks, an edge-compatible runtime.
Fullstack Libraries
Merging frontend and backend - these days it seems that’s the way developers want to go. What a full-stack library means is that you can use it to create a website from start to finish, it deals with client-side and server-side aspects of a web application.
This is a win-win situation where you can spend less time creating two applications for the backend and frontend side of things. It also creates new possibilities that client only libraries are not able to use. As full-stack libraries go, our latest hot new kid on the street is Remix - I will focus on this newbie in this article.
Base concepts of Remix
Remix is based on a low-level approach to development. It doesn’t try to patch things that are missing or lack certain features in the specs - it’s not 2010 anymore we don’t need to patch things up, instead, it tries to work with the foundations of web development and use it to the fullest - and trust me there is a lot to use these days.
Below you can read about some of the best features that come with Remix:
Nested Dynamic Routing
Remix definition of routes is something new and unique to this library as it allows you to create a hierarchy of routes in which each route is a separate file that can determine where its children should be displayed - it means you can have multiple routes active on a single page. This ends with the concept that each route is a separate page, which can be confusing to some developers, but it’s really easy to grasp and very useful once you get the hang of it.
Server Side Rendering
All of the new frameworks enable you to create client-side rendered applications. That means when a user enters a website they got served a blank page while they wait for all the JavaScript code to process and let the browser compile everything before serving the content to the user. This is not a Progressive Enhanced way of doing things.
The remix is built on the Web Fetch API and it uses server-side rendering to manipulate the data and render the HTML content in the server, sending less amount of JavaScript possible to the client. To achieve this Remix uses a concept called “Loaders”:
Loaders are the backend “API” for their component and it’s already wired up for you through useLoaderData. It's a little wild how blurry the line is between the client and the server in a Remix route.
Browser framework
Remix tries to optimize as much as possible in the aspects on what we download after each page refresh, and after it already has served the webpage to the browser it starts hydrating the document - that proccess is called often “browser emulating”, this is what the official docs have to say about this:
When the user clicks a link, instead of making a round trip to the server for the entire document and all of the assets, Remix simply fetches the data for the next page and updates the UI. This has many performance benefits over making a full document request:
- Assets don't need to be re-downloaded (or pulled from cache)
- Assets don't need to be parsed by the browser again
- The data fetched is much smaller than the entire document (sometimes orders of magnitude)
Remix conclusion
So Remix is a really great view into what’s there for us in the future, it’s a breath of fresh air in the way we are doing things in the front-end world, but is it ready to take over the world? Definetly not. You should definetly think about pros and cons when using it large scale apps.
But you definetly should play with it and get a grip of what concepts are behind it. Sooner or later it may be mature enough to be a top choice framework in the near future."
So, will the “center” approach take over the world?
Besides Remix we already see other concepts emerging out there similar to this - we have React Server Components /Suspense or Layouts RFC in Next.js so this is definetly happening and it’s happening soon.
But we can go to the extreme and get rid of the client side frameworks and render full UI server side wich means killing JavaScript entirely, it’s definetly something worth keeping eye on too. Things like LiveView Native allow us to get rid of sepraration between native and web teams and merge it into one reducing development costs and reduce complexity in your application.
The evolution of frameworks push our industry further, removing the previous needs of patching things, making polyfills and tradeoffs. It may seem the last few years we didn’t have any breakthrough and breaking changes but be awere - next few years will definetly be different.