v1.0 rewrite [WIP] / not yet started #15
Description
Writing this app has been a lesson in how quickly a Backbone / MVC app can race out of control and become hard to maintain. v1.0 will be a re-write using React and Flux. By building each part of Mapfilter as an individual component with clearly defined specifications it is much easier for others to contribute without breaking other parts of the app, and it means that we can re-use different components to mix-and-match our own custom builds of Mapfilter for different use cases and integration with a broader "monitoring platform" according to local community / partner needs.
The shortlist I have for a framework for flux architecture:
- Facebook flux which is not really a framework, but an idea for architecture.
- Flummox
- Alt
- Minimal-Flux
- Reflux
A lot of these I think use too much "magic"- especially reflux - and whilst that can minimize typing, it is another thing to learn. Tom MacWright from Mapbox in this talk (terrible quality) explains why they are using just vanilla Flux from Facebook.
For me minimal flux seems the best option right now. It provides some minimal helpers around the core flux ideas, and the source is simple to understand and it is minimal enough that we do not need to become dependent on the framework moving forwards.
There are some helpful React components already built:
- React-Leaflet
- Fixed Data Table which can create fast scrolling lists and image grids (I had previously created this image grid in D3, but this version uses the same concepts but is way more developed)
For filtering I think we should keep using crossfilter because it is still faster than anything else.
We need a way to pass filter definitions through the app. Because of the one-way data flow the filter component (the UI for building the filter) needs to pass the filter query through the dispatcher to crossfilter. Feature-Filter is a simple way of defining features and should meet our needs. I'm not sure if we should follow their approach of building a string and eval'ing, or build a mini language interpreter.
For the UI I have created some mockups in #14 using Google's material UI principles. Without a UX designer on the team right now I think this is the easiest way of us getting some way towards a good UI. We can use material ui which is a collection of material design components implemented in React.
The rough architecture will be, which each being its own self-contained compent:
- Views - which just render the list of data they are passed:
- Map View (wrap react-leaflet)
- List View (wrap fixed-data-grid)
- Photo View (wrap fixed-data-grid)
- Print View (will need to write our own component)
- Filter - need to be able to choose fields to filter by, and then filter continuous or discrete data as in the current version of Mapfilter
- Layer chooser - need to be able to choose which background tiles to use, and load and choose overlays to filter by
- App bar / toolbar.
We will have a central store wrapping crossfilter which will respond to events from the filter component and return a list of filtered points.
I will start laying down some bare-bone architecture in the v1.0.0 branch soon.