Tech Talk 2021 - Exploring modern JS build tools

A bunch of new developer tools have landed in the past years and they are biting at the heels of the tools that have dominated front-end development over the last few years, including webpack, Babel, Rollup, Parcel, create-react-app.

These new tools aren’t designed to perform the exact same function, and each has different things they’re trying to achieve and features to get there. Despite their differences, these tools do share a common goal: **improve the developer experience.**

Transcript

1. Exploring modern JavaScript build tools October 2021
2. There’s been great improvement in JavaScript build tools over the years
3. especially build time, speed, customization, configuration, and extensibility
4. New tools have landed and they are replacing the tools that have dominated front-end development webpack, Babel, Rollup, Parcel, create-react-app
5. Not all new tools are designed to perform the exact same function, and each has different features
6. common goal improve the developer experience.
7. Why new tools
8. Fill a missing middle ground between writing a single vanilla JavaScript file, and having to download MB of tooling dependencies
9. most without the dependency list
10. enabled by native JavaScript modules in the browser
11. What’s different?
12. webpack, Rollup, or Parcel as a development server bundles our entire codebase
13. Everything from source code and a node_modules folder, runs these through build processes
14. Babel, TypeScript, or PostCSS — then pushes the bundled code to our browser
15. Even after all caching and optimizing this all takes time, and can slow development servers to a crawl in larger codebases
16. Most new tools don’t follow this model
17. Wait until the browser finds an import statement and makes an HTTP request for the module 1
18. After request is made the tool apply transforms to the requested module and leaf nodes 2
19. Serve changes to the browser. Speed things up a lot with less work in the process of pushing to a dev server 3
20. 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
21. The POC experiment (homework)
22. Create example app (ex. React) and try to rebuilt it with each tool covered today
23. Features
24. • 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
25. esbuild
26. 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)
27. more and more esbuild starters popping up create-react-app-esbuild, estrella and Snowpack
28. Very new Production ready but not yet v1.0 Comes with intuitive JavaScript and command line API
29. USE CASES It’s going to be most useful in large codebases when stable Add some speed to your bundling in side projects
31. Snowpack
32. Snowpack is a build tool by the creators of Skypack and Pika. It provides development server and was created with an “unbundled development” philosophy.
33. “You should be able to use a bundler because you want to, and not because you need to.”
34. build step doesn’t bundle files into a single package but provides unbundled esmodules that run in the browser
35. esbuild is included as a dependency, idea is to use JS modules, bundle with esbuild when it’s needed
36. 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
38. Vite
39. Vite is developed by Vue creator Evan You. Vite provides a full development server and an optimized build command using Rollup
40. Vite is an opinionated tool and you might disagree with its opinions
41. 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
43. wmr
44. wmr is opinionated build tool that provides both a development server and a build step
45. 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? “
46. wmr is built with bundle size purging as Preact, so it’s tiny — weighing 2.6 MB — and contains exactly zero npm dependencies
47. 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
49. Summary
52. All these tools speed up feedback loops and increase productivity.
53. These tools are going to lower the barrier to entry for new developers by providing a leaner, faster developer environment
54. Do a proper POC before using something new in the production
55. Q & A
56. 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
57. As everything good in life, knowledge is great only when shared hypetech.io/education
58. contact@reactweek.dev