You've Heard Of Headless, But How About Bodiless?

What Is Bodiless?

BodilessJS is a new open-source toolkit for building editable websites on the JAMStack, using React and Gatsby.

At Phase2, we’re always looking for new ways to work with our clients on unique problems. It’s in this spirit of innovation (and collaboration!) that we’re pleased to announce BodilessJS. A joint effort with Johnson & Johnson’s IT team, Phase2, and others, Bodiless is the (wait for it…) “em-bodiment” of several market trends, namely decoupled architectures, new frontend frameworks, component-based design, and static sites.

You can read more about Bodiless, including what it does and why it was created, in this Medium post from the Senior Technical Architect at Johnson & Johnson, Chris Oden. You can also learn more via Github.

Is Bodiless Just Another Static Site Builder?

No!

While the concept of static sites is nothing new, Bodiless takes the trend a step further.

Traditional static site generators typically enforce their design systems and/or templates on editors, but with Bodiless you can import your own design system and work with that.

As Chris neatly summarizes in his Medium Post:

“The result is a website which is natively editable in-place — there is no separate editorial interface to integrate with your site. Instead, your site is built out of editable pieces.”

Bodiless also manages content alongside code in the repository. Changes to styles, content, or anything else are all handled in the same workflow, streamlining the creation and update process too.

Put simply, Bodiless combines the flexibility of atomic design systems with all the benefits of static sites. 

But I’m In Marketing. Why Should I Care?

Fundamentally, Bodiless was born from the belief that not every site needs the added burden of a CMS to store and edit content. This is especially true for large enterprises like Johnson & Johnson, with hundreds of consumer products in need of simple, content rich “brochure-ware” sites.

With a static site system like Bodiless, brand owners can edit their product websites natively in a true WYSIWYG interface (no backend!). For more technical tweaks (such as updates to the CSS styling etc) there’s no need to wait for changes to be pushed live at a later date determined by IT.

Being static, the sites load lightning fast (crucial for mobile browsing and SEO), are virtually unhackable (you can only attack the site’s host and/or any embedded third-party services), and have next-to-zero hosting costs.

If you’re in marketing, a brand owner, or in any way responsible for communicating your product or service via the web, then the greater speed, flexibility, and security a system like Bodiless brings should interest you.

Where Else Can I Find Examples Of Decoupled Platforms?

We’re glad you asked!

Phase2 is a trailblazer in decoupled architecture, static sites, atomic design, and frontend frameworks.

Recently, we launched the Leagues Cup and Campeones Cup tournament sites for our partner Major League Soccer.  Both sites use a combination of Gatsby and Netlify to strike the perfect balance between speed to market, site performance, fan experience, and cost-efficiency.

Elsewhere, the NBA’s Drupal 8 platform was one of our first large-scale decoupled deploys back in 2016/17 (see the DrupalCon Session Here). Since then, we’ve built several headless/decoupled platforms for partners such as WW (formerly WeightWatchers), Norwegian Cruise Lines,  CNBC and many others.

To find out more about decoupled architectures, download our Drupal Architectures white paper.