Learning Path: Full Stack JavaScript

Mastering JavaScript 39 lectures 04:10:07 Mastering JavaScript - The Course Overview This video provides you a synopsis of the course. Using White Space for Readability When working in teams or contributing to existing libraries, it is critical that you adhere to the common naming convention practices. Learn how to format your code and be consistent about your choices.

• Make a choice—tabs or space, but never both
• Check out how to improve code readability
• Make your code more legible using spaces
• Make you code consistent

Declaring Variables Strategies of working with variables can help you become a better developer. Know the best tips to work with primitive variables.

• Grasp the naming conventions of primitive variables
• Clump variable definitions together
• Keep variables at the top of the scope
• Maintain consistency

Declaring Complex Data Types and Functions It is important to know the differences between functions and variables and how we should name them. Understand the best practices of naming conventions for variables and functions.

• Watch the Hungarian notation in action
• Work with custom objects
• Take a look at the function naming conventions

OOP Naming Conventions Now that we know the naming conventions for functions and variables, let’s have a solid naming convention foundation for OOP coding in JavaScript.

• Understand the constructor naming convention
• Grasp the instance naming convention
• Check out the method and properties naming conventions

Creating a Global Namespace There is no namespace keyword in JavaScript, but it is very easy to create one. Let’s learn what it is.

• Learn what namespaces are
• How to create a namespace
• Understand why namespaces are important

Constants (and Pseudo constants) A variable's value keeps changing, but many a times, you want to store information that never changes. Let’s learn how to define constants in JavaScript and the naming convention that will make it easy for us to treat these variables as constants.

• Learn how to define constants in JavaScript
• Understand the naming conventions for constants in JavaScript

Smart Coercion of Data Fields Let’s briefly talk about consistency of our code in general using the unary convention. We will see how to use it to make our code more efficient and improve code performance.

• Learn what unary is
• Grasp the use of unary + to make our code more efficient
• Prevent unexpected behavior in our code

Targeting at JavaScript Versions or Features One of the vital parts of building a library, a framework, or original code that interacts directly with the browser is the need to test and validate compatibility with the browser.

• The important decision is: should we focus on the JavaScript version or feature availability?
• Create a pure JavaScript onLoad script
• Learn JavaScript feature detection and workarounds

Creating an onload Method That Always Works The default way in which onload works is that it only allows one onload to occur at a time. But what happens if you don't control the loading process of other applications and wish to enable an onload without breaking the loading process on your end? Learn a great hack that will enable you to create an onload without needing to worry if other onloads exist.

• The problem with the onload callback
• The cross-browser solution to this problem
• Creating a functional onload trigger mechanism

OnReady – Our First Cross-browser Script Not every feature is detectable on every browser, and many a times, you will need to come up with creative solutions that can bypass the issues of the ways by which different browsers do different things.

• Testing for availability of a feature
• Working with DOMContentLoaded
• Falling back to onLoad

Using Modernizr to Detect Features Let’s turn our attention to Modernizr, which makes it easy to write conditional JavaScript and CSS for browser feature supports.

• We get rid of our need to detect features manually
• Integrate Modernizr
• Use Modernizr to detect features

Building a Conditional Logic Flow There is a new feature in town called querySelectorAll. Before we can start working with it, we need to filter out and define the browsers that support this feature, while building the foundation for an alternative solution.

• Discover the available support levels in browsers
• Create a conditional feature script
• Take a first look at the querySelectorAll method

Selecting DOM Elements Natively in HTML5 In the modern world of HTML5, there are very easy ways to select elements natively using the querySelectorAll method. Learn how to build your application in a way that would recognize that your browser does not support this feature when it does not.

• Get to know the querySelector method
• Choose to work with querySelectorAll
• A cross-browser solution for changing DOM content

Creating a Cross-browser Script Loader When the browser does not support the querySelectorAll feature, we need to develop a script loader that is cross-browser-compatible.

• Create a script loader
• Add compatibility logic for older browsers
• We inject our script into the document

Using Sizzle to Select DOM Elements We see how to load scripts dynamically only when we need them, using the script loader we created in the last video. We will have all of the groundwork ready to start creating our own library.

• Load scripts dynamically only when you need them
• Create a smooth alternative for your users that don't support built-in selectors
• Make the rest of the application unaware of these changes

Defining a Namespace Namespaces provide a way for us to avoid overwriting code. Most of the times, we use namespaces to provide a structure for our library elements.

• Learn how to avoid overwriting code
• See how easy it is to create a namespace
• Start building your library skeleton

Creating Private Variables in JavaScript JavaScript doesn't support private variables natively as yet. There are ways to create pseudo-private variables, but the problem is that they can still be overwritten by other developers (by mistake or on purpose).

• Create an anonymous function
• Self-trigger an anonymous function
• Create private variables

The JavaScript Module Design Pattern We will create a safer global variable definition as we get to know our first design pattern—the Module Design Pattern.

• Create the core structure of your library
• Create a safe global variable
• Understand the Module Design Pattern

Version Controlling Our Library As you start working with your library (and it becomes popular), you might get to a situation where it's being loaded more than once. Learn how you can deal with situations like this.

• Understand the throwing of errors in JavaScript
• See how you can avoid errors if double loads are accepted
• Know the importance of updating your library

Building Out Our Library We will take all the scraps of code that we created in previous videos (and sections) and combine them together into our library.

• Move all variables out of the global scope
• We move all our methods into the library
• Test whether everything works as expected

Thinking with Interfaces While interfaces don't exist in JavaScript, the ideas behind them are very relevant for JavaScript. Let’s understand what interfaces are and how to implement the logic behind them in JavaScript.

• What is an interface
• How to implement interfaces in JavaScript
• Getting ready to create an adapter

Creating an Adapter Design Pattern Learn what an adapter is and why we would want to use them in programing and in JavaScript.

• What is an adapter
• Why we would want to use one
• Understand the case for the ease of expanding

Building a jQuery Adapter We want our library to always do the same thing, no matter what the underlying library that is enabling it is. Let’s build a jQuery adapter to first check whether the user has jQuery loaded. If it is, we will use the library for our operations.

• Creating a jQuery adapter
• Testing whether jQuery is around
• Returning the same type of data always

Adding a Functionality Method So far, our focus in the creation of our library was on getting all the elements of our adapters to work the same, as we focused on creating custom queries. We will now piggyback on the jQuery text method as we discover the problem we have in our current architecture.

• Add a context for jQuery to talk to itself behind the hood
• Add the text method to the adapters
• Mimic the same feature on all plugins

Mimicking the jQuery Wrapper Our goal is to create a library that is functional and useful. As such, we will take advantage of the strategy that jQuery uses to make it easier to interact with elements.

• Add the text method to the adapters
• Wrap the outcome into an object
• Return the object to the user

Introducing the Facade Design Pattern In this video, we will discover the Facade Design Pattern. Creating a simple constant interface. This interface is going to be sent to the user no matter what library element they are using.

• We march towards our main goal—hiding everything
• We want users to always get the same object; let's do that
• Keep what happens behind the hood behind the hood

Creating a Facade Creator In the last video, we created a Facade Design Pattern, but our solution was not complete. We still need to figure out a way to update the initial values that we configure when we start our application to use the Facade. By the end of this video, we will be fully using the Facade Design pattern.

• Understand why we are not always using the Facade
• Create a Facade creator
• We fix our currently library issue

Creating a New Global Function Through the Facade Want to make your facade a lot more than just a standard Façade? You can do so by incorporating its own methods.

• Add a costume method to the facade
• Test things out

Creating an Advanced Facade Pattern We’ve created our façade pattern, but it can very easily get exposed to the methods and items that we really want to hide from all users. Let’s take our facade design pattern to the next level by exposing only what we want to expose in the library.

• Make everything private by default
• Manually expose what we want to expose
• Return the public API to the user

Creating a Singleton We need a global object that is always available for all the elements in an application. Let’s use a singleton, which is a design pattern that helps us create an object only one time.

• What is a singleton
• When do you need to use one
• How to create a singleton in JavaScript

Building the Constructor for Our Ticker We will take our singleton from the last video and start building it out, starting from its constructor.

• Define the public API
• Build up the add method logic
• Create a dictionary

Connecting Time with Our Ticker We will continue and build the dictionary usage for our ticker.

• We integrate our Dictionary into our ticker logic
• Start an interval and set its sensitivity
• Build up the logic structure of our ticker

Processing Interval groups Let’s get our ticker to work.

• Build the logic to process interval groups
• Learn how to debug applications
• Fix bugs

Exposing Our Ticker to the World We have a working ticker but it's hidden from users. Let’s expose the ticker to all users, and thus complete the creation of our ticker and our singleton.

• Exposing the ticker to all users
• Integrate our ticker into our library

Creating an Event Dispatcher An event dispatcher is a type of design pattern derived from the Observer Design pattern that enables the developer’s objects to listen to changes in another object without creating a direct two-directional linkage between the objects. In this video, we will have a working event dispatcher.

• Add events to the dispatcher
• Dispatch the events
• Test whether everything works as planned

Integrating the Event Dispatcher into Our Library In the last video, we created an event dispatcher. It's time for us to really test it by integrating it into the ticker time manager that we created in an earlier section.

• We integrate the event dispatcher into our ticker
• Dispatch the events in our ticker
• Test things as users

Removing Events from the Dispatcher We already have a working event dispatcher, but at this stage, we can't remove the events. We need to solve this.

• Create the logic for removing events
• Test it

Building Test Units We are done building, and in our last video in this course, we need to dedicate a bit of time to testing our application over time.

• Refractor the code to accept unit tests
• Create unit tests
• Run tests to check whether everything works as expected

Mastering JavaScript. 39 lectures 04:10:07 Mastering JavaScript - The Course Overview This video provides you a synopsis of the course. Using White Space for Readability When working in teams or contributing to existing libraries, it is critical that you adhere to the common naming convention practices. Learn how to format your code and be consistent about your choices.

• Make a choice—tabs or space, but never both
• Check out how to improve code readability
• Make your code more legible using spaces
• Make you code consistent

Declaring Variables Strategies of working with variables can help you become a better developer. Know the best tips to work with primitive variables.

• Grasp the naming conventions of primitive variables
• Clump variable definitions together
• Keep variables at the top of the scope
• Maintain consistency

Declaring Complex Data Types and Functions It is important to know the differences between functions and variables and how we should name them. Understand the best practices of naming conventions for variables and functions.

• Watch the Hungarian notation in action
• Work with custom objects
• Take a look at the function naming conventions

OOP Naming Conventions Now that we know the naming conventions for functions and variables, let’s have a solid naming convention foundation for OOP coding in JavaScript cal that you adhere to the common naming convention practices. Learn how to format your code and be consistent about your...