book

Modular Programming with JavaScript

Name: Modular Programming with JavaScript
Author: Sasan Seydnejad
ISBN: 9781785880650

by Sasan Seydnejad

July 2016

Intermediate to advanced

274 pages

6h 11m

English

Packt Publishing

Read now

Unlock full access

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 moreWhy 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 codeErrataPiracyQuestions
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 objectsObject type constructorsObject literal notationFunction objectsFunctions as object constructors (classes)Functions as static objectsObject literal notation versus function objectsThe "this" keywordClosuresEncapsulation and scopingInheritancePrototype chainingProperty look up in prototype chainingResetting the constructor propertyConstructor stealingParasitic combination inheritanceConstructor propertyNative support for inheritance
Summary
3. Module Design Pattern
Module patternInternal private scope in module patternAdding properties to an interface in module patternObject factory module
Creating loose coupling among modules
Application core moduleApplication Mediator moduleApplication non-core modulestestModule1 implementationtestModule2 implementationAuto-initialization of application modulesModule initialization and design considerations
Summary
4. Designing Simple Modules
The big pictureOur application requirementsDynamic views
Designing our SPA main pieces
Application controllerApplication controller modulesPage updater moduleStorage handler moduleCommunication handler moduleUtilities moduleMessage handler moduleLogging handler moduleCreating our first core moduleStructure of our first moduleUsing our first module's functionalityMapping our module's methods to its interfaceApplication viewCreating the index.html page skeletonCreating an object definition for the headerGenerating the Header fragment dynamicallyGenerating client application's view dynamicallyApplication modelCreating a module for our application's modelCreating 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_GlobalDataTesting ImagesInc_GlobalData data encapsulation
Tight augmentation of modules
Tight augmentation of ImagesInc_GlobalDataLoading ImagesInc_GlobalData augmenting codeConsiderations in tight augmentation
Generating our application's content area
Summary
6. Cloning, Inheritance, and Submodules
Cloning modulesCreating instances of a constructor functionUsing the assignment operator for copying objectsCreating a clone of an objectShallow cloning and deep cloningUsing external libraries for cloningUsing JSON exploit for cloningCreating a custom clone method
Creating ImagesInc_Utilites module
Testing our custom cloning method in ImagesInc_Utilites moduleAn important aspect of our cloning method
Inheritance in modules
Module inheritance using __proto__ objectModule inheritance using parasitic combinationDeciding on the module inheritance approach
Submodules
Adding submodules using dynamic propertiesAdding 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 functionalitySandbox as a consistent interfaceSandbox as a security layerSandbox as a communication layerSandbox as a filterImplementing multiple instances of the sandbox moduleAdvantages of multiple instances of the sandboxIsolating the sandbox instances from each otherCreating a code execution contextPerformance improvements
Core module
Core module construction approachCore module functionalityActing as the controllerProviding communication bridgesInitializing and destroying componentsProviding plug-and-play capabilityProviding a centralized approach to handling errorsProviding application-level extensibilityLeveraging third party libraries
Components
Components required methodsBinding events to the components elementsComponent design considerations
Application architectural considerations
Summary
8. Application Implementation – Putting It All Together
The user's view of our application
Application functionality
Index pageImage pageFavorites pageSupport widget
Application implementation
Loading our module files in index.htmlBase module implementationCore module implementationMainCore module implementationAugmenting MainCore moduleAugmenting MainCore using tight augmentationAugmenting MainCore using sub-modulesComponent registration with MainCoreDynamic loading of components by MainCoreStoring object definitions in local storageGetting a component's object definition from local storageDynamically loading component's resources from the serverRouting functionality in MainCore moduleAdding a URL to the history object of the browserGetting a URL from the history object of the browserPublish-subscribe implementation in MainCoreRegistering components for custom eventsBroadcasting custom events by componentsSandBox module implementationSandBox module's constructorSetting a component's container context in the SandBox instanceIdentifying the SandBox module's instanceSandBox module considerations
Application components
Registering components with MainCore moduleHeader componentFooter componentContent componentHandling content area click eventsHandling the Add To Favorite link click eventHandling an image click eventContent area generator methodsNotificationWidget componentNotificationWidget's modelRequired methods of the notificationWidget componentRendering notificationWidget
GlobalData module
Summary
9. Modular Application Design and Testing
Advantages of writing automated tests
Different types of automated tests
Unit testingTDD unit testsBDD unit testsTDD versus BDDTest coverageIntegration testingEnd to end testing
A simple start to writing our unit tests
Writing unit tests without any unit testing frameworksAdding an AppTester module to our applicationAdding unit test suites to our test-runnerCookieHandler module unit testsRunning CookieHandler unit testsCleaning up after running our unit testsWriting unit tests using third party frameworksIntroduction to JasmineSetting up JasmineCreating our Jasmine spec fileRunning our Jasmine unit testsExploring Jasmine furtherIntroduction to MochaSetting up MochaChaiCreating our Mocha spec fileRunning our Mocha-Chai unit testsExploring Mocha further
Summary
10. Enterprise Grade Modular Design, AMD, CommonJS, and ES6 Modules
Revisiting index.html file
Introducing Asynchronous Module Definition
Defining modules using AMD formatImporting AMD modulesIntroducing RequireJSDownloading RequireJSA test project for creating and loading AMD modulesCreating a simple AMD moduleConsuming our person AMD moduleLoading dependencies of dependenciesLoading and consuming non-AMD modulesSetting paths in the config objectCreating shims for non-AMD modulesRefactoring Images Inc. application to use AMD formatModifying Core submodules into AMD modulesLoading our non-AMD modules using RequireJSSetting up our application's config.js fileBooting up our application using RequireJS
CommonJS
Implementing a CommonJS module
ECMAScript 6 modules
Defining an ES6 moduleConsuming an ES6 moduleModule loading sequence in the browsers for ES6 modules
Summary
Index

Content preview from Modular Programming with JavaScript

Generating our application's content area

If you have read the previous sections of this chapter, you have a pretty good grasp of what module augmentation is by now. You also know of a couple of techniques to add dynamic properties to our modules using augmentation.

As it stands, our application (Images Inc.) has code that dynamically generates the header and footer sections of our pages. But we still have an empty space in the middle (the content area), which needs to be populated with content.

Let's put the techniques that we have learned in this chapter to good use and add functionality to our application that will generate the content area dynamically.

Note that the refactored augmenting code in Modules_3.js is now as follows:

(function(originalModule){ ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Programming with JavaScript: Algorithms and Applications for Desktop and Mobile Browsers

Publisher Resources

ISBN: 9781785880650

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Modular Programming with JavaScript

by Sasan Seydnejad

Generating our application's content area

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.