EDITING BOARD
RO
EN
×
▼ BROWSE ISSUES ▼
Issue 26

TYPO3 Neos - Changing the world of web content management

Tomiţă Militaru
Senior Web Developer
@Arxia



PROGRAMMING

Most web content management systems today disconnect the content editor from the actual design of the website. Editors add / edit / delete content blindly or need to go back & forth between the backend of a website and the frontend, always comparing input with output.

This kind of workflow is most of the times frustrating and hinders the editor"s creativity, both in terms of content & layout of information.

The TYPO3 Universe offers highly flexible, scalable and customizable products for Web Content Management, providing the basis for websites, intranets and web & mobile applications worldwide - always with a focus on the current needs of businesses and public institutions.

Rise like a Phoenix

One of the giants in web content management systems is the German based open source project TYPO3 CMS. Marketed as an Enterprise Content Management System, its complexity and high extensibility are its major strong points, yet the same workflow issue existed.

In October 2008, the TYPO3 Core team gathered for development meetings in Berlin. The primary focus of these meetings was the roadmap for TYPO3, both the current TYPO3 version 4 (v4) and the upcoming TYPO3 version 5 (v5). In addition the team also clarified the future of v4 and v5 for agencies and developers using TYPO3. The manifest:

We, the participants of the TYPO3 Developer Days 2008 state that ...

  • TYPO3 v4 continues to be actively developed
  • v4 development will continue after the release of v5
  • Future releases of v4 will see its features converge with those in TYPO3 v5
  • TYPO3 v5 will be the successor to TYPO3 v4
  • Migration of content from TYPO3 v4 to TYPO3 v5 will be easily possible
  • TYPO3 v5 will introduce many new concepts and ideas. Learning never stops and we"ll help with adequate resources to ensure a smooth transition

But in December 2013 TYPO3 v5 (formerly also known as codename "Phoenix") was launched as TYPO3 Neos and completes the TYPO3 product family, rather than being a successor of TYPO3 CMS. TYPO3 v4 will continue its development as TYPO3 CMS version 6.x today.

The solution: TYPO3 Neos

TYPO3 Neos is the next-generation open source content management system made by the TYPO3 community. Neos is based on the PHP framework TYPO3 Flow. What makes TYPO3 Neos stand out is the attention to details when it comes to the UIX for editors. TYPO3 Neos is governed by 5 UIX principles:

  1. Create boundaries: Clearly separate different kinds of components to make users know where to look.
  2. Thinking is King: It"s your thinking that determines the web experience for your users, not the CMS.
  3. Distribute capacity: Provide power when needed.
  4. Simulate before publishing: Experience what your users will experience.
  5. Plan for change: Make the interface adaptable to reorganizing.

But TYPO3 Neos is much more than paradise for editors. One of its highly anticipated features is content dimensions. The content dimension concept is the foundation to work with different content variants and have a very flexible localization solution. For example, content wouldn"t be just localized by language, but you could have also one content element that changes its content depending on the age of the website user or origin.

TYPO3 Neos Architecture

At the core of the TYPO3 Neos architecture is the entity called "node". Almost everything in TYPO3 Neos is a node entity that is extended to fit the requirements of new entities.

TYPO3 Neos brings modern architecture concepts thanks to the next generation PHP framework - TYPO3 Flow. Neos itself is one big Flow application, but more details about TYPO3 Flow in the next issue of the magazine in its own article.

To make everything work together, we have the following components.

Backend components

Fluid - Modern Templating Engine with Namespaces, Variables / Object Accessors, View Helpers and Arrays support.

TYPO3CR - Content Repository ( JCR / Sling)

TypoScript - TypoScript is like a (large) multidimensional PHP array, but TYPO3 Neos comes with the next generation TypoScript 2.0 (object oriented, view definition language).

Forms - Form API & Form Builder (via Flow Forms API)

Expose - Extensible admin interface

Eel - Embedded Expression Language - building block for creating Domain Specific Languages. It provides a rich syntax for arbitrary expressions, such that the author of the DSL can focus on its Semantics.

FlowQuery - A way to process the content (being a TYPO3CR node within Neos) of the Eel context. FlowQuery operations are implemented in PHP classes. For any FlowQuery operation to be available, the package containing the operation must be installed. Any package can add its own FlowQuery operations. A set of basic operations is always available as part of the TYPO3. Eel package itself.

Frontend components

EmberJS - JavaScript Web Application Framework

Create.js - Web Editing Interface

Aloha / Hallo - HTML5 WYSIWYG Editor

VIE = viejs.org - Semantic Interaction Framework

RequireJS - JavaScript file and module loader

Installation

Requirements

  • web server (Apache or nginx, IIS and others work too, but not tested yet.)
  • PHP 5.3.2 or later
  • PHP modules mbstring, tokenizer and pdo_mysql are enabled, magic_quotes_gpc = off
  • PHP functions system(), shell_exec(), escapeshellcmd() and escapeshellarg() are not disabled
  • a database supported by Doctrine DBAL
  • virtual hosts for local development:
NameVirtualHost *:80

DocumentRoot "/your/htdocs/TYPO3-Neos-1.1/Web/"
SetEnv FLOW_CONTEXT Production
ServerName neos.demo

Installation from an archive

  1. Download package via neos.typo3.org/download.html
  2. Unpack the archive to your web server document root directory
  3. Continue with Setup, pin point to
  4. www.domain.local/setup
  5. Follow instructions.

Installation via Composer

  1. Install composer (if missing):
  2. curl -s https://getcomposer.org/installer | php
  3. Run the following command in your installation folder:
  4. php /path/to/composer.phar create-project --no-dev typo3/neos-base-distribution TYPO3-Neos-1.1
  5. Continue with Setup, pin point to
  6. www.domain.local/setup
  7. Follow instructions.

TYPO3 Neos Backend

Makes editing on the fly possible for editors:

  • Simple operation
  • Short learning period
  • No training required
  • Intuitive use

Editors don"t need training to edit content in Neos. You just click on the part you want to edit - and start. But since publishing projects have very different authoring needs, there is more than just one way of editing content in Neos.

Either use the full In-Place editing or use what is called Raw Content editing. Raw Content is like having a distraction-free authoring application right inside your CMS - where all the templates are stripped away.

Raw Content mode also makes reusing content across channels more efficient because editors don"t spend time perfecting content to match the template. Instead, they can focus on the pure words and images while working with a tailored authoring interface.

The Preview Central is where you build your preview templates. If you want your editors to always check three different representations of their content before publishing, then this is easily done in Neos.

The Preview Central is right next to your editing modes in TYPO3 Neos. You can quickly switch back and forth between editing and previewing.

Conclusion

TYPO3 Neos is still a young product that lacks some critical features like translation / localization of content, multidomain support or a complete documentation for developers. But version 1.2 of Neos which is currently in progress promises to bring and improve the translation workflow as we know it today by introducing content dimensions. The content dimension concept is something that no other CMS has implemented today and could be the next big thing.

TYPO3 Neos is currently used in a variety of projects thanks to its no training requirement for editors and highly extendable architecture that allows it to easily shift into any domain model.

Conference TSM

VIDEO: ISSUE 109 LAUNCH EVENT

Sponsors

  • Accenture
  • BT Code Crafters
  • Accesa
  • Bosch
  • Betfair
  • MHP
  • BoatyardX
  • .msg systems
  • P3 group
  • Ing Hubs
  • Cognizant Softvision
  • Colors in projects

VIDEO: ISSUE 109 LAUNCH EVENT