WIP [RFC] - Moving to React

[djbusstop]

Work In Progress

This is a proposed overview of the project undertaking to move the current project over to React. It also includes higher level discussion about a generic react map template, that would be built with configurability in mind. This template could then be forked and customised to match the app as it exists.

Template

The "map app template" would be started with a create-react-app bootstrapped project, with mostly default settings. On top of this, we would implement a very basic map application that has:

• Map component
• Sidebar component
• Popup component (shows when clicking on map items)
• Internationalisation

Configurability

Proposed architecture decisions to facilitate configuration would be:

• All CSS would be moved to a static, style.css file imported by the static index.html file. This way, other projects can change any style without having to worry about build systems. It could use CSS variables, to replace the current use of SASS variables.
• We already have a config for the layers styles and what properties they pass to the popup. This would be extended to include the data source, as well made more straightforward.
• The color gradient and possibly breakpoints for cloropleths can be configured for a certain property on a certain layer item. This would allow the config of the gradient maps to be changed without much programming knowledge.
• A legend automatically generates in the sidebar based on the configured layers.
• The text can all be configured with i18n.
• The layout and content of the sidebar can be overridden with markdown(?)
• The basemap can be configured in a generic config file

Instructions on how to implement changes would exist in the README.

Downsides

• We may need to maintain versions, and tag our releases. This would be to make sure that other projects, if they choose to merge this template in to their project again in the future to use new features. It would be a bit of work.
• This would also mean that if a community partner requests a change, we would try to consider if it should be a change for the template or a change for the specific project. Sometimes, it would be good to implement ideas in to the template, if they will help other projects. However, this could be difficult for those projects to merge back in to their project. Ideally we don't fracture however it's a bit inevitable. We would have to do work maintaining this project though.

Development Phases

Phase 1: Planning

Collect the requirements and try to plan as best we can for how to get the template to v1.0.0. For example, bouncing ideas off one another of what can be configured and how.

Phase 2: Architect Template

Implement the big picture decisions regarding project architecture and configuration. This would likely be easiest with one developer.

Phase 3: Build

We can split the work of this phase among multiple devs. We would also need to connect the interactions of the components, so that a click on the map, triggers the popup, for example. We need to:

• Build the system (probably context API) that allows the queried map data to be accessed by the map and popup components
• Build the Map component
• Build the Popup component
• Build the Sidebar component
  • Self generating legend
• Implement the default styles

Phase 4: Version and Release

Phase 5: Fork and Customise

Then we could fork that project, and apply the config that would make it the same as the Covid-19 we have now.

Phase 6: Deploy

Questions:

• Do all projects get data from the same sources? What are some plausible data sources?
• What other things need to be configurable?

[timhitchins]

@djbusstop Thanks for getting this started-- It is very exciting!

I think you laid out the template, configurability and downsides well. Some questions about configurability:

• You mention switching to CSS / CSS variables. If we are already going to be using CRA, is this totally necessary? Just trying to understand the logic here.
• I really like the idea of an auto-generated legend that can be added to the key. Might be good to have other placement options.
• Regarding the basemap and layer config, I assume we will continue using leaflet.js?

Regarding the Development Phases:

• Perhaps we can dedicate the next meeting to planning and then one of us can architect the template?
• I imagine we can use the project board with milestones to breakdown the build phase.

Regarding questions:

• Right now all our data sources are geojson and raster tiles. It would be nice to be able to include WMS which leaflet has built-in functionality.
• I think it might be nice to have built-in themes where folks could just pick a light or dark theme (or something else).