Skip to content

Conversion to ReactJS

Jump to bottom
Rémy Greinhofer edited this page Oct 19, 2018 · 33 revisions

This page is used to help us research how to best convert our web application from Polymer to ReactJS. The goal is to have a parity match, but also to push it to the next level by improving where we previously failed.

General recommendations

  • Use ES Classes
  • Manage types with PropType
  • Manage state with Redux

Scaffolding

We need a tool to help us quickly setup our projects. We want to ensure we can create PWAs and when applicable building them as static websites. React Starter Project lists A LOT of options.

Requirements:

  • Create a PWA(PRPL pattern, Service worker, Shell app)
  • Router
  • State management (Redux)
  • Webpack
    • Dev/prod environment
    • Pre-configured tests

Contenders:

Lighthouse audits

Name Perf PWA A11Y Best Pract. SEO Avg Avg (no perf)
react-pwa 70 23 100 93 100 77 79
create-react-app (2.0) 100 50 79 93 80 80 75
nextjs 59 46 (62) 80 87 78 70 73 (77 w/ sw)
nextjs w/ sw-precache 96 62 65 93 56 74 69
react-static emotion 0 15 86 93 80 68 68
react boiler-plate 1 19 72 93 90 55 55

react-pwa does everything well, except PWA... 😕

create-react-app performs pretty well, but lacks a lot of functionalities an tends to lag behind with time as they aim for barebone react and stability.

So the next contender in line is nextjs. It scores pretty high, especially if we add the service worker. As a result, we are going to start with it and add the functionalities we need to reach a score >95 in each categories. The "Building a Progressive Web App with Next.js" tutorial part 1 part 2 provides good information to help us achieve our goal.

Action items:

  • Find a way to save the changes and be able to port them to any new application we would start with next.js.

Styling

To manage CSS in react, it was recommend to use plain CSS. However some other options are available:

  • Emotion which allows to do CSS-in-JS which is very React-like

Documentation

General

  • Docsify is a very cool tool to generate documentation from Markdown without even a building step!

Components

  • Storybook Seems to be a very popular alternative to Styleguidist.
    • It even comes with a nice website to learn it!

Testing

  • Jest seems to be the preferred testing framework for React.
  • Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.

Coverage

  • Jest has embedded support for coverage

Component Libraries

We want to use component libraries using css-in-js for our own components. It would be nice to have a component library using the same technology (but not required).

Our main component libraries will be:

List of components that we need to (re)create (or find an alternative for):

  • Header
  • Footer
  • Localizer - The map with the marker return a location used to populate the list of nearby businesses.
  • Nearby businesses list
  • Email templatizer
  • Email preview

CI tasks:

Projects must implement the following CI tasks

Resources

Discarded technologies

Styling

  • PostCSS+CSSNext which allows to use future CSS syntax and so much more!

Documentation

Components

  • Styleguidist provides a great way to create a living style guide as well as documenting components

Testing

Coverage

Clone this wiki locally