Welcome to Slingslop

Build web-applications on top of Apache Sling (+ htmx)

What is Sling, a CMS ?

No. It's an under-appreciated open-source framework for web-applications in general.
It's currently serving very large sites in form of Adobe Experience Manager (AEM), which is a CMS build on top of Sling.

Sling itself is quite abtract, it doesn't even know what a page is. It's all resources in an unstructured content-tree (JCR), some of them happen to get rendered as HTML. But it does not come with a built-in user interface. You need to code the frontend (HTML, CSS, JavaScript) on your own.

Due to its modularity, Sling consists of more than 300 modules. There is one for almost everything an "enterprise" application server needs. SchedulingEventing and JobsCluster Discovery and Distribution, Testing ecosystem, S3/Azure BlobstoreLogging, GraphQL ...

Chances are you don't need any of that; you can start simple.

Dealing with complexity

There is a bit of a learning curve to get started. Even the most simple project needs five modules:

  • Frontend build with TypeScript and CSS

  • HTML templates and components

  • Business-Logic: where things from the real-world get a name (the hard part) and become Java-Objects

  • Content: the story to tell with text and images

  • Server: something that boots, creates a repository, installs all of the above and listens to incoming HTTP requests

This is intimidating at first, but we've get 'separation of concerns' from the start:
Designers, frontend and backend developers, editors and operations can work on the same project, in parallel, without stepping on each others toes. Regardless of the software stack, these concerns have to get adressed in every project — one way or the other.

What is Slingslop ?

The page you're readling right now is a Sling app, a static but editable MPA (Multi-Page Application, formerly known as website).
While Sling is perfectly capable of serving headless json-content for an SPA (Single-Page Application, yes there is a module for that too) we will focus on HDA (Hypermedia-Driven Application) driven by htmx.

Keep in mind that Sling can be used in all sorts of integrations. The architecture suggested here exemplifies the simplicity of both, Sling and htmx play together in way that makes one wonder how they do htmx with 'only static endpoints'. It's a great way of explaining to core-concept of Sling by coming from htmx. More on that later.

Slingslop is a project on github that showcases the complete setup. It's not software on it's own, just a plumbing-together of open-source pieces. The license allows you to copy everything for a quick start without the duty to keep your work open-source.

Inspired by the Sling community

Experiments on this started after the adaptTo conference in 2019, where the Sling Feature Model 1.0 was revealed and two CMSs were presented: Composum Pages and Peregine CMS: "There is no CMS in Sling, now there are suddenly three that are open source". (Third one being Sling CMS presented in 2021).

In short, in combination it's possible to bake two CMSs into the same docker image, which is a silly thing to do but it makes a few important points:

  • about the application-serverness of Sling: the ability to host multiple complex apps. Side-note: Peregrine renders a vue SPA, completely breaking with AEM's traditional MPA style

  • about shared infrastucture:

    • Composum's JCR node-browser (similar to what /crx/de does in AEM)

    • a user-manager that also allows to set read/write permissions in JCR

    • a package-manager to up/download content zip-files, which in turn enables deployment of apps in the browser - instead of commandline or sling-feature-model

Technically these three tools are also "only" apps on top of Sling, but shipped with the official Sling Starter. Sling doesn't needs them, they just make live a bit easier.

CSS zengarden

The maven sling-project-archetype is a good starting point. For the above, only the launcher's feature-model was needed so Peregrine and Composum-Pages were added there. But it also comes with an example app for new projects. It's a plain 'Hello World' experience. Didn't want to throw it away, but how to make it look nice? This was pre-AI, lacking the frontent-skills I had the idea to "borrow" around 20 styles from CSS Zen Garden: The Beauty of CSS Design from 2003, take it's oldschool html and replace it's static text by JCR content.

The only "Business-Logic" is one class that randomly selects a design, page gets a new look on reload, resulting in confusion. Designs predate smartphones, can't cope with longer texts, overlay headlines with images you can't change so the text below needs to match somehow. For editing text or creating a new page you'd have to use the node-browser.

Apart from the separation of look&feel from content, some lessons can be learned for creating a Sling application from scatch:
Importing existing markup as Sightly script (aka HTL), split it up into includes and components, copy over the CSS, separate markup from text. At some point in future I'll add a step-by-step HowTo, promise ;-)

Follow the White Rabbit

Follow the White Rabbit

Ready to see how deep the rabbit hole goes? Explore our documentation sections to unlock the secrets of Apache Sling:

  • OSGi - The modular foundation of the Matrix

  • JCR - The repository that stores all truth

  • Sling - The framework that brings it all together