Blog

Long time followers of the Six Feet Up Blog know all about the open source content management system Plone. Indeed we have published many Plone articles on this site, such as why you should upgrade to Plone 5 or how Plone handles permission management. Some posts are over a decade old now –for instance this article on Plone 4 from 2010– and you can also find a general introduction to Plone on our website.

This post, however, is about the future, specifically the upcoming major release of Plone 6.0. The main features of this release will be the migration to Python 3, the Plone Rest API, and Volto, the brand new React.js based front-end.

"But wait!" you say. "Aren't all of those features already in Plone 5.2?" That's correct: all of these exist in some capacity in Plone 5.2 that was released in 2019. This is because Plone 5.2 was a special release of Plone developed in parallel with Plone 5.1. This made it possible to get a version of Plone running on Python 3 as quickly as possible, since Python 2.7 officially reached its end of life on December 31, 2019.

The Volto front-end is a free and open source framework that can be used for Plone. The Plone REST API has existed as an add-on for Plone since at least 2015 and was added to the core for Plone 5.2.

However, Plone 6 will be the first release in which all 3 are core features of Plone, making Plone 6 projects much easier to configure, customize, and maintain.

Plone 6 + Python 3

Plone’s migration to Python 3 was a long time coming, as the bell had been tolling for Python 2.7 for years. Plone consists of well over a million lines of code, so porting it to Python 3 was a huge effort by many contributors, who have also produced upgrade guides and recipes.

One of the things that had to come together for this migration was the release of Zope 4. Zope is a free and open source web application server that has been at the core of Plone from the beginning. With the release of Zope 4, also written in Python 3, it became possible to complete the process of migrating Plone to Python 3. Although no major security issues are currently known to exist in Python 2.7, it won't receive further official security updates, and so it was necessary to move on.

Plone REST API

In 2014, at the Bristol Plone Conference, a strategic summit concluded that the future of Plone relied in part on the creation of an interface layer separating the back-end and the front-end of Plone. The resulting plone.api package allowed developers to innovate by decoupling these two parts of the Plone application.

The following year, the Plone REST API was created as an add-on for Plone 5. As with all major Plone innovations, including the Dexterity content type framework and the Diazo theming engine, the REST API was used as an add-on in production systems and eventually was added to core, as of Plone 5.2.

The Volto front-end relies on the REST API to communicate with the Plone back-end, as do other Plone front-ends written using Angular and Vue.js.

Here is an example REST API call to retrieve the contents front page of a site:

$ curl -i https://plonedemo.kitconcept.com -H "Accept: application/json"

HTTP/2 200
server: nginx
date: Wed, 16 Sep 2020 15:02:30 GMT
content-type: application/json
content-length: 743
vary: Accept-Encoding
x-frame-options: SAMEORIGIN

{
  "@components": {
    "breadcrumbs": {
      "@id": "https://plonedemo.kitconcept.com/@breadcrumbs"
    },
    "navigation": {
      "@id": "https://plonedemo.kitconcept.com/@navigation"
    }
  },
  "@id": "https://plonedemo.kitconcept.com/",
  "@type": "Plone Site",
  "id": "Plone",
  "is_folderish": true,
  "items": [
    {
      "@id": "https://plonedemo.kitconcept.com/en",
      "@type": "LRF",
      "description": "",
      "review_state": "published",
      "title": "English"
    },
    {
      "@id": "https://plonedemo.kitconcept.com/de",
      "@type": "LRF",
      "description": "",
      "review_state": "published",
      "title": "Deutsch"
    }
  ],
  "items_total": 2,
  "parent": {},
  "title": ""

This type of communication reduces significantly the network traffic and computation required, compared to the classic back-end rendering of HTML.

React on the Front-End

Plone is a ready-to-use content management system with a complete user interface. Since 2015, with the release of the REST API add-on, Plone has supported other front-ends, built using popular JavaScript tools such as Angular, Vue, Gatsby, and React. The latter, arguably the most popular JavaScript front end framework, is what Volto is built with. As with other core features of Plone, Volto started as a standalone project but, when Plone 6 releases, it will be the default front-end for Plone, coexisting with what we are now referring to as the “Plone classic” UI.

With Volto, content contributors and managers will experience incredibly fast response times on the admin interface, as will viewers on the user side. This will be especially true on mobile devices where the benefits of the REST API’s reduced network traffic will result in near-instantaneous responses. The Volto front-end is much less resource intensive and just plain faster, even on powerful desktop computers. And – don't worry – the Plone classic front-end will still be available, whether you choose to expose it to end users or reserve it for content editors or site administrators.

Adding a New Page with the Volto front-end

Simplified Development

For Plone developers and power users, there's another tremendous advantage to switching to Volto. In the past, altering the core functionality of Plone—in order to build custom templates or add-ons— was quite complex, requiring knowledge of ZCML (the Zope Configuration Markup Language), XML, CSS, and the functioning of over a dozen moving parts.

With Volto, you only need 2 things: knowledge of React.js, and knowledge of the Semantic UI, a highly customizable theming framework. Anyone who knows React will be able to jump into customizing Volto, opening up Plone to a much bigger community of JavaScript developers. With a much lower barrier to entry for Volto developers, there will be a lot more custom features for Plone—from themes, to templates, to add-ons— adding to Plone’s vibrant community of users, developers, hobbyists, and professional service providers.

As an example, customizing the basic header styling of a Volto site is as simple as overriding the Semantic UI theme’s variables, of which there are over 3000:

.ui.basic.segment.header-wrapper {
  background-color: #191919;
  border-bottom: 1px solid #939393;
  margin-bottom: 20px;
}

.ui.basic.segment .header .logo-nav-wrapper {
  justify-content: space-between;
}

.logo .ui.image {
  height: 50px;
}

Overriding the header requires adding a new Header.jsx customization file:

import { Logo, Navigation } from '@plone/volto/components';

...

render() {
  return (
    <Segment basic className="header-wrapper" role="banner">
      <Container>
        <div className="header">
          <div className="logo-nav-wrapper">
            <div className="logo">
              <Logo />
            </div>
            <Navigation pathname={this.props.pathname} />
          </div>
        </div>
      </Container>
    </Segment>
  );
}

This is so much easier and welcoming than the many technologies required to make the same change in Plone classic UI.

Going Further…

There are dozens of smaller features and tweaks that have been in the works since the last Plone 6 Sprint in April 2020. The 2020 Plone Conference (a virtual event) is scheduled for November 16-22, 2020 and there's likely to be at least an Alpha release of Plone 6 by then.

As with any big technology changes, there is a bit of a learning curve getting developers from Plone classic to Volto. Fortunately, anyone can try Volto and enterprising developers can get a head start today by following along the Volto training materials (the main Volto class, the shorter hands-on class, and Plone’s intro to React, Redux, and React-Router).

Volto is a game changer for Plone – you will immediately be impressed, we’re certain of it!

Join us this November!