Page MenuHomePhabricator

GSoC 2022 Proposal: Modernize JavaScript build process and dependencies for Wiki Education Dashboard
Closed, DeclinedPublic

Description

Profile Information

Name: Sahethi Depuru Guru
University: VJTI (Veermata Jijabai Technological Institute), Mumbai
Email: sgdepuruguru@ce.vjti.ac.in
GitHub: Sahethi
IRC nickname on libera.chat IRC : sahethidg
Other Contact Methods: Slack, Zulip (Sahethi DG)
LinkedIn: https://www.linkedin.com/in/sahethi-depuru-guru/
Resume: Click Here To View
Location: Mumbai, India
Typical working hours: Between 4pm to 3am UTC +5:30

Synopsis

  • Short summary describing your project and how it will benefit Wikimedia projects
    1. The Wiki Education Dashboard is a complex web app for keeping track of contributions to Wikimedia projects. The global Wikimedia community widely uses it for edit-a-thons, classroom wiki writing assignments, and various other initiatives.
    2. Currently, the website runs on Webpack as a module bundler which was integrated several years ago. Improvements to the project in previous years included reducing the bundle size, improving the dashboard’s error monitoring, adding multi-wiki support and adding an article finder tool to name a few.
    3. This year the main focus is to modernize the current build process, that is, migrate to the latest version of Webpack (version 5), upgrade and replace the unmaintained dependencies, and take advantage of recent improvements in the JS ecosystem and also identify opportunities to reduce the bundle size further.
  • Have you contacted your mentors already? Yes, I have contacted my mentor through Slack and GitHub several times. I started getting myself familiarized with the codebase in the month of January and after getting comfortable with it, I started my contribution in the month of February. With this knowledge, I was able to help other newcomers with setting up their development environment.

Goals of the Project

  • Upgrading to the latest version of Webpack (from version 4 to 5)
  • Removing the use of jquery so that it can be dropped as a dependency
  • Replacing the unmaintained react-motion library with a well-maintained alternative
  • Identifying deprecated or unmaintained dependencies and upgrading/replacing them
  • Analyzing the JavaScript dependencies to identify opportunities to reduce bundle size

Expected Size

  • Expected size of the project: 350 hours

Implementation Details

  • Migration to Webpack v5 from v4
    • On reading the Webpack documentation for deeper understanding. One needs to adopt this new version because of the advantages it provides, which include, persistent caching, improved bundle size, refactored watcher, the introduction of Asset Modules and also module federation.
    • In order to perform the following, I'll first update Webpack 4 to its latest version along with its loaders and plugins. Because it is important to make sure that there are no webpack deprecation warnings during the build in order to proceed.
    • It would be necessary to make sure that the build has no errors or warnings because an upgraded version of webpack, webpack-cli causes errors.

You can check the outdated packages in your project.

yarn outdated

Breaking of css-loader
Our project has a css-loader which can only be used in webpack@5 will cause some breaking changes on upgrade from its current version of 3.5.1 to 6.7.1. This can be resolved by referring to the recent documentation for breaking changes.

It is currently being used in css.webpack.js. Currently, if we use the latest version there is a possibility of breaking so I am looking toward fixing it. On updating to the latest version it will break, I’ll work on fixing this through the documentation providing for the breaking changes.

Implementation of Asset Modules
In v5 we can use Asset Modules which is a type of module that allows one to use asset files (fonts, icons, etc) without configuring additional loaders. It is used as a replacement for raw-loader, url-loader & file-loader.

Our project uses url-loader which is deprecated for Webpack v5.
It will be replaced with the alternative

  • asset/inline: Equivalent to url-loader.
  • asset: Equivalent to url-loader with a limit size.

Changes w.r.t the same goal made or attempted so far
Updated Babel Packages.
Removed babel/polyfill dependency because it’s deprecated. And replaced it with

import 'core-js/stable';
import 'regenerator-runtime/runtime';

babel/eslint dependency replaced with babel/eslint-parser

  • Dropping jQuery
    • Vanilla JS is faster than jQuery even though it is said that jQuery is better for DOM manipulation than Javascript.
    • It also adds additional overhead to your web pages. There are a lot of things you can accomplish with JavaScript that jQuery can probably make easier, but keep in mind that including another file instead of writing 10 lines of JavaScript code adds to your web page's overhead.
    • Another cause could be that you're conducting minor tasks with JavaScript, such as transferring data to the server without using the DOM. jQuery isn't used in this case. Because you can do anything with JavaScript, it's a good idea to skip JQ completely.

To complete the task, jQuery wraps up a bunch of operations. Every operation and the time it took to perform it is displayed in the Script stack section. The implementation of the same is in the PR which converts jQuery in utils/courses.js to Vanilla JS.

I'll be performing the same translation for the rest of the files where jQuery is used some of the files where I have identified the usage of jQuery are modules in app/assets/javascripts/surveys, survey-admin.js, survey-results.jsx, survey.js, app/assets/javascripts/utils/users_profile.js and styleguide.jsx

  • Replacing react-motion with react-spring

The library react-motion is unmaintained and currently provides animations for when a user is reordering blocks in a course Timeline. It currently throws warnings and is likely to stop working with a future version of React. So a good alternative to this would be react-spring. I have tried to implement the same in this PR which is in progress.
A few things that have been established as alternatives

    • <Motion /> tag is replaced with <Spring />
    • And a possible alternative for style object can be SpringRef
    • While attempting to migrate, I had faced a few issues cause there wasn’t documentation for migration causing me to run into a bug, I'll further inspect this issue and will try to overcome it, otherwise, I plan to rewrite the code with respect to the draggable list defined by react-spring itself here.
  • Migrating away from MomentJS

We are essentially working on this migration because it’s been established that MomentJS is heavy, slow, mutable and hard to debug and has been considered a legacy project in maintenance mode by the Moment’s team.

You can check posts like You don't (may not) need Moment.js which talks about the same in detail along with the alternatives.

Also on further reading into the issue, we can identify that date-fns is an alternative for MomentJs, replacing this will significantly help us reduce our bundle size.

I initially felt like DayJs would have been a good alternative here but on further analyzing the PR, I realized that the attempt wasn’t successful but also allowed me to establish the dependencies of charts.js and moment.recur which would have to be replaced as well.
charts.js is used in the file app/assets/javascripts/charts.js which further has chartkick which is dependent on the same, I plan to study more about the alternatives but as of now, D3.js looks like a good option.

A few things I'll follow
I plan to use eslint-plugin-you-dont-need-momentjs to find all instances of Moment in the code and replace them with the alternative. So far I can see app/assets/javascripts/components/common/date_picker.jsx and app/assets/javascripts/utils/course_date_utils.js using the same.
On reading a few articles, it is also suggested to create a date-time service that hides the library one is using. So that in case one needs to change it in the future, then only one file has to be dealt with.

  • Replacing ListJS

As an ongoing task of removing jQuery as a dependency, here we have to replace ListJS which uses jQuery as a dependency with an alternative. One alternative is GridJS.

This seems to be quite straightforward but it would cause a change in the UI w.r.t. to the table sorting indicators.

So currently, what ListJS does is that it has the attributes data-default-order (mentions the default sort order) and data-sort (attribute on a clickable sort button should match the column name) which one has to mention in HTML for the sorting to take place. This can be seen in app/views/courses/_campaign_courses.html.haml. One doesn’t have to mention the same in GridJS, as the sorting only takes place after the initial click.

One thing I find advantageous with the alternative is that it will be getting rid of a lot of lines of code that can be handled in a sophisticated way. This will be a tedious job to do but I do believe this will be a good addition to the codebase.

Another alternative for the longer term would be to replace all the places that use list.js with React components.

  • Further Improvements

Implementation of Rails UJS
In the project there have been some changes made where jQuery.ajax() is replaced with fetch API. But I want to replace these AJAX requests with Rails UJS.
This package rails-ujs was moved into Rails itself in Rails 5.1.0. And our project uses Rails 6.1.4.7 hence this wouldn’t be an additional import. Also I have noticed that we already use rails-ujs in app/assets/javascripts/main.js and app/assets/javascripts/main-coverage.js.
According to the documentation, Rails uses a technique called Unobtrusive JavaScript to handle attaching JavaScript to the DOM. This is generally considered to be a best practice within the frontend community. So issues one might run into would be.

Let’s take a look at a small code block.

// jQuery
$.ajax({
  url: "/books.json",
  type: "get",
  data: "",
  success: function(data) {
  }
})

// With rails-ujs
Rails.ajax({
  url: "/books.json",
  type: "get",
  data: "",
  success: function(data) {},
  error: function(data) {}
})

Another thing worth noting would be that one gets InvalidAuthenticityToken error on jQuery post request, causing you to manually submit your CSRF token, but this is handled automatically by Rails.ajax.

Taking advantage of New JSX Transform
With the introduction of JSX Transform one doesn’t need to import React to use JSX anymore. On trying to get rid of the React import from app/assets/javascripts/components/common/wikidata_overview_stats.jsx, one would get the error React must be in scope when using JSX.
This would be an error from ESLint and it would be advisable to disable the rules of react/jsx-uses-react and react/react-in-jsx-scope as our React v17 and up.

Using ​​<React.StrictMode> to solve potential problems
Apparently it is noticed that most of us don’t use React.StrictMode which was added as a feature in 16.3. This doesn’t render anything on the UI but it is a tool for highlighting potential problems in our application hence quite vital.
Why is it a good practice? Well, even though React 18 is currently beta, it has implemented some Concurrent Features, we can think of this as a multi-threaded approach hence using StrictMode is a good way to get rid of old habits, as it only affects the development side.
I implemented this in app/assets/javascripts/components/app.jsx and it resulted in warnings on the browser console, which were related to -

  • legacy string ref API

We get the warning “A string ref, “component”, has been found within a strict mode tree.” on visiting a course.
The issue with this is that they are resolved synchronously hence in concurrent rendering this would fail.
I plan to fix this with the use of createRef() which is recommended.

  • deprecated findDOMNode

The warning we get “findDOMNode is deprecated in StrictMode.”. The use of findDOMNode is usually not needed as one can directly create a ref like mentioned above and forward the reference to our custom component, in our case its the DatePicker which is being referred.

  • components with unsafe lifecycles

We particularly get the warning “Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code”.
One can notice that this is a legacy lifecycle method that has an issue and can be replaced with getDerivedStateFromProps() method. Apart from this componentWillMount() and componentWillUpdate() are also flagged unsafe.
Safer replacements are getSnapshotBeforeUpdate() and getDerivedStateFromProps() which were newly introduced.

Deliverables

Describe the timeline of your work with deadlines and milestones, broken down week by week. Make sure to include time you are planning to allocate for investigation, coding, deploying, testing and documentation

Expected size of the project: 350 hours

TimelineWeekDescriptionPriority
Community Bonding Period May 20, 2022 - June 12, 2022I’ll interact with my mentor and other contributors. I’ll focus on my implementation plan and discuss it with my mentor in these 3 weeks. This period is essential in order to set attainable goals which will help me throughout the coding period and prevent me to go astray.Medium
Phase I Evaluation June 13, 2022 - June 20, 20221In the first week I’ll attempt to migrate to Webpack v5 from v4. I’ll find the deprecated or unmaintained dependencies and their alternatives. Since I have already established a few breaking changes, I’ll deal with them first which will help me build confidence to work on the remaining changes.High
June 21, 2022 - June 28, 20222On running a single build, it would be my responsibility to carefully analyse errors & warnings according to the levels in docs. I’ll be in touch with my mentor to solve any issues that I face.High
June 29, 2022 - July 6, 20223On successful migration to version 5, I’ll then finalize the changes after discussing with my mentor. I’ll work on recommendations or changes if any, and then start to replace unmaintained react-motion with react-spring.Medium
July 7, 2022 - July 14, 20224I’ll discuss the changes with my mentor and any concerns regarding the change in UI due to replacement.Low
June 15, 2022 - July 22, 20225I’ll now work on further improvements like identifying where importing React won’t be necessary keeping the new JSX Transform in mind. Now I will turn on the Strict Mode for React and identify potential problems and solve them. This includes replacing legacy string ref API, deprecated findDOMNode and unsafe lifecycle methods with possible alternatives.Low
Phase I Evaluation Submission July 23, 2022 - July 25, 20226I’ll try my best to complete all the essential things required before the deadline. I’ll blog about my Phase I GSoC experience at the same time on Medium. I will document in-depth the work done in Readme.md file so that future developers can understand my work.Medium
July 30, 2022 - Aug 7, 20227From this week my final evaluation starts, and I will now work on dropping jQuery as a dependency. This will further facilitate the replacement of jQuery.ajax() calls with Rails.ajax() of rails-ujs.High
Aug 8, 2022 - Aug 15, 20228On replacing jQuery from files, I will then move on to remove List.js which uses jQuery as a dependency. Also at the same time identifying any other packages dependent on jQuery.High
Aug 16, 2022 - Aug 23, 20229I’ll verify the changes with my mentor and also take constant feedback in case of any issues. I’ll now migrate away from MomentJS and attempt to replace it with date-fns. The migration will also require me to drop chart.js and chartkick, as it’s dependent on the same, hence now I’ll try to integrate D3.js here.Medium
Aug 24, 2022 - Aug 31, 202210I aim to use this week to complete any backlog work from previous weeks. I’ll finalize all the changes with my mentor because it’s very crucial to do so in order to ensure the proper working of the application. I’ll further use this time to fix bugs in the application and also implement the suggestions I might get.Medium
1 Sep, 2022 - 4 Sep, 2022 (Final Evaluation Week 5 Sep, 2022 - 8 Sep, 2022)11Testing the changes which were made to the website is essential, hence I will do that this week. This includes writing necessary test cases, which can be black box or white box testing, depending on what is needed, hence I will ensure to make the website bug free from all the changes done throughout the summer. I'll use this time to complete the remaining documentation of the work done in the final phase, so that the developers who will extend this project have a better idea.Medium
9 Sep, 2022 - 12 Sep, 202212I'll conclude my GSoC journey with my detailed blog on Medium about my entire experience.Medium

Participation

Describe how you plan to communicate progress and ask for help, where you plan to publish your source code, etc

  • I have joined the Slack group for WikiEduDashboard since January. I am also available through Email and Zulip. I will also be up for a planned video session.
  • I am consistently communicating with my mentor Sage Ross and asking for help as required with regard to my Pull Requests or general questions related to WikiEduDashboard.
  • I have been an active user of Git VCS for 3 years. I initially started off with GitLab and now I’m a proficient user of GitHub and I’m willing to communicate through GitHub and Phabricator as well.
  • I have been following a procedure where I publish my source code on GitHub itself, by creating separate feature branches and uploading the code consistently. And then creating pull requests for the same and I plan to continue this practice.
  • I plan to blog about my experience on a weekly basis and post on my Medium.
  • I am open to helping new contributors to get started and review pull requests wherever I can.

About Me

Tell us about a few:

  • Your education (completed or in progress)

I’m a pre-final year student pursuing B-Tech in Computer Science Engineering from Veermata Jijabai Technological Institute (VJTI), Mumbai. My course spans four years i.e. 8 semesters, I’m currently in my 6th semester.

  • How did you hear about this program?

I heard about this program through a committee that I’m a part of in my college called SRA (Society of Robotics and Automation). It consists of a few students who have participated in this program before and they had shared their experiences. It was through them that I really got interested in the concept of open source and I believe this will be a great opportunity for me to be a part of this community by actively contributing.

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

I have my exams till May 20, 2022 after that I will be readily available. I'll be able to give 40 hours or more per week till August 19, 2022. After this date, my exams will start but the majority of the work will be done hence I will be able to manage.

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

I’m eligible for GSoC and Outreachy and I’m applying under the same organization. In the case of Outreachy, I’m applying for the project Add support for tracking specific namespaces to Programs & Events Dashboard under the mentor Sage Ross (@Ragesoss). I really hope that I'll be able to start my journey with open source and be a part of this community.

  • What does making this project happen mean to you?

I initially used to be quite intimidated by the idea of open-source contributions, it felt like something beyond my reach. This is the first time I have ever experienced the world of open-source and I can’t be more grateful for the help I received and the constant guidance from the community which kept my spirits high. When I first approached this project WikiEduDashboard it definitely took a while to understand the complexity of the project at the same time learning technologies I wasn’t familiar with before. Even though I ran into a lot of errors while setting up the development environment and had a hard time understanding the code base, I felt an attachment towards the cause of the project which is to bring free educational content to the world hence making me determined to submit my first Pull Request. And after that, it felt like with every PR merge, you get a hit of dopamine. Making this project happen would not only mean that I would be an integral part of this community but also get the opportunity to interact with exceptional people who are contributing to a noble cause that is globally benefitting millions of us who rely on these wikis.

Past Experience

  • Please add links to any feature or bug fix you have written for a Wikimedia project during the application phase.
  • Describe any relevant projects that you've worked on previously and what knowledge you gained from working on them.
  • Describe any open source projects you have contributed to as a user and contributor (include links).

I have been passionate about programming since my second year of my Associate’s in Computer Engineering (2018). And have developed a fanaticism towards data structures and Java in particular. I, later on, started experimenting with Web Development and found it quite engrossing. I always wanted my code to be a part of something bigger and have an effect on a daily user's experience. I only recently found out about the open-source community. I have tried to get my hands dirty in the same, I appreciate the guidance I got through my mentor while contributing, which allowed me to write clean code and detailed Pull Requests which is very important in any organization.

Technical Skills

  • Languages: Java (Core, Advanced, Swing), C, C++, HTML/CSS, SCSS, JavaScript, jQuery, NodeJS, Python, Kotlin
  • Database: MySQL, SQLite, MongoDB, Microsoft SQL Server
  • Developer Tools: Visual Studio Code, Sublime Text 3.1.1, Adobe Photoshop, Adobe XD, XAMPP 3.2.2, NetBeans IDE 8.2, Android Studio
  • Technologies/Frameworks: Git, GitHub, ReactJS, Express, Mongoose, Heruko, MongoDB Atlas, NPM, Linux, ROS, Gazebo
  • Concepts: OOPs, RESTful API and MVC

Among Operating Systems I majorly work with Ubuntu (Pop!_OS 20.04 LTS) or Windows 10 and I’m very comfortable with the Git Version Control System and have been actively using it in my projects for the past 3 years.

Relevant Projects

  • Phila Tour Website
    • A personal project to develop a web application for a touring website in order to better grasp module blunder. The main focus of this project was to learn how to automate different components of the application using GulpJS and understand the npm package manager of NodeJS.
    • I had actually implemented this project in order to better understand my GSoC project as it uses the same technology as Webpack and because it’s a small project, I have integrated GulpJS into it.
    • Repo - https://github.com/Sahethi/phila-tours
  • Weather App
    • Developed a weather forecasting application from scratch using jQuery.
    • Used Open Weather Map API to fetch the JSON data and display it on my web application accordingly.
    • Processed user-inputted data which would be the city for which the forecast is requested.
    • Repo - https://gitlab.com/dgsahethi/weather-app
  • Get It Done
    • Collaborative project on an application that allows you to prioritize your tasks and perform basic functionalities like creating and deleting task cards which is also available in dark and light modes.
    • Processed user-inputted information in the local database of the app to dynamically create cards of tasks and set its mentioned priority and sort it accordingly.
    • Repo - https://github.com/Sahethi/Get-it-done/tree/master
  • Yelp Camp
    • Worked on creating a camping website in a Yelp Style format. Here the user is allowed to log in, register and perform CRUD operations by posting reviews/comments, and editing the same. Designed and implemented the project with the help of MongoDB to store reviews, comments, data and user credentials along with the camp information.
    • Repo - https://github.com/Sahethi/yelp-camp

Pull Requests

Issues

Any Other Info

Add any other relevant information such as UI mockups, references to related projects, a link to your proof of concept code, etc

Milestone.png (700×1 px, 87 KB)

Event Timeline

dgsahethi renamed this task from Insert project title here to GSoC 2022 Proposal: Modernize JavaScript build process and dependencies for Wiki Education Dashboard .Apr 4 2022, 1:58 PM
dgsahethi claimed this task.

Hi! I am Srishti, one of the org admins - it's great to see your interest in applying to GSoC with Wikimedia! You can safely ignore this message if you have already followed our participants' guide. As you develop your proposal, we want to ensure that you follow the application process steps: https://www.mediawiki.org/wiki/Google_Summer_of_Code/Participants#Application_process_steps, primarily communicate with project mentors, integrate their feedback in your proposal, adhere to the guidelines around proposal submission, contribute to microtasks, etc. Let us know if there are any questions!

As the GSoC deadline is soon approaching in less than 24 hours (April 19, 2022, 18:00 UTC), please ensure that the information in your proposal on Phabricator is complete and you have already submitted it on the Google's program website in the recommended format. When you have done so, please move your proposal here on the Phabricator workboard https://phabricator.wikimedia.org/project/board/5716/ from "Proposals in Progress" to the "Proposals Submitted' column by simply dragging it. Let us know if you have any questions.

Gopavasanth added a subscriber: Gopavasanth.

@dgsahethi 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 75 quality applications, and we could only accept 10 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 2021 have become Wikimedia maintainers, contractors and even GSoC students and mentors this year!

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: https://www.mediawiki.org/wiki/New_Developers.

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