This course contains good reference material, but does not reflect our current quality standards.
Table of Contents
Beyond the Basics
Nested Scopes
Declaring a function within another function creates a nested scope. While nested scopes can add complexity to the code, Kyle explains why they are important and introduces the audience to the concept of closure.
Modules
Closure is crucial for creating modules. Modules let you define private implementation details that are invisible to the outside world. At the same time, you can create a public API to allow access to necessary functionality. Kyle shares an example of how closure is used to create a module and answers a few audience questions about how it compares to other languages.
Closure Q&A
Since the topic of closure can be quite complex, Kyle spends a few minutes answering a number of audience questions. He also recommends some additional readings for those wanting a deeper understanding.
Public vs Private
Kyle demonstrates the different between publicly accessible methods and privately accessible methods in JavaScript. He also show some variations on how developers declare a public API for a module.
Callbacks
Callbacks occur when a function is passed as an argument so it can be called after another routine has finished. One of the most common uses for callbacks is with the setTimeout method. Kyle demonstrates the setTimeout method as well as how to use callbacks with AJAX requests.
Organizing Code
Exercises Overview
Kyle will be leading you through a number of JavaScript exercises. These exercises will focus on organizing JavaScript code. Before diving into the exercises, Kyle examines the README file and guides the audience through starting a local web server.
Task #1 - Introduction
In this task, you will attach event handlers for the header links. You will also fetch some content using an AJAX request and make the modal visible.
Task #1 - Events
Kyle beings walking through the solution to the first task. He creates a click event handler and stops the event from propagating.
Task #1 - AJAX
Kyle wraps up the solution to the first task by performing an AJAX request and displaying the modal dialog.
Task #2 - Carousel
To begin the second task, you will add event handlers to the left and right buttons in the carousel. The code for creating the scroll effect is already provided by Kyle.
Task #2 - Details Pane
The next part of the second task requires you to use another AJAX request to load the details for whichever item is selected in the carousel.
Modules
Task #3 - Header Module
The third task focuses on reorganizing the existing functionality using the module pattern. Each JavaScript file should expose one module, contain an init() method, and have a public API. Kyle begins by refactoring the Header.
Task #3 - Carousel & Details Modules
The next part of the third task focuses on creating Carousel and Details modules.
Task #3 - Questions
Kyle spends some time answering a number of audience questions around why modules are important and more examples of public and private variables.
Task #3 - Refactoring Details & Carousel
Now that all three modules are created, Kyle wants to simplify the functionality of each module. This involves refactoring the code so the carousel module handles all click events and the details module is passed the ID of the object to show.
Task #3 - app.js
The final step of the third task is to centralize the jQuery document.ready events. Currently each module has a ready event. Instead, the three events can be combined into a single app.js file.
Task #4 - Event Emitters
This task focuses on the separation of concerns. Kyle wants each module to know as little as possible about the other modules. Using an event emitter library, Kyle demonstrates how to create a custom event to send information between modules.
Task #4 - Initializing Modules
Kyle creates one more custom event to initialize all modules. This way the application does not need to know what modules are currently loaded. Kyle also demonstrates the power of custom events by adding an additional link that can load details.
Server-side JavaScript
Middle-End Architecture
Kyle shares a story about working at a previous job and having difficulty communicating between front-end and back-end applications. This pushed him to create an engine for handing JavaScript on the server. Today, many developers use Node.js to handle server-side JavaScript. Kyle calls this layer the Middle-end.
Secure Phrase Generator
Kyle spends a few minutes demonstrating a simple application he built that combines client-side and server-side JavaScript. He talks about the architecture of this application and outlines what piece he will be building throughout the remainder of this course.
server.js Walkthrough
Kyle starts up the stripped-down version of his secure phrase generator that he’ll be working form. He walks through Node’s server.js file to explain how the application is organized.
Building Templates
Kyle continues his walkthrough of the application code. He describes how the templates are built and how they get injected into the application. He also has code watching the templates directory to reload the templates when they are changed. The templates are created with Grips.
Templating Questions
Kyle spends a few minutes answering some questions about the templating engine. He also talks about using other frameworks like React and Ember.
Routing Functions
Kyle walks through all the functions that get pushed into his routes array. These functions include setting the server name, sending security headers, handling a multipart request and even perform operations like sending the favicon.
Streams
Promises in JavaScript are really powerful, but they don’t map well to event streams because promises can only be resolved once. To handle incoming requests, Kyle suggests using streams instead. After pseudo-coding a simple streams example, Kyle explains how streams handle the requests in his application.
Adding a Shared Module
Creating a Random Number Module
Kyle walks through the code for adding an additional module to the application. This module will generate a random number using the Math.random() function.
Calling the API
Now that Kyle has created a public API for generating a random number, he wants to create a button in the interface to call the API. Kyle also adds a checkbox to determine if the module should be invoked locally or from the server.
Rendering on the Page
Rather than use an alert box to show the random number returning from the API call, Kyle demonstrates how to add a partial in the Grips template to display the result in HTML.
Shared Data Validation
In response to an audience question, Kyle shows how to add a shared data validation module. This module would be used by both the client and the server to validate user input. Sharing the module between client and server saves time and is more reusable.
Using the Validation Module
Now that Kyle has the shared data validation module written, he adds some input boxes that will need the validation. He also adds some client-side logic to handle incorrect min and max values.
Debugging
While troubleshooting a couple issues with his application, Kyle walks through how to debug both the client-side and server-side logic. Once the code is fixed, Kyle demonstrates the working application.
Key Takeaways
Kyle summarizes the changes he made to the application and gives the audience some principles to take away from this example.
Final Questions
Kyle wraps up the course by answering a question about unit testing. He concludes with his contact information and a few last words of wisdom.