Givewp: Update JS with ES6 standard code

[DevinWalker]

Issue Overview

Modernizing our JS is important to ensure we're up to date with current standards and

Future Stack

• ES6
• Babel

Questions:

• Webpack over gulp?
• jQuery?

[kevinwhoffman]

Here's my recommended plan for transitioning from Gulp to webpack and cleaning up our asset pipeline along the way.

Stack

• webpack - replaces Gulp as a bundler for JS/SCSS/images/fonts
• npm scripts - replaces Gulp as a task runner for watches/builds
• ES6/Babel - lets us write modern JS, but still ensure it works everywhere
• Yarn - manages dependencies and also generates a lock file for version control
• ESLint - catches JS issues as it's being written
• StyleLint - catches CSS issues as it's being written (works with Sass)
• EditorConfig - improves consistent formatting across teams

You can see an example of this stack in the WP Business Reviews repository.

Phase 1

Phase 1 includes high-level front-end architecture changes. We're setting up the directory structure and pipeline, but we're not worried about refactoring individual assets.

1. Audit existing assets to see if scripts/styles can be broken down better. For example, do all front-end scripts need to be in one file, or can they be broken up?
2. Introduce webpack.config.js to replace gulpfile.js
3. Split the assets directory into assets/src and assets/dist.
   
   
   
   • assets/src
     
     
     
     
     
     • js - Source JS modules
     
     
     
     • css - Sass partials
     
     
     
     • images - Source images
     
     
     
     • fonts - Fonts
     
     
     
   
   
   • assets/dist
     
     
     
     
     
     • js - Compiled/minified/concatenated JS
     
     
     
     • css - Preprocessed/minified/concatenated CSS
     
     
     
     • images - Minified images
     
     
     
     • fonts - Fonts
     
     
     
   
   
4. Ignore the dist directory which will remove minified assets from version control. Instead build the directory using an npm script.
5. Update the WordPress enqueue calls to use the new directory structure.

Phase 2

Phase 2 includes refactoring of individual assets to a more modern, class-based architecture made possible by ES6 and webpack. Most of Give's JS assets are currently a collection of expressions that work together without much structure. Furthermore a function in one file cannot be easily used in another file due to every file having its own scope.

If we instead write JS as classes and import them as modules throughout the Give asset pipeline, then we can start to treat our JS as series of interdependent modules rather than a collection of independent files.

Benefits

• Excluding minified assets from version control will result in a cleaner staging area and commit history. Say goodbye to minified files cluttering the staging area and Ran Gulp commits every time you update assets. This new approach will also ensure minified assets are never forgotten since they are generated by a build script prior to release.
• Webpack modules and JS classes mean we can write cleaner and better organized JS where dependencies are handled automatically within the modules themselves. This means we don't have to write complicated globbing patterns like you do with Gulp.
• Tree shaking - Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. The gif at the top of this page shows a good example of tree shaking. The module size goes from 70kb to 2kb by only importing a single function, instead of the whole lodash library. This is something we can take advantage of with the webpack pipeline.
• Webpack is essential for React development, which we will be embracing as Gutenberg nears release. We might as well use it for the rest of Give.
• npm is the standard for node packages, and even the Bower team is recommending transitioning to npm/Yarn. We want to use tech that is maintained and has a long road ahead of it. npm is the present and future as far as I can tell.

Learning Materials

• webpack documentation - good breakdown of key concepts
• Laracasts webpack course - good video introduction from the ground up
• SurviveJS eBook - a more advanced eBook that assumes integration with React
• webpack learning academy

[raftaar1191]

Move https://github.com/WordImpress/Give-Form-Field-Manager/pull/201/files#diff-a0b8932df51abf64f7457c93c4e403f2R3127 get_parameter to Give Core when we reform the Give Core JS

We also have a function related to this type In Give Admin JS
https://github.com/WordImpress/Give/blob/release/2.0/assets/js/admin/admin-scripts.js#L2945 get_url_params

[kevinwhoffman]

Closing as Phase 1 of the webpack integration is complete in Give core 2.1.0. Phase 2 (refactoring existing code) can be addressed in smaller targeted issues.