Modular Programming with JavaScript

Sasan Seydnejad

• Publisher: Packt Publishing
• Year: 2016
• eBook ISBN: 9781785880650
• Edition: 1
• Topic: Computer Science
• Subtopic: Object Oriented Programming
• Index: Computer Science

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.

Modular Programming with JavaScript

---

Table of Contents

Modular Programming with JavaScript

Credits

About the Author

About the Reviewers

www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. What Are Modules and Their Advantages?

Prelude to modular programming

The simple rule for creating modules

A real-life example of modules

A look at a non-modular example

Re-factoring to a more modularized approach

Designing in a modular way

Summary

2. Review of Important JavaScript OOP Concepts

JavaScript objects

Object type constructors

Object literal notation

Function objects

Functions as object constructors (classes)

Functions as static objects

Object literal notation versus function objects

The "this" keyword

Closures

Encapsulation and scoping

Inheritance

Prototype chaining

Property look up in prototype chaining

Resetting the constructor property

Constructor stealing

Parasitic combination inheritance

Constructor property

Native support for inheritance

Summary

3. Module Design Pattern

Module pattern

Internal private scope in module pattern

Adding properties to an interface in module pattern

Object factory module

Creating loose coupling among modules

Application core module

Application Mediator module

Application non-core modules

testModule1 implementation

testModule2 implementation

Auto-initialization of application modules

Module initialization and design considerations

Summary

4. Designing Simple Modules

The big picture

Our application requirements

Dynamic views

Designing our SPA main pieces

Application controller

Application controller modules

Page updater module

Storage handler module

Communication handler module

Utilities module

Message handler module

Logging handler module

Creating our first core module

Structure of our first module

Using our first module's functionality

Mapping our module's methods to its interface

Application view

Creating the index.html page skeleton

Creating an object definition for the header

Generating the Header fragment dynamically

Generating client application's view dynamically

Application model

Creating a module for our application's model

Creating a logging module

Summary

5. Module Augmentation

Principles of module augmentation

Implementing module augmentation

Simple augmentation of ImagesInc_GlobalData

The order of things in module augmentation

Loose augmentation of modules

Loose augmentation of ImagesInc_GlobalData

Testing ImagesInc_GlobalData data encapsulation

Tight augmentation of modules

Tight augmentation of ImagesInc_GlobalData

Loading ImagesInc_GlobalData augmenting code

Considerations in tight augmentation

Generating our application's content area

Summary

6. Cloning, Inheritance, and Submodules

Cloning modules

Creating instances of a constructor function

Using the assignment operator for copying objects

Creating a clone of an object

Shallow cloning and deep cloning

Using external libraries for cloning

Using JSON exploit for cloning

Creating a custom clone method

Creating ImagesInc_Utilites module

Testing our custom cloning method in ImagesInc_Utilites module

An important aspect of our cloning method

Inheritance in modules

Module inheritance using __proto__ object

Module inheritance using parasitic combination

Deciding on the module inheritance approach

Submodules

Adding submodules using dynamic properties

Adding submodules using asynchronous properties

Summary

7. Base, Sandbox, and Core Modules

Application architecture overview

Base module

Adding general-purpose libraries to the base module

Sandbox module

Sandbox module functionality

Sandbox as a consistent interface

Sandbox as a security layer

Sandbox as a communication layer

Sandbox as a filter

Implementing multiple instances of the sandbox module

Advantages of multiple instances of the sandbox

Isolating the sandbox instances from each other

Creating a code execution context

Performance improvements

Core module

Core module construction approach

Core module functionality

Acting as the controller

Providing communication bridges

Initializing and destroying components

Providing plug-and-play capability

Providing a centralized approach to handling errors

Providing application-level extensibility

Leveraging third party libraries

Components

Components required methods

Binding events to the components elements

Component design considerations

Application architectural considerations

Summary

8. Application Implementation – Putting It All Together

The user's view of our application

Application functionality

Index page

Image page

Favorites page

Support widget

Application implementation

Loading our module files in index.html

Base module implementation

Core module implementation

MainCore module implementation

Augmenting MainCore module

Augmenting MainCore using tight augmentation

Augmenting MainCore using sub-modules

Component registration with MainCore

Dynamic loading of components by MainCore

Storing object definitions in local storage

Getting a component's object definition from local storage

Dynamically loading component's resources from the server

Routing functionality in MainCore module

Adding a URL to the history object of the browser

Getting a URL from the history object of the browser

Publish-subscribe implementation in MainCore

Registering components for custom events

Broadcasting custom events by components

SandBox module implementation

SandBox module's constructor

Setting a component's container context in the SandBox instance

Identifying the SandBox module's instance

SandBox module considerations

Application components

Registering components with MainCore module

Header component

Footer component

Content component

Handling content area click events

Handling the Add To Favorite link click event

Handling an image click event

Content area generator methods

NotificationWidget component

NotificationWidget's model

Required methods of the notificationWidget component

Rendering notificationWidget

GlobalData module

Summary

9. Modular Application Design and Testing

Advantages of writing automated tests

Different types of automated tests

Unit testing

TDD unit tests

BDD unit tests

TDD versus BDD

Test coverage

Integration testing

End to end testing

A simple start to writing our unit tests

Writing unit tests without any unit testing frameworks

Adding an AppTester module to our application

Adding unit test suites to our test-runner

CookieHandler module unit tests

Running CookieHandler unit tests

Cleaning up after running our unit tests

Writing unit tests using third party frameworks

Introduction to Jasmine

Setting up Jasmine

Creating our Jasmine spec file

Running our Jasmine unit tests

Exploring Jasmine further

Introduction to Mocha

Setting up Mocha

Chai

Creating our Mocha spec file

Running our Mocha-Chai unit tests

Exploring Mocha further

Summary

10. Enterprise Grade Modular Design, AMD, CommonJS, and ES6 Modules

Revisiting index.html file

...

Table of contents

• Modular Programming with JavaScript