Page MenuHomePhabricator

Proposal: Remove use of jQuery UI from Page Forms
Closed, DeclinedPublic


Profile Information

Name: Sahaj Khandelwal
IRC nickname on Freenode: Sahajsk
Github Profile: GitHub
LinkedIn profile: LinkedIn
Gerrit profile: Gerrit
User page: MediaWiki
Location: Indore, Madhya Pradesh, India
Typical working hours: 5 AM to 8 PM UTC +5:30


The task aims to remove the use of jQuery UI from PageForms extension. This library will be primarily replaced by jQuery and standard JavaScript functions. As the development of jQuery UI seems to have ceased, all of the MediaWiki tends to replace this library. This replacement will make the PageForms extension more universal and standardized.

Brief Overview

Following use cases of jQuery UI in PageForms extension were explored: -

  1. jQuery UI Autocomplete and jQuery UI Datepicker
  2. jQuery UI Widget (used in FancyTree library)
  3. jQuery UI Sortable (used in grid library)

These will be dealt with and replaced as explained later.
All the libraries and external plugins used as specifically open source and freely available. They need not be elaborated here to avoid clutter in the objective of the task. Thus, links to these have been provided for further reference.

jQuery UI Autocomplete and jQuery UI Datepicker

  • jQuery UI Autocomplete is used for autocompletion within #forminput, "text with autocomplete" and "textarea with autocomplete".
  • The #forminput issue can be resolved by using well-maintained Select2 JS library or OOUI's autocompletion widget whichever seems to work efficiently and effectively.
  • The "text with autocomplete" and "textarea with autocomplete" input types can be turned into aliases for the "Combobox" and "Tokens" input types respectively.
  • Other libraries, such as Chosen and Selectize.js, can also be used.
  • jQuery UI Datepicker and DateTimepicker can be replaced by "DateInputWidget" of the OOUI library. The OOUI plugin has already been added, but it needs enhancements.

jQuery UI Widget

  • The tree input in PageForms extension uses FancyTree JS library. This can be replaced by another intelligent and efficient solution.
  • The most suitable replacement can be jsTree.

jQuery UI Sortable

  • jsGrid library is used for spreadsheet representation. Since the development has been ceased and soon will turn obsolete, it tends to be replaced.
  • On researching the candidates such as jExcel, ag-Grid and Tabulator, jExcel seems to be the right candidate.

Links:Select2, OOUI, jsTree, jExcel


As mentioned in the project details, the mentor is @Yaron_Koren
Have you contacted your mentors already?
Yes, I have already contacted the mentor.

Timeline and Deliverables

The project has been divided into three subsections, mentioned above for working in three phases of GSoC. A detailed description of work and deliverables week by week has been added in the timeline. The goals and evaluations are mentioned in order to complete the project within the time period of GSoC. Enough time has been allotted for trying and testing the changes to avoid bugs in the final build.

May 4 to June 17Community bonding period
Week 1 (May 4 to May 11)Won't be available much for the first half of the week due to examinations.
Week 2 (May 12 to May 19)Explore the usage of jQuery UI library in the extension.
Week 3 (May 20 to May 31)Look for intelligent solutions for each block to remove jQuery UI wherever it is being used. Learn more about libraries such as OOUI and jsTree.
June 1 to July 3Coding Period (Phase 1)
Week 1 (June 1 to June 8))Start working on the first part (autocomplete and DateTime inputs) of the project for the first phase as described above. Begin working in the form inputs section and replace the "text with autocomplete" and "textarea with autocomplete" input types with standard input types such as Combobox
Week 2 (June 9 to June 16)Replace jQuery UI autocomplete widget with libraries like Select2, Chosen or Selectize.js
Week 3 (June 17 to June 24)Start working on the DateTime input widget and replace the present input with a better alternative.
Week 4 (June 25 to June 28)This week will be mostly devoted to try and test the changes and work on tasks which are leftover in the first phase
Week 5 (June 29 to July 3)Phase 1 evaluation
July 4 to July 31Coding Period (Phase 2)
Week 1 (July 4 to July 11)Begin working on replacing Fancytree library. Mostly explore the use cases in the PageForm extension
Week 2 (July 12 to July 19)Replace corresponding inputs wherever necessary with plugins such as jsTree or other alternatives. Start looking into the usage of jsGrid.
Week 3 (July 20 to July 26)Try and test the changes done in phase 2 and correct potential errors.
Week 4 (July 27 to July 31)Phase 2 evaluation
August 1 to August 31Coding Period (Final Phase)
Week 1 (August 1 to August 8)Replace jsGrid functionality with more familiar jExcel, Tabulator or any well-maintained library
Week 2 (August 9 to August 16)Following two weeks will be more concerned with wrapping up and clearing logs of any incomplete task
Week 3 (August 1 to August 7)This week will be kept for buffer. All the changes made in during the program will be tried, tested and finally merged.
Week 4 (August 24 to August 31)Final evaluation
August 31 to September 7Mentors submit final student evaluations
September 8Final results of Google Summer of Code 2020 announced


  • I will maintain a separate branch for making the changes. It will be merged once the changes have been tested and verified.
  • I will be online on IRC in my working hours to contact the developers for help and suggestions.
  • I will use Phabricator for clearing queries regarding the bugs and tasks.
  • I will be available through email (

About Me

Education (completed or in progress)
I am a sophomore student pursuing my bachelors in Electrical Engineering at the Indian Institute of Technology Roorkee. Having completed my schooling from Emerald Heights International School, Indore, I started learning web development and data analytics. I have taken up several courses and projects regarding the same.

How did you hear about this program?
The primary sources were my friends, colleagues and seniors in my college. I learnt more through the Google Summer of Code website and youtube videos of past participants.

Will you have any other time commitments, such as school work, another job, planned vacation, etc., during the duration of the program?
For the time being, I only wish to pursue this project at Wikimedia Foundation under Google Summer of Code program.

We advise all candidates eligible for Google Summer of Code and Outreachy to apply for both programs. Are you planning to apply to both programs and, if so, with what organization (s)?
Having missed the deadlines for Outreachy, I can apply only through Google Summer of Code.

What does making this project happen mean to you?
Searching about any relevant topic on Google, the first link mostly directs to a Wikipedia page regarding that topic. The amount of information it contains and their credibility is insane. The trust it has among people is remarkable. Contributing to such an organization with such a huge user base and with such noble cause is a service to the community in itself.
From my future perspective, it would be a great platform to showcase my skills and open doors to new opportunities.

Past Experience

I took up a project last summer with a startup named Analysed. It is a virtual recruitment platform to reduce the hassle in the process of recruitment. I developed several algorithms for filtering out candidates who apply to an organization based on their skills and submission of tasks. I learnt to program extensively in languages such as Python, PHP and Javascript. I also worked on the design and aesthetics of the website.

I have also taken up several MOOCs to learn skills such as PHP, MySQL and Javascript.

I have contributed to MediaWiki in the following ways:-

Completed the following tasks:-

  • (T242973)Special:CargoQuery autocompletion appearance should be standardized
  • (T244730) Special:ListFiles shows usernames with underscores
  • (T247407)Field date does not handle ancient dates correctly
  • (T246380)Empty section causes later section to not be parsed correctly

Having worked in multiple domains of MediaWiki, I have knowledge of how each component interacts with each other. In this way, I can ensure that nothing is affected in other MediaWiki due to changes made in PageForms extension.

Other Info

Google docs: Proposal

Event Timeline

@Yaron_Koren Can you please help me about with any discrepancy or enhancements that I could make to the proposal?

It seems fine... honestly, for me the microtasks and general communication matter more than the proposal.

@Sahajsk We are sorry to say that we could not allocate a slot for you this time. Please do not consider the rejection to be an assessment of your proposal. We received over 100 quality applications, and we could only accept 14 students. We were not able to give all applicants a slot that would have deserved one, and these were some very tough decisions to make. Please know that you are still a valued member of our community and we by no means want to exclude you. Many students who we did not accept in 2019 have become Wikimedia maintainers, contractors and even GSoC students and mentors this year!

If you would like a de-brief on why your proposal was not accepted, please let me know as a reply to this comment or on the ‘Feeback on Proposals’ topic of the Zulip stream #gsoc20-outreachy20. I will respond to you within a week or so. :)

Your ideas and contributions to our projects are still welcome! As a next step, you could consider finishing up any pending pull requests or inform us that someone has to take them over. Here is the recommended place for you to get started as a newcomer:

If you would still be eligible for GSoC next year, we look forward to your participation!