Skilltree with Vaadin?

NSA has a development team that released an open source gamification platform called [Skilltree]
(https://code.nsa.gov/skills-docs/).

[Here]
(https://www.nsa.gov/news-features/press-room/Article/2380858/nsa-announces-skilltree-an-innovative-approach-to-implementing-application-trai/) is NSA announcing Skilltree.

[Here]
(https://www.youtube.com/watch?v=wR_gqnCyl48) is a talk at All Things Open 2020 by Terrence Pugh - Gamification made easy -

![Skilltree]
(https://code.nsa.gov/skills-docs/img/home/Screenshot_2020-07-15_SkillTree_ClientDisplay.png)

They have made [integration support]
(https://code.nsa.gov/skills-docs/skills-client/) for Vue.js, React, Angular and Pure JavaScript.

I am new to Vaadin and a long way from being very innovative and skilled with the Vaadin platform. So I am addressing this question to the more experienced users and hope someone could take the time to look at Skilltree and think about how it can be integrated with Vaadin.

Assuming it is possible. What would be the steps for developers to integrate Skilltree with Vaadin platform so our endusers can have the intended experience Skilltree is about?

It seems quite tricky, architecturally. As far as I understand, SkillTree provides a backend with a bunch of RestController services and a client side libraries meant to integrate directly into those services. This doesn’t seem very compatible with either Flow or Fusion.

With Flow, you wouldn’t get much benefit from the client-side library, as you’d need to integrate it manually to your Flow app’s Java components. You could quite easily hook up to the backend services and create your own UI, but then you’d be throwing away half of what SkillTree gives to you for free.

With Fusion, integrating the client side libraries would be somewhat easier, but since you couldn’t take advantage of Fusion’s generated endpoints directly here (as SkillTree provides its own REST services), you’d end up needing to create a server side mapping layer. Why wouldn’t you just use Vue, Angular or even plain JS instead?

Now, if SkillTree were to be written from scratch, it looks exactly like the kind of an app that would benefit from Fusion’s generated endpoints.

Olli Tietäväinen:
Why wouldn’t you just use Vue, Angular or even plain JS instead?

Much appreciated Olli. Nothing is better then getting it straight from the expert.

With the line above do you mean track user skill events in Vaadin with the reporting REST api, and display the dashboard in a separate client since it cannot be done from within Vaadin? Because if that is not what you meant I do not understand how you would go about to track the skill events.

John Moe:

Olli Tietäväinen:
Why wouldn’t you just use Vue, Angular or even plain JS instead?

Much appreciated Olli. Nothing is better then getting it straight from the expert.

With the line above do you mean track user skill events in Vaadin with the reporting REST api, and display the dashboard in a separate client since it cannot be done from within Vaadin? Because if that is not what you meant I do not understand how you would go about to track the skill events.

If you’re using Vaadin, the expectation is that you’re the owner of the client-server communication channel. Flow (which is the programming model used in Vaadin 14 and later versions with Java-only views) controls the communication automatically and opaquely; you can’t connect a Flow client to a non-Flow backend.

In that quoted comment’s case, I was talking about Fusion with TypeScript views. When using Fusion, Vaadin generates typesafe REST endpoints matching Java server data model automatically - that’s the benefit of using Fusion instead of generating your REST endpoints manually, like SkillTree has done. SkillTree’s programming model expects that you connect to a provided REST backend. Technically speaking, you could connect to the SkillTree backend from your Vaadin app’s backend, but that sounds like a lot of duplicate work - the benefit of using Fusion is already lost.

So I’m just throwing it out here.

Background

A Gamification based approach significantly simplifies the training process while making the process more enjoyable for the user community. - Skilltree

Research papers

We all probably know of several sites or apps that have some form of gamification

  • Stackoverflow
  • Apple Watch (activity)
  • Strava (training app)
  • Dualingo (language trainer)
  • Plural
  • Codeacademy
  • And many more

Proposal

Maybe Vaadin could consider supporting gamification in Vaadin Platform?
Something to hook in kinda like Collaboration Engine or something simular. Could be pr view, or even finer granulated. You guys live and breath Vaadin Platform every day and I am certain this is something Vaadin Inc is capable of solving and quickly evaluate as something to explore further. A solution can even be based on Skilltree (service part) since it is open source. Anyways I hope someone will do some thinking and at least consider it.

It certainly sounds interesting. My gut feeling is that this kind of gamification system wouldn’t need any framework-level changes in Vaadin, so anyone who’s interested could start working on something like that.