Page MenuHomePhabricator

Improve Wiki Education Dashboard javascript build pipeline and reduce bundle size
Closed, ResolvedPublic

Description

The Wiki Education Dashboard is a Ruby on Rails + React app that runs dashboard.wikiedu.org as well as outreachdashboard.wmflabs.org: https://github.com/WikiEducationFoundation/WikiEduDashboard

The app has a JavaScript frontend built mostly in React, but it's evolved gradually over the last several years, through a number of trends in JavaScript frontend technology. The build uses both gulp and webpack, and there are a number of libraries — including jquery — that should be updated or in some cases removed. The JavaScript build also doesn't currently make use of code splitting, which could potentially improve performance for many users.

The focus of this project will be to improve the Dashboard's build tooling, possibly including:

  • replacing the use of jQuery with vanilla JavaScript
  • removing unnecessary dependencies and reducing bundle size
  • configuring the app to Webpack's code splitting features
  • integrating the internationalization (i18n) files into Webpack and adding fingerprinting to the i18n files
  • reducing the use of gulp in the build pipeline, or removing it altogether
  • other ways to improve the build that we haven't thought of yet!

This project requires knowledge of JavaScript; experience with React and with configuring and using Webpack will be very beneficial. Knowledge of Ruby and Rails is also helpful, but not necessary.

Event Timeline

Ragesoss created this task.Feb 5 2020, 11:55 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 5 2020, 11:55 PM

Hello everyone, I'm Bharath from the National Institute of Tiruchirappalli, India (NIT Trichy). I would like to work on this issue.

  • Surely, removing jQuery and unnecessary modules reduces the build size and if jQuery plugins are not used then it is very easier to replace jQuery with VannilaJS.
  • If the bundle size is very large, we can split it into multiple chunks. Separating bundles into custom and vendor chunks reduces the size even more.
  • If we have multiple entrypoints to the application, splitting the bundle based on their entrypoints reduces the build time and loading time.
  • Gulp can be removed and can be replaced with Grunt but even that won't reduce the size much. But removing gulp and managing all tasks with webpack itself will reduce the size I guess.

First I will set up the project and get used to the code and will work on the first issue. It would be nice if someone approves and guide me in setting up the project. Thank you!
You can checkout my other public works in https://github.com/BharathKumarRavichandran. :)

Hi! If you sent me your email address, I can invite you to the project Slack where you can ask for help if you run into any trouble setting it up. Here are the setup instructions: https://github.com/WikiEducationFoundation/WikiEduDashboard/blob/master/docs/setup.md

Yeah sure, my email address is bharathkumarravichandran@gmail.com. And thanks for the setup instruction and I will ping you after I finish setting up the project.

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.

@Ragesoss: Could you please answer the last comment? Thanks in advance!

Ragesoss closed this task as Resolved.Wed, Feb 10, 4:42 PM
Ragesoss claimed this task.