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

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