One of the "problems" we have right now with this new viewer is that although we have got most of the foundational stuff right, the UI lacks stylistic cohesion. This is due to the viewer being a mish-mash of various react components, each with their own unique styling quirks. I really wanted a react-based UI toolkit that had a good enough baseline set of widgets/components with a unified look for building desktop-centric web applications (with an option to go mobile down the road).
Well, I think my wish for such a toolkit has now been fulfilled, and its name is Blueprint.
What sold me on this particular UI toolkit was:
- It is React-based
- It has a good wide range of components that covers most of what I need to port across the remaining Fusion templates
- It comes with a diverse set of icon fonts
- It has a friendly license (BSD)
- It is written in TypeScript and the library comes bundled with TypeScript definitions
- It looks good!
With so many good selling points, I've decided to adopt Blueprint as the UI foundation for all my viewer templates. This means.
We have better styled UI for certain tools
And we have key components needed to start bringing across the other remaining Fusion templates, like the TurquoiseYellow template.
Compare the original Fusion template
With our blueprint-powered version
Looks good enough doesn't it?
Now there is one executive decision I'm making with the Fusion templates I'm porting over. The overview map will always be present as a toggle-able button on the main map viewer component and not outside of the map viewport.
Part of the problem is having the OpenLayers OverviewMap control render its content outside of the map viewport doesn't really play nice with React component updates in my attempts thus far, so I've taken the creative decision to not bother trying to get everything 1:1 when porting these templates over. As long as the main elements and styles are there, it's good enough for me.
Now sadly, despite having made several existing libraries and React components redundant (and they have been removed as a result), taking on Blueprint has added a lot of extra weight to our final bundle
tree shaking feature, which should make some in-roads in cutting down our production bundle size to more acceptable levels.