With Create, CMS developers can provide a fresh way for their users to write content on websites, and thanks to the decoupled nature this user interface can be adapted to work on any back-end.
Here is a quick update of the latest happenings in Create.js land. If you want to follow the project in more detail, feel free to watch it on GitHub.
Yesterday we released the Create.js Integration Guide aimed at helping developers to use these tools. The guide describes all the relevant Create APIs, as well as outlines the background of the project:
Create.js was originally written in 2010 as the next-generation content editing interface of Midgard CMS. Henri Bergius presented it in the Aloha Editor developer conference in Vienna last year, and the TYPO3 developers expressed interest in reusing the codebase.
Because of this we started extracting the various parts of the Create UI into their own, reusable components. The first one was VIE, which provides the underlaying management of editable objects. In basic use scenario, it loads content annotated with RDFa from the web page, populates it into Backbone.js Models and Collections, and then creates Backbone Views for the original RDFa-annotated parts of DOM.
This way the DOM will automatically stay in sync when data changes, whether that happens by user interaction like editing, or through some server communications (we’ve done collaborative editing demos over WebSockets, for instance).
It also explains the base design of Create:
The Create.js interface was then rebuilt on top of this new VIE library by writing a bunch of jQuery UI widgets. This way we have an overall default UX that we can ship, but still provide a bunch of different widgets for CMS vendors to pick-and-choose.
The different widgets in Create.js are also documented, including:
- Editable: makes an RDFa entities (as identified by
about) editable with some editing widget (now plain contentEditable, Aloha, and Hallo supported, more to come). Provides the events like “modified” of those widgets in a uniform way. Editable also deals with Collections, allowing user to add/remove items from them
- Storage: provides localStorage save/restore capability, and keeps track of what entities ought to be saved to the back-end
- Workflows: retrieves workflows that user can active for a given ntity from the back-end and handles running them. These could be simpl things like publish/unpublish and delete, or more complex workflows
- Notifications: notification bubbles/dialogs that can be used for telling user what has happened (“X has been saved successfully”), or query them for what they want to do (“You have X local modifications for this page. Restore/Ignore”)
- Tags: content tagging widget
- Toolbar: holder widget for a toolbar overlay where widgets like Editable, Storage, and Workflows can place buttons
- Create: ties all of these together to the default UX
Create.js hackathon in Berlin, July 19-20
DrupalCon Munich and Create.js
Decoupling Content Management is a featured session in DrupalCon Munich 2012. This talk will discuss both Create.js and PHPCR as the building blocks projects like Drupal can utilize to become decoupled.
Drupal has its own next-generation in-place editing project called Spark. We feel Spark to be very similar to the goals behind VIE and Create.js, and so would be happy to collaborate with the Drupal team on these.
Last week the Spark team also chose Aloha Editor as the rich text editor in their interface. Given that Aloha Editor is optionally supported in Create.js, and TYPO3 will be using the same editor with VIE and Create.js widgets, the projects are indeed converging.
Prose is a recently-announced content management interface for Markdown documents handled in GitHub repositories. This is a very common way to publish materials, especially on blogs powered by static site generators like Jekyll and DocPad.