Vanilla JS: You Might Not Need a Framework

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
5 hours, 52 minutes CC
Vanilla JS: You Might Not Need a Framework

Course Description

Gain speed and simplicity in writing web apps by taking a "vanilla" approach! See how you can build rich web apps and websites without depending on libraries or frameworks, using only the core JavaScript language. You'll learn fundamental concepts like the DOM API, finding and modifying elements in the DOM, and event handling. Build a real web app, "Coffee Masters," to demonstrate advanced topics like SPA routing, web components and shadow DOM, and reactive programming with proxies.

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: July 6, 2023

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 8 minutes

Vanilla JavaScript

Section Duration: 1 hour, 6 minutes
  • What is Vanilla JavaScript
    Maximiliano discusses the disadvantages of relying on only frameworks and the meaning of "Vanilla JavaScript." Vanilla JavaScript is the core language and browser APIs to create web apps without any additional libraries or frameworks added on top.
  • Why Vanilla JavaScript
    Maximiliano discusses some reasoning for learning and use Vanilla JavaScript, including understanding library functions and changes, extending libraries with plugins, and mixing with other libraries. The main advantages and common fears of using Vanilla JavaScript is also covered in this segment.
  • The DOM API
    Maximiliano discusses the DOM API, where it's available, and walks through parts of a simple DOM example. Referencing DOM elements and actions that can be performed on elements are also discussed in this segment.
  • Finding Elements in the DOM
    Maximiliano discusses selecting elements from the DOM, types of returns when selecting elements, functions that return a single element, and functions that return multiple elements. Common pain points when returning elements are also discussed in this segment.
  • Modifying the DOM
    Maximiliano uses JavaScript dot syntax to access properties mapped from HTML attributes and demonstrates reading or changing attributes of a DOM element. Listening to events and working with innerHTML are also covered in this segment.
  • Vanilla JS Q&A
    Maximiliano answers student questions regarding the appendChild() method and different types of Vanilla JS architecture patterns.

The DOM

Section Duration: 1 hour, 21 minutes
  • Course Project Overview
    Maximiliano discusses an overview of the contents of the course project, Coffee Masters, and demonstrates how to install and run the app as a PWA. A demonstration of what will be rendered on the DOM and what is considered valid HTML is also provided in this segment.
  • Scoping querySelector
    Maximiliano demonstrates the difference between querySelector and querySelectorAll, including what data is returned. The DOM API is available in every DOM element, which allows more fine-tuned scoping of the querySelector and querySelectorAll methods.
  • Adding Scripts async & defer
    Maximiliano discusses adding scripts with the async or defer attributes to the course project. The defer attribute will defer the script execution until the parsing is finished while the async attribute will execute the script in tandem with the parsing operation.
  • Main Script Setup
    Maximiliano walks through setting up the main application script and discusses the difference between the Load event and DOMContentLoaded. The DOMContentLoaded event uses the DOM API, which is widely supported across browsers.
  • Event Binding & Handlers
    Maximiliano discusses some possible DOM events that can be listened to, event naming patterns, and binding functions to events. Using onevent properties will only allow one function to be bound, while addEventListener allows binding multiple event handlers.
  • Advanced Event Handling
    Maximiliano discusses attaching multiple event handlers per event/object and dispatching custom events. Student questions regarding removing event listeners with the parent element, if events with multiple functions fire synchronously, and if there is a limit to the number of event listeners are also covered in this segment.
  • Helpful Shorthand Methods
    Maximiliano provides some shorthand methods to help reduce the amount of code needed by creating aliases.
  • Fetching Data
    Maximiliano walks through creating the initial services for the coffee masters application to access the menu eventually. Updating the script to a module to allow imports is also covered in this segment.
  • Loading Menu Data
    Maximiliano demonstrates importing and utilizing the application's previously created Store and API modules. Calling the API to load the menu data is also covered in this segment.

Routing

Section Duration: 46 minutes

Web Components

Section Duration: 50 minutes

Reactive Programming with Proxies

Section Duration: 1 hour, 25 minutes

Wrapping Up

Section Duration: 14 minutes
  • Wrapping Up
    Maximiliano wraps up the course by reviewing the covered material and common fears of using vanilla JavaScript. The CEO of Frontend Masters, Marc Gabanski, also shares some thoughts on coding in Vanilla JavaScript.
I just completed "Vanilla JS: You Might Not Need a Framework" by Max Firtman on Frontend Masters! Vanilla is a good flavor that stands the test of time.
noah

noah

noahh_ts

Just completed 'Vanilla JS: You Might Not Need a Framework' by Max Firtman on Frontend Masters! 🚀 Delighted to gain insights into how libraries like React work and what's happening under the hood. 💡💻
Azedine Ouhadou

Azedine Ouhadou

OuhadouAzedine

I've been binging Max Firtman's courses on Frontend Masters, Basics of Go, Vanilla JS and Web App Performance. Such amazing content, thank you!
Sam Kling

Sam Kling

samklingdev

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now