Ryan Carniato, creator of the Solid.js framework, identified eight ways to reduce JavaScript code in web development at this year’s International JavaScript conference.
Yesterday, The New Stack shared Carniato’s first four “go-to” methods for mitigating heavy code. Today, we share the next go-to step — HTML streaming — plus three strategies that offer more “radical architectural approaches” to cutting down on JavaScript.
5. HTML Streaming
HTML streaming basically allows you to send the page and data in chunks as it completes, Carniato said. This is not strictly a hydration technique and it doesn’t impact JavaScript size or execution, but it’s important to understand its role in frameworks and why, for instance, the React project was excited to add it in React 18, he said.
He showed a Kroger app on the right that drew in boxes of content versus a version of the app on the left that loaded everything at once.
“They both basically load in at the same time, but the one on the right [the streaming app] basically can draw the shell, because it really depends on states, the data, and, then the one on the left that has to wait for everything is quite a different user experience,” he said. “The one on the right almost looks like an interactive single page app with loading state and stuff. But the truth of matter is this can be done without actually even loading the JavaScript framework […] it’s just a small script tag.”
The page works by sending the HTML (including the placeholder) first and then, without closing the connection on the server as the page finishes, it adds the missing parts of the page to the end of the document, via a script tag. The script page basically swaps the content into place to replace the placeholders. React, Solid and eBay’s Marko.js support this approach, he added.
“The benefit of streaming, especially for larger services, is this ability to be able to decouple slow responses, unpredictable responses, so that the overall reliability of your system can be better,” Carniato said. “As I said, only a handful support it today, but luckily React is in that handful, which means that you can use streaming, Next, Remix and a lot of common frameworks.”
These first five techniques are all good mitigation techniques for improving the situation and bringing resiliency or removing server bottlenecks to a page. But they don’t change the amount of JavaScript executed or loaded in a meaningful way, Carniato said, before demonstrating more “radical architecture” approaches.
6. Islands — a.k.a, Partial Hydration
“So welcome to the tropics, more water — islands, also known as partial hydration, are not a new technique, but they didn’t really get popularized till more recently,” Carniato said.
Web design with Islands
The concept of this partial hydration was introduced in Marko.js at eBay back in 2014, but it’s been popularized since Astro and Fresh introduced it as “islands,” he said. Islands are an updated take