Neos React UI 1.0.0 Beta 3 released

This release features reference and references editor, inline links and improved performance of content editor initialization – and is compatible with Neos 3.0, 3.1 and master.

– Written by

We're happy to announce the release of the Neos React UI 1.0.0 beta 3, the first release after the initial beta which was released at Neos Conference 2017. In the meantime, our friendly ghosts have pushed 123 commits to stabilize the codebase, improve the user experience and implement missing features. Read on for the main features.

Compatibility with Neos 3.0 and 3.1

While beta1 only worked with Neos 3.0, but not 3.1 or master, the current release works with all of these versions. We strive to provide Neos 3.0 compatibility for as long as possible if we can easily do it, to enable more people to test the new UI.

Rewritten CKEditor Initialization

Wilhelm has re-written the way the inline editor is initialized in the guest frame, leading to large performance improvements especially when having lots of content elements on a page. We tested it in one particular page with 500 editables; where initialization times were reduced from about 25 seconds (in both the new and the old UI) to less than 3 seconds. We are now using requestIdleCallback to initialize the editables as fast as possible, but only when the user is not interacting with them.

We are looking forward to getting your feedback – let us know about your experiences, especially if you have sites with lots of editables!

References and Link Editor, Inline Links

In beta1, we shipped with a partial implementation of the reference and select editors; but soon after the beta was released we discovered that our concept did not work out when building more advanced editors like the references editor. We have completely re-thought the way AJAX search requests (for autocomplete forms etc) are handled in the UI, providing a stable foundation for our use cases. Now, we're caching the results of the requests in a client-side LRU cache, which means that we send as little AJAX requests as possible to the server when loading autocompletes or initializing reference editors, leading to a speed improvement in some cases.

Based on this, we implemented the missing References and Link editors, and are now also supporting external links (both inline and in the link editor).

Frontend Extensibility is usable now

In Beta1, we shipped a rough concept of how you can create custom editors, customize CKeditor or alter the UI in unforeseen ways. However, to make your code compile, you needed to go through some hoops (npm link anyone?).

Now, we have started to publish the @neos-project/neos-ui-extensibility package on NPM – which contains all the tools you need to get started. We don't have documentation yet, but you can check the Neos.Neos.Ui.ExtensibilityExamples package for some updated examples. Basically, a package.json as simple as this will get you started!

Other changes under the hood

Besides these main changes, we have done various other smaller bugfixes and improvements – and in particular our new Neos team member Max has been working on updating all our foreign dependencies to up to date versions. This is a not-so-rewarding but nevertheless extremely important task; ensuring we can benefit from the latest developments and bugfixes of our upstream libraries. So thanks for doing this!

Furthermore, I have tried to structure the open tasks needed for 1.0.0 final and embrace some lightweight project management; so there is now one master issue on GitHub explaining our current open TODOs, with links to all the other tasks.

Installing the Neos React UI Beta 3

The Neos React UI is compatible with Neos 3.0, 3.1 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'

You might need to run composer update neos/neos-ui neos/neos-ui-compiled to get the latest changes if you upgrade from previous versions.

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 will 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.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 a 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.

PS: You might wonder where beta2 is, as the previously announced beta release was beta1: In fact, we released both beta2 and beta3 today; beta2 was still missing the extensibility bugfixes; so that's why we released beta3 directly after fixing this.