In order to innovate and improve the Neos user interface further, we needed a new foundation. Thus, a little more than one year ago, the Neos Team took the decision to rewrite the user interface based on React; focussing on extensibility, stability and a robust basis for further features.
At Neos Conference 2017 in Hamburg, we announced the release of the Neos React UI Beta 1. This is the first version widely available to users; so you can try out the new UI, give feedback, and help us improve it. We invite you to watch the release presentation for a full overview, or read on below:
Features of the New UI
While we have been mainly focussing on recreating the existing user interface, there are important changes under the hood:
- Most basic features are in place, like navigate component, content editing, the inspector, edit/preview modes, image editing, content constraints and workspace support.
- The content area is loaded in an iFrame now, which means there are no unplanned CSS or JavaScript interactions between the website and the Neos UI anymore. CSS Media Queries will just work properly.
- We switched to CKEditor for content editing, providing a more stable basis, with greatly improved support for e.g. copy/pasting content from word or other websites. Keyboard shortcuts for basic editing operations (bold/italic/...) are supported now, and it is now possible to add custom styles and classes to the inline editor.
- The UI is a lot faster during initial load compared with the old one.
- The system is extensible from the ground up - both planned and unplanned extensibility are possible. As an example, it's easy to integrate already-existing React components into the inspector.
Furthermore, there are some parts where the UI provides features the old UI doesn't:
- Revamped "create node" dialog, with the ability to select insertion positions and enter required field values.
- Responsive preview modes, showcasing how the website looks e.g. on mobile.
Currently Missing Features
We are not yet on full feature parity with the old UI yet. The following features are still missing:
- reference and references editor
- file upload and assets editor
- links to assets and external URLs
- node tree searching and filtering
- select editor data sources
- target workspace selector
We're working hard on implementing the missing features, and will ship updated beta versions on a regular basis.
Installing the Neos React UI Beta 1
The Neos React UI is compatible with Neos 3.0 and newer. We ship the new UI as a composer package which you can install alongside the old UI with the following command:
composer require neos/neos-ui '1.0.*@beta' neos/neos-ui-compiled '1.0.*@beta'
After you have installed the package, go to http://your-installed-neos/neos! to visit the new UI - note that there is an exclamation mark (!) appended to "neos".
The old UI will continue functioning as usual.
Please try out the new UI on your websites, and let us know if you encounter errors or broken behavior. You can reach us on slack in #project-ui-rewrite, on GitHub, or all other communication channels (like discuss).
The Road to Final
We'll be doing regular beta releases for the community to test the new UI. Aside from that, the plan is as follows, in sync with our release schedule:
- In Neos 3.1, the old UI is the default one, and the new UI is in beta (current state).
- Most likely in Neos 3.2 or 3.3 (depending on how quickly we get the missing features implemented and depending on user feedback), we plan to deprecate the old UI and make the new UI the default for new projects.
- Neos 3.3 LTS (to be released in December 2017) will still include the old UI, so it's supported by the team until December 2020.
- in Neos 4.0, we'll completely remove the old UI, and the new UI will be the only one existing by then.
The whole process is depending a lot on your feedback and how quickly we can implement the missing features. If you know React (or want to learn it) and want to work on an big, but well-structured codebase, you are welcome to join the effort and help us with the React UI. All information on how to get started developing can be found on github or you can watch a video introduction to the codebase.
Thanks!
This project has so far been realized as a purely volunteer effort; It would not have been possible without the main contributors who have spent a lot of their free time over the last year for the project:
- Wilhelm Behncke
- Tyll Weiß
- Dmitri Pisarev
- Sebastian Kurfürst
Additionally, we'd like to thank all contributors from the community who helped with further pull requests:
- Max Strübing
- Philipp Bucher
- Christopher Hlubek
- Bastian Heist
- Markus Goldbeck
- Samuel Hauser
- Michael Berhorst
- Christian Mueller
- Manuel Lehner
- Samuel Ryzycki
- Florian Heinze
- Christoph Dähne
- Aske Ertmann
- Dominique Feyer
- Gerhard Boden
- Sebastian Helzle
Thanks for reading!