Re: [abacus] UI technology for onboarding and reporting apps


Jean-Sebastien Delfino
 

Hi Hristo,

Nice to see you guys contributing very useful capabilities to the project!!

As a starting point, I was thinking about a simple usage visualization
page. No input or complex UI interactions, just a single page you open to
see your usage report as a table or a set of tables. That'd give us pretty
useful functionality right away with little effort and an easy progression
towards more sophisticated UI work.

As for the UI technology, I've been using React.js [1] recently with really
good success.

React's declarative component model and unidirectional data flow make it
really easy to implement modular UI. For example we could come up with 2 or
3 'Abacus usage view' small components (e.g. table components reporting
usage per org, space or resource) that folks out there could then easily
combine and reuse in their bigger UIs.

React also integrates really well with Node.js as you can run everything
including the DOM rendering in Node and that's very nice for testing. It
should also fit nicely with Abacus' GraphQL [2] support, as you'll be able
to declare the GraphQL query used to obtain a usage report from Abacus on
your React 'report' components for example.

With that, I've been using Bootstrap [3] for its popular UI components and
styling and D3.js [4] for graph visualizations.

So that's the combination of technologies I'd recommend: React.js, GraphQL,
Bootstrap and D3, totaling about 29000 + 2300 + 87000 + 42000 = 160300
stars on Github so it looks like you wouldn't be alone using that popular
UI stack :)

HTH

[1] https://facebook.github.io/react/
[2] https://github.com/graphql/graphql-js
[3] http://getbootstrap.com
[4] http://d3js.org

-- Jean-Sebastien

On Wed, Oct 7, 2015 at 4:33 AM, Hristo Iliev <hsiliev(a)gmail.com> wrote:

We intend to create 2 applications connected with Abacus:
* onboarding - assists service providers with resources definitions
(formulas, history, pricing, ...)
* reporting - provides different views (time windows, org/spaces
breakdown, ...) for the reports generated by Abacus

We are looking for opinions and suggestions for suitable UI technologies
we can use.
Any ideas on the functionality and visualization in these UIs are also
welcome.

Join {cf-dev@lists.cloudfoundry.org to automatically receive all group messages.