PROFILE INFORMATION

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

SYNOPSIS

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)
@Ragesoss

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

IMPLEMENTATION DETAILS

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.json – jquery 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.

TIMELINE

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

ABOUT ME

Education
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
Link: https://info.stppeify.com/
(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: https://github.com/ifmeorg/ifme/pulls/Manasa2850

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
Link: https://github.com/Manasa2850/Zense-Project

My contributions to WikiEduDashboard

1. https://github.com/WikiEducationFoundation/WikiEduDashboard/issues/3648
2. https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/3785
3. https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/3699
4. https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/3678
5. https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/3636
6. https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/3635
7. https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/3771