Developer Workflow | Webpack Bundling + React Proposal

[kamescg]

I would like to officially propose:

1. Adding Webpack Bundling to the developer workflow
2. Selecting React as the core UI library and Z (https://github.com/KamesCG/Z) for any non-react features and DOM manipulation.

I've created a webpack branch, which.... drum roll.... bundles the Chrome Extension.

https://github.com/KamesCG/chrome_ext/tree/webpack

yarn <--- Install Dependencies
yarn build <--- Build Chrome Extension

Basically it's a modified create-react-app boilerplate, which has been ejected and rebuilt for bundling a Chrome Extension specifically. Additionally, Webpack has been upgraded from 2.X to 3.x for smaller, more optimized bundle sizes.

Before addressing issue like https://github.com/gitcoinco/chrome_ext/issues/13 I think it might be worthwhile to establish a developer workflow for the more rich features. In other words, it could be worthwhile to lay the foundation with React, instead of jQuery. Which will most likely cause pain long-term as more and more features get added to the Browser extension.

For example, any features or design changes proposed in a thread https://github.com/gitcoinco/chrome_ext/issues/24 can be more easily created and maintained if a more modern UI system is chosen, such as React.

Additional error checking, linting, source mapping and developer best practices can also be enforced during the bundling process.

[owocki]

@rafaelfragoso thoughts?

[kamescg]

Can we make a new experimental branch and do a pull request?

[owocki]

just created a b ranch called stage

[kamescg]

Should I do a pull request for the Webpack Bundle + React implementation on this branch or use the staging branch to stay within the current Chrome Extension architecture?

[owocki]

either is fine with me..