vf-ui issueshttps://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues2019-11-22T08:22:52Zhttps://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues/1Defining architectural requirements for ValueFlows UI project2019-11-22T08:22:52ZpospiDefining architectural requirements for ValueFlows UI projectHey all (and to some old & new faces who might be interested) - as roadmaps within and beyond our ecosystems continue to mature, it seems we are at a point where we can start building a *truly* portable user interface framework for rapid...Hey all (and to some old & new faces who might be interested) - as roadmaps within and beyond our ecosystems continue to mature, it seems we are at a point where we can start building a *truly* portable user interface framework for rapid iteration of techno-social systems.
I'd like to use this thread to formalise precisely what this means in terms of ValueFlows-compatible user interface frameworks. There are things we could do in other areas (eg. aligning [patchql](https://github.com/sunrise-choir/ssb-patchql/) with [Humm](https://github.com/sunrise-choir/ssb-patchql/)'s record schema); but for resource coordination problems I think I'm preaching to the choir here when I say that ValueFlows can unlock a lot of possibilities.
Beyond portability, modularity and extensibility a lot of effort also needs to go in to developer ease-of-use, because we want contributing to the project at any level to be as accessible as possible.
So this is just some thoughts and links to get the discussion started, I'd really love to iterate this with your help and see where we can combine forces to reduce overhead and co-enable each other as we progress (:
### Backend portability
- [GraphQL spec](https://www.npmjs.com/package/@valueflows/vf-graphql) ensures that implementations are aligned and provides validation methods to verify compliance. This decouples UI components from depending on a particular backend.
- [WIP Holochain implementation](https://github.com/holo-rea/holo-rea/tree/master/modules/vf-graphql-holochain#readme)
- [issue](https://github.com/valueflows/vf-graphql/issues/8) to merge with @luandro's [economic-sentences](https://github.com/open-app/economic-sentences-graphql) GraphQL plugin
- [Graph federation helpers](https://www.apollographql.com/docs/apollo-server/api/apollo-federation/) allow us to compose multiple schemas together declaratively into a single merged API. This decouples the UI components completely from the data sources, even when mixing multiple backends (eg. Scuttlebutt + HoloREA) within the same app.
### Frontend portability
**Framework agnostic:**
- We should aim to deliver our UI components as pure WebComponents. Browser support for these is now [mature](https://caniuse.com/#feat=custom-elementsv1) and they enable portability between all possible UI frameworks (eg. React, Angular, Polymer, ...)
- Component wrappers for particular runtimes will have to be delivered in addition to the raw WebComponents (eg. [for React](https://www.npmjs.com/package/webcomponents-in-react)).
- We should generate these as part of the build / publish process and deploy different packages for use with different libraries.
- We should use [Svelte](https://svelte.dev/) to develop the components themselves. It's extremely simple and accessible, I gave it to a junior dev & complete novice once and they managed to build a quite nice website (and have fun doing it!)
- We need to proof [getting Storybook working with it](https://storybook.js.org/docs/guides/guide-svelte/)
- We need to proof exporting both TypeScript and FlowType type definitions from the components to enable compatibility with both mainstream JS preprocessors commonly used in UI projects. Flow is much less restrictive than TypeScript, so perhaps using TS and [generating flow from TS definitions](https://github.com/joarwilk/flowgen) is the appropriate direction to convert in. Also, Svelte uses TypeScript by default.
- [svelte-apollo](https://www.npmjs.com/package/svelte-apollo) is already done so is [svelte-redux-connect](https://www.npmjs.com/package/svelte-redux-connect), so I think all the bindings we need for state management and API requests are already good to go.
- There cannot be any global styles whatsoever in the framework as this breaks predictability when importing in to existing web apps which have their own style globals.
**Platform agnostic:**
- If we keep our data layer cleanly separated from our view layer, we can build equivalent React Native views for every web view and enable the frontend logic (excluding routing) to be shared between platforms.
- Apollo GraphQL works both in web & Electron environments as well as React Native.
- Must support serverside rendering for pre-render and no-JS environments. For Svelte we need to proof [use of Sapper](https://sapper.svelte.dev/docs/#sapper_export).
### Customisability
- We should make UI components white-label-able and customisable at as many levels as possible. [Minimum requirements](https://github.com/django-rea/rea-app/wiki/UI-Component-Architecture#implementation-concerns) are to support:
- simple re-theming via customisation of global theme variables
- deep visual customisation via an accessible style framework
- ability to inject custom theme styles to entirely change visual appearance and only use the component's logic
- I have no real strong opinions on the CSS preprocessor we do or don't use unless others do; but we should probably sign off on something so I nominate SCSS. What are the cool kids doing these days?
- Style framework will probably have a similar architecture to [rea-app](https://github.com/django-rea/rea-app/), in that CSS framework mixins and variables are used to share common style elements between locally-scoped component styles. Note that this configuration impacts the repository layout and build system and will require enforcing some directory and file naming conventions. Using a templating framework to automate creating new components is probably a good idea.Lynn FosterBob HaugenMikeyConnor TurlandpospiLynn Foster