[WebUI] Upgrade ExtJS library

[DjLegolas]

Currently, the WebUI is running using ExtJS 3.4.0. As this library is very old (current version is 6.0.2), we should upgrade it.
I saw there is a branch for upgrading to the 4th version of ExtJS but the last commint in it was made long time ago (3-4 years ago).

So, now comes the big question:
Should we stick with ExtJS or move to another Front-End library?

Any ideas? Suggestion?

[Cas]

A good question and the as you can see some effort was made to try to upgrade it before. Unfortunately, it stalled as ExtJS is complex and the switch from Ext3 to Ext4 is hard. Although ExtJS is powerful and a great looking UI, it is a pain to develop with so yes replacing it is my vision.

One major issue is that any change to the framework will break all plugins in WebUI, that are not easy to write, so any upgrade has to have benefits to breaking that ecosystem.

This is the same issue that faces Gtk (GTK2) interface and my thoughts for that are to fork that code and create a separate Gtk3 UI. Not sure if can do the same with WebUI as the framework is tightly coupled with the API and server.

I have been thinking on and off about what to replace ExtJS with. It would need to be something popular and easy to implement. Perhaps React with react-desktop?

[Cas]

Although I like the sound of Vue.js: ​https://medium.com/@TechMagic/reactjs-vs-angular5-vs-vue-js-what-to-choose-in-2018-b91e028fa91d

[DjLegolas]

Hmm, I heard about Vue.js and it seem pretty nice.
So I tried to start using it in deluge, but the "problem" with it is the need of ES6 which I didn't managed to resolve yet.

Anyway, we should decide regarding the design of the UI.
Will it be the same as the current UI or not? Should it be mobile friendly?

[DjLegolas]

Any thoughts and/or suggestions about this?

[baptx]

Why not use pure HTML / CSS / JavaScript?? I see several advantages: The web app will not depend on any framework which may be deprecated with a new version and would require a complete rewrite, like it happened with ExtJS. Progressive enhancement (​https://en.wikipedia.org/wiki/Progressive_enhancement) should be used in order to have the basic functionality (e.g view / add / remove torrent) working without JavaScript? if someone is using a browser addon that blocks JavaScript? like NoScript? / uMatrix or a command-line browser like Lynx. The idea of progressive enhancement is that JavaScript? should not be a required but it should be here to enhance the user experience (e.g using AJAX or WebSocket? for automatic refresh of torrent download / upload information, add / remove torrent without page reload). I think any JavaScript? framework don't really supports progressive enhancement and it also has the downside of adding a dependency that would need a complete code rewrite in the future. Security vulnerabilities could also be introduced by a JavaScript? framework (it happened in the past). Using pure HTML / CSS / JavaScript? may take a bit more time to develop but in the end it will be easier to contribute for most people since there is no need of knowing a specific framework like ExtJS, AngularJS, Angular, React, Vue.js, Ember.js (who knows which trend will come next and deprecate all other frameworks...).

[damoxc]

Replying to DjLegolas:

Any thoughts and/or suggestions about this?

I've actually been getting frustrated at the lack of mobile support myself. I've been using Vue.js a fair bit elsewhere, the ES6 requirement isn't an issue, and ES6 makes JS far nicer to use.

Replying to baptx:

Why not use pure HTML / CSS / JavaScript??? I see several advantages:

I see plenty of disadvantages. There is a reason people don't reinvent the wheel, as time is better spent elsewhere.

Replying to baptx

Progressive enhancement (​​https://en.wikipedia.org/wiki/Progressive_enhancement) should be used in order to have the basic functionality (e.g view / add / remove torrent) working without JavaScript?? if someone is using a browser addon that blocks JavaScript? like NoScript? / uMatrix or a command-line browser like Lynx.

If someone is using a command-line browser I'm sure they can work out how to use cURL to send requests to the API to add a torrent. I'm far from convinced the added complexity of having the web-app degrade gracefully in the event of no JS is worth it. You would end up duplicating a lot of work.

Replying to baptx:

Security vulnerabilities could also be introduced by a JavaScript? framework (it happened in the past).

Security vulnerabilities can be introduced by writing all the JS yourself, I fail to see issue here.

Replying to baptx:

Using pure HTML / CSS / JavaScript?? may take a bit more time to develop but in the end it will be easier to contribute for most people since there is no need of knowing a specific framework like ExtJS, AngularJS, Angular, React, Vue.js, Ember.js (who knows which trend will come next and deprecate all other frameworks...).

I would argue that this actually makes the barrier of entry higher than using a framework. Using a framework means there is a subset of people who have an understanding of the pattern and application design. Writing it all from scratch means there would be no one outside of Deluge familiar with the design.

[baptx]

By the security vulnerabilities, I meant the Deluge developers have control over it, they will not depend on security vulnerabilities of a third-party framework.

Note that if Deluge chooses to use another framework, they may face the same problem they had with ExtJS, the framework may get deprecated and they will have to rewrite everything. This is not the case with pure HTML / CSS / JavaScript?, for example I made an app several years ago and it is still working great without changes and without using a deprecated framework. In some cases, a few functions need to be replaced but that's all.

I recommend this video of the creator of PHP, mostly talking about backend frameworks but the idea is the same, it may add unnecessary dependencies, complexity and processing that can affect the performance also: ​https://www.youtube.com/watch?v=DuB6UjEsY_Y

[DjLegolas]

As this is going to be a big change, which didn't even started, moving it to milestone 3.0.