GSoC 2018 Ideas: ReactJS

,
22

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 (https://stateofjs.com/2017/front-end/results/). 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:

5 Likes
23

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?

24

@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.

25

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.

2 Likes
26

@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
27

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?
POC:https://github.com/nileshgulia1/App-generator-CRA

28

@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.
29

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.

2 Likes
30

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

31

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
32

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?

33
34

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
35

Your local dev env is running and stable? @rbhatia46

36

Hi I am Divy .I want to work on react related projects in Plone .
I am trying to make a site using Plone after setting it on my local system.But at the time after clicking on "Make Plone site",it is continuously loading.

Screenshot from 2018-03-01 03-21-28
Screenshot from 2018-03-01 03-21-28.png1366×768 57.9 KB
Please help!

37

What do you see on your console?

38

Its blank.

39

@pigeonflight please look into this.

Screenshot from 2018-03-01 16-48-46
Screenshot from 2018-03-01 16-48-46.png1366×768 76.7 KB

40

For any student who is interested to work on the create-react-app functionality for plone-react: We had a discussion about it and drafted an initial solution. We plan to do a hangout tomorrow to discuss this with any student who is interested in that particular topic. See also: