Introducing Root.js

2024-04-01

When we started Blinkk in 2014, we sought to streamline web development in a way that would scale for websites of any level of complexity. We wrote a blog post called “All I want to do is build a website (and launch it)” detailing some of the challenges we faced, and after re-reading it ten years later, most of those challenges are still true today:

Launches involve a myriad of people working together to produce the final site: designers, developers, copywriters, marketing, product, graphic artists, translators, and animators. Modern web site production needs to be rapid, collaborative, social – because there are often many people and many stakeholders involved throughout the process.
Web development can involve dozens of different technologies that are constantly evolving. Ten years ago, Python was our preferred programming language; today, TypeScript has reigned supreme. JSX is also as popular as ever, with many frontend frameworks adopting some variant of it. Modern browsers are also constantly shipping new APIs that reduce the need for custom 3rd-party libraries. We don't know what the ecosystem will look like in another ten years, but we do know our tools need to adapt to them without the need to constantly rework our infrastructure.
Content editing, reviews, and publishing needs to be easy and painless. Nobody wants to be up at 4AM to launch a site, and if there are any content mistakes, they need to be addressed as quickly as possible.

A few years ago, we noticed our tooling and processes weren't keeping pace with the rapidly evolving modern ecosystem and were no longer tenable to our needs. Tools like React, Next.js, esbuild, and Vite were on the rise, while we were on what felt like a dying stack, constantly debugging slow and complex webpack configurations using a legacy Python2 / jinja based-tool that was quickly reaching EOL.

So we sat down and started to diagram what our "infrastructure of the future" would look like. This is what we whiteboarded:

site infra system design: requirements and examples — An overview of our site infrastructure and tools requirements.

After several months of testing out new technologies (including Astro and Next.js) to see if they would work for our projects (which we will write about in a future blog post), we quickly realized we needed something tailored to our internal processes, development patterns, and client requirements. We worked tirelessly for the past two years to produce what you see in front of you.

Today we're excited to introduce two new tools we've created to help solve many of the problems we've faced with web development: Root.js and Root CMS. Among their many features include the following:

Zero JS sent to the browser. The TSX components render HTML only and do not automatically rehydrate – interactive elements can be added via web components.
First-class support for web components. Interactive islands are all based on custom elements, written in the framework of your choosing (or no framework at all). The system intelligently figures out which custom elements your page uses and injects the matching file dependency from elements/<tag-name>.ts.
Localization is built-in. No more needing to download additional plugins to get translations to work. Routes are all locale-aware.
Root CMS as an optional plugin. The CMS runs the same in local development as it does in production. And since schemas are written as TypeScript files, developers can test and verify schema changes in a local environment before deploying to production.
- CMS Features include: collaborative editing, component-centric page building, instant previews, scheduled publishing, user-defined authentication, translations import/export from Google Sheets, and version history.

We will share more details about how and why we've created these tools over the upcoming weeks/months, but in the meantime, we hope that you'll explore the website, check out the guide, and share any feedback with us in GitHub.