> Markdown version of [/videos/224-the-naked-web-developer-your-browser-is-your-framework?t=2355](https://www.wearedevelopers.com/videos/224-the-naked-web-developer-your-browser-is-your-framework?t=2355). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # The Naked Web Developer: Your Browser Is Your Framework Ditch the heavy JavaScript frameworks. Your browser already has everything needed to build production-grade apps. Master native APIs for unparalleled performance and zero technical debt. - **Speakers:** Avichay Eyal - **Event:** World Congress 2021 - **Published:** June 28, 2021 - **Duration:** 42:46 - **URL:** https://www.wearedevelopers.com/videos/224-the-naked-web-developer-your-browser-is-your-framework ## Summary Modern JavaScript ecosystems are dominated by large, opinionated frameworks, yet enterprise applications often utilize only a fraction of their capabilities while absorbing a substantial payload tax. Driven by rigorous performance requirements and open-source constraints in the FinTech industry, "naked web development" advocates for building fully functional, production-grade applications natively. Stripping away heavy dependencies, bundlers, and third-party compilers forces a return to the fundamentals, relying exclusively on standard browser capabilities and pure JavaScript to construct lightweight tools that rival mainstream ecosystems. The browser natively provides highly optimized interfaces that can replace nearly every pillar of modern web frameworks. A memory-efficient publish-subscribe messaging system can be constructed in roughly a dozen lines of code using the built-in `EventTarget` API. Complex state management—typically reliant on Redux or MobX—is easily replicated using modern JavaScript Object Proxies to trap property updates and autonomously emit state-change events. Even inversion of control and dependency injection are achievable seamlessly through JavaScript class mixins, allowing services to be injected into native Web Components (Custom Elements) at runtime. For navigation, dynamic routing is managed natively by intercepting `popstate` events and parsing URL changes across native router outlets. While abandoning frameworks completely isn't strictly necessary for every project, embracing native application logic architecture drastically reduces technical debt. Constructing a strong abstraction layer between business logic and the UI layer ensures that future framework migrations can be handled elegantly. Adopting native capabilities—from utilizing HTML data sets for environment variable injection without a bundler, to shipping micro-frameworks under a single kilobyte—inevitably breeds stronger engineering teams. By mastering core browser mechanisms rather than fleeting library syntax, developers achieve unparalleled flexibility, robust compliance, and maximum performance. **Keywords:** naked web development, browser native apis, eventtarget publish subscribe, javascript object proxies, reactive state management, dependency injection mixins, custom web components, popstate dynamic routing, html dataset environment variables, framework agnostic architecture, frontend payload optimization, micro-framework creation, fintech regulatory compliance, framework migration decoupling ## Chapters 1. **Introduction to framework-free vanilla web development** (00:03) — Building a functional trading application for highly regulated environments without utilizing any third-party framework code. 1. **Evaluating the drawbacks of general-purpose monolithic frameworks** (02:46) — How comprehensive framework ecosystems introduce unnecessary weight, rigid boundaries, and dependency integration delays. 1. **Building a native frontend publish-subscribe messaging mechanism** (05:07) — Leveraging the built-in browser event target API to dispatch custom events and coordinate application logic. 1. **Implementing minimal browser state management using proxies** (08:57) — Constructing observable data stores by trapping object value mutations inside standard browser javascript proxies. 1. **Achieving dependency injection patterns with class mixins** (12:43) — Dynamically combining base class mixins to supply runtime injection requirements without relying on explicit compilers. 1. **Authoring native web components directly in the browser** (17:23) — Opting for native web components rather than framework-specific compilers ensures universally compatible custom view elements. 1. **Constructing a custom client-side router using events** (19:02) — Capturing popstate manipulation payloads to natively intercept URL navigation rules for dynamic page renderings. 1. **Supplying application environment variables through HTML metadata** (22:48) — Using custom data attributes on standard metadata tags to seamlessly pass external environment configuration payloads. 1. **Analyzing the pros and cons of custom architectures** (26:34) — Balancing the performance advantages of strict independence constraints against inherent troubleshooting and documentation drawbacks. 1. **Q&A: Codebase footprint and native application security** (28:36) — Validating backend endpoints alongside conventional user authentication techniques efficiently mitigates cross-site scripting exposure scenarios. 1. **Q&A: Polyfilling functionality for legacy browser compatibility** (32:02) — Converting modern proxy functionality into object getters enables custom reactive integrations on outdated legacy interfaces. 1. **Q&A: Executing behavioral tests on raw JavaScript constructs** (34:14) — Executing behavioral verification operations over standard headless web clients ensures complete custom logic reliability. 1. **Q&A: Defining boundaries between complete frameworks and abstraction** (36:16) — Extracting reusable codebase logic layers away from pure rendering engines limits disruptive framework migrations permanently. 1. **Q&A: Mitigating team onboarding friction and domain overhead** (39:15) — Combining micro frameworks across segmented application borders safely protects teams from unmanageable codebase complication. ## Related Moments - [Leveraging native browser capabilities for local web development](https://www.wearedevelopers.com/videos/279-the-eternal-sunshine-of-the-zero-build-pipeline) (from "The Eternal Sunshine of the Zero Build Pipeline") - [Transitioning native desktop graphics implementations to the web](https://www.wearedevelopers.com/videos/1794-wearedevelopers-live-from-javascript-to-webassembly-high-performance-charting-and-more) (from "WeAreDevelopers LIVE – From JavaScript to WebAssembly, High-Performance Charting and More") - [Rethinking the architecture of single page web applications](https://www.wearedevelopers.com/videos/225-the-state-of-the-web) (from "The State Of The Web") - [Tracking open source community trends in JavaScript native frameworks](https://www.wearedevelopers.com/videos/1288-wearedevelopers-live-scammer-payback-with-python-grok-goes-unhinged-the-future-of-chromium-and-mo) (from "WeAreDevelopers LIVE: Scammer Payback with Python, Grok Goes Unhinged, The Future of Chromium and mo") - [Historical waves of web development and shipping less JavaScript](https://www.wearedevelopers.com/videos/285-the-lean-web) (from "The Lean Web") - [Building framework-less architectures with native custom web components](https://www.wearedevelopers.com/videos/438-making-of-paint-js-org-a-web-component-based-productivity-pwa) (from "Making of paint.js.org—a Web Component-based Productivity PWA") ## Related Articles - [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet) - [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering) - [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us) - [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents) ## Related Jobs - [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia** - [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda** - [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda** - [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1377585-software-engineer) at **Bitpanda** - [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda** - [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**