Webpack UI — An Opensource Design Casestudy
This case study was first published on keneohiaeri.com in September 2019.
Webpack is infamous for being a bundler that’s not easy to configure. To overcome this issue, I designed a UI for webpack.
INTRODUCTION
Webpack is a great front-end development tool. It is a module bundler that works with the most modern of front-end workflows including Babel, ReactJS, CommonJS, among others.
During stand-ups, I have had a fair share of sitting through uncomfortable arguments between developers about using either wepack-cli or create-react-app; and the frustration that comes after when webpack wins the argument.
CHALLENGE
Every now and then on Twitter, you’ll probably hear people make jokes about the configuration of webpack being hard. It’s no new use that webpack hasn’t been the easiest tool to use when getting into web development. This usually discouraged budding developers, leading them to give up on web development once encountering webpack.
One of the best search results from Google had the word “beginners guide” in it, which I even ended up reading 1000 times before getting a hang of how to use webpack.
SOLUTION
The solution to this challenge was to design an interface for the webpack CLI. This would make the CLI better to look at, simpler to use and easier for developers to understand how to configure projects and get started more quickly.
This solution would greatly reduce the time spent on setting up the tool itself, allowing developers to spend more time doing the fun part which is actually developing the application.
EXPERIENCE DESIGN
To design the UI, we had to identify the pain points and needs of using webpack, with that we created user stories around those needs. I also had to review existing online tools that have attempted to solve them and took note of what was missing with those tools.
VISUAL DESIGN
After several iterations on the wireframe, and contributions from the webpack team. I was able to design an interface that developers can use to import a project or create a new one, choose preferred libraries and additional utilities, measure performance, and learn about webpack without having to use the terminal.
OPTIMIZING BUNDLES
We didn’t forget the ability to optimize existing bundles. This way developers can have a full overview of projects and quickly add new features rapidly.
LESSONS
My work with the developer community was quite a challenging, yet exciting experience so. Coming from a no-coding background, I literally had to google “what is webpack” everyday while working on the project. The project really connected me to developers and spiked my interest in frontend development.
