A side effect is any application state change that is observable outside the called function other than its return value. For example modifying any external variable like global variable, logging to console, writing to file, writing to network, calling other functions with side effects.

function printSomething(foo) {
    console.log(foo);
}
// printing to console make this function to have a side effect.

Side effects are mostly avoided in functional programming, which makes the program easier to understand and to test.

References:

• Master the JavaScript Interview: What is Functional Programming?
• 3 common approaches to side-effects in Redux apps
• Redux side effects and me
• Preventing Side Effects in JavaScript
• HOW TO DEAL WITH DIRTY SIDE EFFECTS IN YOUR PURE FUNCTIONAL JAVASCRIPT
• Dealing with side effects and pure functions in javascript

Monorepo, is a single repository which contains more than one logical project like a web application and its iOS application.

Benefits:

• Single build system
• Easy to refactor
• Code sharing

Disadvantages

• Tight coupling and unclear ownership boundaries
• Source control system scalabity issues

References:

• Guide to Monorepos for Front-end Code
• Monorepos: Please don’t!
• Monorepos in Git
• Awesome Monorepo

Dependency Injection is a pattern where instead of creating or requiring dependencies directly inside a module, we pass them as paramaeters or reference.

// foo.js
export default class Foo {
    print() {
        console.log('Hello world!');
    }
}

//baz.js
import Foo from './foo.js';

export default class Baz {
    constructor() {
        this.foo = new Foo();
    }
}

//app.js
import Baz from './baz.js';

let b = new Baz();

// Using Dependecy Injection
// Updated baz.js
export default class Baz {
    constructor(foo) {
        this.foo = foo;
    }
}

//app.js
import Foo from './foo.js';
import Baz from './baz.js';

let b = new Baz(new Foo()); // Foo instance is passed as parameter to Baz

Benefits

• Unit testing - Avoid need for stubbing
• Flexibility - Freedom to change implementation at any point

References:

• Dependency Injection in JavaScript
• JavaScript dependency injection in Node.js – friends or foes?
• Dependency Injection & Inversion Explained
• Handling dependencies

Component composition is where a more “specific” component renders a more “generic” one and configures it with props.

function Button(props) {
    return (
        <button>{props.label}</button>
    )
}

function SignupButton() {
    return (
        <Button label="Signup"/>
    )
}

Higher-Order Components

A higher-order component is a function that takes a component and returns a new component. It composes the original component by wrapping it in a container component. Its a pure function with zero side-effects. The wrapped component receives all the props of the container, along with any new props from the container comopnent. HOCs are similar to pattern called “container components”. Container components are part of a strategy of separating responsibility between high-level and low-level concerns. Containers manage things like subscriptions and state and pass props to components that handle things like rendering UI. HOCs add features to a component. They shouldn’t drastically alter its contract. It’s expected that the component returned from a HOC has a similar interface to the wrapped component.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

References:

• Higher-Order Components
• Composition vs Inheritance

Bundle

Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.

Chunk

Bundles are composed out of chunks. Typically chunks directly correspond with the output bundles. However, there are some configurations that don’t yield one-to-one relationship.

References:

• Glossary
• What are module, chunk and bundle in webpack?