Vanilla JS: You Might Not Need a Framework
Learning Paths:
Topics:
Table of Contents
Introduction
Vanilla JavaScript
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
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
Browser Routing & History API
Maximiliano discusses navigating between pages using the DOM for single and multi-page applications. The History API will be used to push new entries to the navigation history.
SPA Router from Scratch
Maximiliano walks through creating a router, managing which navigations get stored in History, and handling deep linking. The created router will be specific to the course application but can be made reusable by adding abstractions.
Router Q&A
Maximiliano answers student questions regarding using a function for loadData and not Router, how arrow functions handle bindings, and if the menu isn't modular because it uses app as a dependency.
Changing DOM Element Content
Maximiliano demonstrates updating the DOM content based on the URL by utilizing a switch case and createElement. The page content is targeted using children instead of childNodes to avoid selecting empty text and new text lines.
Dynamic Routing
Maximiliano demonstrates creating a dynamic page route to handle navigating to individual product detail pages. Handling URL changes by adding an event listener for the popstate is also covered in this segment.
Web Components
Overview & Custom Elements
Maximiliano briefly discusses an overview of web components and their associated set of standards, including, custom elements, HTML templates, shadow DOM, and declarative shadow DOM. Custom element attributes, lifecycle, slots, and custom builtins are covered in this segment.
HTML Templates
Maximiliano discusses creating markup containing HTML content that can be reused, rendered, and dynamically modified. CSS style declarations made in templates will apply to the entire document by default.
Shadow DOM
Maximiliano discusses utilizing the shadow DOM for more control over the styling and functionality of custom elements. If a template element is on a shadow DOM, the style declarations will only apply to the template.
Declarative Shadow DOM
Maximiliano briefly discusses the declarative shadow DOM which allows the shadow DOM to be defined directly in the HTML markup. Alternatives for where to define custom element CSS including CSSOM APIs, script tags, link tags, and external CSS files are also discussed in this segment.
Creating Web Components
Maximiliano creates the Menu, Details, and Order web components and exports them to app.js so the browser can recognize and execute the modules. Applying the web components to the DOM is also covered in this segment.
Loading Templates
Maximiliano walks through loading the previously created templates and rendering them to the DOM. Templates must be cloned before they can be injected into the DOM.
Applying a Shadow DOM
Maximiliano demonstrates creating, attaching, and defining the mode of a shadow DOM. A student's question regarding why the template isn't placed in a JavaScript file and then rendered is also covered in this segment.
Styling Web Components
Maximiliano walks through loading and applying stylesheets to web components.
Reactive Programming with Proxies
Creating a Proxy
Maximiliano discusses creating a proxy to allow modifications to operations performed on the wrapped object. A proxy can be used for validation, data binding, and reactive programming. Proxy handlers and traps are also covered in this segment.
Rendering the Menu
Maximiliano walks through creating an event listener that listens for and renders changes to the coffee master's menu. A student's question regarding if the shadow DOM allows the use of local IDs is also covered in this segment.
ProductItem Component
Maximiliano implements the ProductItem component and demonstrates an alternate method of passing in the product as an attribute. Updating the event listener to not link the add to cart button to the details page is also covered in this segment.
DetailsPage Component
Maximiliano walks through the code for the DetailsPage component and updates the product ID to the correct variable name.
Adding Items to the Order
Maximiliano demonstrates implementing a new Order.js service to allow users to add products to the cart. Handling adding multiple of the same item is also covered in this segment.
Displaying Items in the Cart
Maximiliano walks through and implements the code for the CartItem component to display the items that have been added to the cart. A student's question regarding why importing the custom element renders the content is also covered in this segment.
Binding Form Data
Maximiliano demonstrates binding the order form's input data to a user object. Clearing out the form when the order is placed and updating the home page to render when navigated to are also covered in this segment.
Q&A
Maximiliano answers students' questions regarding the order page not loading when directly navigated to and how to decide when to use vanilla JavaScript or a library. Some helpful resources are also provided in this segment.
