Google Summer of Code with phpMyAdmin — Introducing modern JS features and tools

I’m very happy to announce that I’ve been working with phpMyAdmin this summer under Google Summer of Code program and my project for the same is “Introducing modern JS features and tools” into phpMyAdmin’s code base. The duration of project will be nearly four months (starting April, 23 to August 14).

The project involves introducing package manager for managing modules so that the modules can be updated easily, introducing ES6 into the code base, babel for compiling ES6 to ES5 which the browsers support, webpack for creating minified files which can be served in production mode and eslint for code linting to find out problematic patterns or code that doesn’t adhere to certain style guidelines.

phpMyAdmin’s javascript code is written very well in terms of logic and best practices and very well documented but there are some problems with the current code, many of the variables are globally exposed and the external libraries like jquery are used as a downloaded library. So every time a new release is there, these files need to be replaced with the new files manually.

The global variables can be reduced by using some modern javascript ES6 features like module import and export, block scoped variables and using classes and closures for interdependent files which is not there right now.

The problem of manually updating files can be removed by using a package manager like npm or yarn, which have commands like “npm update” to update the existing modules.

As the javascript code base of phpMyAdmin is very large, it might not be possible to revamp the whole code base in three months, so my major focus will be on bringing the new code with new features in such state that the existing code and the new code can me compiled together and can be used in production.

By the end of GSoC program, I expect to implement the aforementioned tools and features without breaking the build status and consistency of the code base and convert as much of ES5 code to ES6, as possible.

For future(not part of the program): There can be some other features which can be implemented like unit testing of the functions and type check of various variables which will help in reducing and easily identifying errors related to type check.