Mastering JavaScript Object-Oriented Programming


Course Description

This course is designed to help new programmers learn popular Object-Oriented programming (OOP) principles and design patterns to build robust apps and implement Object-Oriented concepts in a wide range of front-end architectures using JavaScript. It covers the new features introduced in ES6 and shows participants the first steps in how to build large-scale web apps and build apps that promote scalability, maintainability, and reusability.

Duration: 5 days


Prerequisites

No specific pre-requisites. The course is suitable for participants not familiar with OOP or for programmers who have not done any structured training on JavaScript.

A Refresher of Objects

Object literals
Properties
Methods
Object constructors
The Object() constructor
Object prototypes
Using classes

Diving into OOP Principles

OOP principles
Is JavaScript Object Oriented?
Abstraction and modeling support
Association
Aggregation
Composition
OOP principles support
Encapsulation
Inheritance
Polymorphism
JavaScript OOP versus classical OOP

Working with Encapsulation and Information Hiding

Encapsulation and information hiding
Convention-based approach
Privacy levels using closure
Scope and closure
Privacy levels
Benefits and drawbacks
A meta-closure approach
Immediately invoked function expressions
Creating a meta-closure with an IIFE
Managing isolated private members
A definitive solution with WeakMaps
Property descriptors
Controlling access to public properties
Using getters and setters
Describing properties
Properties with internal state
Information hiding in ES6 classes

Inheriting and Creating Mixins

Why inheritance?
Objects and prototypes
What is a prototype?
Creating objects
Prototype chaining
Inheritance and constructors
ES6 inheritance
Controlling inheritance
Overriding methods
Overriding properties
Protected members
Preventing extensions
Implementing multiple inheritance
Creating and using mixins
Mixing prototypes
Mixing classes

Defining Contracts with Duck Typing

Managing dynamic typing
Dynamic data types
Data typing and objects
From data type to instance type
Beyond the instance type
Contracts and interfaces
Duck typing
A basic approach
A general solution
Emulating Interfaces with duck typing
Multiple interface implementation
Duck typing and polymorphism

Advanced Object Creation

Creating objects
Design patterns and object creation
Creating a singleton
The mysterious behavior of constructors
Singletons
When to use singletons?
An object factory
Understanding factories
Factory with constructor registration
The abstract factory
The builder pattern
When to use the builder pattern?
Comparing factory and builder patterns
Recycling objects with an object pool

Presenting Data to the User

Managing user interfaces
The user interface problems
User interfaces and JavaScript
Presentation patterns
Model, View, and Controller
The Model-View-Controller pattern
The Model-View-Presenter pattern
The Model-View-ViewModel pattern
A MV* pattern comparison

Data Binding

What is data binding?
Data binding elements
Data binding directions
Implementing data binding
Manual data binding
Monitoring changes
Hacking properties
Defining a binder
The publish/subscribe pattern
The observer pattern
The publisher/subscriber pattern
Implementing observables
Using proxies
The proxy class
Data binding with proxies

Asynchronous Programming and Promises

Is JavaScript asynchronous?
Event loop and asynchronous code
Events, Ajax, and other asynchronous stuff
Writing asynchronous code
Using events properties
Using callbacks
Callbacks and this
The callback hell
Organizing callbacks
The issues of asynchronous code
Introducing Promises
What are Promises?
The Promise terminology
Creating Promises
Consuming Promises
Catching failures
Composing Promises
Using Generators
Introducing Generators
Using Generators for asynchronous tasks
ES7 async/await

Organizing Code

The global scope
Global definitions
Creating namespaces
Namespaces as object literals
Defining namespaces with IIFE
The module pattern
Modules versus namespaces
Using anonymous closures
Importing modules
Augmenting modules
Loose augmentation
Overriding a module's methods
Tight augmentation
Composing modules
Submodules
Module loading
Modules, scripts, and files
A simple module loader
CommonJS modules
Asynchronous Module Definition
Merging the module pattern with AMD
Universal Module Definition
UMD
Dependency management
ECMAScript 6 modules
ES6 module loading

SOLID Principles

Principle of OOP design
The Single Responsibility Principle
The Open/Closed Principle
The Liskov Substitution Principle
The Interface Segregation Principle
The Dependency Inversion Principle
Dependency inversion, inversion of control, and dependency injection
Dependency injection approaches

Modern Application Architectures

From scripts to applications
What is a large-scale application?
What is an application architecture?
Goals of an architecture design
From old-style to Single Page Applications
Old-style web applications
Single Page Applications
The server role
View composition
Navigation and routing
The remote data
The Zakas/Osmani architecture
The overall architecture
The modules
The Sandbox
The facade pattern
The application core
The mediator pattern
The base library
Cross-cutting features and AOP
The log management example
Using inheritance
The Aspect-Oriented Programming approach
Isomorphic applications


JavaScript Object Oriented Programming OOP ES6