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.

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

I certainly second the feeling expressed and welcoming SAPs contributing the "basic" battery-included UIs for Abacus. Both onboarding and reporting.




As we didcussed last IPM there are stories for each so feel to use those. Also, ping me or let's use this Friday's IPM to refine these stories as you evaluate Sebastien's suggestion and others you might be exploring.




With risks of sounding a bit cliché... These are exciting times for Abacus and CF in general. Worldwide, multi-company, open collaboration in action ;)




Best,




dr.max

ibm cloud labs

maximilien.org



—
Sent from Mailbox

On Wed, Oct 7, 2015 at 8:29 AM, Jean-Sebastien Delfino
<jsdelfino(a)gmail.com> wrote:

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.