NGP8 - Replacing Webflow as frontend framework

Proposed by: JD Bothma

Date: 2022-04-21

Status: Spike probable solution

Context

Using webflow as the frontend framework makes concurrent frontend development error-prone and requires complicated synchronisation between team members to plan changes. It also often requires multiple round-trips between Matt making changes in Webflow, frontend devs trying to use those changes, Matt then having to make tweaks, until it is done. Each change requires a webflow export, sharing a big zip file, requiring an import which may bring surprise changes in the diff introduced by webflow, adding cognitive load to the code review.

The plan thus far has been to introduce React for the next interactive component we need to modify or introduce.

We have added a small non-interactive component successfully using custom Javascript creating requisite markup, and custom CSS in a project-specific CSS bundle.

We are now looking at introducing a frontend framework, or the frontend libraries, needed to eventually be completely free from Webflow in our frontend dev process.

Current components

(n) means there can be multiple instances

Page header
- Logo
- Search box
- Tutorial button
Panels (on the left)
- Rich Data View
  - Point data summary
    Total point and profile (point) collection count
    Download all button
    Show services button
    Point theme card (n)
    Profile (point) collection item (n)
  - Category (n)
    Subcategory (n)
    Indicator (n)
    Filters Section
    Chart
    Description
    Source
    Table
- Point Mapper
  - Point theme (n)
    Enable-all toggle-switch
    Profile (point) collection button (n)
- Data Mapper
  - Category (n)
    Subcategory (n)
    Subindicator (n)
Map
- Map Download button
"Map Chip" (Non-modal fixed dialogue for data mapper controls)
"Point filters dialogue"
Breadcrumbs / Profile highlights container
Feedback button

Upcoming components

Libraries and tech to consider

Web components
https://polymer-library.polymer-project.org/3.0/docs/devguide/feature-overview
- Maintenance mode, referring to Lit.
- https://github.com/PolymerElements is a github org of component repos
https://lit.dev/
https://semantic-ui.com/
https://material.io/components?platform=web
https://github.com/material-components/material-web
- IMPORTANT: Material Web is a work in progress and subject to major changes until 1.0 release.

Spike

Try the MUI react material UI component library
Try the Semantic UI component library with React integration
Implement the search/select-one component and style accordingly
Implement the filter-reset snackbar
Do either of them risk breaking styling of existing parts?
Does it look like both approaches to styling scale nicely - Is consistent styling convenient enough with both options as we eventually replace all components on the site?

Resolution

Interactive/reactive markup library: React
Component library: To be determined - see spike above
Styling/CSS: To be determined - see spike above
State management: custom event system and controller until enough of UI is react that changing to something standard is easier than maintaining the custom approach
Framework: Nothing more than what we have for now. Revisit things like next.js but for SPAs when most of the webflow dependency is gone