Boilerplates

A set of templates to help you kick-start your next JavaScript project.

⏰ Last Chance! A new session of the Vanilla JS Academy starts on Monday. Join today and get 30% off registration.

• IIFE. Used when you want your code to run immediately, but want to keep all of your variables and functions scoped to avoid conflicts. Stands for Immediately Invoked Function Expression.
• Revealing Module Pattern. Allows you to keep most of your variables and functions out of the global scope, but make some of them publicly available. Example: a helper library like lodash.
• Constructor Pattern. Create multiple instances of script that share methods but contain unique information. Example: a piggy bank library.
• Class Pattern. An alternative approach to implementing the constructor pattern, with a nicer syntax and some additional features. Example: a piggy bank library.
• Service Worker. Middleware that lets you intercept requests and responses to your site, cache assets, provide offline experiences, and more.
• Web Component. A way to define reusable custom HTML elements, with built-in styles and interactivity. Example: a loading icon.