I just released a new course for Pluralsight titled Structuring JavaScript Code in HTML5 Applications that covers different techniques, strategies, and patterns that can be used when working with JavaScript to encapsulate code, provide better re-use, simplify maintenance, and take variables and functions out of the global scope. The overall goal of the course is to show developers how to convert what I call “Function Spaghetti Code” into more encapsulated and modular code. The concepts covered are important especially since many of the HTML5 APIs (canvas, geolocation, web storage, and more) rely heavily on JavaScript. What if you’re not writing HTML5 applications yet? All of the topics are still directly applicable to any JavaScript code you may be writing.
A lot of the content in the course came from lessons learned while building large and small applications for clients and samples and demos for conference talks. I’ve also had several discussions about different ways to structure JavaScript code with friends such as John Papa, Jarod Ferguson, and Spike Xavier that have influenced my overall views on working with JavaScript. A sample video from the course is available below that covers information about how closures can be used to create containers in code. Closures are a critical component of all of the patterns discussed in the course.
Demo - Working with Closures in JavaScript
The topics covered in the Structuring JavaScript Code in HTML5 Applications course are shown next:
| Why do we Need JavaScript Patterns? |
| Introduction |
| Function Spaghetti Code |
| Function Spaghetti Code Demo |
| Closures to the Rescue |
| Closures Demo |
| Closures Demo 2 |
| Defining Variables |
| Defining Variables Demo |
| Summary |
| Prototype Pattern |
| Introduction |
| Prototype Pattern Pros and Cons |
| Prototype Pattern Structure |
| Using the Prototype Pattern |
| Prototype Pattern Extension Demo |
| Summary |
| Module Pattern |
| Introduction |
| Module Pattern Pros and Cons |
| Module Pattern Structure |
| Using the Module Pattern |
| Summary |
| Revealing Module Pattern |
| Introduction |
| Revealing Module Pros and Cons |
| Revealing Module Structure |
| Using the Revealing Module Pattern |
| Summary |
| Revealing Prototype Pattern |
| Introduction |
| Revealing Prototype Pros and Cons |
| Revealing Prototype Structure |
| Using the Revealing Prototype Pattern |
| Using the Revealing Prototype Pattern with 'this' |
| Extending the Revealing Prototype Pattern |
| Converting Code to the Revealing Prototype Pattern |
| Summary |
Additional courses that I’ve published for Pluralsight are shown below: