O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning Path: Javascript Patterns

Video Description

Write clear, expressive and maintainable JS

In Detail

A strong understanding of programming languages helps you to deliver functional solutions quickly, and will reduce your usage of third-party ‘utility’ dependencies like jQuery or lodash. This essential collection of design patterns and best practices will help build your overall understanding of JavaScript as a language, helping you confidently and quickly deliver robust, scalable web applications.

Prerequisites: A firm understanding of JavaScript and JavaScript (ES5) syntax

Resources: Code downloads and errata:

  • Learning Object Oriented JavaScript

  • Learning JavaScript Data Structures and Algorithms

  • JavaScript Design Patterns 20 Patterns for Advancing Your JavaScript Skills

  • Mastering JavaScript Design Patterns: A Practical Introduction to Building Better Applications

  • JavaScript High Performance

  • This path navigates across the following products (in sequential order):

  • Learning Object Oriented JavaScript (2h 47m)

  • Learning JavaScript Data Structures and Algorithms (3h 15m)

  • JavaScript Design Patterns 20 Patterns for Advancing Your JavaScript Skills (1h 1m)

  • Mastering JavaScript Design Patterns: A Practical Introduction to Building Better Applications (2h 10m)

  • JavaScript High Performance (2h 40m)

  • Photo Credit: ©iStockphoto.com/maciek905

    Table of Contents

    1. Chapter 1 : Learning Object Oriented JavaScript
      1. Setting Up the HTML and CSS 00:08:33
      2. Knowing When the Document is Loaded 00:03:47
      3. Understanding What Objects Are 00:06:53
      4. The Difference between Browsers 00:04:44
      5. Tying Up Loose Ends 00:05:32
      6. Building with Objects 00:08:40
      7. Scoping for Your Scope: ‘this’ not ‘that’ 00:07:34
      8. Constructing a Constructor 00:07:20
      9. Reusing Objects 00:11:47
      10. Creating Methods with the Prototype 00:07:12
      11. Augmenting Built-in Objects 00:07:16
      12. Static Properties and Methods 00:14:10
      13. Moving Our Code into a Namespace 00:05:31
      14. Functions that Have Functions 00:04:16
      15. Inheriting Your Parents' Belongings 00:09:46
      16. Creating a Polyfill for Object.create 00:05:31
      17. Overriding Properties and Methods 00:07:38
      18. Creating an Alarm Clock 00:07:24
      19. Turning DIVs into Editable Content in HTML5 00:05:01
      20. Listening to Events 00:07:22
      21. Setting the Alarm Time Dynamically 00:05:46
      22. Dispatching Events 00:06:06
      23. Custom Callbacks 00:10:48
    2. Chapter 2 : Learning JavaScript Data Structures and Algorithms
      1. The Course Overview 00:02:06
      2. What Are Data Structures and Algorithms? 00:02:35
      3. Why Use Data Structures in JavaScript? 00:02:19
      4. Course Format and Datasets Contexts 00:02:33
      5. Introduction to Arrays 00:05:28
      6. Exploring Linked Lists 00:10:18
      7. Introduction to Sets 00:06:09
      8. All about Queues 00:04:39
      9. Exploring Stacks 00:04:20
      10. Introduction to Binary Trees 00:05:11
      11. Exploring Graphs 00:07:42
      12. Describing Algorithms with Big-O Notation 00:06:58
      13. Pathfinding Algorithms 00:06:39
      14. Sorting 00:09:13
      15. Searching 00:07:03
    3. Chapter 3 : JavaScript Design Patterns 20 Patterns for Advancing Your JavaScript Skills
      1. The Course Overview 00:04:03
      2. The Problem with the Global Scope 00:12:50
      3. Moving to One Object and Namespace 00:08:14
      4. The Module Design Pattern 00:07:59
      5. The Module Reveal Pattern 00:06:33
      6. Controlling the Global Access Completely 00:05:47
      7. The Singleton Design Pattern 00:13:21
      8. The Factory Design Pattern 00:06:21
      9. The Abstract Factory Design Pattern 00:09:44
      10. The Builder Design Pattern 00:12:11
      11. The Builder Design Pattern Continued 00:05:05
      12. The Prototype Design Pattern 00:04:59
      13. Abstracting Our Singleton 00:09:06
      14. The Adapter Design Pattern 00:06:13
      15. The Composite Design Pattern 00:11:59
      16. The Decorator Design Pattern 00:04:24
      17. The Fly Weight Design Pattern 00:07:15
      18. The Façade Design Pattern 00:04:59
      19. Getting Things Working Again 00:05:19
      20. The Bridge Design Pattern 00:01:35
      21. The Proxy Design Pattern 00:05:42
      22. The Chain of Responsibility – Part 1 00:06:03
      23. The Chain of Responsibility – Part 2 00:08:51
      24. The Observer Design Pattern – Adding and Dispatching Events 00:08:39
      25. The Observer Design Pattern – Removing Events 00:04:42
      26. The State Design Pattern 00:14:02
    4. Chapter 4 : Mastering JavaScript Design Patterns: A Practical Introduction to Building Better Applications
      1. The Course Overview 00:03:01
      2. Software Design Patterns and Antipatterns 00:02:45
      3. JavaScript Patterns Specifics 00:02:52
      4. Bootstrapping the Project 00:05:30
      5. Adding the Play Functionality 00:03:57
      6. Encapsulating Information 00:02:43
      7. Abstracting Manipulation with DOM Events and Elements 00:04:26
      8. Creating an Adapter to Set Intervals Using Seconds 00:01:25
      9. Using Different Ways to Match Conditions 00:02:29
      10. Modularizing the Application Using Namespaces 00:04:33
      11. Modularizing the Application Using AMD and Require.js 00:04:10
      12. Communication Between Modules 00:05:00
      13. ES6 Modules 00:04:52
      14. Decoupling the Tracks Queue from the Tracks Player 00:04:22
      15. Treating Each Track as a Separate Component 00:07:20
      16. Adding the PubSub Functionality to Tracks 00:02:24
      17. Enabling Track Play and Highlighting the Active Track 00:04:21
      18. Decoupling the Track Model from the View 00:03:06
      19. Formatting Track Time: Two-way Data Binding 00:04:20
      20. Adding a Few Types of Tracks 00:03:09
      21. Implementing Track Removal 00:03:15
      22. Iterating Over Tracks Using a Generator 00:02:45
      23. Iterating Over Tracks Using an Iterator 00:02:51
      24. Adding Nested Tracks and Displaying Them 00:02:45
      25. Fixing the Queue to Work with Nested Tracks 00:04:39
      26. Creating the Server Using Node.js 00:02:17
      27. Returning the Tracks Queue from the Server 00:03:58
      28. Loading Tracks from the Server 00:02:32
      29. Replacing Callbacks with Promises 00:01:41
      30. Binding a Function to a Custom Context 00:01:34
      31. Loading Tracks' Additional Data from the Server 00:04:27
      32. Caching Data Loaded from the Server 00:01:53
      33. Checking for Track Data with a Fallback 00:03:08
      34. Storing Common Tracks Data in Shared Objects 00:02:43
      35. Adding Different Skins for the Player Header 00:04:17
      36. Improving Testability by Inversion of Control 00:01:57
      37. Forcing Function Argument Types 00:03:02
      38. Fixing Models to Support Any String as Attribute Name 00:03:38
    5. Chapter 5 : JavaScript High Performance
      1. Course Overview 00:02:02
      2. Caching Your Scripts 00:11:12
      3. Creating a Cache Buster 00:04:58
      4. Minifying Your Output 00:09:02
      5. Always Declare Your Variables 00:03:18
      6. Creating Location References 00:09:02
      7. Condensing var Definitions 00:05:00
      8. Comparing Explicitly When Appropriate 00:02:53
      9. Using String Accumulator-style 00:03:26
      10. Building Strings with Arrays 00:03:12
      11. Avoiding eval for Object References 00:04:05
      12. Talking to Functions 00:02:13
      13. Avoiding eval 00:04:48
      14. Reducing the Use of Anonymous Functions 00:03:24
      15. OOP – Defining Class Methods and Properties 00:03:55
      16. Picking the Right Loop for the Task 00:02:30
      17. Simplifying Your Loops – Round 1 00:05:12
      18. Reducing the Loop Footprint 00:09:31
      19. Loops, Arrays, and Memory Leaks 00:05:21
      20. Preallocating Size to an Array 00:09:15
      21. Avoiding the Unnecessary 00:08:43
      22. Putting Code Where It Should Be 00:08:30
      23. Clearing Circular References 00:10:49
      24. Using Less Events to Do More 00:08:10
      25. Trading Smoothness for Speed 00:07:12
      26. Clearing Memory Leaks by Always Clearing Intervals 00:03:04
      27. How to Avoid Running Multiple Intervals 00:12:53
      28. Reducing DOM Calls 00:13:24
      29. Reducing Document Reflows 00:07:00
      30. Making It Animate Smoothly 00:11:31
      31. Changing Classes and Not Styles 00:07:11
      32. Adding Scripts as You Need Them Dynamically 00:04:07
      33. Cutting Traveling with HTML5 Validation 00:04:45
      34. Moving Data Processing to the Client Side 00:09:41
      35. What Data Types to Use? 00:01:24
      36. Caching Data 00:01:45
      37. The Issue with Working Directly with HTML Collections 00:04:44
      38. Converting Collection Objects into Arrays 00:03:22
      39. FPS and High Resolution Time – HRT 00:16:52
      40. JavaScript Profiling and Memory Leaks 00:05:31