Blog

Beyond proof-of-concept: Introducing Simpla 2

Over the last year Simpla has grown rapidly from back-of-the-napkin idea to full fledged content platform, used by thousands of developers from around the world.

We started Simpla in late 2015 with a question: what would content management look like if you dropped the established ideas of CMSs, and used the web platform directly?

At the time this was an unusual thought. The technology Simpla uses, Web Components, was in its infancy and few developers were familiar with the 'new HTML elements' we were proposing, much less how they would replace a CMS.

In other words, Simpla was an experiment. And thanks to you, that experiment was a success. Simpla now powers thousands of projects, Web Components have evolved to the point where all major browsers are rolling out support as we speak, and Simpla's own ecosystem has begun to mature.

That's not to say we didn't stumble along the way. We lost months of development time to failed experiments and non-starter ideas. But over time we reached a place where Simpla began making sense as a viable CMS replacement in the real world.

And today we are thrilled to announce the launch of Simpla 2. With Simpla 2 we've gone back to the beginning, taking everything we learnt over the past year to rebuild Simpla into a production ready, future-facing content system that's ready to scale.

Read on to learn more, or jump straight in and follow the migration guide to upgrade your v1 project.

Opening the ecosystem

One of the biggest goals of Simpla 2 is to open up the element ecosystem, so developers can build their own Simpla elements and contribute them back to the community.

Element catalogue

Simpla elements now have a permanent home at simpla.io/elements. This is an open catalogue. It's hosted on webcomponents.org and you can publish your own elements by forking it on GitHub.

Element catalogue

Every element has its own documentation, demos, and API references on its element page, which you can access by clicking on the element in the catalogue.

Open package management

Elements are no longer hosted on Simpla's private CDN (previously elements.simpla.io). They are distributed via open package management instead. You can install them with Bower, and we have Yarn support cooking.

Simpla 2 doesn't automatically include elements like v1 did. Install and include the elements you want with standard HTML imports instead.

This means Simpla 2 works seamlessly with published elements, locally developed elements, and other Web Component frameworks like Polymer and SkateJS.

Better authoring tools

We've overhauled Simpla's JavaScript SDK with a focus on more powerful tools for element authors.

All data on a page is now kept in a local buffer. Edits happen instantly and elements using the same data are updated live.

States are used to coordinate elements in your site. You can hook into (and control) Simpla's edit mode, know when a user is authenticated, and check project configuration with a few JavaScript calls.

This is all tied together with observers, which let you react to changes in data, state, and queries made with Simpla.

Read more about the new JavaScript SDK

New elements

With a new Simpla comes new elements. Literally, every element is new. Existing elements are now more performant, and we're constantly adding new elements to the catalogue.

New simpla-text and simpla-img

Simpla's two primary content elements, simpla-text (block of editable richtext) and simpla-img (editable image) have been rebuilt with a focus on performance and stability.

Performance on simpla-text has improved by orders of magnitude. We've reduced initial bundle size from 28kb to 2kb, and a litany of bugs have been fixed with the move to a modern richtext engine.

Simpla-img now extends a native <img>, ie: <img is="simpla-img">. It behaves exactly like a regular HTML image, and plays nicely with other frameworks and libraries that target images. It also opens the door for prerendering support in future.

Simpla-block replaced by simpla-paths

The <simpla-block> element, which let you structure data by creating 'namespaces', has been replaced by simpla-paths. Simpla-paths provides the same mechanisms as simpla-block, but lets you to place sid and gid attributes on any element. This means cleaner markup and better performance.

<article sid="article">  
  <div sid="section">
    <simpla-text sid="content"></simpla-text>
  </div>
</article>  

New simpla-admin

The collection of elements that made up Simpla's admin controls have been refactored into a simpla-admin component. Import the new element, and it will set itself up when Simpla is editable.

You can configure it from a global singleton:

// Disable #edit tracking
window.SimplaAdmin.hashTracking = false;

// Turn off login prompts
window.SimplaAdmin.loginPrompt = false;  

Content model

The biggest practical change in Simpla 2 is the adoption of a full-fledged content model for all data in a project. Content is now organised into paths, with each part of the path representing a JSON object.

/path/to/item

You can give paths to elements

<simpla-text path="/my/text"></simpla-text>  

Or fetch data directly and query a path in relation to its children using the Javascript SDK

Simpla.get('/my/text').then(...);

Simpla.find({ parent: '/my' }).then(...);  

Every path has a schema containing meta information like when it was created and last updated, and the type of content it holds.

This makes content portable and reusable, and means that you have consistent data to work with in your own projects.

Read more about Simpla's new content model

New documentation

New Simpla docs

Simpla's docs have once again gotten a makeover. Our focus is on extensibility, so we can easily add more guides, references, and other resources as Simpla continues to evolve. Let us know if there's anything you'd like to see more (or less) of!

Check out the new docs

What's next

While v2 marks a turning point for Simpla, development is far from over. We're working on new elements to support more complex content out-of-the-box (collections, blogs, pages) as well as more content types (videos, articles, markdown). Similarly, we will be shipping tools to make the 'management' part of content management easier with Simpla - drafts support, revision history, and a content explorer on your project dashboard.

We'll continue iterating on documentation and resources, adding starter kits for common projects (blog, shop, SPA) and full REST references for both Simpla's Content and Platform API.

We also want to ensure that Simpla's business stays viable as the project grows, with a focus on healthy unit economics for Simpla to become a fully self-sufficient company.

You can follow Simpla's development on our public roadmap.

Get started

If you already have a project built on Simpla v1, follow the migration guide to upgrade it to Simpla 2. All v1 projects are compatible with v2, but there are several changes needed to make your site ready for upgrading. This takes 10-15 minutes for a standard website.

If you're starting a new project, or just discovering Simpla, welcome! There's no better time to dive in. Go to your dashboard and create a project, then follow the getting started guide to setup Simpla on your site.

Thank you

And finally, we want to say thank you. To all of our users and to Simpla's awesome community. From its humble beginnings on Kickstarter Simpla has always been a community-driven project, and it wouldn't be here without your support. This is just the beginning, and we're thrilled that you're here to share the ride with us.