What is HTML All The Things?
HTML All The Things is a web development podcast and discord community which was started by Matt and Mike, developers based in Ontario, Canada.
The podcast speaks to web development topics as well as running a small business, self-employment and time management. You can join them for both their successes and their struggles as they try to manage expanding their Web Development business without stretching themselves too thin.
Episode Sponsor - Magic Mind & Wix Studio
Thanks to Magic Mind and Wix Studio for their support!
Magic Mind Bundle - Up to 45% Off!!!
Get up to 45% off with our link - https://magicmind.com/htmlpodbjan
Wix Studio: The Web Platform for Agencies and Enterprises
Wix Studio is the new web platform tailored to designers, developers and marketers who build websites for others or for large organizations. The magic of Wix Studio is its advanced design capabilities which makes website creation efficient and intuitive.
Check out Wix Studio today.
How to support the show
Patreon
Prices subject to change and are listed in USD
- Support the show from as little as ~$1/month
- Get a shoutout at the end of the episode (while supplies last) for just ~$3/month
- Help support the HTML All The Things Podcast: Click Here
What's This One About?
In this episode, Matt and Mike explore why vanilla JavaScript remains a powerful tool for developers. From small projects that don’t need the complexity of frameworks, to performance-critical and fine-control use cases, they discuss when and why going framework-free can be the better choice. They also dive into learning and debugging benefits, reducing dependencies, and ensuring compatibility with legacy browsers. Whether you’re prototyping, enhancing no-code platforms, or striving for leaner, faster projects, vanilla JS has its place in every developer’s toolkit.
Show Notes
Why Vanilla JavaScript?
When to Use It: Sometimes vanilla JavaScript can outshine using a framework
Small Projects
- Small projects generally don't need the added complexity and features that frameworks bring.
- The codebase isn't large enough to require consistent code formatting and methodologies (linting)
- Some projects are designed to be small because they're required to be (ie cheap hosting with little storage)
- Examples of small projects: landing pages, single-purpose widgets/site component, small static website
Performance-Critical Sites
- Frameworks can use methodologies that may not be the most performant
- Some projects will have to-the-second concerns with performance, which is difficult to manage when a framework abstracts away what it's doing in the background - and frameworks update so even if you test how long a particular function takes today, that can change tomorrow
- Examples of performance-critical sites: Real-time dashboards, Sites running on underpowered hardware, sites that need to be delivered on slow networks
Fine-Control Projects
- When you need to adhere to very restrictive parameters, you may need the granular control that vanilla JS offers.
-
Fine-Control Project Examples:
- If you need to produce a web app that will be deployed to devices that have an old browser version with a specific bug that makes the display property not work properly when adjusted by JS - you cannot control how a framework does show/hide - but you can fine-tune around this issue with custom vanilla JS.
-
Creating a drag-and-drop interface on a page that has a lot of elements, needs high-performance, and has a lot of parameters such as certain elements can only be dragged in specific regions of the page and only on a particular axis
- Utilizing vanilla JS you can directly interact with the drag and drop API, pointer events, and touch events in order to easily track the position of where elements should be dragged and dropped
Learning & Debugging
-
JavaScript is one of the three pillars, and therefore showcases programming and JS-specific fundamentals very well.
- Frameworks have proprietary syntax that varies framework-to-framework, whereas if you learn that native platform (vanilla JS) you will always have a tool that will work in a modern browser
JS also works in every modern browser and therefore is a great fallback if your framework doesn't have a specific feature you need
-
When it comes to debugging, you may suspect that your framework is suffering from a bug when you've exhausted all your troubleshooting options
- Vanilla JS can come to the rescue here to help you specifically interact with particular APIs and use selective methods in order continue troubleshooting your framework - or workaround an issue
Reducing Dependencies: Avoiding Framework Bloat
- Frameworks take up space, if you don't use them your bundle size will be smaller
-
When you use a framework, they'll often require dependencies - both the dependencies and the framework will need updates from time to time
- Your project will have the framework as a dependency, and that framework has its dependencies - creating some bloat
Frameworks are versatile tools that can do a lot, if you aren't using a lot of its features, the rest of it is essentially bloat in your project - why buy a top-of-the-line smartphone when all you do is send the odd SMS
Legacy Browser Support
- JavaScript updates over time, adding new features and syntax - but also leaving legacy browsers in the dust
-
Use tools like Babel to convert modern JavaScript syntax into a form compatible with older browsers.
- Example: Transpile ES6+ code into ES5 using Babel for compatibility with Internet Explorer.
Stick to features widely supported by legacy browsers. For example:
Use var instead of let and const.
Prototyping and Proof-of-Concept
- Quick scripts for testing how a function behaves doesn't require an entire framework.
- Sometimes just opening up a console on a webpage is enough of an environment to run some javascript and test out some concepts
-
Codepen is often enough to share a simple javascript concept
- Others apps include jsfiddle, replit, stackblitz, codesandbox
Adding to a Platform
- No code platforms often don't have support for compiled JS directly
- Just throwing in JavaScript into a text editor on the platform is usually the standard way of adding extra functionality to platforms like Wordpress and Webflow
Timestamps
Timestamps are machine generated - there may be some errors.
- 00:00 Introduction and Episode Overview
- 01:25 The Case for Vanilla JavaScript
- 06:26 Small Projects and Vanilla JavaScript
- 14:34 Performance Critical Websites
- 22:07 Fine Control Projects
- 32:13 Magic Mind Sponsorship
- 35:44 Learning and Debugging with Vanilla JavaScript
- 37:41 Quick JavaScript Fixes
- 38:04 Importance of Programming Fundamentals
- 38:30 Learning JavaScript Before Frameworks
- 44:29 Debugging with Vanilla JavaScript
- 46:46 Reducing Framework Bloat
- 51:56 Legacy Browser Support
- 57:58 Prototyping and Proof of Concept
- 01:02:11 Extending Platforms with JavaScript
- 01:07:19 Conclusion and Final Thoughts
Top comments (0)