GSoC 2018 Ideas: ReactJS

I have been following PWAs for a while and This seems like a really awesome project idea!

After trying to install plone-react on my system multiple times i realised that its really big and takes up a lot of space (around 2GB) with node modules, a lot of which aren't even needed. Shouldn't we do something about this?

The size of the node_modules directory is not important. Though, 2 GB sounds too much. What is important is the size of the production bundle, because it has implications for the loading and JS execution time.

We are currently using plone-react in production in a project and we are monitoring the bundle size and loading times on a continuous basis.Therefore I don't think there is much we need to do right now.

After repeated tries, multiple fixes attempted as per our discussion in the github issue tracker for plone-react I can't seem to get it up and running. @tulikavijay is also facing similar issues in getting it setup locally.

With the discussion in github, I was able to get over the yarn install errors, and then errors during installation of backend. But when running yarn dev I still seem to getting this message on my browser's localhost:

Something went wrong: Invalid token specified: Cannot read property 'replace' of undefined

Any ideas on how to move forward with this?

I am also facing the same errors , looks like some packages versioning problem is there.

I am afraid plone-react is currently not in a working state. We forked the repo three months ago and the entire plone-react team is currently working on that private fork. We plan to do a sprint next month to merge our work upstream to be ready for the GSoC.

1 Like

Sorry for jumping into this thread but I am currently experimenting a lot on the frontend side (although I deny being a frontend guy).

How approachable is React in this context for n00bs, for average developers without special React skills (let's say persons with an average HTML, Javascript, jQuery background)? How steep is the learning curve?

Only speaking for myself, I found frameworks like React and Angular too verbose, too complex and unapproachable. Compared to that I have made friendship with VueJS which is easy approachable, easy to understand and does not introduce and extra complexity. My fear is that React related functionality can only be implemented by skilled developers, adding another gap between the "average" integrator or company internal developer and the Plone eco-system.


This topic is about GSoC and I don't think a framework discussion fits in here. Though, I will add my 2c here and focus on why I think React is the best choice that we have right now:

React is very approachable in my opinion. You can learn the React basics within a few hours. It has, by far, the highest satisfaction rate of all JS frameworks ( I very much disliked JSX at first but I think React got the separation of concerns right (separate by components, not by technology). Vue still tries to separate by technology, same is true for Angular.

We did large projects in Angular 1, Angular 2, and React. Choosing the right framework is no trivial decision and in my experience, the only way to judge a framework is by using it in a real-world project over a longer period of time. Both Angular 2 and React solved their use cases well for us.

If Plone is a CMS for public-facing websites, server-side rendering is a necessity (for speed and SEO). We had some troubles with Angular 2 and server-side rendering. We tried very hard for more than one year and failed.

So personally I would not recommend Angular for public website projects (for intranets it is a very good choice though). I have no idea how mature SSR is in Vue, but I have my doubts they solved a problem that Angular is still struggling so hard with.

Angular has the fantastic SDK by Eric though, so that's also a big plus if you do intranet projects.

Vue is still new and the React / Angular ecosystem is still a lot bigger I think. Technologies like React Native are becoming more and more important (not sure if Vue has something similar). Tooling and stability are also very important (React 16 was rewritten from the scratch without any major upgrade problems, Angular had breaking changes within the RC).

React is also very close to ES 6 standards, so it is easier to switch between different frameworks.

To be honest, I don't really want to spend too much time and energy on discussions. In Open Source doing things matters, talk is always cheap.

We (at kitconcept) heavily invested into plone-react in the last months in a client project and we plan to continue to push this further. We will host a sprint soon to push our work upstream.

Working with the Pastanaga UI and plone-react (with SSR) is fantastic. This is the CMS user experience I always dreamed about. We are not where I want us to be though.

I encourage everybody to try out as many new frameworks as possible. It is awesome that we have Angular 2, React, and Vue options for plone.restapi. The frameworks are getting closer to each other, so it becomes easier to switch.

Vue is the hot thing in 2018, so I understand why people are going in that direction. It is also not dominated by a large corporation, which makes it stand out.

Though, I don't think it matches React with maturity, stability, and ecosystem yet. I think plone-react + Pastanaga UI are our future and this combination should become Plone 6.

Another major Plone release without a modern JS front-end framework does not make any sense IMHO and plone-react is by far the most advanced option we have.

We will continue to push for plone-react and I hope we can convince the Plone community at some point that this is the way to go. Until then, competition and collaboration is what makes Open Source projects thrive. :slight_smile:


Hey @tisto, Where can i find pastanga ui in action, I 'am working on create-reat-app implementation on plone-react ,It"ll be good for me if i get a feel of the theme so that it can be used as a boilerplate of our new app generator . Another thing, when will work on plone-react resume?

@tisto having not seen it, or seen its design rationale, is it possible to get more info on why its so good? Like its best differences from the current UX for end users?
How does it affect the plugin/integrator story? For example existing plugins with custom control panels, custom forms/views etc?
One thing that has always been a saviour with plone and diazo is that if there is something in a plugins UI I can use diazo to hide it or change it for a particular customer. With the folder contents this is far more complex as its JS only. Whats the customisation story going to be for this UI?
Also is the idea that not editing functions such as search pages, content type views would be untouched or does this necessitate relearning how to customise all this too? Are we being forced into JS only world? Your comments about server-side react seem to indicate that is the case.

We have the Pastanaga implementation and the latest plone-react code in a private repository. We plan to do a sprint in early March to push everything we have upstream (to be ready for the GSoC). Unfortunately we can not share our work right now because it contains customer-specific code.


@djay working with Pastanaga UI is great because of two things:

  1. The modern and simplified UI allows you to focus on your content (also the context-sensitive toolbar is great)
  2. The speed of plone-react with SSR (you get the responsiveness of a single page app together with the first page load times of a traditional SSR rendered page)

Those two things together build the foundation for a great user experience IMHO. The new editor exists as a PoC and we already got positive feedback from the client. Though when it comes to the editor, we are not where I want us to be and we will need to put considerable efforts into it (we already planned 2-3 sprints this year for this).

Please bear with us until we are able to share what we worked on in the last months. I'd love to get feedback. Though right now we are still in active development and we have to focus on finishing our customer project first.

1 Like

I have tried to implement a basic app generator out of Create-react-app. It talks to plone.restapi and sends a GET request. Right now the app just replaces the CRA's templates files with our own and adds additional packages without ejecting the initial configuration. I am struggling with when to use eject feature of CRA and when not to use it. Can anyone help me clearing the doubt please?

@tisto I have been learning about PWA through google's udacity program program. I feel like i have good hold over service workers's lifecycles. The features i think we can add to plone.react as a PWA:

  1. A simple - welcome to plone page, when offline.
  2. Something like a Toast to indicate offline connection.
  3. Features like Login-logout, Navigation, Searching,etc.
  4. Other features like Showing a simple webpage when encountered with 404 error.

That sounds good @tulikavijay

But if you dig a bit deeper into PWAs, a lot more can be achieved! For instance an app shell with offline caching with service workers allows you use most of the app while offline, more than just simple plone page or a 404 page. Manifest, icon assets, a loader, all together can improve the UX as a progressive web application, in native devices.
Lighthouse is a great tool which is in-built in Chrome for testing PWAs and this can be used to check on where all the app can be improved.


PWA seems very promising and interesting! I am working on these things rn, we could discuss this more . :slight_smile:

Yes @tulikavijay ,@ajayns PWA's are the future. I am also doing that udacity course from google and it's great way of diving into PWA's. Are you also in udacity program @ajayns?

1 Like

Actually no, I've been working on Angular in the last year, and so had gotten into PWAs then. Worked on implementing a few and so on. This course sounds interesting though, can you link it to me?

I had a look at plone-react and have set up the local dev environment on my system. I am familiar with PWAs on a moderate level now and digging deeper into it. I am also following Udacity's Mobile Web Specialist course(which I got as a Google Developer Scholarship). Apart from that, React has been my main framework for the front end. Really excited to pull out some ideas after digging into plone-react for a couple of days from now. Happy to contribute to the Plone community :smile:

1 Like