PubSweet is a framework for building applications for knowledge production. Today we’re announcing its latest iteration. A few months ago we announced an alpha release of PubSweet and an example application built with it, the PubSweet Science Blogger. Since then we’ve made really big steps to make PubSweet more powerful and easy to use.
First of all, we’ve split a previously monolithic PubSweet into three distinct parts:
This module contains our backend Node application and deals with the database (PouchDB), authentication, authorization (Authsome), and exposes a clean API to clients. Yaaaawn! I know, I know, but when it comes to backend services, it’s better to be just a little bit boring. (Authsome is a flexible team-based authorization system, but more on that in a separate post coming soon!)
Here the foundations for frontend apps are set, based on React/Redux and Webpack: it provides an awesome jumping-off point for frontend developers. This is also where all of the components come together, but more on that later. And last, but not least:
PubSweet brings all of pubsweet-* to the yard. Think of ‘rails new’, or ‘npm install’, or ‘yarn add’, and you’ll have a pretty good idea about what this module’s command-line tool does. You can create new apps with it, manage components, run applications in development or production. You name it, PubSweet’s got it.
But the biggest story this time around is components. It is now possible to extend both the frontend and the backend in a simple, but extremely flexible way. In the image above, you can see the simplified architecture of a PubSweet application. The new PubSweet is designed so that you can extend or change any part of its behavior. Let’s get really technical and see how to do that.
React and Redux drive the frontend of a PubSweet app. You therefore extend PubSweet behaviour with React and Redux components. React components work in the classical way. If your component is a high-level component that should have its own route, you simply require your component and add a route to it by modifying ‘app/routes.jsx’. If it’s not a routed component, you just require it wherever you want to use it.
Extending Redux works a little differently, but we’ve tried to make the extension process as simple as possible. All we expect you to do is export an object. If the object has the key frontend, we’ll load the value for that key as a frontend (Redux) component. A frontend component is also an object. If it has the key actions or reducers; we expect the value to be an object, mapping action or reducer of names to functions. Every action, whether from PubSweet’s core libraries or from a PubSweet component, is exposed in a single object when you import * as Actions from ‘pubsweet-frontend/src/actions’ or const actions = require(‘pubsweet-frontend/src/actions’). The same goes for reducers, which are exposed at ‘pubsweet-frontend/src/reducers’. In this way, Redux actions and reducers from any component become available to every other component.
Express drives the backend of a PubSweet app. To extend the backend, your PubSweet component uses express middleware. If your component module exports an object with the key backend, we expect the value to be an object mapping names to middleware functions. We run each of the middleware functions in turn against the PubSweet app, giving you total freedom to modify the app, or add/modify routes, or intercept requests or responses.
It’s now really easy to develop PubSweet components and apps and we can’t wait to see what you can come up with! Check out the components we’ve made to show how it’s done. And if you’re feeling adventurous, jump right in!: