Page MenuHomePhabricator

Remove use of jQuery UI from Page Forms
Closed, ResolvedPublic

Description

jQuery UI is a library that was added to MediaWiki in version 1.16, in 2010, at the same time as its "sister" library, jQuery. jQuery remains popular (and extremely useful), but jQuery UI is not popular, at least among MediaWiki developers: MediaWiki devs have wanted to get rid of it since at least 2013 (see T49145). It will undoubtedly be removed from MediaWiki at some point, though that could be years from now. But there are various reasons to try to get rid of it already in Page Forms. For one thing, development on jQuery UI seems to have stopped abruptly in 2016. For another, the library that MediaWiki devs have created as a replacement for jQuery UI - OOUI - does have certain advantages, such as much better support for internationalization.

Here are the current uses of specific jQuery UI "widgets" in the Page Forms extension:

  1. jQuery UI Autocomplete is used for autocompletion within #forminput
  2. jQuery UI Autocomplete is used for the "text with autocomplete" and "textarea with autocomplete" input types within forms
  3. jQuery UI Datepicker is used for the "datepicker" and "datetimepicker" input types
  4. jQuery UI Widget is used by the Fancytree library, which in turn is used by the "tree" input type
  5. jQuery UI Sortable is used by the jsGrid library, which in turn is used by "display=spreadsheet" and Special:MultiPageEdit

And here are my thoughts on each one:

  1. Autocompletion in #forminput could probably be done using the Select2 JS library instead, which is already contained in Page Forms. Another option is to use OOUI's autocompletion widget, but I don't think it's good enough yet.
  2. The "text with autocomplete" and "textarea with autocomplete" input types should simply be removed from Page Forms, and turned into aliases for the "combobox" and "tokens" input types. This is something I've wanted to do for a long time, and this project seems like the perfect opportunity to do it.
  3. This is probably best done by changing to use OOUI - specifically "DateInputWidget". There was already an attempt to do this, at https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/PageForms/+/511815/ , but it needs work.
  4. Fancytree should be replaced by another JS library - the most likely candidate is jsTree (https://www.jstree.com/).
  5. jsGrid should be replaced by another JS library - especially since development on it seems to have ended about two years ago. The best candidate for this seems to be jExcel (https://bossanova.uk/jexcel/v3/), although if that doesn't work out there are other good options, like ag-Grid (https://www.ag-grid.com/) and Tabulator (http://tabulator.info/).

The task T192752 has some more thoughts on all of this, although that one is just focused on OOUI.

This is not an all-or-nothing task: any reduction of reliance on jQuery UI would be helpful.

Microtasks for this project: T72704 (check to make sure this bug is still valid), T217516, T217517, T242973, T246715, T247407

Event Timeline

Hi!

I see your project interesting, and I'd like to co-mentor it with you. Do you already have one?

@BamLifa - no, I don't have co-mentors yet. Who are you?

I am a software dev and I am looking for projects to kill my free time.

@BamLifa - okay, thanks for offering to help You should know that I'd prefer to have a co-mentor who has significant MediaWiki development experience - and ideally, someone with Page Forms development experience. But I'll let you know.

Hello @Yaron_Koren I am a Student Developer new to Mediawiki development and interested in learning more about the Wikimedia Ecosystem(Mediawiki core,Skins, Extensions) etc. And I would love to learn while making little contributions for a start.

I have Setup A Vagrant Installation of mediawiki core, as well as enabled the Pageforms extension,Please How do I go about seeing the pageform extension in action? Also are there some beginner friendly issues that I can get started with?

Extensionsenabled.png (670×1 px, 180 KB)

Great! You can start by going to Special:CreateClass and filling in the form. Although it might be helpful to install the Cargo extension first, so you can see the full working of the overall system. As to beginner-friendly issues: check out the list of microtasks above.

@Prondubuisi - are you trying to become a Google Summer of Code student? In either case, please just pick one microtask and stick to that, instead of trying to do all of them.

Yes @Yaron_Koren I am interested in GSoC, Sorry I have been looking at different micro tasks, I will stick to one issue, thanks.

No problem, I should have said that beforehand.

Hello @Yaron_Koren I am new to Mediawiki development and I want to participate in this year's Gsoc. I am interested in this project, please how can i get started?

@Rexsteroxy - great! Please pick a microtask and try to do it. Let me know if you have any questions.

@Yaron_Koren I wish to contribute to this projects but seems the microtasks are taken. Are there any other issues to be fixed or methods to contribute to the projects?
Thanks in advance

@Yaron_Koren I wish to contribute to this projects but seems the microtasks are taken. Are there any other issues to be fixed or methods to contribute to the projects?
Thanks in advance

Hello @Sahajsk I doubt the microtasks are taken, so far none of the microtasks have been assigned to anyone, also I think no one has made a pull request to solve any of them. You can ask that a micro task be assigned to you.

@Prondubuisi: No, please don't "ask". :)

Thanks for the Clarification @Akalapper. lol. @Sahajsk just do it!

@Sahajsk - people are only actively looking into T242973 and T217517, I think, so you can definitely take one of the other two. Or even one of these two, at this point.

@Yaron_Koren @Prondubuisi Thanks for the clarification , I'll take up one of them.

Hi, This is Agha Saad Fraz, pursuing Software Engineering. I am interested in applying to Wikimedia for GSoC'20. I am interested in this idea. I have been using HTML, CSS, JS, Jquery, and PHP in my projects for more than a year. I am very interested to work and contribute to Wikimedia.

Regarding the project, I have installed the Wikimedia and page form extension. Kindly guide me on how to get started. Thanks

Hi and welcome AghaSaad04! Please see the last line in the description here, and https://www.mediawiki.org/wiki/Google_Summer_of_Code/2020 for more info. Thanks!

This comment has been deleted.

@AghaSaad04, @Manishsamota - thank you both for your interest in this project! Please check the microtasks listed above - I just added another one, so now there are five, and only one of them has had a patch submitted for it so far, so feel free to try doing any of the other four.

Hi! I am Sarthak Dubey, a Computer Science and Engineering sophomore from IIT Kanpur. I found this project interesting and would love to work on it.

Hello everyone.This is Chetan Sharma.I am new to open source contribution.And I would definitely like to contribute to Wikimedia GSOC 20.
I am trying my best to understand the MediaWiki and the Page Form Extension.And also looking on microtasks suggested by @Yaron_Koren.

@Srthkdb and @Cschetan77 - great! Let me know if you have any questions.

This comment was removed by Vpankaj1998.

Hey @Yaron_Koren ,

I want to replace jquery UI with simple javascript and give a complete new look to form, which will be simple and fast.
Right now i am trying to make a prototype, trying to collect ideas and trying to make it more simple and user friendly.

Thanks.

@Kushinthecloud - please remember that you have less than two weeks to apply for this project. What you're describing sounds like a megatask, not a microtask. :)

This comment has been deleted.

@Manishsamota - if you have any questions, it would be easier if you just asked them here.

Aklapper added a subscriber: AmrEl-Absy.

Resetting task assignee. Feel free to claim your proposal instead. :)

Is everything in this project task planned for Google-Summer-of-Code (2020) completed? If yes, please consider closing this task as resolved. If bits and pieces are remaining, you could consider creating a new task and moving them there.

Yaron_Koren claimed this task.

I finally removed the last references to jQuery UI in the code. This is now done!