Skip to content
Test different scenarios of building a web app.
JavaScript HTML Shell TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
000-os
001-package-manager
002-build-tools
003-build-tools-extras
004-simpler
.gitignore
.nvmrc
README.md

README.md

Build Tools Playground 👷‍♂

Play with various build scenarios of a simple web app, which are based on:

  • Bash
  • npm
  • webpack
  • Parcel

Five steps to understand the "Why?" behind the modern front-end build process

0 - OS only 💻

In this example I want to show you that it's possible to "build" a web app using nothing more than utils that OS gives you for free. I'm fetching libs like jQuery and lodash using curl, I'm unzipping them, and then cating into one file.

1 - Package manager 📦

In the second example I want to show you what kind of things we gain after introducing a proper package manager to our build stack. This example is focused on npm and cross-platform libs like rimraf.

2 - Build tools 🛠

Third example is dedicated to Webpack and its capabilities.

3 - Build tools + Extras 🔥

Fourth example is about extending Webpack's capabilities by introducing loaders and plugins that let you import previously unknown formats of files and enhance your build process.

4 - Simpler, please! 🧘‍♀️

This example is about going back to basics - what's the simplest possible tool one could use today to build a web app? Spoiler alert - there's a big chance that the answer is called Parcel.

Slides

Project you are currently looking at has been used by me during one of the talks at SmartRecruiters HackerSpace meetings. To check out the slides of my talk, click here.

You can’t perform that action at this time.