JavaScript Framework Unpoly and the HTML Over-the-Wire Trend – InApps 2022

HTML over-the-wire has been picking up steam as a more straightforward way to create web applications, without needing to use as much JavaScript. It works by sending HTML, and not JSON, “over the wire.”

Now a new “unobtrusive JavaScript framework” called Unpoly has emerged as a contender to Basecamp’s HTML over-the-wire framework, Hotwire. Unpoly promises “fast and flexible frontends for server-rendered HTML views.” Henning Koch, the creator of Unpoly, spoke to InApps about why frameworks like Unpoly are gaining traction.

“Code is always a liability, and it’s always worthwhile to explore ways to write less of it,” he said. “In our experience, Unpoly lets us build apps with much less code than a comparable SPA, while retaining much of the speed and flexibility on the frontend. It’s a much better sweet spot for us.”

Source: Unpoly

What Is Unpoly’s Purpose and Why Was It Developed?

Koch describes Unpoly as “an unobtrusive JavaScript framework that enables fast and flexible frontends for server-rendered HTML views. It sends HTML over the wire, and no JSON API is required. It has no dependencies and works with any backend language or framework.”

Unpoly debuted seven years ago, in 2015. It is the latest brainchild of Koch, who has been developing web applications for well over 25 years. “I spent half of my career as a head of development at a web development company, Makandra,” he explained. “With Unpoly, I could draw from the experience of hundreds of web apps that my team has delivered. When you’re working on a few new projects every year, you can see patterns emerge organically, and extract from there.”

Using Unpoly, your views can do things that are not normally possible in HTML, such as:

Unpoly was developed by Koch as he noticed the growing complexity of code being used to create web applications, and how most of the time it wasn’t necessary. “Basically, when SPA frameworks came into fashion in the early 2010s, my team went all-in on AngularJS for a while. We had been struggling with the limitations of server-side rendering, and we hoped that SPA style apps would allow us to deliver more ambitious UIs with less convoluted code,” he said.

“When Angular made a major compatibility break between versions 1 and 2, we took the chance to review our SPA work from the past years and came out with mixed feelings,” Koch continued. “While a few apps benefited from a heavy JavaScript approach, we weren’t so happy with most of the others, especially with the amount of code and duplication that a SPA approach required.”

Koch notes that his team decided to take a deeper dive into their new hypothesis — that there had to be a way to improve their JavaScript coding while simplifying an already complex language.

“This caused us to revisit server-side rendering and progressive enhancement, but this time invest a lot more work into pushing the limits with a structured approach, rather than piling up a mountain of unobtrusive JavaScript snippets,” Koch states. “The leading vision was: If there was an HTML6 spec, and it was all about server-side apps, what would be in that spec? Unpoly is a polyfill for that imaginary HTML6 spec.”

How Does Unpoly Compare to React?

JavaScript is the most popular programming language in the world, and React is one of its leading libraries. Initially released in 2013, React was designed to be a library for helping developers craft user interfaces (UIs).

According to Henning Koch, React and Unpoly aren’t entirely opposites. They share some likenesses, but there are a few important distinctions. “What both frameworks share is that they render a full page when the user navigates, but then only fragments of that new page are inserted into the DOM, with the rest being discarded,” he explained. “However, while a React app would usually call a JSON API over the network and render HTML in the browser, Unpoly renders HTML on the server, where we have synchronous access to our data and free choice of programming language.”

Still, Koch acknowledges there are some instances where React and SPA’s are suitable choices. He went on to say, “There are still some cases where a SPA approach shines. For instance, we recently built a live chat where messages needed to be end-to-end encrypted. This would have been awkward to do with a mostly server-side solution, and we actually ended up building the chat component with React. I just don’t think it’s the best default for most web apps.”

Why HTML Over-the-Wire Is Gaining Popularity

Almost always, the less code you use the better. Longer code spread over multiple lines gives bugs more places to hide. HTML over-the-wire facilitates simplicity and adds security, while web developers save time by not having to write every line of code that creates HTML in JavaScript.

Developers are finding that JavaScript can sometimes be unnecessarily complex — and that there are simpler ways to create web pages and applications. As Ruby on Rails and Hotwire creator David Heinemeier Hansson wrote, “Yes, we need a bit of JavaScript to make that work well enough to compete with the fidelity offered by traditional single-page applications, but the bulk of that can be abstracted away by a few small libraries, and not leak into the application code we write.

Henning Koch hopes this new wave of frameworks continues, and that more people will quickly become comfortable with them. “I’d like to encourage developers to learn about ways to build web apps without heavy client-side JavaScript and check if it helps you reduce JavaScript in the kind of apps you’re building,” he told us. “There’s a whole new generation of tools like Unpoly, htmx, Hotwire, or LiveView that experiment with new ways to build web apps, and are worth your attention.”

Photo by Tejas Prajapati from Pexels.