Frontend Infrastructure, Developer Experience & Bundlers
Empowering product teams with the foundational frontend ecosystem and reliable, performant, and developer-friendly tools to efficiently build great user experiences
The last time I wrote the newsletter, I told you about my experience with Algorithms, Web Performance & Frontend Infrastructure. During the first months of this year, I was heavily focused on web performance and didn't do much about the frontend infrastructure topic.
Over the last couple of weeks, I've been researching more and more about the infrastructure for frontend systems and what are the techniques & strategies, skills, and resources I needed to have a piece of better foundational knowledge.
π½π£π ππ₯πππ ππππ£ππ€π₯π£π¦ππ₯π¦π£π βπππ
I've been researching this topic for a month now and learned a lot of interesting things. This is the front page of my research and it will be updated with more studies, research, and experiments: Frontend Infrastructure Front Page.
πΎππ₯ππ¦π
And there's the repo with all the experiments I've been doing. It's a bunch of code here and there I use to study, learn and write my findings later to populate the front page of the Frontend Infrastructure research: Github Repo.
πππππππ’π¦ππ€ πππ ππ₯π£ππ₯πππππ€
When working in the frontend infrastructure, there are a lot of things we can keep an eye on: Techniques and Strategies.
core metrics
developer productivity
testing
observability
architecture
UX/UI consistency
build tools
ππππ£π ππππππ€
Knowledge is infinite. But there are core/foundational skills we can have to move the infrastructure of frontend systems forward: Skills.
modern frontend tech stack
validation (CI) / deployment (CD)
UI/UX
web build tools
web performance
developer experience
frontend architecture
πππ§ππππ£ππ‘π₯ ππ€ πππ£ππ‘π₯π€
Back in the day, we used JS as a tool to add small interactivity to websites. There were just JS scripts that we put into the `<script>` tag and that's it. No module system, but still powerful: JavaScript as Scripts.
πππ π‘π & βππ π€π¦π£π
We all know how closure in JavaScript is powerful. Understanding the scope and context of execution is truly important here. There was still no native module system at all. But started to use closure as an interesting technique: Scope & Closure.
πππ½πΌ β ππππππππ₯πππͺ πππ§π πππ π½π¦πππ₯ππ π πΌπ©π‘π£ππ€π€ππ π
Still no module system but using the power of closures and IIFE to achieve sort of a DIY module system: IIFE.
βππππ€π‘ππππ€
Objects as "namespaces" to isolate code, values, functions, and so on. Also a DIY module system: Namespaces.
πΌπππ ππ¦πππ€ & βπ πππ πππ
The need for a native module system was latent and there was a lot of potential to bring this requested feature to the language. CommonJS was born together with other alternatives. And ESModules finally came to JS: ESModules & CommonJS.
πππ πΉπ¦πππππ£π€
The need for a build tool also came from the community. Now we have webpack, esbuild, rollup, snowpack, and so on. A lot of innovation here, a fascinated topic.
I also wrote my very simple bundle (a minibundler and tree-shaking): Web Bundlers.
πππ βππ£ππ π£πππππ
Well, yeah, there's a lot to learn here. And I'm still researching web performance that's one of the topics I'm very interested in: Web Performance.
βππ€π π¦π£πππ€
There are also a lot of great resources out there about this topic or things related to it: Resource page.
Scope, Closure, and Execution Context
Modules
Bundlers
JS/TS spec
migration infra
DX
There are still a lot of things I want to research about frontend infrastructure:
bundlers: tree-shaking, plugin and loader system
ci/cd: infra and optimizations
dev experience: devtools, research
ui/ux: design systems, animation
typescript: advanced types
Well, that's it for today! Keep studying and coding! βοΈ