Exploring modern
JavaScript build tools
October 2021
Slide 2
Slide 2 text
There’s been great improvement
in JavaScript build tools over the
years
Slide 3
Slide 3 text
especially
build time, speed, customization,
configuration, and extensibility
Slide 4
Slide 4 text
New tools have landed and they
are replacing the tools that have
dominated front-end development
webpack, Babel, Rollup, Parcel, create-react-app
Slide 5
Slide 5 text
Not all new tools are designed to
perform the exact same function,
and each has different features
Slide 6
Slide 6 text
common goal
improve the developer experience.
Slide 7
Slide 7 text
Why new tools
Slide 8
Slide 8 text
Fill a missing middle ground
between writing a single vanilla
JavaScript file, and having to
download MB of tooling
dependencies
Slide 9
Slide 9 text
most without the dependency list
Slide 10
Slide 10 text
enabled by native JavaScript
modules in the browser
Slide 11
Slide 11 text
What’s different?
Slide 12
Slide 12 text
webpack, Rollup, or Parcel as a
development server bundles our
entire codebase
Slide 13
Slide 13 text
Everything from source code and
a node_modules folder, runs these
through build processes
Slide 14
Slide 14 text
Babel, TypeScript, or
PostCSS — then pushes the
bundled code to our browser
Slide 15
Slide 15 text
Even after all caching and
optimizing this all takes time, and
can slow development servers to
a crawl in larger codebases
Slide 16
Slide 16 text
Most new tools don’t
follow this model
Slide 17
Slide 17 text
Wait until the browser finds an
import statement and makes an
HTTP request for the module
1
Slide 18
Slide 18 text
After request is made the tool
apply transforms to the requested
module and leaf nodes
2
Slide 19
Slide 19 text
Serve changes to the browser.
Speed things up a lot with less work in the
process of pushing to a dev server
3
Slide 20
Slide 20 text
Some new tools still do the same
work but are just faster
processing code extremely fast by avoiding
expensive transformations, leveraging
parallelization and taking advantage of Rust/Go in
the background
Slide 21
Slide 21 text
The POC experiment
(homework)
Slide 22
Slide 22 text
Create example app (ex. React)
and try to rebuilt it with each tool
covered today
Slide 23
Slide 23 text
Features
Slide 24
Slide 24 text
● First-class support for native JavaScript modules
● TypeScript compilation (but not type checking)
● JSX
● Plugin API for extensibility
● A built-in development server
● CSS bundling and support for CSS-in-JS libraries
All of these tools can compile TypeScript into JavaScript, but will do so even if there are type errors
Slide 25
Slide 25 text
esbuild
Slide 26
Slide 26 text
Created by Evan Wallace
(CTO of Figma)
Its main feature is that it provides
a build step 10×-100× faster than
Node-based bundlers
(their own benchmarks)
Slide 27
Slide 27 text
more and more esbuild starters
popping up
create-react-app-esbuild, estrella
and Snowpack
Slide 28
Slide 28 text
Very new
Production ready but not yet v1.0
Comes with intuitive JavaScript
and command line API
Slide 29
Slide 29 text
USE CASES
It’s going to be most useful in large
codebases when stable
Add some speed to your bundling
in side projects
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Snowpack
Slide 32
Slide 32 text
Snowpack is a build tool by the
creators of Skypack and Pika.
It provides development server
and was created with an
“unbundled development”
philosophy.
Slide 33
Slide 33 text
“You should be able to use a
bundler because you want to, and
not because you need to.”
Slide 34
Slide 34 text
build step doesn’t bundle files into
a single package but provides
unbundled esmodules that run in
the browser
Slide 35
Slide 35 text
esbuild is included as a
dependency,
idea is to use JS modules, bundle
with esbuild when it’s needed
Slide 36
Slide 36 text
USE CASES
double down on unbundled deployment
writing source code with a small number of modules
incrementally adopting a front-end framework into a
server-rendered or static application
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Vite
Slide 39
Slide 39 text
Vite is developed by Vue creator
Evan You.
Vite provides a full development
server and an optimized build
command using Rollup
Slide 40
Slide 40 text
Vite is an opinionated tool and you
might disagree with its opinions
Slide 41
Slide 41 text
USE CASES
serious create-react-app or Vue CLI competitor, Vite
is the closest one
zero-config optimized production build mean you
can get from zero to production without any
configuration
lightening-fast development server
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
wmr
Slide 44
Slide 44 text
wmr is opinionated build tool that
provides both a development
server and a build step
Slide 45
Slide 45 text
Built by the creator of Preact,
Jason Miller
“Preact is tiny and it’s really good if
you want to do a lightweight
project. Where is our tooling for
that? “
Slide 46
Slide 46 text
wmr is built with bundle size
purging as Preact, so it’s tiny —
weighing 2.6 MB — and contains
exactly zero npm dependencies
Slide 47
Slide 47 text
USE CASES
create a prototype using Preact as fast as possible
no configuration and it only takes seconds to
download
wmr may not be the tool for you if you’re not using
Preact, React or vanilla JavaScript
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
Summary
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
All these tools speed up feedback
loops and increase productivity.
Slide 53
Slide 53 text
These tools are going to lower the
barrier to entry for new
developers by providing a leaner,
faster developer environment
Slide 54
Slide 54 text
Do a proper POC before using
something new in the production
Slide 55
Slide 55 text
Q & A
Slide 56
Slide 56 text
HypeTech
Tech education and shaping ideas into
hype products
hypetech.io | reactweek.dev
Marko Arsić
Founder and CEO @ HypeTech
Founder of HypeTech Education
Lecturer @ ReactWeek.dev
Independent Tech Consultant
Helping companies set up teams and standardize the
development process
github.com/marsicdev
Slide 57
Slide 57 text
As everything good in life, knowledge is great only when shared
hypetech.io/education