The Naked Web Developer: Your Browser Is Your Framework

Your browser is the only framework you need. Learn to build reactive, component-based apps with zero dependencies.

#1about 5 minutes

The case for framework-free web development

Frameworks provide a safety net but come with bloat and integration challenges, prompting an exploration of building applications using only browser APIs.

#2about 3 minutes

Implementing a pub/sub system with native browser events

Create a lightweight event bus for application-wide messaging by wrapping the browser's built-in EventTarget API instead of using a library.

#3about 4 minutes

Creating observable state with JavaScript proxies

Use JavaScript Proxy objects to trap property assignments on a state object, automatically dispatching events on change for reactive state management.

#4about 5 minutes

Achieving dependency injection with class mixins

Implement a dependency injection pattern by creating class mixins that extend a base class and inject required services at runtime during object construction.

#5about 2 minutes

Using native web components for component authoring

Leverage native Web Components as a standard, framework-agnostic way to create encapsulated and reusable UI elements without third-party dependencies.

#6about 4 minutes

Creating a client-side router with the popstate event

Build a simple client-side router by listening for the popstate event, parsing the URL, and dynamically loading the correct component into a designated outlet element.

#7about 4 minutes

Passing environment variables using HTML meta tags

Inject environment variables into a client-side application without a build process by storing them in data-* attributes on a meta tag and reading them via the dataset API.

#8about 2 minutes

Evaluating the pros and cons of going framework-free

Weigh the trade-offs of avoiding frameworks, balancing the cons like initial setup time against the pros of performance, flexibility, and deeper team expertise.

#9about 14 minutes

Q&A on security, browser support, and testing

The discussion addresses common concerns about framework-free development, including security best practices, handling legacy browsers, and applying standard testing methodologies.