notes.txt

JavaScript
============================================================================
Line Oriented
Procedural
Object Based
Object Oriented (JS)
Functional (JS)
    Function is a first class citizen
        (Functions can be treated like data / object )
        functions can be created like objects
        functions can have attributes (like objects)
        functions can have methods (like objects)
        Support for Higher Order Functions
            functions can be passed as arguments to other functions
            functions can be returned from other functions


static
dynamic (JS)

strongly typed
loosely typed (JS)

JavaScript is a functional, dynamic and loosely typed language


Function invocation Patterns
    - As a function
        this => global (window)

    - As a method of an object
        this => object

    - Using the 'call' method of the function
    - Using the 'apply' method of the function
    - As an 'Immediately invoked function expression' (IIFE)
    - Using the 'new' keyword

this -> Invocation context
    It does not matter WHERE the function is. What matters is how the function is invoked.

arguments
    - implicit value available in all functions
    - array like object containing all the argument values passed to the function
        arguments.length -> the # of arguments passed to the function
        arguments[0], arguments[1] .....



IBM-React-Nov-2020
    Assignment-1


add()
add(10)
add(10,20,30,40,50)
add(10,'20',30,40,50)
add(10,'20','abc',30,40,50)
add([10,'20','abc'],[30,40,50])
add([10,'20','abc'],[30,[40,50]])
add(function(){ return [10,'20','abc'];},function(){ return [30,[40,50]]; })
add([function(){ return [10,'20','abc'];},function(){ return [30,[40,50]]; }])
add(function(){ return [function(){ return [10,'20','abc'];},function(){ return [30,[40,50]]; }];})

Closures
================================================================

ClickTracker.html
    A button 'Track'
    Everytime the 'Track' button is clicked, the page has to count the number of times the button is clicked and display to the user


Assignment-2
    (THIS DOESNOT INVOLE HTML, BUTTON, CLICK EVENT HANDLER ETC)
    
    var spinner = /*................................*/
    //spinner must be an object with two methods - up() & down()

    spinner.up() // => 1
    spinner.up() // => 2
    spinner.up() // => 3
    spinner.up() // => 4

    spinner.down() // => 3
    spinner.down() // => 2
    spinner.down() // => 1
    spinner.down() // => 0
    spinner.down() // => -1

    Important :
        There should NO other way by which the outcome of up & down methods can be influenced

        For ex:
        The following SHOULD NOT BE POSSIBLE
            spinner.count = 10000
            spinner.up() // => 10001

            window.count = 10000
            spinner.up() // => 10001

    
Constructor functions
===============================
Function invoked using the 'new' keyword
    1. this -> new object
    2. this -> returned by default
Convention : the constructor function name should start with an uppercase


Prototypal Inheritance
===================================

One object (prototype) acts as the base object for a family of objects

Attributes are resolved using 'prototype hopping'

'prototype hopping' happens ONLY when the attribute is READ


Videos for reference:
    http://bit.ly/javascript-training-videos



ES6 (ESNext, ES2015)
================================
1. let
2. const
3. Array destructuring
4. Rest Operator (Array)
5. Spread operator (Array)
6. Object destructuring
7. Rest Operator (Object)
8. Spread operator (Object)
9. Default arguments
10. Arrow functions
11. Template strings
12. Class

http://es6-features.org


React
    - A library for creating UI for the browser
    - Presentation + Data + User Interaction

User Interacts -> Model Changes -> Presentation Updated

Application = Composition of Components

Component 
    represents one small part of the UI
    Presentation + Data + User Interaction

Virtual DOM

HTML vs JSX
==================================
HTML
    Open tags without close tags are allowed
    'class' attribute is allowed
    'for' attribute is allowed
JSX
    All open tags must have the corresponding close tag
    Use 'className' instead of 'class'
    Use 'htmlFor' instead of 'for'

Assignment - 3
    3-Nov 2:50PM
Assignment - 4
    3-Nov 5:10PM
Assignment - 5
    4-Nov - 10:35AM

Assignment - 6
    5-Nov - 12:00PM

Assignment - 7
    5-Nov - anytime

UI State & App State

UI State
    - any data that supports the presentation logic of the component
    - it is highly UNLIKELY that this data would be needed in other parts of the application
    - Feel free to maintain this data in the component state

App State
    - any data that supports the core business logic of the application
    - it is highly LIKELY that this data would be needed in other parts of the application
    - DO NOT maintain this data in the component state, instead maintain the data outside the component hierarchy
    
ES6 Modules
    - anything defined in a js file is considered 'private'
    - any 'public' entity has to explicitly 'export'ed.
    - any public entity has to explicity 'import'ed to use in other js files

    ES6 Module examples

        /* 
        import * as calculator from './math';
        console.log(calculator); 
        */

        /* 
        //import * as calculator from './math';
        //calculator.add(10,20)
        //const add = calculator.add;
        //const { add } = calculator;
        import { add } from './math'
        add(10,20) 
        */

        //importing default exported object
        /* 
        import calculator from './math';
        calculator.add(10,20); 
        */

./Products
    ./actions
    ./views
    ./index.js
        Products component
./reducers
    productsReducer.js
./store
    ./index.js
./index.js


There are only two places where you have access to the whole store state
    1. mapStateToProps
            Use this if you want to have access to the data in the store state for presentation
    2. 


Container Component / Smart Component
    interface with the redux infrastructure to get the data and create action dispatchers
    and cascade them to the child components
    ex, Products, Categories

Presentation Component / Dumb Component
    Receive data & action dispatchers from the parent component

Best Practice : Fewer container and any number of presentation components

Async Operation
    - That will complete in future and one doesnt wait for its completion

Promise
    - An object designed to hold the result of an async operation and make the result available whenever it is needed

    - Other ways of handling async operations
        callbacks
        events
        async await
        generators
        observables
        
axios
    - promise based server communication library

React Hooks
    - functions to handle side effects in functional component
    - hook function names must start with 'use'
    - builtin hooks
        useState
        useReducer
        useEffect
        useMemo
        useCallback

Component Lifecycle Events
    Created
        componentWillMount
        componentDidMount

    Updated
        shouldComponentUpdate
        componentDidUpdate

    Removed
        componentWillUnmount

Routing
    Displaying components based on the URL
    Route - URL to component mapping

Build Steps
    1. ES6 compilation
    2. minify JS
    3. uglify JS
    4. bundle JS
    5. version JS
    6. minify CSS
    7. bundle CSS
    8. version CSS
    9. update the references of generated JS file(s) in the index.html
    10. update the references of generated CSS file(s) in the index.html
    11. minify the index.html
    12. copy the generated files to the build folder

Webpack bundler


Reference
    http://bit.ly/javascript-training-videos
    http://bit.ly/react-videos


Assignment:
    Implement the 'Shopping Cart'
    Add a 'Add To Cart' button for each product
        On clicking the button the product has to be added to the cart
        If the product is already in the cart, increment the count
        Save the cart info in the server whenever a product is added/removed from the cart
    Add a menu 'Cart'
        This menu has to display the number of items in the cart ( such as 'Cart[3]')
        On click of this menu, display the contents of the cart
        Add a 'Remove' button for each item and remove the item when the button is clicked

Evaluation Parameters
    Implementation
    Modularity
    Naming Conventions
    Bugs
    Comments

Deadline - EOD 11-Nov-2020