The versions of React and JQuery in the default resource bundle of Plone are pretty old.... is there an add-on that updates them? Or are there other plans to update those components?
1 Like
There is no add-on for this and upgrading the core libraries is always painful in Plone core. It seems @thet worked on upgrading the JS stack. Maybe he can shed some light on this.
This is one reason why we started Volto. A pure ReactJS based frontend makes it a lot easier to keep up to date with the latest releases.
1 Like
I've read a little bit about Volto but I'll admit I need to learn more about it. Does it reproduce all of the features in Plone in React or is it only an API? Plone has a considerable amount of functionality built into it and doing things like allowing users to create forums, for example, would be difficult, though not impossible. I would love to hear that I'm wrong, though.
What about coexisting with the JS libraries in Plone now? It seems as if React and jQuery always get included in the JS of the page.... is there a way to stop that from happening?
plone.restapi is an API on top of Plone that provides almost the full Plone functionality through a REST API. Volto is a frontend that implements the core functionality of the Plone CMS. We are working on features like TTW creation of content types, form generation, etc.
There are for sure a few things missing. Though, what you get in exchange is way more in my opinion. One of the most complete and feature-rich web framework with more libraries and extensions than you can try out in a lifetime. A modern web development workflow and tools and techniques that you can use in every web project out there not just Plone. In Volto, we use standard technologies like React, LESS, Semantic UI, DraftJS, etc. There are tons of tutorials, instructions, videos, books, etc. at your fingertips.
When you used a modern framework like React, Angular, Vue, I promise that you will never look back.
The Plone bundling toolchain is horribly outdated and there is no way AFAIK you can get away without jQuery, Backbone, and React without breaking the complete JS or at least lose some core functionality.
We started to use React in the standard Plone core to replace Backbone. Though, that was kind of stopped when Nathan moved on to work with Guillotina.
Volto is a different approach that tries to re-implement the Plone frontend in pure React. No jQuery, no Python Page templates, no old cruft.
2 Likes
I agree that the JS libraries that Volto uses are closer to the standards we use today. I use React and LESS on a regular basis, and in fact, the big reason you see all the questions I've posted lately is an attempt to get Plone to work with our in-house frameworks that are written in React and Redux. The versions of the JS libraries we have simply cannot coexist with newer versions of the libraries that we use. That's why I asked about updating versions, switching over to Docker, compiling add-ons, etc... all of that is me trying one thing after another to get Plone to work with what we have. From that standpoint, Volto sounds like a great idea. I have concerns about committing to Volto unless there are some assurances.
Plone seems like a mature, well-developed product with a large userbase. It has a variety of features that our customers find desirable, so many that I'm not sure I can list them all. If most of the front-end functionality in Plone has been reproduced in Volto or Gastby, and it has a similar level of support, then that would raise our level of confidence. The last thing I want is to have to go through two different UI's, one for changes and the other to see them. For example, if we were to adopt Volto, does that mean that any time someone wanted to post a new wiki page, they'd have to go through the old UI to do it?
1 Like
There is a PLIP open to modernize React https://github.com/plone/Products.CMFPlone/issues/1485
But it is in state "stalled".
So if anyone want to pick it up? It would be an important work for current Plone.
Upgrading jquery would be great as well and could be integrated into the same plip.
Volto is still in the early adopters phase I guess and your concerns regarding two different frontends is valid. We have many clients with a large existing code base that we can't move to Volto yet. We use Volto for every new project and for every larger relaunch. Though, if we need to add features to standard Plone, we write a React view and register it as a regular browser view.
See for instance this standard Plone 5 site:
It comes with a Bootstrap 3-based Diazo-theme. Though, it uses a modern, React 16-based calender solution that integrates nicely into the old-school Plone UI:
This is our solution to integrate modern js libraries into Plone. Trying to upgrade the existing libraries is a painful and very hard problem. This is actually one of the features that made us choose React after doing Angular for more than 4 years. You can easily integrate it everywhere.
For small enhancement we do this. Every time we have to touch a mockup-pattern, we basically rewrite it from the scratch in React. This is less work for us than tinkering with mockup. Our team consists of devs that all have more than 10 years of experience in Plone core development. We significantly contributed to build Plone 5 (Barceloneta theme, resource registry, p.a.contenttypes, etc.) So we know the stack and stuff but tinkering with mockup and horribly outdated JS libraries sometimes even goes over our head.
To sum up our policy or my personal recommendation are:
New project -> give Volto a shot (if you already know React)
App or view within Plone -> register a browser view and deliver a modern React app
Mockup customization -> rewrite in React
I am happy to share more details if you are interested.
1 Like
I'm definitely interested if I can ditch these old crusty libraries. Let me ask some questions...
So would Volto handle rendering Markdown and RST? Would there be a TinyMCE component already available for editing that or would we need to write one ourselves?
Is there a component for requesting, and approving, publishing of articles on a wiki page? What about the News items feature?
Volto can technically store markdown and RST. The portal transform framework in Plone can transform any source format to HTML that Volto can display. The problem right now would be the editor component which currently can not handle Markdown and RST. Shouldn't be too hard to add this as feature.
Volto does not use TinyMCE. We build a new editor based on DraftJS, an editor framework by Facebook. You could include TinyMCE in Volto. Though, we needed a more flexible editor component for our page composition editor.
Volto implements the Plone workflow engine. So you can implement and use any workflow like in standard Plone. There is no Wiki-like functionality. My personal opinion is that the standard Plone content management is superior to Wikis. This is the reason why the Wiki functionality was already partially removed in Plone 5.
The News Item feature is fully implemented in Volto.
Forgive me, I'm slow... how would that work in Volto? Do I write a React component that calls the API to turn a file into HTML and then displays it on the page? That sounds like a lot of work...
Usually you wouldn't write a component that does that API call. Volto fetches all the information from the plone.restapi. Volto is a full-fledged CMS, there is no need to write custom components with lots of functionality. We use Semantic UI for theming, so you can just override any component by dropping it into a folder. It is like in the good old days of Plone when things were simple. 
The idea is really that you customize Volto, not rewrite things from the scratch.
Is there a tutorial somewhere? The training in the Plone training docs mostly explains how to write a React app, and doesn't use any of the components, at least not that I found. I understand React well enough, but a list of components and their function would be very, very helpful.
If you are familiar with webpack, there’s a project that gives you full control of all Plone frontend resources by building a custom theme with webpack. It defaults to standard Plone 5 theme with built-in versions, but webpack module aliases allows to override them with whatever versions you require. It also allows to hide jquery from being globally available.
1 Like
Wow, if this does what I think it does, that's huge! Thank you so much!
(But I'd still like to try out Volto, so if there's a listing of what components are available and how they work, I'd really like to read it)
@tisto Would you happen to have any documentation on what the components in Volto are? There must be a ton of them...
Hi @LeaderOne . We do have Volto component documentation, but not deployed yet, may be it's one of the topics to look onto in next sprints.
1 Like
Sorry to revive this thread, BUT...
For those of us who cannot use React and Volto because of old or pre-existing projects, how can we upgrade jQuery and requireJS in our Plone 5 packages..?
I think Volto and React are awesome, but for those of us who cannot migrate older projects for obvious reasons, how can we handle this with as little overhead as possible..?
I'm currently working on https://github.com/collective/plonetheme.tokyo which aims to bring Plone 5.x to the latest Bootstrap 4.3, and there has been some really good progress. However, there are cases where jQuery and requireJS need to be upgraded, and in this case, how can I do that.
I see that the bundles are merged into a default.js, is there a way I can disable this all together, add jQuery and requireJS manually and then let the https://github.com/plone/Products.CMFPlone/blob/master/Products/CMFPlone/resources/browser/scripts.pt handle the configuration..?
1 Like
@Netroxen - it would be great if someone updates the dependencies!
Basically it's updating the package.json resources here:
and making sure, mockup tests are passing (see: https://github.com/plone/mockup/blob/master/README.rst )
If all is fine you finally have to update the resources and compile the bundles for plone.staticresources. See:
eventually: https://github.com/plone/plone.staticresources/blob/master/src/plone/staticresources/_scripts/compile_resources.py
1 Like
Just a note, the above plone.staticresources documentation is for Plone 5.2+. It has been recently written and welcomes feedback about gaps and unclear parts.
For Plone 5.0.x and 5.1.x the procedure is the same with the difference files are generated inside src/Products.CMFPlone/ (instead of src/plone.staticresources/).