Table of Contents
Beyond the Basics
Nested ScopesDeclaring 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.
ModulesClosure 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&ASince 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.
CallbacksCallbacks 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.
Task #1 - IntroductionIn 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 - EventsKyle beings walking through the solution to the first task. He creates a click event handler and stops the event from propagating.
Task #1 - AJAXKyle wraps up the solution to the first task by performing an AJAX request and displaying the modal dialog.
Task #2 - CarouselTo 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 PaneThe 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.
Task #3 - Carousel & Details ModulesThe next part of the third task focuses on creating Carousel and Details modules.
Task #3 - QuestionsKyle 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 & CarouselNow 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.jsThe 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 EmittersThis 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 ModulesKyle 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.js WalkthroughKyle 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 TemplatesKyle 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 QuestionsKyle spends a few minutes answering some questions about the templating engine. He also talks about using other frameworks like React and Ember.
Routing FunctionsKyle 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.
Adding a Shared Module
Creating a Random Number ModuleKyle 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 APINow 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 PageRather 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 ValidationIn 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 ModuleNow 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.
DebuggingWhile 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 TakeawaysKyle summarizes the changes he made to the application and gives the audience some principles to take away from this example.
Final QuestionsKyle wraps up the course by answering a question about unit testing. He concludes with his contact information and a few last words of wisdom.