Page MenuHomePhabricator

Outreachy 2020 Proposal: Improve Wiki Education Dashboard JavaScript build pipeline and reduce bundle size
Closed, DeclinedPublic



Name: Manasa Kashyap
Github: Manasa2850
Location: Bengaluru, India
Typical working hours: 9AM to 6PM IST (flexible)


Short summary describing your project and how it will benefit Wikimedia projects
The Wiki Education Dashboard is a web application that supports Wikipedia education assignments, edit-a-thons, and other editing projects. It provides data and course management features for groups of editors — instructors, students, and others — who are working on Wikipedia, Wikidata, and other Wikimedia wikis. Users log in with their Wikipedia accounts (through OAuth) and allow the Dashboard to make edits on their behalf. The Dashboard automates many of the standard elements of organizing and participating in a Wikipedia classroom assignment, edit-a-thon, or other wiki contribution campaign.

The app has frontend built in React whereas backend is predominanatly Ruby on Rails. The build currently uses gulp, a toolkit for automating time-consuming tasks and webpack, a module bundler which can take care of bundling alongside a separate task runner.
However, there are a lot of disadvantages associated with Gulp:

  • Large number of dependencies
  • Multiple tasks cannot be performed using Gulp plugins

The current JavaScript build also doesn’t make use of code splitting which could potenially improve the performance for many users.
So my main goal for the project would be to improve the app’s JavaScript build pipeline and reduce the bundle size. I would like to do this is by replacing Gulp completely with Webpack.

Possible Mentor(s)

Have you contacted your mentors already?
I have discussed several ideas and issues with my mentor Sage Ross via the Slack channel.


These are the following features I would like to implement:

1. Replace jQuery with Vanilla JavaScript
How to:

  • There are two jQuery libraries used in this project as shown in package.jsonjquery and jquery-ui which need to be converted to Vanilla JavaScript
  • jQuery plugins used for the Universal language selector (jquery.uls.js) need to be converted to Vanilla JS.

2. Removing Gulp dependencies - Gulp dependencies can be replaced with plugins and added to webpack.config.js
How to:

  • All the gulp files are present in gulp/tasks. We need to replace all of these with Webpack files.
  • We need to replace gulp tasks present in webpack.js with Webpack libraries.
  • Adding dependencies to webpack.config.js

3. Integrating the internationalization (i18n) files into Webpack
How to:

  • i18n files can be integrated with Webpack by using an i18n-loader and i18nWebpackPlugin.
  • i18n-loader is used to load all the locales at once and use them synchronously. This improves speed of the app.
  • i18nWebpackPlugin – This plugin creates bundles with translations integrated so we can directly use the translated bundles.

4. Configuring the app to Webpack's code splitting features – Using code splitting will definitely enhance the performance of the app. Code can be split into various bundles and loaded as required.
How to:

  • Shift the Webpack related dependencies present in Gulp (package.json) to webpack.config.js
  • Prevent duplication of code by using the SplitChunksPlugin to dedupe and split chunks.
  • Using dynamic imports
Some ideas that I have to further reduce the Webpack bundle size:
  • Scope Hoisting – wrapping modules into functions isolating their scope while imports get transpiled into variables holding the result of a Webpack require function. Adding webpack.optimize.ModuleConcatenationPlugin() to webpack.config.js reduces the bundle size and increases efficiency to a great extent.
  • Using a bundle analyser tool – This provides a visualization of what is present in the bundle. This will help us replace large bundles with a minimalistic version or a more specialized alternative.
  • Tree Shaking – It is the process of removing dead code from our bundle. This helps to optimize our bundle.


Week 0 (Apr 27 to May 18)

  • Community bonding period.
  • Discuss with the mentors about the bundle analyser tool to be used.
  • Discuss with mentors about libraries which are not being used currently and replacement for other Gulp files.
  • Continue solving existing bugs

Week 1 (May 19 to May 25):

  • Remove dead code from the bundles.
  • Remove unnecessary dependencies i.e when the dependencies are not being used anywhere in the codebase

Week 2 (May 26 to June 1):

  • Convert jQuery code to Vanilla JavaScript.
  • May 29: Initial feedback due

Week 3 (June 2 to June 8):

  • Replace Gulp dependencies in package.json with Webpack plugins.
  • Add required dependencies to webpack.config.js

Week 4 (June 9 to June 15):

  • Perform scope hoisting.
  • Analyse using the bundle analyser tool and make required optimizations.

Week 5 (June 16 to June 22):

  • Review the work until then
  • Feedback + Corrections
  • Documentation

Week 6 (June 23 to June 29):

  • Integrate i18n files into Webpack.
  • Add fingerprints into i18n files.

Week 7 (June 30 to July 6):

  • Remove unnecessary gems from the rails bundle.
  • Analyse using the bundle analyser tool and make required optimizations.

Week 8 (July 7 to July 13):

  • Mid-point feedback due
  • Review the work until then
  • Feedback + Corrections
  • Documentation

Week 9 and 10 (July 14 to July 27):

  • Perform code splitting – divide the code into several bundles.
  • Prevent duplication of code by using the SplitChunksPlugin to dedupe and split chunks.
  • Use dynamic imports

Week 11 (July 28 to August 3):

  • Separate loadash to a separate chunk and remove dead weight from main bundle.
  • Remove unnecessary dependencies from lodash

Week 12 and 13 (August 4 to August 19):

  • Analyse using the bundle analyser tool and make required optimizations.
  • Feedback + Corrections
  • Documentation
  • Buffer time to finish any pending tasks
  • August 19: Final evaluation


I am a second year student currently pursuing Integrated Masters in Computer Science at the International Institute of Information Technology, Bangalore. I’m extremely passionate about open source and am an active contributor to projects such as if-me and WikiEduDashboard. I like contributing to Open Source because it teaches one to collaborate and contribute remotely. It also helps us gain industry experience while being in college since we write production level code.

I am interested in web development and have worked with several languages and frameworks like React and Ruby on Rails. My other areas of interest are Machine Learning and Cyber Security.

How did you hear about this program?
I heard about this program from my seniors in college who have previously participated in this program. I love contributing to Open Source and hence have been contributing to WikiEduDashboard from the last four months.

Will you have any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?
I will be able to work for 40 hours a week. I have my college holidays from May 12th to August 1st. Even once college starts I will be able to work for 40 hours a week since the course is not very hectic in the beginning of the semester.

What will working on this project mean to you?
Wiki Education Dashboard provides tools that help instructors and students share their knowledge and track their contributions. In today’s world where sharing knowledge remotely has become a norm, Wiki Education Dashboard has contributed to this substantially. With the help of this dashboard, more than 73,000 students have benefitted from a wide range of courses.
The fact that I can contribute and improve this app which enables people across the world to study together irrespective of their geographical location and economic background is something that gives me an immense sense of satisfaction.

Relevant Projects and Experience

1. Frontend developer internship - I interned in a startup called New Age Analytics for 2 months. My primary task was to convert a web application for schools which was built in Meteor Blaze to React. I also worked on improving the UI.
Tech Stack: React
(I worked on converting the Sign In page and the Students page, where they can view feedback and test results, to React).

2. Open Source contributor at if-me - I have fixed bugs and added several features to this mental health application if-me.
Tech Stack: React, Ruby on Rails
Link to my contributions:

3. JavaScript Simulations – Created a simulation of a spring-mass system. The user can change the values of mass, spring constant etc and the spring-mass system moves accordingly.
Tech Stack: JavaScript, HTML, CSS

My contributions to WikiEduDashboard


Event Timeline

Pavithraes closed this task as Declined.EditedMay 5 2020, 8:02 PM

@Manasa_Kashyap We are sorry to say that we could not accept your application this time. Please do not consider the rejection to be an assessment of your proposal. We received around 27 quality applications, and we were not able to give all applicants a slot that would have deserved one. 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 candidates who we did not accept in 2019 have become Wikimedia maintainers, contractors and even Outreachy interns 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 the next Outreachy round, we look forward to your participation!

@Pavithraes I would love to know in detail why my proposal was not accepted and how I can improve it next time.
I had a great time and learnt a lot contributing to WikiEdu Dashboard. I will continue contributing to this community!
Thanks for your time!

@Manasa_Kashyap Your project details and timeline look good to me. I also see that you've made some great contributions to the project, thank you for that! The GSoC student accepted for this project (see proposal) has been contributing to WikiEdu Dashboard for over a year and has ~45 merged PRs, which made their proposal super strong.

WikiEdu Dashboard has been participating in Wikimedia's outreach programs for a very long time and is highly likely to participate in the next round. I'd suggest you continue working with the project team. Your contributions will prove extremely valuable for any Wikimedia (or generally any FOSS) project that you choose to apply to in the upcoming rounds. I hope to see you as an intern soon! Cheers! :)