Page MenuHomePhabricator

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

Description

Profile Information

Name: Amr Mustafa El-Absy
IRC nickname on Freenode: AbsyAmr
Web Profile: GitHub & LinkedIn
Location: Egypt
Typical working hours From 2p.m. to 4 a.m. UTC +2:00 (with flexible availability during the other hours)

Synopsis

jQuery UI is formally deprecated among MediaWiki Developers, but Extension: Page Forms still uses it. So, it would be great to replace it with other libraries.

Possible Mentor(s)

@Yaron_Koren
Have you contacted your mentors already?
Yes, I did

Description

MediaWiki’s Front-End depends on jQuery, the JavaScript Library, which is popular and extremely useful, but also used to depend on jQuery UI which is no longer popular at least among MediaWiki developers and deprecated since April 2013.
The Extension “PageForms” still uses jQuery UI, which seems to be a problem for the developers of MediaWiki. Thus, this project aims to remove use of jQuery UI from Page Forms, and replace it with other suitable libraries for each task it handles.

PageForms uses jQuery UI in Five Places.
  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.

There are four widgets used in five Places, each of them has the following Solutions.

1. Autocompletion in #forminput.
  • Autocompletion is handled through an AJAX Request, which is called in the function attachAutocomplete in JavaScript. The AJAX Request retrieves the Data from Database depending on values=, values from category=, values from namespace= or values from url= parameters.
  • The Library Select2 comes with AJAX support built in, using jQuery's AJAX methods, which makes it is a good idea to use for this task.
2. The "text with autocomplete" and "textarea with autocomplete" input types
  • Those two input types are displayed in the same way as the text and textarea input types, but they also provide autocompletion depended on values=, values from category=, values from namespace= or values from url= parameters.
  • The first input type, text with autocomplete, can be simply removed. It’s a quite simple because it can be turned into an alias for combobox, which provide a text input for a single value.
  • The Second input type, textarea with autocomplete, can be removed, and turned into an alias for tokens, which provide a text input with multiple values
  • The Turning into alias process includes changing for the handling of their request. The textarea with autocomplete and text with autocomplete use jQuery UI, but the combobox and tokens use Select2 (JS Library), so the idea is to handle the first two input types in the same way of the second two.
3. jQuery UI Datepicker
  • The jQuery UI Datepicker is a plugin that adds datepicker functionality to the web pages.
  • The OOUI Library (The Front-End Library developed by Mediawiki’s Developers) had a previous attempt for adding a datepicker widget, but it has not been merged yet. The Widget will be handled and used in PageForms instead of the jQuery UI Datepicker.
4. Fancytree Library
  • Fancytree is a JavaScript tree view / tree grid plugin.
  • The configuration of tree input type in JS code includes using Fancytree and jQuery UI, thus we can replace Fancytree with another JS Library
  • There are many candidates for this task, but the best of them is jsTree.
  • jsTree is a jQuery plugin, that provides interactive trees. It is free, open source and distributed under the MIT license. It supports HTML & JSON data sources and AJAX loading.
5. jQuery UI Sortable and jsGrid
  • jsGrid is a client-side data grid control based on jQuery.
  • The Development on this Library seems to be ended about two years ago, since the last commit on its repository on GitHub was in May 2018, so it is good to be replaced.
  • After trying some candidates like ag-Grid, Tabulator and jExcel, it is found that jExcel may be the best solution.
  • jExcel CE is a lightweight Vanilla JavaScript plugin to create amazing web-based interactive HTML tables and spreadsheets compatible with Excel or any other spreadsheet software.
  • It is better to use as it is free with all its features (some other libraries has enterprise editions), has a compatibility with excel (users can move data around with common copy and paste shortcuts) which make an excellent user experience and easy to learn due to its simple documentation (its documentation may be not the simplest one, but it is simple enough)

Time Line

PeriodWeeksTask
May 4 to June 1Community Bonding: Getting more Familiar with the Codes and Structure of files and get more deeper into the ideas and the libraries to be used
June 2 to June 15Weeks 1 & 2Handling Autocompletion in #forminput. Using Select2 to autocomplete #forminput instead of jQuery UI
June 16 to June 29Weeks 3 & 4Handling The "text with autocomplete" and "textarea with autocomplete" input types. Change the handling of those input types from using jQuery UI to use Select2, just as “tokens” and “combobox” input types.
June 30 to July 3Phase 1 Evaluation
July 4 to July 14Weeks 5 & 6Developing an OOUI datepicker widget and merge it to the OOUI library
July 15 to July 17Week 6Adding the Developed OOUI widget for the using in PageForms
July 18 to July 28Weeks 7 & 8Adding the jsTree Library for the using in PageForms
July 29 to July 31Phase 2 Evaluation
August 1 to August 14Weeks 9 & 10Adding the ag-Grid for using in PageForms
August 15 to August 28Weeks 11 & 12Testing, Documentation and Community Feedback
August 29 to August 31Submitting the final work

Participation

  • I will be available 24/7 for communicating through my Gmail: amrelabsy55@gmail.com
  • I have an account on IRC which will be online and available during my working hours, or when anyone sends me an Email.
  • I have a good experience dealing with Gerrit. So, I will use it for developing, getting reviews, testing and merging.
  • I have also a good experience with dealing with Phabricator. So, I will use it for getting community review, publishing errors and questions relevant to my tasks and being familiarized with previous Tasks in MediaWiki.

About Me

  • My education

I am Amr El-Absy, a junior student in the Faculty of Computers and Information Technology, Kafr El-Shiekh University, Egypt. I am passioned about Programming and Web Development. I started self-learning more than two years ago, and this my first participation with GSoC.

  • How did you hear about this program?

I heard about The program from a friend of mine, who is a member in GDG (Google Developers Group). After that I attended some GDG Events about GSoC, and knew more about GSoC from its website.

  • Will you have any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?

My Final Exams every year ends on June 10 - 20, but due to Coronavirus conditions, The Education Process in Egypt is postponed, and the exams will start on May 30, and it takes about 3 Weeks. However, the period of exams is not a real obstacle for me, I had already studied some of my courses before (as a self learning), so it will not be a conflict with GSoC

  • 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)?

It is not one of my plans now. I am giving almost all my time to GSoC

  • What does making this project happen mean to you?

I have heard about GSoC for more than two years, and this is my first opportunity to participate in. I explored many organizations and finally decided to apply with MediaWiki. After exploring its ideas, I loved this idea for more than a reason.
First of all, the structure of the code files was a little confusing to me, so I can clearly understand how hard it is for a developer to deal with a hard code or, in our case, a deprecated library.
Second, after exploring the libraries that can be a replacement for jQuery UI, I found them very interesting, and I will work with some of them for sure, thus, this project would be a great opportunity to have a practical experience with them.
I've always waited for such an opportunity that allows me to make an impact for the community, and many people would be affected by.

Past Experience

  • I have my things I love to do related to the programming and technical fields. I was a Web Team Leader at IEEE KSB (Institute of Electrical and Electronics Engineers, Kafr El-Shiekh Student Branch). As a web team leader, I was an Instructor of a technical workshop for the beginners, which covered the programming fundamentals. I was an Event Director of a Technical Event called “Travelling to the Future” whose goal was spreading technical awareness about the future and the future of software. The event was under the partnership of team GDG Delta (Google Developers Group). I am also a Technical Member in GDG Damahur.
  • As a student in the Faculty of Computer and Information Technology, I was required to develop several projects in different programming Languages and Technologies. I have developed websites in ASP.net (C#) and Django (Python) Frameworks. Yet, the programming language I always develop in is PHP. I depended on self-learning to learn web Technologies, starting with HTML, CSS and JavaScript, until the Back-End track with php and MySQL. I have also learnt jQuery and Bootstrap as a Front-End Framework and Library, and a strong knowledge about MVC Design Pattern, and some other design patterns.
  • I am familiar with the Code structure in MediaWiki and PageForms, as I have already finished Those Microtasks with PageForms
    1. Page Forms: Checkboxes should be farther apart T217517
    2. Page Forms: add parsing to "values from namespace/category" and "unique for namespace/category" T246715
    3. Replace the last comma in a list from an #arraymap with a coordinating conjunctions (i.e. "and", "or") T92870

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 25 2020, 7:41 PM
AmrEl-Absy updated the task description. (Show Details)Mar 26 2020, 7:16 PM
AmrEl-Absy updated the task description. (Show Details)Mar 29 2020, 12:55 PM
AmrEl-Absy updated the task description. (Show Details)Apr 14 2020, 2:56 PM

Change 604499 had a related patch set uploaded (by Amr El-Absy; owner: Amr El-Absy):
[mediawiki/extensions/PageForms@master] Convert Textwithautocomplete anto alias for Tokens and Combobox

https://gerrit.wikimedia.org/r/604499

Change 606268 had a related patch set uploaded (by Amr El-Absy; owner: Amr El-Absy):
[mediawiki/extensions/PageForms@master] Convert the jQuery UI Autocomplete inputs to Aliases for Select2 Ones

https://gerrit.wikimedia.org/r/606268

Change 606716 had a related patch set uploaded (by Amr El-Absy; owner: Amr El-Absy):
[mediawiki/extensions/PageForms@master] Make the #forminput use Select2 for autocomplete

https://gerrit.wikimedia.org/r/606716

Change 607316 had a related patch set uploaded (by Amr El-Absy; owner: Amr El-Absy):
[mediawiki/extensions/PageForms@master] Make the Datetimepicker use OOUI

https://gerrit.wikimedia.org/r/607316

Change 609501 had a related patch set uploaded (by Amr El-Absy; owner: Amr El-Absy):
[mediawiki/extensions/PageForms@master] Replace FancyTree with jsTree

https://gerrit.wikimedia.org/r/609501

Change 620672 had a related patch set uploaded (by Amr El-Absy; owner: Amr El-Absy):
[mediawiki/extensions/PageForms@master] Rplace the JSGrid with jExcel

https://gerrit.wikimedia.org/r/620672

Change 609501 merged by jenkins-bot:
[mediawiki/extensions/PageForms@master] Replace FancyTree with jsTree

https://gerrit.wikimedia.org/r/609501

Change 607316 merged by jenkins-bot:
[mediawiki/extensions/PageForms@master] Make the Datetimepicker and Datepicker use OOUI

https://gerrit.wikimedia.org/r/607316

Change 606716 merged by jenkins-bot:
[mediawiki/extensions/PageForms@master] Make the #forminput use Select2 for autocomplete

https://gerrit.wikimedia.org/r/606716

Change 604499 abandoned by Yaron Koren:
[mediawiki/extensions/PageForms@master] Convert Textwithautocomplete anto alias for Tokens and Combobox

Reason:
This was replaced by 606268

https://gerrit.wikimedia.org/r/604499

Change 606268 merged by jenkins-bot:
[mediawiki/extensions/PageForms@master] Turn the "...with autocomplete" inputs into aliases for combobox, tokens

https://gerrit.wikimedia.org/r/606268

Google-Summer-of-Code (2020) is over! I believe you have already documented your project here https://www.mediawiki.org/wiki/Google_Summer_of_Code/Past_projects#2020. If not, I would encourage you to do so. Also, is there anything else remaining in this task to address? If not, please consider closing this task as resolved.

Change 620672 abandoned by Yaron Koren:
[mediawiki/extensions/PageForms@master] Rplace the JSGrid with jExcel

Reason:
This code was turned into a different patch (with substantial changes) at https://gerrit.wikimedia.org/r/c/mediawiki/extensions/PageForms/ /635589

https://gerrit.wikimedia.org/r/620672

Yaron_Koren closed this task as Resolved.Oct 22 2020, 2:41 AM

Yes, all of the listed items are done now.