What is AMD, CommonJS

Mar 17, 2020

AMD (Asynchronous Module Definition)

The AMD module format itself is a proposal for defining modules where both the module and dependencies can be asynchronously loaded.

“define” method for facilitating module definition and a “require” method for handling dependency loading.

define('myModule', 
    ['foo', 'bar'], 
    // module definition function
    // dependencies (foo and bar) are mapped to function parameters
    function ( foo, bar ) {
        // return a value that defines the module export
        // (i.e the functionality we want to expose for consumption)
    
        // create your module here
        var myModule = {
            doStuff:function(){
                console.log('Yay! Stuff');
            }
        }
 
        return myModule;
});
require(['foo', 'bar'], function ( foo, bar ) {
        // rest of your code here
        foo.doSomething();
});

Module API supported by RequireJS is AMD.

//Calling define with a dependency array and a factory function
define(['dep1', 'dep2'], function (dep1, dep2) {

    //Define the module value by returning a value.
    return function () {};
});
  • Register the factory function by calling define(), instead of immediately executing it.
  • Pass dependencies as an array of string values.
  • Only execute the factory function once all the dependencies have been loaded and executed.
  • Pass the dependent modules as arguments to the factory function.

CommonJS (CJS)

CJS module is a reusable piece of JavaScript which exports specific objects made available to any dependent code - there are typically no function wrappers around such modules.

// package/lib is a dependency we require
var lib = require('package/lib');
 
// some behaviour for our module
function foo(){
    lib.log('hello world!');
}
 
// export (expose) foo to other modules
exports.foo = foo;
// an application consuming 'foobar'
 
// access the module relative to the path
// where both usage and module files exist
// in the same directory
 
var foobar = require('./foobar').foobar,
    test   = new foobar();
 
test.bar(); // 'Hello bar'

References

Categories : JavaScript

What does not not operator do (!!) ?

Mar 16, 2020

It converts Object to boolean. If it was falsey (e.g. 0, null, undefined, etc.), it will be false, otherwise, true.

References:

  • https://dev.to/macmacky/70-javascript-interview-questions-5gfi#16-what-does-the-operator-do
  • https://stackoverflow.com/questions/784929/what-is-the-not-not-operator-in-javascript
Categories : JavaScript

Difference between function declaration and function expression

Mar 16, 2020

Function declarations are hoisted to the top of the code by the browser before any code is executed. Specifically, all of the functions written with function declarations are “known” before any code is run. This allows you to call a function before you declare.

Function expressions, however, do not hoist. If you try to run a function before you’ve expressed it, you’ll get an error.

References

Categories : JavaScript

Difference between Pure and Function React JS component

Mar 16, 2020

React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.

Function React component is that which accepts a single “props” (which stands for properties) object argument with data and returns a React element.

References:

  • https://reactjs.org/docs/react-api.html#reactpurecomponent
  • https://reactjs.org/docs/components-and-props.html
Categories : JavaScript

How web works ?

Jan 3, 2020

What happens when we enter a URL like https://en.wikipedia.org in a browser ?

DNS Lookup

The browser contacts a server on internet called a DNS server and asks it, “What is the IP of “en.wikipedia.org ?”. DNS server transforms domain names into IP address. For example DNS server response for this case could be “198.35.26.96”.

Connect to IP address and fetch the HTML page

The browser send an HTTP GET / HTTP request to the web server running on the computer at that address. HTTP is a protocol which allows the fetching of resources such as HTML documents. Its the foundation of data exchange on the web.

Render HTML web page

The browser takes the HTML response returned by the server and renders it as a web page. HTML is a martup language, it is the standard for creating web pages.

References

Categories : Web   HTTP