Modular Programming with JavaScript

Modular Programming with JavaScript

by Sasan Seydnejad
Released July 2016
Publisher(s): Packt Publishing
ISBN: 9781785880650

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Modularize your JavaScript code for better readability, greater maintainability, and enhanced testability

About This Book

  • Design and build fully modular, modern JavaScript applications using modular design concepts
  • Improve code portability, maintainability, and integrity while creating highly scalable and responsive web applications
  • Implement your own loosely coupled code blocks that can power highly maintainable and powerful applications in a flexible and highly responsive modular architecture

Who This Book Is For

If you are an intermediate to advanced JavaScript developer who has experience of writing JavaScript code but probably not in a modular, portable manner, or you are looking to develop enterprise level JavaScript applications, then this book is for you.

A basic understanding of JavaScript concepts such as OOP, prototypal inheritance, and closures is expected.

What You Will Learn

  • Understand the important concepts of OOP in JavaScript, such as scope, objects, inheritance, event delegation, and more
  • Find out how the module design pattern is used in OOP in JavaScript
  • Design and augment modules using both tight augmentation and loose augmentation
  • Extend the capabilities of modules by creating sub-modules using techniques such as cloning and inheritance
  • Move from isolated module pieces to a cohesive, well integrated application modules that can interact and work together without being tightly coupled
  • See how SandBoxing is used to create a medium for all the modules to talk to each other as well as to the core
  • Use the concepts of modular application design to handle dependencies and load modules asynchronously
  • Become familiar with AMD and CommonJS utilities and discover what the future of JavaScript holds for modular programming and architecture

In Detail

Programming in the modular manner is always encouraged for bigger systems - it is easier to achieve scalability with modular programming. Even JavaScript developers are now interested in building programs in a modular pattern. Modules help people who aren't yet familiar with code to find what they are looking for and also makes it easier for programmers to keep things that are related close together.

Designing and implementing applications in a modular manner is highly encouraged and desirable in both simple and enterprise level applications.

This book covers some real-life examples of modules and how we can translate that into our world of programming and application design. After getting an overview of JavaScript object-oriented programming (OOP) concepts and their practical usage, you should be able to write your own object definitions using the module pattern. You will then learn to design and augment modules and will explore the concepts of cloning, inheritance, sub-modules, and code extensibility. You will also learn about SandBoxing, application design, and architecture based on modular design concepts. Become familiar with AMD and CommonJS utilities.

By the end of the book, you will be able to build spectacular modular applications in JavaScript.

Style and approach

This in-depth step-by-step guide will teach you modular programming with JavaScript. Starting from the basics, it will cover advanced modular patterns that can be used in sophisticated JavaScript applications.

Table of contents

  1. Modular Programming with JavaScript
    1. Table of Contents
    2. Modular Programming with JavaScript
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. eBooks, discount offers, and more
        1. Why subscribe?
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. What Are Modules and Their Advantages?
      1. Prelude to modular programming
      2. The simple rule for creating modules
      3. A real-life example of modules
      4. A look at a non-modular example
      5. Re-factoring to a more modularized approach
      6. Designing in a modular way
      7. Summary
    9. 2. Review of Important JavaScript OOP Concepts
      1. JavaScript objects
        1. Object type constructors
        2. Object literal notation
        3. Function objects
          1. Functions as object constructors (classes)
          2. Functions as static objects
        4. Object literal notation versus function objects
        5. The "this" keyword
        6. Closures
        7. Encapsulation and scoping
        8. Inheritance
          1. Prototype chaining
            1. Property look up in prototype chaining
            2. Resetting the constructor property
          2. Constructor stealing
          3. Parasitic combination inheritance
        9. Constructor property
        10. Native support for inheritance
      2. Summary
    10. 3. Module Design Pattern
      1. Module pattern
        1. Internal private scope in module pattern
        2. Adding properties to an interface in module pattern
        3. Object factory module
      2. Creating loose coupling among modules
        1. Application core module
        2. Application Mediator module
        3. Application non-core modules
          1. testModule1 implementation
          2. testModule2 implementation
          3. Auto-initialization of application modules
        4. Module initialization and design considerations
      3. Summary
    11. 4. Designing Simple Modules
      1. The big picture
        1. Our application requirements
        2. Dynamic views
      2. Designing our SPA main pieces
        1. Application controller
          1. Application controller modules
            1. Page updater module
            2. Storage handler module
            3. Communication handler module
            4. Utilities module
            5. Message handler module
            6. Logging handler module
        2. Creating our first core module
          1. Structure of our first module
          2. Using our first module's functionality
          3. Mapping our module's methods to its interface
        3. Application view
          1. Creating the index.html page skeleton
          2. Creating an object definition for the header
          3. Generating the Header fragment dynamically
          4. Generating client application's view dynamically
        4. Application model
          1. Creating a module for our application's model
        5. Creating a logging module
      3. Summary
    12. 5. Module Augmentation
      1. Principles of module augmentation
      2. Implementing module augmentation
      3. Simple augmentation of ImagesInc_GlobalData
      4. The order of things in module augmentation
      5. Loose augmentation of modules
        1. Loose augmentation of ImagesInc_GlobalData
        2. Testing ImagesInc_GlobalData data encapsulation
      6. Tight augmentation of modules
        1. Tight augmentation of ImagesInc_GlobalData
        2. Loading ImagesInc_GlobalData augmenting code
        3. Considerations in tight augmentation
      7. Generating our application's content area
      8. Summary
    13. 6. Cloning, Inheritance, and Submodules
      1. Cloning modules
        1. Creating instances of a constructor function
        2. Using the assignment operator for copying objects
        3. Creating a clone of an object
          1. Shallow cloning and deep cloning
          2. Using external libraries for cloning
          3. Using JSON exploit for cloning
          4. Creating a custom clone method
      2. Creating ImagesInc_Utilites module
        1. Testing our custom cloning method in ImagesInc_Utilites module
        2. An important aspect of our cloning method
      3. Inheritance in modules
        1. Module inheritance using __proto__ object
        2. Module inheritance using parasitic combination
        3. Deciding on the module inheritance approach
      4. Submodules
        1. Adding submodules using dynamic properties
        2. Adding submodules using asynchronous properties
      5. Summary
    14. 7. Base, Sandbox, and Core Modules
      1. Application architecture overview
      2. Base module
        1. Adding general-purpose libraries to the base module
      3. Sandbox module
        1. Sandbox module functionality
          1. Sandbox as a consistent interface
          2. Sandbox as a security layer
          3. Sandbox as a communication layer
          4. Sandbox as a filter
        2. Implementing multiple instances of the sandbox module
          1. Advantages of multiple instances of the sandbox
            1. Isolating the sandbox instances from each other
            2. Creating a code execution context
            3. Performance improvements
      4. Core module
        1. Core module construction approach
          1. Core module functionality
        2. Acting as the controller
        3. Providing communication bridges
        4. Initializing and destroying components
        5. Providing plug-and-play capability
        6. Providing a centralized approach to handling errors
        7. Providing application-level extensibility
        8. Leveraging third party libraries
      5. Components
        1. Components required methods
        2. Binding events to the components elements
        3. Component design considerations
      6. Application architectural considerations
      7. Summary
    15. 8. Application Implementation – Putting It All Together
      1. The user's view of our application
      2. Application functionality
        1. Index page
        2. Image page
        3. Favorites page
        4. Support widget
      3. Application implementation
        1. Loading our module files in index.html
        2. Base module implementation
        3. Core module implementation
          1. MainCore module implementation
            1. Augmenting MainCore module
              1. Augmenting MainCore using tight augmentation
              2. Augmenting MainCore using sub-modules
          2. Component registration with MainCore
          3. Dynamic loading of components by MainCore
            1. Storing object definitions in local storage
            2. Getting a component's object definition from local storage
            3. Dynamically loading component's resources from the server
          4. Routing functionality in MainCore module
            1. Adding a URL to the history object of the browser
            2. Getting a URL from the history object of the browser
          5. Publish-subscribe implementation in MainCore
            1. Registering components for custom events
            2. Broadcasting custom events by components
        4. SandBox module implementation
          1. SandBox module's constructor
          2. Setting a component's container context in the SandBox instance
          3. Identifying the SandBox module's instance
          4. SandBox module considerations
      4. Application components
        1. Registering components with MainCore module
        2. Header component
        3. Footer component
        4. Content component
          1. Handling content area click events
            1. Handling the Add To Favorite link click event
            2. Handling an image click event
          2. Content area generator methods
        5. NotificationWidget component
          1. NotificationWidget's model
          2. Required methods of the notificationWidget component
        6. Rendering notificationWidget
      5. GlobalData module
      6. Summary
    16. 9. Modular Application Design and Testing
      1. Advantages of writing automated tests
      2. Different types of automated tests
        1. Unit testing
          1. TDD unit tests
          2. BDD unit tests
          3. TDD versus BDD
          4. Test coverage
        2. Integration testing
        3. End to end testing
      3. A simple start to writing our unit tests
        1. Writing unit tests without any unit testing frameworks
          1. Adding an AppTester module to our application
          2. Adding unit test suites to our test-runner
          3. CookieHandler module unit tests
          4. Running CookieHandler unit tests
          5. Cleaning up after running our unit tests
        2. Writing unit tests using third party frameworks
          1. Introduction to Jasmine
            1. Setting up Jasmine
            2. Creating our Jasmine spec file
            3. Running our Jasmine unit tests
            4. Exploring Jasmine further
          2. Introduction to Mocha
            1. Setting up Mocha
            2. Chai
            3. Creating our Mocha spec file
            4. Running our Mocha-Chai unit tests
            5. Exploring Mocha further
      4. Summary
    17. 10. Enterprise Grade Modular Design, AMD, CommonJS, and ES6 Modules
      1. Revisiting index.html file
      2. Introducing Asynchronous Module Definition
        1. Defining modules using AMD format
        2. Importing AMD modules
        3. Introducing RequireJS
          1. Downloading RequireJS
        4. A test project for creating and loading AMD modules
          1. Creating a simple AMD module
          2. Consuming our person AMD module
          3. Loading dependencies of dependencies
          4. Loading and consuming non-AMD modules
          5. Setting paths in the config object
          6. Creating shims for non-AMD modules
        5. Refactoring Images Inc. application to use AMD format
          1. Modifying Core submodules into AMD modules
          2. Loading our non-AMD modules using RequireJS
          3. Setting up our application's config.js file
          4. Booting up our application using RequireJS
      3. CommonJS
        1. Implementing a CommonJS module
      4. ECMAScript 6 modules
        1. Defining an ES6 module
        2. Consuming an ES6 module
        3. Module loading sequence in the browsers for ES6 modules
      5. Summary
    18. Index

Product information

  • Title: Modular Programming with JavaScript
  • Author(s): Sasan Seydnejad
  • Release date: July 2016
  • Publisher(s): Packt Publishing
  • ISBN: 9781785880650