**PROFILE INFORMATION**
**Name:** Manasa Kashyap
**Github:** Manasa2850
**Location: **Bengaluru, India
**Typical working hours:** 9AM to 6PM IST
**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 the main aim of this project is to improve the app’s JavaScript build pipeline and reduce the bundle size. One of the ways of doing 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:
- Replace jQuery (package.json) with Vanilla JavaScript – This will reduce the strain on pages’ load times. Vanilla JavaScript depends on no packages and requires zero build tools. This will make the app much faster.
- 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.
- Removing Gulp dependencies – Gulp dependencies in package.json can be replaced with plugins and added to webpack.config.js
- Integrating the internationalization (i18n) files into Webpack – i18n files can be integrated with Webpack by using an i18n-loader and i18nWebpackPlugin.
Few other ways to reduce the Webpack bundle size that I would like to implement:
- 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**
**Phase 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
**Phase 1 (May 19 to May 29)**
- Remove dead code from the bundle.
- Add the bundle analyser tool.
- May 29: Initial feedback
**Phase 2 (May 30 – July 10)**
- Convert jQuery code to Vanilla JavaScript.
- Replace Gulp dependencies in package.json with Webpack plugins.
- Remove Gulp dependencies wherever possible.
- Perform scope hoisting.
- Analyse using the bundle analyser tool and make required optimizations.
- Testing everything done so far.
- July 10: Mid-point feedback due
**Phase 3 (July 11 – August 19)**
- Perform code splitting and split code into various bundles.
- Integrate i18n files into Webpack.
- Add fingerprints to i18n files.
- August 19: Final feedback
**ABOUT ME
Education**
I am in my second year of college.I am pursuing Integrated Mtech (5 year B.Tech + M.Tech) from The International Institute of Information Technology, Bangalore.
**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?**
Working on this project will give me an immense sense of satisfaction of contributing to a real world application and improving it. In this way I can contribute to WikiEduDashboard’s mission of providing educational resources to everyone across the globe.
**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