Faas: Proposal: Port UI Portal to React.js

[burtonr]

Task

Move UI to Vue.js or React

Scope

A migration from Angular 1.x to a React.js

Non-goals

• Hosting the UI in a separate server component / container.
• Adding new features
• Changing look and feel

Details

In order to keep the UI up to date and attract new contributors we should re-write the UI in Vue.js or React.

• UI should retain look and feel and "material" theme/components if possible
• Code should remain within "faas" repo
• Dockerfile / build should offer go-only build for API changes, UI-only build and combined builds for CI / releasing.

@kenfdev and @burtonr have some ideas on how to start with this.

(Edited by @alexellis)

[shaunwarman]

I think Vue or React would be an excellent choice. They both have a great community and a natural fit for components. Bootstrapping either project has gotten a lot easier too.

Are there thoughts or current functionality for adding tracing info to UI or even CI/CD integrations to get a good view of deployment / rollback?

[burtonr]

Thanks for the support!

Could you expand a little on what you would expect to see with the tracing info?

How would Ci/CD fit into the UI? We already display the state of the function container in a "Ready"/"Not Ready" status. The CI/CD would be before the OpenFaaS UI where the function would be committed to a repo, built, tested, pushed to a registry, then deployed. Before the deployment step there aren't any mechanisms available for the OpenFaaS UI to "see" what's going on.

Unless you're speaking about OpenFaaS Cloud... That would be something to talk about!

[shaunwarman]

The thoughts on tracing and CI/CD are just some ideas on openFaaS UI being a one stop shop to see an overview of everything going on.

Could you expand a little on what you would expect to see with the tracing info?

It would be interesting to see some tracing info between steps if folks are using a state machine approach to their functions. F1 -> F2 -> F3 and see the execution times on each. This is most likely outside the scope of the UI and APIs within the platform though.

How would Ci/CD fit into the UI? We already display the state of the function container in a "Ready"/"Not Ready" status. The CI/CD would be before the OpenFaaS UI where the function would be committed to a repo, built, tested, pushed to a registry, then deployed. Before the deployment step there aren't any mechanisms available for the OpenFaaS UI to "see" what's going on.

Similar thoughts around a one stop shop and I agree this would most likely fit into the OpenFaaS cloud, but I could see it being useful for regular users. Although, maybe an incentive for OpenFaas cloud users.

[johnmccabe]

Why was Vue chosen here?

React is more widely used and I would have imagined it would be easier to find new contributors who'd be experienced with it?

[burtonr]

My main reason for pushing for VueJS is that they use a template style which means HTML is used with some additional syntax. I feel this is more generally maintainable vs the React jsx style where everything is in javascript. I feel it's a bit easier to reason about and faster for others to jump in and understand since it's mostly HTML.

Here's Vue's comparison (possibly a little bias...): https://vuejs.org/v2/guide/comparison.html#React

I'm open to React as well though if that's a preferred choice. I think both have excellent communities that have a lot of support throughout the front-end dev network

[kenfdev]

I'm open to both Vue and React as well. Personally I like React + Redux + TypeScript to create robust apps but as Burton points out:

I feel it's a bit easier to reason about and faster for others to jump in and understand since it's mostly HTML

I agree with this, too. IMHO, React has a learning curve higher than Vue.js. I also like how Vue.js has an official CLI to handle the develop pipeline.

The only strong reason I choose React over Vue is when TypeScript comes in. React has a better integration with it. But I guess TypeScript is off topic.

[shaunwarman]

Right, I mainly snuck in some questions around future features to get a since of how large this project would be. For larger projects, right now, it seems react / redux / typescript is the way to go. But bootstrapping and starting these projects can be a bit cumbersome at first.

[alexellis]

I am open to us using either, but have a preference for React.

Additional features / laundry-list of ideas should be tracked elsewhere @shaunwarman. This issue is scoped to re-writing existing UI in a new technology.

[alexellis]

@burtonr I've edited the task for clarity.

[burtonr]

@alexellis Thanks for doing that! The issue is much cleaner/clearer now.

[burtonr]

@alexellis could you expand a little on this?

I am open to us using either, but have a preference for React.

Mostly out of curiosity. I find jsx strange and for that tend to shy away from React if I can help it

[alexellis]

At this point we have already started to build skills with React through the OpenFaaS Cloud dashboard. The initial experience with the community has been positive with around a dozen PRs raised/merged already.

It may not be trivial to move the existing portal over to React so I want to get some input on what sort of steps we would need to take. Once done we could then build on the experience to add labels, annotations, env-vars and more to the edit page as well as expanding the metrics reporting with charts and more.

@kenfdev what sort of options exist for porting the existing look and feel (material) to React? I know you've dome some research here already.

[alexellis]

cc @bartsmykla @jaigouk @jagreehal

[kenfdev]

I assume this is going to be pretty straight forward using Material UI for React. We should break down the (nearly) single bootstrap.js file into components. The styles for the tabs inside modal might be a bit tricky.

[Bessonov]

Want to support you guys. +1 on React and Matrial UI, both are great (have also experience with angularjs). But not until middle of march.

[Bessonov]

@burtonr

Mostly out of curiosity. I find jsx strange and for that tend to shy away from React if I can help it

Yeah, it was my concern before I switch from angularjs to react too. But after first week I was very comfortable with it and don't want to miss it now.

[bartsmykla]

I think that the easiest and the most straight forward way as @kenfdev suggested would be to use Material UI, it's very complex components library, and in the past I was struggling with custom modification of its components. But we have here almost plain Material components, so it should be easy, and smooth.

[jagreehal]

There are good Vue and React wrappers around Material and other UI libraries. Definitely, agree with breaking down the components and I'll say using something like Storybook or docz. Is there something we try porting as a POC?