Neos is an amazing Content Management System! And you should know about it ...
Let’s start with a short statement and get into details afterwards.
Neos is all you need and much more. It’s extremely powerful and well designed. It offers very fast development times while allowing elegant solutions for complex problems. In short, it allows you to add a simple to use, advanced Backend, even to highly individual Frontends.
Summary
After looking at some Screenshots to get a first idea how Neos looks like, we will talk about its main concepts and possibilities, then twice (ones in short and later in more detail) at potential interest-groups. Including some great Youtube-Videos about Neos. We will compare it briefly with some other CMS out there and while slowly finishing more technical, give you many reasons why to look at Neos in more detail.
Screenshots
To give you a glimpse of what it would be like to work with Neos as an Editor, a person taking care of new and relevant content of a website, we will look at a couple of explained screenshots first:
Individual Components
When creating individual components to represent parts of the Web-Design is what a great CMS should do easily, then Neos does an excellent job. With a few lines of code new Content Elements can be created. We will look into the code much later just keep in mind what possibilities come up once you can configure this Backend in a simple way to represent you content in a down to earth and very direct way. If the elements are repeating themselves or need more complex settings, the Neos Backend offers us certain areas for these tasks. In the next screenshot I will show you the structure Editor of Neos, which was hidden in the bottom left corner in the last image.
A little like writing articles in Medium
Neos reminds me a little of the way you can write articles with Medium. If you have never tried it, you should click on write a story inside of Medium. The way and the simplicity to write Articles feels quite similar to some basic features, offered by Neos. Instead of a ready to use system though you could easily create your own Medium with Neos. It could be a interesting challenge to see who more elegantly and in the shortest working hours could realize the main features of the Medium Article Management with a simple overview.
Who might be interested in Neos you wonder?
Let us first split up six different potential interest-groups, first in short and later in more detail and for now therefore stick to some more general points about Neos, before further down starting to look at deeper concepts Neos offers to Developers.
Potential Interest-Groups
Developers, because it will broaden your horizon in many ways concerning modern ideas of an amazing CMS in action. Neos gives you many beautiful designed tools to work with and allows to keep the content easily up to date.
Designers, because Neos gives you a Toolset which allows direct and creative thinking in an easy to control environment. The Neos Backend has UX and UI in mind. Many modern concepts like Living Styleguides can be integrated in Neos. This Youtube-Video shows an interesting approach to Neos, Atomic Design with Fusion, Afx and Living Styleguides.
Investors, because Neos is still not well known and might get famous any minute now… Neos could easily be a big player and is already on its way to be so. The first big companies notice its potential. 1&1 for example focuses on Neos to take care of their big and complex Profiseller area. All the content is soon if not already supposed to be taken care of by the Neos Backend. Also you could have a look at the Swiss website of EIZO from 2015, which is not only powered by Neos but which allows a need way to setup the filterable Products and general repeating Content by all kinds of values nicely as can be seen in this Youtube-Video (in German). The same but even more advanced concepts can be seen in this Show Case of Römerturm an advanced e-commerce solution completely realized in Neos:
Agencies, because Neos is fun! What? Yes it’s fun! Oh and by the way, it’s also beautiful to design content management websites with it, elegantly and fast too. The whole structure is meant to be easily understandable while still being extremely powerful. With a good setup, even more complex Websites can be done in almost no time. That factor of development speed should not be underestimated. Developer hours are costly especially when individual solutions carry a high degree of complexity.
Creative Thinkers, who like to explore and develop new territories. There is much to come up with, just by looking at the concepts which are being in place already. Neos is there for you and not in your way.
Content Managers/Editors, who might be even the customers themselves, who will be able to keep the website up-to-date with ease. Normal tasks for a Content Manager can be designed to be simple but very powerful.
Why learn something new and different? If you want to be able to be fast while being able to produce awesome results, you either had to prepare a lot or in case of Neos, you profit from many years of experience and as a result, a CMS which is that good, that I might want call perfect already. It elegantly gives you everything you need and allows you to extend it when necessary.
If we compare it to other famous Content Management Systems…
Neos is probably a much better WordPress in question of flexibility and proper extensibility while allowing to create environments which are even simpler to use. I should add that I have always only looked at WordPress from the distance. I also don’t really know much about it’s development over the last couple of years. Still I mention WordPress because it often used in cases where everybody needs a good but simple to use setup allowing CMS functionalities. I think WordPress with all its progress from originally just being a easy to use Blogging-System, went to become a great tool for building full websites easily manageable.
While right now I sometimes have to work with AEM as a Content Manager, I got to say that it might be powerful but often way to slow, not only because of the constant page-reloads, but purely by it’s old and out of date design. Putting the content together is done quite good. Having to add a lot of repeating elements manually is a painful task once it reaches a bigger number of simple title-text-elements for example. AEM is powerful without a doubt, it’s probably one of the most advanced CMS out there. In best case scenario the developers create simple to configure components, based on all the specifications given by the designers. AEM owned by Adobe, is the solid foundation of many big Companies out there.
Neos has it’s early roots in the famous CMS, Typo3. Typo3 is one of the most advanced Open Source Solutions out there, mostly known here in Germany, for developing websites on a Enterprise standard. Like AEM, Typo3 gives you a huge toolset to work with. Features like we can see in AEM, with support for Editors and things like copy-paste functionalities, grid wrappings, content-collections, multiple languages, versioning, a Media Library and advanced individual solutions just to name a few are also present.
A powerful CMS in 2017 should handle those terms, I am talking about, with ease. Typo3 profits like WordPress, which is Open Source as well, from a huge Community, their support and a lot of Extensions and Plugins.
Before I will get to areas which show you how Neos looks like in more depths and all the things it allows us to do (including all the things mentioned in the comparison above), let us look at the different types of interest-groups again, but in more detail now:
The potential Interest-Groups again
Developers should be able to feel at home quite fast. There are Pages and there is Content. The first carries an URL. The later can be filled by simple components representing a certain area of the Layout. If you didn’t try out controlling the Backend but you know how a Frontend is build out of a Layout to a good level, you could give Neos a try to take control of the Backend as well. There is no need for PHP or SQL to make the Frontend controllable. You need good knowledge of Neos to set it up all the way, yourself. There are some crucial console commands you should know about and use. The definition of all the necessary components is done with small little files easily being setup in a component kind of way. The whole setup of your specific Site Package can be handled through a git repository since everything is defined in configuration-files. The next Videos gives you an idea of how modern Neos concepts are being used to handle Content Elements and its Teasers with Neos:
Designers are getting something awesome added to their Design Process once they understand the Design Concepts, Neos offers. Every step can be in the hand of a Web-Designer. Yes everything means you would actually be able to design parts of the Neos Backend and it’s control as well and you should aim to do so. A designer creates some kind of wireframe to be realized as a website, the Frontend Developer takes that wireframe and translates it into HTML, CSS and JavaScript. Now a Backend Developer could take all this and make parts of that structure dynamic (CMS). Neos allows to have the UX and the UI in mind, especially when having to solve more complex tasks with it.
Investors, well should plan to invent some kind of Agency around Neos and invest in the Developers to learn Neos. At the state we have got right now, you could basically come up with anything web-related and by just putting Neos into its core, be a step ahead to your competitors. Right now you could also Sponsor Neos to allow them to reach the Finish Line with their huge code-rewrite of the whole Backend in React. They aim to switch to improve the already great Backend by even better speed (especially when there are a lot of Content Elements), the modern component-structure and proper lowlevel Backend-extensibility by completely replacing Ember.js with React.
Agencies should start to talk about and play around with Neos and it’s possibilities for their setup. If they are more or less in the business of having to develop advanced websites fast, they might be way more interested in Neos than they could imagine. I would suggest to at least ask some CMS-Developers to have a deeper look at it. Even if they don’t usually work with PHP. To give probably a few of you out there who will understand this wild and out of the blue comparison, Neos is for PHP a little like Kivy is for Python. The neat abstraction-layer, Neos puts on top of PHP is mindblowing.
Creative Thinkers (in this case including to be a certain type of Creative Full Stack Web Developer) like myself, who enjoy to create elegant solutions for managing websites, it’s content, it’s users and all the areas around it, will find that Concepts like NodeTypes to define content elements in a yaml file, while being able to access that content from everywhere using Fusion in a jQuery like fashion, to be just awesome.
Neos is based on PHP, yes but it allows to be extremely powerful without ever having to touch one line of PHP or SQL while being a complete CMS. Neos even has got its own PHP Framework called Flow Framework, which bears some very modern concepts in programming inside of itself. Neos runs on top of Flow but gives you a beautiful abstraction-layer for most of the daily tasks. If you want get more verbose, Neos let’s you of cause create highly advanced applications with the Flow Framework itself.
Wait a second, PHP is not really necessary anymore? That’s a huge statement. To give you another comparison, Fusion is for PHP like React is for HTML. React takes HTML to a whole new level just with it’s way to use Components to name only one advantage of Virtual Dom like JavaScript Frameworks, like React is. If you work with AEM you know all those often hideous page-reloads, that already is not an issue in Neos anymore and it gives a huge speed improvement just with not having to reload the whole Backend including the growing Content anymore, not even to mention, when React runs the whole Neos Backend.
Instead of a Database, you define NodeTypes in a simple configuration-file (yaml) and by doing so you define a Content Tree, containing all kinds of individual pages, grids and elements. Including, if you want to, certain fine-grained restrictions of how they can be structured inside of each other. It’s an extremely powerful concept, done really well and therefore really easy.
Fusion allows you to access that tree in a jQuery-like fashion, Fusion and EEL are just awesome to work with. Being quite easy to understand as well, they are very Powerful. The Fusion Prototypes are plain awesome too.
Content Managers or Editors who have to take care of all the Content will love Neos for sure. It’s easy, even if you don’t know much about a computer.
Anybody could keep their content up-to-date with Neos. My first Website with different elements to edit and about 5 different page-types, I explained in quite some detail in ~50mins. With that Video, I would argue, anyb0dy could change any visible content on that website.
Since the frontend is made editable, you can always see how the text behaves, including the exact responsive behaviours of the Frontend.
Start exploring…
What else is there to say, visit their website, have a look at the growing number of Youtube-Videos, join the Forum or Slack, and start creating new amazing websites in no time with Neos. And of cause use the Neos Docs…
One of the biggest advantages Neos offers without a doubt, is its Content Management Backend. While an often seen approach nowadays is to completely decouple Front and Backend from each other like using Firebase for the data and React to access it, Neos aims to connect them through simple inline editing more directly. Of cause you could use Neos as a simple API too, there is even a solution for using GraphQL already, but in most cases you will be much faster to just allow your Content Editors to click on the Headline and edit it right there. This is a talk about 3rd party integration, including GraphQL in Neos:
I admit it took me some time to finally decide to just jump into the water and build my first website with Neos, by taking the steps to transform the Frontend into a Backend-Structure based on Neos, but as you can read, I am very happy about it. So happy that I write this article about Neos. There got to be much more people out there, who are waiting for Neos and to get inspired by it. I am very grateful for Neos being there and finally making CMS-Development something I can really enjoy again for a change.
Documentation and support are always really important when starting to learn something new, both are really good with Neos. Especially the Community is great and always up to help when running into difficulties. The Documentation on the other hand sometimes lacks a little bit of good detailed beginner-guides while also missing to help you with the more advanced topics you might be trying to solve. Over all it’s pretty good and there is everything you need, especially if you include the many awesome Github repositories, the Neos Forum and Slack into your learning phase.
Just to give you an idea of NodeTypes and Fusion as two of the earlier mentioned, awesome tools in Neos, I will finish with four short little code-examples as the complete three necessary files to handle a headline:
Code Examples
NodeTypes.yaml (part):
'webappcreations.Website:UeberUns':
superTypes:
'Neos.NodeTypes:Page': true
constraints:
nodeTypes:
'*': false
'Neos.NodeTypes:Page': false
'Neos.NodeTypes:Document': false
'Neos.Neos:Shortcut': false
'webappcreations.diessbacherbablDe:ProjectStorage': false
'webappcreations.diessbacherbablDe:ProjectDocument': false
childNodes:
main:
type: 'Neos.Neos:ContentCollection'
constraints:
nodeTypes:
'*': false
'webappcreations.diessbacherbablDe:Headline': true
'webappcreations.diessbacherbablDe:UeberUnsContent': true
ui:
label: 'Über Uns'
icon: 'icon-folder-open'This part of the NodeTypes.yaml shows the base-setup for the about Page. Using the “Neos.Nodetypes:Page” as its superType, the Page gets its own specific URL. Next I define all the constraints, basically not allowing any type of Page-children to be added to the About-Us-Page. For some reason the wildcard doesn’t really do its job here, that’s why I basically set all the general allowed Page-Types to “false”. This is different for the Content-Area, where only the standard main-Content-Collection is being used. There all available Content-NodeTypes are set to false with the wildcard and only two specific Types are allowed. We will look at the allowed Headline in more detail in the next code-snippets. The last part defines the icon and the name how the Page will show up in the Backend.
This is all you need to be able to add this type of Page to the Content-Repository of Neos. Including database-entries and everything around it. Next you can see how the Page was created already and is now selected, while you can see the window which show the only two allowed childNodes to be added to the About-Us-Page.
NodeTypes.Headline.yaml
‘webappcreations.Website:Headline’:
superTypes:
‘Neos.Neos:Content’: true
ui:
label: ‘Headline’
icon: icon-circle-o-notch
inspector:
groups:
Allgemein:
label: Headline
properties:
headline:
type: string
ui:
label: ‘Headline’
inlineEditable: true
aloha:
placeholder: ‘Headline’In this file the Content-NodeType with the superType “Neos.Neos:Content” is defined to be accessible in the Neos Backend. In short let’s look at the properties, there the Headline is defined as a string with a Label “Headline” and the same placeholder. The newest version as you can see in the Screenshot above, has the German Label: “Überschrift” instead of the English term. Just like that it’s possible to add new Headlines to the Page.
Headline.fusion
prototype(webappcreations.Website:Headline) < prototype(Neos.Neos:Content) {
headline = Neos.Fusion:Tag {
tagName = 'span'
content = ${q(node).property('headline')}
@process.contentElementEditable = ContentElementEditable {
property = 'headline'
}
}
}Since Neos does a lot for us, we can already switch to the next step and a pretty awesome Fusion-Snippet. Here we are actually not doing that much, but when the tasks get more complex Fusion allows many ways of how to work with the Content-NodeTypes. In new approaches like Atomic Fusion (see video above) you won’t even need this snippet anymore, but here we basically define with Fusion that the Headline can be edited in the Backend. All what is needed to access that Headline-Variable in the Template and Neos makes sure that in the Backend can now be comfortably “inline edited” as you could see in the Screenshots in the very beginning of this article.
Headline.html
{namespace neos=Neos\Neos\ViewHelpers}<div {attributes -> f:format.raw()}><div class="container" style="margin-top: 10px;">
<div class="row">
<header class="headerProjects">
<div class="eight columns">
<h1>{headline -> f:format.raw()}</h1>
</div>
</header>
</div>
</div>
</div>
This is the whole Template for the Headline and all what is needed to show the Headline in the Frontend and also to be editable in the Neos Backend. You could differentiate between Frontend and Backend here too, which is sometimes necessary if the content might be a little difficult to edit otherwise. You can see this in the last Screenshot, where the Frontend actually looks different to the Backend. While in Neos the Date&Text-Elements are being added below the image, they are being open in a small scrollable area on top of the image when accessing the Frontend only.
Final Words
I really hope you enjoyed this article and you are looking forward to look at Neos closer now. There is much to discover! The next step I could imagine, besides of working on the next Neos Project already, is for me to show you in detail, how I realized the diessbacher-babl.de website with Neos. Comment below if you are interested in something like this. And of cause share this article if you, feel like Neos is worth looking at too.
Thank you and see you soon :-)
Robin
If you want to get a deeper understanding of Fusion and some core concepts of Neos, have a look at this great Video: