A Review of UltraJS, Mixing React and Deno in a Single Framework
Ultra is pushing the state-of-the-art into your projects, are you ready for it?
I don’t know why I haven’t really thought about it before, but every time I thought about using React the back-end was never Deno, it usually was Node with something like Next or Remix. I was also open to having other technologies in the back-end like PHP or Python, but for some reason, never Deno.
And it makes a lot of sense when you think about it.
A few weeks ago I interviewed Omar Mashaal, the creator of a somewhat new framework, UltraJS, for my podcast “The 20Min JS” and we talked about the benefits and interesting bits about Ultra.
You can listen to the full episode here if you’d like:
Or just keep reading, I’ll give you the highlights of what we discussed and a bit of my personal insight into this new framework.
What is UltraJS?
UltraJS is a web framework that much like Next, provides a back-end for your React front-end. Let me be more specific: it provides a Deno back-end for your React front-end.
And that is one of the main things that differentiate Ultra from others like Next or Remix, which work with Node.js and build on top of it.
While that distinction might sound minor, the set of features that the UltraJS framework provides thanks to it are major.
Essentially, this framework is taking advantage of the latest features JavaScript has to offer, with a positive impact on the dev workflow, because it removes the need for tools like a TS compiler, bundlers and other “archaic” tools that are not really needed anymore.
So let’s take a closer look at these modern features that UltraJS tries to shine a bright light into.
The native TypeScript support for the back-end
The first obvious improvement that we get out of the box by using UltraJS, is that Deno has native support for TypeScript.
Of course, this is an improvement if you’re actually using TypeScript in all your projects. But let’s be honest, lately, most modern frameworks will suggest you do.
And that means the TypeScript compiler and all the setup required to run it with our bundler of choice go out the window.
Of course, when you’re creating the project, you’re given the choice to go with TS or plain JS, so don’t worry, if TypeScript is not your thing, you can still enjoy UltraJS.
There is no bundling with UltraJS
This one might sound a bit controversial, but UltraJS is completely and utterly against bundling, and for a good reason!
Since 2015 JavaScript has officially defined a module system enabling browsers (and other runtimes as well) to import JS modules using JavaScript (instead of using the script tag).
Until 2015, there was no official way and different runtimes had their own way, like Node with the CommonJS standard.
But we’re living in 2022 now, and in these 7 years it’s hard to believe that most frameworks are still relying on bundlers to simplify the loading of JS code into the client.
But not UltraJS, no sir, this modern framework is pushing the state of the art into your project, whether you like it or not!
Of course, Deno is natively supporting ES modules since day one, so the back-end is automatically up-to-date in regards to the standards.
All of that is to say that UltraJS is completely against bundlers and that translates into yet another tool that gets removed from your dev workflow. And let’s be honest, bundlers are usually one of the major steps in the build process, so we’re not only making things easier to maintain, we’re shaving off several seconds (if not more!) from the build process.
I know what you’re saying though, ES modules might be the standard, but you hate importing URLs and that becomes hard to maintain.
Worry not my friend, lucky for you, both UltraJS and Deno also support ImportMap!
Support for ImportMaps is native
Import maps allow you to define keywords that represent whole URLs, so instead of doing:
You can have a mapping from “fmt” to “https://deno.land/std@0.160.0/fmt”, so you can then do:
Which is, let’s be honest, a lot easier to do, especially if we’re importing the same module from multiple files.
All you have to do to take advantage of this amazing feature, is to define an “importMap” key inside the deno.json file in the root of your UltraJS project.
Of course, that step is already done for you if you’re using the provided generator, so just chill and open the importMap.json file if you need to add more dependencies.
Ability to provide a mixed-rendering environment
While not directly a benefit from having the latest technologies, UltraJS allows you to define the way you render each route. In practice, you can have your static pages rendered in the server, avoiding any JS from being delivered to the client.
And of course, your more dynamic routes can be served normally.
While this is not exactly the “Islands of interactivity” pattern that other frameworks like Fresh provide, it’s a really flexible way of dealing with rendering.
And if you listen to the podcast episode, you’ll hear Omar saying that they’re actually testing the islands pattern in a separate branch, so it’s only time we get there as well.
Did you like what you read? Consider subscribing to my FREE newsletter where I share my 2 decades’ worth of wisdom in the IT industry with everyone. Join “The Rambling of an old developer” !
What’s not so great about UltraJS?
All in all, UltraJS is a very interesting project pushing the latest technologies forward.
I’ve personally not been able to find anything “technically” wrong with it. All my tests have been great and things work as advertised. Sadly, the downside to pushing the state-of-the-art forward, is that not everyone is willing to use them in production.
Of course, UltraJS relies on production-ready technologies, but asking dev teams to migrate out of Node into Deno, for instance, is not easy.
The other downside to UltraJS is the documentation, while they do have some interestingly formatted docs, they’re not very detailed. They instead rely on examples for you to install and try.
I would personally benefit from more docs, like the ones from Astro. That said, UltraJS is constantly growing so I would not discard an updated documentation site in the near future, especially if the number of contributors keeps growing.
UltraJS is not a NextJS killer, nor a Remix replacement, not yet at least, but it’s definitely doing something that almost no other framework is doing: it’s pushing the latest technologies forward without fear of leaving devs in its wake.
Ultra is also doing something that I haven’t seen in the Deno “scene” so far, it’s giving developers a fantastic environment in which to work with React. Other frameworks, like Fresh, use Preact instead. While the distinction there might be minimal, there are differences and some devs might notice them enough to avoid it.
So, what do you think? Is that a bad strategy?
I think it’s brave!
Would you give it a try or would you wait for things to settle a bit more before testing it?
Build apps with reusable components like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
