JavaScript Module Fundamentals

JavaScript applications have grown increasingly complex. This course will teach you the basics of writing modular, maintainable JavaScript using popular formats, loaders, and bundlers.
Course info
Rating
(306)
Level
Beginner
Updated
Jun 10, 2016
Duration
2h 16m
Table of contents
Description
Course info
Rating
(306)
Level
Beginner
Updated
Jun 10, 2016
Duration
2h 16m
Description

At the core of building JavaScript applications is a thorough knowledge of JavaScript modules. In JavaScript Module Fundamentals, you will learn all of the options available for building modular, maintainable, JavaScript applications. You will learn how to use popular module formats like AMD and CommonJS, how to create and transpile modules in the ES2015 format, and you'll also learn how to bundle modules with Browserify and Webpack. When you're finished with this course, you will have a foundational knowledge of JavaScript modules that will help you plan and implement your next client or server-side web application.

About the author
About the author

Brice has been a professional developer for over 20 years and loves to experiment with new tools and technologies. Web development and native iOS apps currently occupy most of his time.

More from the author
RxJS: The Big Picture
Beginner
1h 2m
Mar 5, 2019
RxJS: Getting Started
Intermediate
3h 4m
Sep 27, 2018
Web Development: Executive Briefing
Beginner
30m
Jul 31, 2018
More courses by Brice Wilson
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone, my name is Brice Wilson, and welcome to my course, JavaScript Module Fundamentals. I'm a server and client-side web developer. In this course, we're going to explore and demystify the often confusing world of JavaScript modules. JavaScript has exploded in popularity in recent years, and it's now being used to write increasingly large client-side applications. This trend means that writing modular maintainable code is more important than ever. Some of the major topics that we will cover include popular module patterns, the AMD and CommonJS module formats, client-side module loaders, ES2015 modules, and module bundlers. Before beginning this course, you should be familiar with the basics of JavaScript, but you certainly don't need to be an expert. By the end of the course, you'll understand all of the options available to you for building and deploying modular JavaScript applications. I hope you'll join me on this journey to learn how to build modular JavaScript apps with the JavaScript Module Fundamentals course at Pluralsight.

Why Modules Matter in JavaScript
Hi, this is Brice Wilson with Pluralsight. Welcome to JavaScript Module Fundamentals. In this course, I'm going to teach you everything you need to know about the often confusing world of JavaScript modules. I'll provide some context for why JavaScript modules are so confusing, and then use a small demo app to walk you through all of the popular module implementations and support libraries. By the end of the course, you'll have all of the information you need to confidently choose the best module implementation for your next project. Let's get started by defining exactly what a module is. There are probably lots of small differences of opinion around what constitutes a module, but here is my general purpose definition. A module is a group of code and data related to a particular piece of functionality. It encapsulates implementation details, exposes a public API, and is combined with other modules to build a larger application. Modules are also thought of in terms of the goals they're trying to accomplish. I'll go over those next.

Module Patterns in ES5
Hi, this is Brice Wilson. In this module, I'm going to show you a couple of popular patterns for writing modular code in ES5. ECMAScript 5 is the version of JavaScript that's currently supported in most modern browsers. Newer versions of JavaScript have built-in support for modules, but using them currently involves a compilation step. We'll see how to do that later in the course, but for now I want to show you the patterns you can use natively in browsers today. I'll start by discussing immediately-invoked function expressions and how they help provide some encapsulation and reduce the number of variables we store in the global scope. I'll then present the Revealing Module pattern. It's probably the most popular module pattern in use with developers working purely in ES5. It provides nice encapsulation of private members and a clean syntax for exposing a public API for consumers of the module. There are actually two flavors of the pattern, and we'll look at both. The first is implementing the module as a singleton so that there's only ever one instance of the module in memory. The other is implementing the module as a constructor function so that you can create as many of them as you need. Before we look at that, let's talk about reducing global scope pollution.

Module Formats and Loaders
Hi, this is Brice Wilson. In this module, I'm going to cover module formats and loaders. We'll see how coupling and agreed upon module syntax with a third-party library that understands that syntax allows you to write clean modular code that doesn't pollute the global scope. We'll get started by talking about the relationship between module formats and module loaders. It's important to understand that they exist independent of each other, even though they're used together. I'll explain what I like to think of as native vs. non-native module formats. We'll then take a close look at the syntax for the two most popular modular formats. They are the Asynchronous Module Definition format and the CommonJS format. We'll also see that these module formats require loaders to actually use them. I'll update the MultiMath app to load AMD modules with a library named RequireJS. I'll then rewrite the code to use CommonJS modules and load them with a library named SystemJS.

Modules in ES2015
Hi, this is Brice Wilson. In this module of the course, I'm going to cover the module syntax that's built into the ES2015 version of the language. As you've seen from the topics covered earlier in the course, creating modular JavaScript code is something that developers have struggled to implement for years. Finally, in the ES2015 version of the language, that functionality is baked in. I'll show you how to create modules using the new syntax and show you how you can build applications with it today, even though browsers don't yet support all of the new features in ES2015. I'll get started by describing ES2015 modules and generally explain how they work, so you can better understand them in the context of the other module types we've seen so far in the course. I'll cover some of the similarities and differences in relation to those other formats. I'll then dig into the details of how to define and consume them before showing you how we currently have to transpile them to earlier versions to JavaScript in order to use them in browsers today. I'll also show you how to convert the modules in the MultiMath demo app to use ES2015 modules. Let's get started.

Module Bundlers
Hi, this is Brice Wilson. Welcome back. In this module, I'm going to talk about module bundlers and how they can replace the module loaders I've been using to load AMD and CommonJS modules in a browser. Module bundlers really solve the same problem as module loaders, but they do it as a build step rather than at runtime. I'll begin by talking about the role module bundlers play and why you might want to use one of them instead of a module loader. I'll then show you where a bundler would fit in a typical development workflow before demonstrating how to use a couple of different bundlers. I'll show you how to quickly install and use a bundler named Browserify to bundle the CommonJS modules in the demo app. After that, I'll show you a couple of ways to use a popular new tool named Webpack. I'll first use it to bundle AMD modules, and then I'll show you how I can take advantage of its extensibility to have it use Babel to transpile ES2015 modules for me before bundling them. Let's get started by talking about what a bundler is and why you might want to use one.