GSoC 2018 Ideas: ReactJS

[tisto]

Here is a list of possible topics for GSoC 2018 with ReactJS.

Turn plone-react into a Progressive Web App (PWA)

• There was a very successful GSoC project last year to build a PWA on top of plone.restapi and Angular SDK: https://github.com/collective/collective.experimental_angular_pwa
• Repo: https://github.com/plone/plone-react
• First task: Familiarize yourself with plone-react (checkout and build the project) and create a list of possible PWA features
• LEVEL: mid

Enhance plone-react

• There are lots of possible tasks listed here: https://github.com/plone/plone-react/issues
• Student would need to come up with a list of enhancements for GSoC
• LEVEL: mid (previous JavaScript / ReactJS skills would be helpful)

Creat Storybook for plone-react

• Componentization of default components - create a Storybook
• we don’t want to re-create a semantic UI storybook
• LEVEL: easy

Documentation for plone-react

• This is not a full GSoC task
• Could be combined with other tasks (e.g. create-react-app functionality, plone-react enhancements)

PloneFormGen in React

• Write a form builder in plone-react, like PloneFormGen or collective.easyform
• First Task: Familiarize yourself with PloneFormGen and collective.easyform functionality and forms in React
• LEVEL: mid (JavaScript, ReactJS skills)

Implement Pastanaga Editor

• We started to implement a new editor in plone-react with DraftJS. Though, there are still lots of features missing.
• Repo: https://github.com/plone/plone-react
• First task: Familiarize yourself with the Pastanaga Editor proposal
• LEVEL: mid/hard (student should have good JavaScript / ReactJS skills)

Implement create-react app like functionality

• create-react-app (https://github.com/facebookincubator/create-react-app) from Facebook allows to create a React app quickly without the need to get a deep understanding of more complex parts (e.g. Webpack). It also allows to “eject” the project at some point to customize the more complex parts if necessary. It would be great if we could build something similar for plone-react.
• Repo: https://github.com/plone/plone-react
• First task: Familiarize yourself with the eject feature of create-react-app
• LEVEL: hard (student should have good knowledge of Webpack, yarn, npm, JavaScript)

Collaborative editing in plone-react

• Support collaborative editing via XMPP in plone.react, server backend could be Node/Python
• LEVEL: hard (student needs in-depth knowledge of XMPP and underlying concepts as well as JavaScript/React skills)

[tisto]

One thing I forgot to mention: Rob Gietema, Victor Fernandez de Alba and me would be available as mentors for React-related GSoC projects.

[thet]

Maybe also a possible topic:

• Implement recurrence widget as React component (our current one looks and feels quite broken)

That one maybe among implementing other Mockup patterns as reusable React components.

[tisto]

@thet good idea! That’s something we also discussed. Our plan is to develop all components in plone-react and then find a way to make them re-usable in Plone itself. Bottom line is that developing React components in Plone itself kind of sucks because you are missing all the bells and whistles (Hot Module Reloading, Webpack, etc.) of modern JS development.

For collective.solr we tried to develop the React-based search view in c.solr itself and that did not really work out well.

Therefore I’d suggest that implementing the recurrence widget should have two parts:

1. Implement recurrence widget in plone-react
2. Make the component reusable
3. Use the component in Plone 5.x

[ajayns]

Hey!

I’ve been picking up React and working on it after checking out the idea for implementing ‘Big Green Button’ with GatsbyJS. This idea also seems pretty interesting to work on! I’d love to get started in checking out and contributing.

Is plone-react (https://github.com/plone/plone-react) the right place to get started?

[itsrishabh011]

Hello sir I am Rishabh. I am a newbie and I want to learn and contribute.
Thanks.

[ajayns]

The plone-react repo seems to have issues installing while using the commands found in readme.md

That is the installation error, and then this is what happens when I run yarn dev

@tisto Can you please help me out here?

[tisto]

Please create an issue on the plone-react repo and make sure you include a full error trace (no screenshots please).

[pigeonflight]

Hi @itsrishabh011,
Which of the tasks in this thread are you interested in?

[ajayns]

Hey! For the implementing Pastanaga Editor idea, what repos should I focus on other than plone-react ? Where can I find documentation and code for getting to know what Pastanaga is and how it works?

[pigeonflight]

I’m seeing similar issues with PhantomJS.

running this command was the workaround for me, but there are other issues

TMPDIR=/tmp yarn install

[ajayns]

An issue has been opened in the github repo and right now the plan is to remove phantomjs

[tisto]

@cewing here is the proposal for the PWA:

Plone as a Progressive Web App
==============================

(HTML, CSS, JavaScript, ReactJS)

Summary
-------

Progressive Web App (PWA) are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications.
We would like to enhance plone-react with Progressive Web App features.
plone-react is a ReactJS-based front-end for Plone that works with plone.restapi.

Implementation
--------------

The objective is to enhance plone-react (https://github.com/plone/plone-react) with PWA features, such as:

- Manifest (add to home screen, splash screen layout, etc.)
- Service Workers (for faster loading, caching, offline functionality)
- Application Shell Architecture (app-like loading times)

Lighthouse (https://developers.google.com/web/tools/lighthouse/) should be used to test compliance with basic PWA features.

There was a very successful GSoC project last year to build a PWA on top of plone.restapi and Angular SDK (https://github.com/collective/collective.experimental_angular_pwa) which can act as an example.

Skills
------

JavaScript, HTML and CSS development knowledge is mandatory. Knowledge of ReactJS is recommended.

Mentors
-------

Timo Stollenwerk, Rob Gietema, Victor Fernande de Alba

Aims
----

A pull request for plone-react, and idealy a new plone-react release that includes the PWA features.

[tulikavijay]

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

[tulikavijay]

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?

[tisto]

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.

[ajayns]

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?

[nileshgulia1]

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

[tisto]

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.

[zopyx]

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.

-aj