[
https://issues.apache.org/jira/browse/JENA-1911?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Bruno P. Kinoshita updated JENA-1911:
-------------------------------------
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
* 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
** Work on mobile/responsive viewports
was:
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
* 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
> Update Fuseki 2 UI JS code
> --------------------------
>
> Key: JENA-1911
> URL: https://issues.apache.org/jira/browse/JENA-1911
> Project: Apache Jena
> Issue Type: Improvement
> Components: Fuseki
> Affects Versions: Jena 3.15.0
> Reporter: Bruno P. Kinoshita
> Assignee: Bruno P. Kinoshita
> Priority: Minor
> Attachments: image-2020-06-05-12-09-57-685.png,
> image-2020-06-05-12-11-01-945.png, image-2020-06-05-12-13-40-428.png,
> image-2020-06-05-12-15-19-199.png
>
>
> 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
> * 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
> ** Work on mobile/responsive viewports
--
This message was sent by Atlassian Jira
(v8.3.4#803005)
