notes.txt

Magesh Kuppan

Schedule
    Commence    : 10:00 Hrs
    Tea Break   : 11:30 Hrs (20 mins)
    Lunch Break : 13:30 (1 Hr)
    Tea Break   : 16:00 (20 mins)
    Wind Up     : 18:00 

Breakup:
    ES6 & TypeScript (1 Day)
    Advanced Typescript (1 Day)
    Angular (4 Days)
    State Management (2 Days)

About You
    Name
    Total Experience
    Primary Skillset
    Experience in Angular.js / Angular / React / Vue.js


Dart

CoffeeScript
TypeScript
Script#

ES6 (ECMAScript 6 / ES2015 / ESNext)

1. let (block scoped)
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. object construction enhancement
12. Promise
13. Async Await

ES5
function addEven(){
    var evenNumbers = Array.prototype.filter.call(arguments, function(no){
        return no % 2 === 0;
    })
    var result = 0;
    for (var i=0; i < evenNumbers.length ; i++){
        result += evenNumbers[i]
    }
    return result;
}

in ES6
function addEven(...nos){
    return nos.filter(no => no % 2 === 0)
        .reduce((result, evenNo) => result + evenNo, 0)
}

const addEven = (...nos) => nos.filter(no => no % 2 === 0)
        .reduce((result, evenNo) => result + evenNo, 0);


var products = [
	{id : 6, name : 'Pen', cost : 50, units : 20, category : 'stationary'},
	{id : 9, name : 'Ten', cost : 70, units : 70, category : 'stationary'},
	{id : 3, name : 'Len', cost : 60, units : 60, category : 'grocery'},
	{id : 5, name : 'Zen', cost : 30, units : 30, category : 'grocery'},
	{id : 1, name : 'Ken', cost : 20, units : 80, category : 'utencil'}
];

1. Find the costliest product 
    products.reduce((result, product) => result.cost > product.cost ? result : product)

2. Find the product that has the least stock
    products.reduce((result, product) => result.units < product.units ? result : product)

3. Group the products by category
    products.reduce(
        (result, product) => {
            (result[product.category] = result[product.category] || []).push(product);
            return result;
        },
        {}
    )

Step: 1
    1. filter
    2. forEach
    3. reduce
    4. map

Step : 2    
    Functional Programming

Step : 3
    underscore
    lodash


Class
class Employee{
    id = 0;
    name = '';
    salary = 0;
    
    constructor(id, name, salary){
        this.id = id;
        this.name = name;
        this.salary = salary;
    }

    display(){
        console.log(this.id, this.name, this.salary);
    }
}

var emp = new Employee(100, 'Magesh', 10000)

ES5
/*
function Employee(id, name, salary){
    this.id = id;
    this.name = name;
    this.salary = salary;
    this.display = function(){
        console.log(this.id, this.name, this.salary);
    }
}
*/

function Employee(id, name, salary){
    this.id = id;
    this.name = name;
    this.salary = salary;
}
Employee.prototype.display = function(){
    console.log(this.id, this.name, this.salary);
}

//class with private attributes & getters and setters

class Employee{
    #id = 0;
    #name = '';
    #salary = 0;

    get id(){
        //console.log('getter for id triggered')
        return this.#id;
    }
    set id(value){
        //console.log('setter for id triggered')
        //do validations
        this.#id = value;
    }

    get name(){
        //console.log('getter for name triggered')
        return this.#name;
    }
    set name(value){
        //console.log('setter for name triggered')
        this.#name = value;
    }

    get salary(){
        //console.log('getter for salary triggered')
        return this.#salary;
    }
    set salary(value){
        //console.log('setter for salary triggered')
        this.#salary = value;
    }

    constructor(id, name, salary){
        this.#id = id;
        this.#name = name;
        this.#salary = salary;
    }

    display(){
        console.log(this.#id, this.#name, this.#salary);
    }
}

//class Inheritance

class FulltimeEmployee extends Employee{
    benefits = '';
    constructor(id, name, salary, benefits){
        super(id, name, salary);
        this.benefits = benefits;
    }

    display(){
        super.display();
        console.log(this.benefits);
    }

}


//iterators
var nos = [3,1,4,2,5]

for (let idx=0; idx < nos.length; idx++){
    console.log(nos[idx]);
}

for (let no of nos){
    console.log(no)
}

//custom iterators
function getFibonacci(count){
    let fibonacci = {
        [Symbol.iterator](){
            let prev = 0, curr = 1;
            let counter = 0;
            return {
                next(){
                    if (counter > count){
                        return { value : undefined, done : true }
                    } else {
                        [prev, curr, counter] = [curr, prev + curr, counter+1]
                        return { value : curr, done : false }
                    }
                }
            }
        }
    }
    return fibonacci;
}

let fibonacci = getFibonacci(10)

//iterating using for..of construct
for (let fibNo of fibonacci){
    console.log(fibNo)
}

//iterating manually
let iter = fibonacci[Symbol.iterator]();
iter.next();
iter.next();


Generators
===========

A function that can suspend and resume its execution at a later time.

function * genEvenNos(){
    yield 2;
    yield 4;
    yield 6;
    yield 8;
    yield 10;
    return;
}

var gen = genEvenNos()

gen.next()
.
.

OR

for (let evenNo of genEvenNos()){
    console.log(evenNo)
}

Symbol 
===========
A new data type

const Employee = (() => { 
    var idSymbol = Symbol('id')
    class Employee{
        name = '';
        salary = 0;

        constructor(id, name, salary){
            this[idSymbol] = id;
            this.name = name;
            this.salary = salary;
        }
        display(){
            console.log(this[idSymbol], this.name, this.salary);
        }
    }
    return Employee;
})()

template strings
================
var x = 100, y = 200

var s2 = `Sum of ${x} and ${y} is ${x+y}`

var s3 = `Sum of
${x} and ${y}
is ${x+y}`



TypeScript = TypeSafety + JavaScript
    superset of javascript


var x;
x = 10;
x = "hello";
x = true
x = {}

function add(x,y){
    if (typeof x !== 'number' || typeof y !== 'number')
        throw new Error('Invalid arguments');
    return x + y;
}


add(10,20)
add("safd", "dsafs")


var x : number

function add(x : number, y : number) : number {
    return x + y
}

add("dasfs", "asdf")

    |
    |
    V
    tsc
    |
    |
    V

var x 

function add(x , y )  {
    return x + y
}

Enums
Interfaces
Classes
Access Modifiers (private, public, protected)
Modules
Namespaces
Generics


Challenges in UI application
    - Performance
    - Maintainability
    - Security

Maintainability

    - Fixing bugs
    - Adding new features
    - Improving existing features
    - Removing dead features

    - Changing existing code

    Easy Maintainability means easy to change code


Reactive (Dumb) X Proactive (Knowledge)

Angular Building Blocks

    - Module
        Registry of application entities (components, directives, pipes & services)
        Dependency Injection
        Minimum of 1 module should be there
        A module acts as the application starting point

    - Component
        Encapsulation of Presentation + UI Behavior (user interaction) + State (data)
        Can be composed to create complext components

    - Directive
        Responsible for dealing with DOM
        Two types of directives
            - attribute directives
                Manipulates the attributes of existing DOM nodes
                DOES NOT change the structure of the DOM tree  (adding new DOM nodes or removing existing DOM nodes)
                enclosed with '[]'

            - structural directives
                Manipulates the structure of the DOM tree
                Changes the structure of the DOM tree  (adding new DOM nodes or removing existing DOM nodes)
                prefixed with an '*'

    - Pipe
        Transforms data for presentation

    - Service
        Non UI logic


Angular CLI
    - CLI is a command line interface for Angular
    - Installation
        npm install @angular/cli -g

    - To create an angular application
        ng new <app-name>

    - To run the application
        cd <app-name>
        npm start


AMD
CommonJS
ES6 Modules


ES6 Modules 
    - Everything defined in a file is considered private
    - Anything that need to be made public have to be explicitly "exported"
    - If any public entity from another file is needed, they have to be explicitly "imported"

To create a component
    ng generate component <component-name>
    ng g c <component-name>


Implement the calculator component for the following
<h3>Calculator</h3>
<hr>
<input type="number" name="" id="">
<input type="number" name="" id="">
<br>
<input type="button" value="Add">
<input type="button" value="Subtract">
<input type="button" value="Multiply">
<input type="button" value="Divide">
<div></div>

Assignment
==========
implement salary calculator in the "first-app" application


Open Closed Principle
    Your code should be OPEN for extension and CLOSED for modification



class PriceCalculator{
    calculate(products) {
        return products.reduce((total, product) => total + product.price, 0);
    }
}

class FestivePriceCalculator{
    calculate(products) {
        return products.reduce((total, product) => total + product.price, 0) * 0.9;
    }
}


class ShoppingCart{
    products ;

    constructor(pc PriceCalculator){
        this.pc = pc;
    }

    cartValue(){
        return this.pc.calculate(this.products)
    }
}

To install moment.js
npm install moment

How to use the moment library (refer to the main.ts)


Pure Functions
    Functions without side effects
    When the Function invocation is replaced with the result of a function, the outcome should not change

    Memoization

    function isPrime(no){
        if (no < 2) return false;
        for (let i = 2; i < no; i++){
            if (no % i === 0) return false;
        }
        return true;
    }

    isPrime(97)


Async Programming in JavaScript
    Async Operation
        An operation that is initiated but not waited for its completion

    1. callbacks
    2. Promises (singular)
    3. Async/Await
    4. Observables (stream)

Observable X Enumerable (aka Generator)
    Enumerable = Iterable + lazy Evaluation


Event Driven Applications
    Execution flow is determined by events (user actions etc)

Employee.dat
    id, name, address, dob, salary, doj

Write a program that will calculate the average salary of all the employees

Pseudocode
    let empCount, sumOfSalary
    Open the file
    while not eof
        read the line
        parse the line
        empCount += 1
        sumOfSalary += salary
    
    avg = sumOfSalary / empCount
    print avg
    close the file
    exit(0)



Rxjs
    Observables


Web Browser
    - User actions      (stream)
    - Ajax requests     (singlular)
    - Timers            (stream)
    - Server Sent Events (stream)
    - Web Sockets       (stream)


To create a restful server
    run the following command from the folder that has the db.json file
        npx json-server db.json


import { HttpClientModule } from '@angular/common/http';
regiter the HttpClientModule in app.module


To get all the bugs
    this.httpClient
        .get<Bug[]>('http://localhost:3000/bugs')
        .subscribe(bugs => console.table(bugs))


For creating a new bug
    this.httpClient
        .post<Bug>('http://localhost:3000/bugs', bugData)
        .subscribe(newBug => console.log(newBug)

For updating a bug
    this.httpClient
        .put<Bug>('http://localhost:3000/bugs/' + bug.id, bugData)
        .subscribe(updatedBug => console.log(updatedBug))

For removing a bug
    this.httpClient
        .delete<Bug>('http://localhost:3000/bugs/' + bug.id)
        .subscribe(() => console.log('Bug ' + bug.id + ' deleted'))


Routing
    Change of State from one to another
    Navigating from one page to another
    Replacing one template with another template


https://www.amazon.in
https://www.amazon.in/electronics
https://www.amazon.in/electronics/mobile-phones
https://www.amazon.in/electronics/mobile-phones/google
https://www.amazon.in/electronics/mobile-phones/google/google-pixel-6

https://www.amazon.in/electronics/mobile-phones/google/google-pixel-6/reviews (possible)


Outlook
Outlook/Inbox
Outlook/Inbox/Projects
Outlook/Inbox/Projects/ExpenseManager
Outlook/Inbox/Projects/ExpenseManager/BugReports

Outlook/Inbox/Projects/ExpenseManager/BugReports/Bug-101 (not possible)


Bookmarking
myapp.com/products
myapp.com/calculator
myapp.com/salary-calculator

Angular 2.0 (Routing V.3.0)
Angular 4.0 (Routing V.4.0)

Assignment:
Add the "projects module" to the application
    product = { id, name, description}

Modify the 'bugs' module to associate each bug with a project

when the visits the applcation
    display the project list with the 'bugs' link for each project
    When the bugs link is clicked display the bugs for the respective project

Route Guard
    - A guard is a function that is called before the route is activated
    CanActivate

TODO:
    Implement a login screen with server communication

    
Forms
    Template Forms
        Driven by the template
            data binding in the template
            validation rules in the template

    Reactive Forms
        - Code driven
        - Easy to automate the testing

Functionality
    - data binding
    - validation
    - form submission
    - form control state change
        - user changed the data in the control
        - user set the focus on the control or not
        - valid or invalid

        -ngPristine (Data in the control is not updated by the user)
        -ngDirty (Data in the control is updated by the user)

        -ngTouched (User visited the control))
        -ngUntouched (User did not visit the control)
        
        -ngValid
        -ngInvalid


Testing
=======
    Organizing tests
        describe (xdescribe, fdescribe)
            describe a feature of the application
                calculator - feature
                    add - feature


        it (xit, fit)
            describe a specific behavior of the feature (test case)
                calculator
                    add
                        adding two positive numbers
                        adding two negative numbers
                        adding one positive and one negative number
                        adding one positive number with zero
                        adding one negative number with zero

        beforeEach()
            executed before each test case

        afterEach()
            executed after each test case

    Perform assertions
        expect()
            expect(actualResult).toBe(expectedResult)
            expect(actualResult).toEqual(expectedResult)
            expect(spy).toHaveBeenCalledWith(args)
            expect(spy).toHaveBeenCalledTimes(1)

        matchers
            toBe()
            toEqual()
            toBeTruthy()
            toBeFalsy()
            toBeNull()
            toBeDefined()
            toBeUndefined()
            toBeGreaterThan()
            toBeLessThan()
            toContain()
            toBeCloseTo()

            toHaveBeenCalled()
            toHaveBeenCalledWith()
            toHaveBeenCalledTimes()
            etc


    Mock the dependencies
        jasmine.createSpy()
        spyOn()

Alternatives
    Mocha
        describe, it, beforeEach, afterEach
        choice of assertion library
            chai.js
                expect.js
                assert.js   
                should.js
        choice of mock library
            sinon.js
        choice of test reporters

    jest.js


Assert.isEqual(actualResult, expectedResult)
actualResult.should.be.equal(expectedResult)
actualResult.should.not.be.equal(expectedResult)


TO DO:
    Update the greeter component to use the greeter service
    Update the component tests accordingly


State
    - UI State
        Data that supports the presentation needs of the application
        It is highly UNLIKELY that this data is needed throughout the application
        Feel free to maintain this data in the component

    - Application State
        Data that supports the core logic of the application
        It is highly LIKELY that this data is needed throughout the application
        DO NOT maintain this data in the component

State manager
    Store 
        The whole application state is maintained in the store
        The single source of truth for the application

    Reducer
        A function that decides the next state of the store based on the action
        The reducer function has to be a pure function
        The reducer function should not have side effects
        The reducer function should not mutate the state 
        Any state changes has to happen in an immutable way

    Action
        An object that contains the information about the action
        An action object should be unique throughout the application
        An action object will carry the supporting data needed to process the action by the reducer

    Action Creator
        A function that encapsulates the logic for creating an action object

ngRx
    
    npm install @ngrx/store