Uploaded image for project: 'Apache Jena'
  1. Apache Jena
  2. JENA-1911

Update Fuseki 2 UI JS code

    XMLWordPrintableJSON

    Details

    • Type: Improvement
    • Status: In Progress
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: Jena 3.15.0
    • Fix Version/s: None
    • Component/s: Fuseki
    • Labels:
      None

      Description

      The existing Jena Fuseki user interface uses Backbone.js, with extra libraries such as JQuery, Marionette.js. The JavaScript code pre-dates ES6, which is largely supported now.

      This issue is a placeholder for discussion & work around updating the UI. Using ES6 in the code would be a great improvement.

      But I also suggesting adopting a different framework. The most famous framework for JS UI is probably React, followed by Angular & Vue. I am using Vue.js at $work, so I am biased.

      The reason we chose Vue.js at work is that the development team is using mainly Python, with background in Perl, C, and Shell. So out of the three, Vue.js was the simplest, as it didn't require TypeScript, special syntax, and the tools required to build an app with Vue are also quite simple.

      One downside of this approach is the build of Apache Jena, which would require Node.js and a build tool like Yarn or NPM. But it also brings benefits such as:

      • We can write unit tests for the UI
      • We can write integration (e2e, end to end) tests with Cypress or Nightwatch (similar to Selenium, but simpler to run and maintain)
      • It will be easier to keep the code up to date, as tools like GitHub security bot are able to inspect package.json and look for outdated or libraries with CVE's
      • It will be easier to incorporate other libraries in the code, so that we can easily switch the JS code for the editor (for example), or add a new library to handle SPARQL, etc
      • It is now easier to find developers that know Vue, React, Angular, than Backbone (though that was the first framework I learned, and I really like it), so maybe we would get more contributors to help with Fuseki UI

      So features we would have after this issue:

      • Application built with ES6 JavaScript code
      • Using Vue.js as framework for the UI
      • Adding accessibility support (WCAG 2.0, maaaaybe covering section 508 though I'm not quite familiar as that's more for US)
      • Update all the JS libraries
      • Add documentation to the code with JSDoc (the current code lacks documentation)
      • Add tests, both unit and end-to-end (also not present in current code)
      • Maintain the look and feel with Bootstrap, and limit what is changed (i.e. users are already familiar with Fuseki, and know they can upload data, run queries, etc, so we should make sure that they are able to find it)
      • Theming, with a default light-mode, a dark-mode, and (possibly?) color-blind or other custom themes
      • Work on mobile/responsive viewports
      • Local browser settings; this is something cheap, that doesn't require changing to the backend, and would allow us to persist user settings such as:
        • Previous executed Queries
        • Extra query prefixes
        • Number of datasets displayed per page in the main page
        • How long the server status widget queries the server (i.e. should we ping it every 1 hour? every 30 seconds?)
        • The theme of the user (dark, light, color-blind-protanopia, high-contrast, etc) leveraging bootstrap-vue
        • User language

        Attachments

        1. image-2020-06-05-12-15-19-199.png
          97 kB
          Bruno P. Kinoshita
        2. image-2020-06-05-12-13-40-428.png
          83 kB
          Bruno P. Kinoshita
        3. image-2020-06-05-12-11-01-945.png
          126 kB
          Bruno P. Kinoshita
        4. image-2020-06-05-12-09-57-685.png
          116 kB
          Bruno P. Kinoshita

          Activity

            People

            • Assignee:
              kinow Bruno P. Kinoshita
              Reporter:
              kinow Bruno P. Kinoshita
            • Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated:

                Time Tracking

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0h
                0h
                Logged:
                Time Spent - 20m
                20m