TYPO3 Phoenix running on VIE and Createjs

In may 2012 the TYPO3 Phoenix team was asked to become early adaptor of the IKS Project. Not much has been published since then, but results have been booked in the meantime! TYPO3 Phoenix is the next generation CMS of the TYPO3 community, which will have it’s first public (alpha) release in october 2012. Our backend interface is based on Emberjs, and the server side is based on the application framework FLOW3. The main goals set for our early adopter project:

  • Introduce VIE into TYPO3 Phoenix
  • Use VIE in combination with Emberjs
  • Enrich the content elements with RDFa annotations
  • Create a JSON content type definition based on the internal settings of TYPO3 Phoenix

As a bonus we wanted to be able to use widgets like annotate in our backend.

Start up

As a start we’ve looked into multiple approaches to integrate VIE in a clean way. The use of VIE gave us quite some extra dependencies, and some of them had shared responsibilities with libraries we already use. Like for example Backbonejs and Emberjs. Having the wish to easily use other widgets from the IKS project we decided to accept Backbonejs as a dependency for just VIE and Create.js. Other dependencies could replace already loaded libraries like jQuery Notify (we replaced it by the Midgard Notifications widget).

But then we needed some good progress! We had a code sprint planned (Copenhagen, September 2012), so we invited Henri Bergius to join us. Together with Henri we worked on implementing VIE and parts of Create.js. Thanks to this joint effort we can now announce: VIE and Createjs became a big part of the content editing module in TYPO3 Phoenix!

The actual integration

The TYPO3 Phoenix ‘backend’ has similarity to the approach of Create.js. We lay our interface on top of the rendered frontend of the website. During the content rendering process we enrich the HTML output with RDFa attributes. Some of those attributes are strictly for internal use by TYPO3 Phoenix, and are not inline editable (like publication date for example). Those attributes are added to the DOM using script tags, and can (if needed) be modified in a sidebar. TYPO3 Phoenix has its own content repository and content type definition. This definition is converted into a JSON schema and loaded into VIE. We had a look at CreatePHP for this schema generation, but unfortunately we were not able to use it yet. But as this project seems to be promising we shared our code, and hope to be able to utilize CreatePHP in the future when we expand our semantic feature set.

So far the low level functionality, but now the editing. Building our content module faced us with quite some challenges, and at some point our editor of choice (Aloha) became pretty much wired into the core of this module. We recognized this was a problem, and actually integration of Create.js could be a solution for having content editing support without being dependent on one single editor. Just loading the full Create.js widget was a bit too much though, so we decided to embrace the editables and collection support. Especially in the collection support Henri Bergius’ presence was worth millions! He integrated multiple new features (like support for multiple entity types in a collection) into VIE and Create.js to support our wishes. Just on the last day of the code sprint we felt confident enough to merge the VIE and Create.js implementation into the master branch. And now, almost a week further, most of the rough edges have been polished. We can now safely state integrating VIE and Create.js gave us a more stable content module with a bigger feature set. Not even talking about the semantic capabilities we can unleash by having RDFa attributes and VIE in place!


A first version of TYPO3 Phoenix will be released during the TYPO3 Conference in October. Henri Bergius and Rens Admiraal will have a session about decoupled content management, and the integration of VIE and Create.js in TYPO3 Phoenix. Of course it would be great to meet you there, if you want to know more about this project before you can visit the TYPO3 Phoenix website. We will publish a public demo page with more explanation about our early adopter project before end of next week.

Author: Wernher

Wernher Behrendt is senior researcher at Salzburg Research and the coordinator of the IKS project

Comments are closed.