https://github.com/psmyrdek/build-tools-playground

Test different scenarios of building a web app.
https://github.com/psmyrdek/build-tools-playground

build-tool frontend slides talk webpack

Last synced: 22 days ago
JSON representation

Test different scenarios of building a web app.

• Host: GitHub
• URL: https://github.com/psmyrdek/build-tools-playground
• Owner: psmyrdek
• Created: 2019-07-03T20:26:07.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T07:28:53.000Z (almost 2 years ago)
• Last Synced: 2024-10-14T02:45:58.177Z (about 1 month ago)
• Topics: build-tool, frontend, slides, talk, webpack
• Language: JavaScript
• Size: 2.17 MB
• Stars: 1
• Watchers: 2
• Forks: 2
• Open Issues: 40
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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 `unzip`ping them, and then `cat`ing 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](https://docs.google.com/presentation/d/132MLdeEa8wt1RnYD9DOZRRJ1Ofss0ZwYgmcZ0hTZDxk/edit?usp=sharing).