[ 
https://issues.apache.org/jira/browse/JENA-1911?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=17126285#comment-17126285
 ] 

Bruno P. Kinoshita commented on JENA-1911:
------------------------------------------

I took one week off before returning to office after our national lock-down. 
And had a bit of spare time, so decided to have a go at it a couple days ago: 
[https://github.com/apache/jena/compare/master...kinow:add-vue]

It has a new Maven module "jena-fuseki-ui" under "jena-fuseki2", that uses a 
Maven plugin that downloads Node, and Yarn, and links Maven targets with Yarn 
tasks. So it's possible to run `mvn clean install` and get it to clean the 
project, install JS dependencies, build and run tests with 
Yarn/mocha/cypress/etc.

At the moment I haven't replaced Fuseki UI in my branch. Instead it's a 
separate project, with a development proxy server that sends my JS requests to 
the Fuseki endpoint at localhost:3030. This way I can quickly prototype looking 
at both UI's side-by-side.

I think it has near 40% done. Needing now the upload, manage, and the main 
screen for the Query.

It has small changes in some views. For example, this is the old view for 
dataset information.

!image-2020-06-05-12-09-57-685.png|width=503,height=366!

And this is the equivalent I created with Vue.

!image-2020-06-05-12-11-01-945.png|width=503,height=225!

 

The idea was to use more of the available space in the user browser. The page 
is not using tabs, but a pseudo-tab layout. It looks like a tabbed navigation, 
but when you click on "query", "add data", or "info" it takes you to a new 
"view". This allows users to bookmark the info, query, or upload URL for a 
dataset.

The button to count triples does not count the triples until the user confirms 
that s/he really wants to submit it. So users don't trigger it accidentally.

The table with statistics was transposed, so it can now be rendered in mobile 
too.

!image-2020-06-05-12-13-40-428.png|width=255,height=427!

I changed the landing page of Fuseki too, making the dataset listing the 
default.

!image-2020-06-05-12-15-19-199.png|width=503,height=275!

At the moment it is displaying only 5 datasets, but that's only so I could see 
it paginating the datasets. The current UI doesn't paginate, so if you have a 
long list of datasets it may get a bit complicated to visualize.

Furthermore, I've added a component to filter by name too. The buttons under 
the Actions column match the tabs in the dataset tabbed-navigation.

 

> 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



--
This message was sent by Atlassian Jira
(v8.3.4#803005)

Reply via email to