-a library provides set of functions / objects / modules which your app code calls
for specific functionality  ex:jquery & react

-framework is an abstraction in which software providing a generic functionality can be selectively changed by addational user-written code this providoing app-specific software.

2-Deep copy techniques depend on the three array types?
-A deep copy means that all of the values of the new variable are copied and disconnected from the original variable.

-A shallow copy means that certain (sub-)values are still connected to the original variable.

splice,slice,concat	     json(parse,stringify)	$.extend,_.extend,_.cloneDeep

bool,num,
strings:         deep           deep			deep
literal
(arrays,objects):shallow		deep			deep
protype obj:     shallow		shallow		    deep

From these elements we can create three types of arrays.

// 1) Array of literal-values (boolean, number, string)
const type1 = [true, 1, "true"];

// 2) Array of literal-structures (array, object)
const type2 = [[], {}];

// 3) Array of prototype-objects (function)
const type3 = [function () {}, function () {}];

-The spread operator is a new addition to the set of operators in JavaScript ES6. It takes in an iterable (e.g an array) and expands it into individual elements.

The spread operator is commonly used to make shallow copies of JS objects. Using this operator makes the code concise and enhances its readability.

-Object.assign is in the official released and will also create a shallow copy of the object.

-coffescript is lightweight programming language based on ruby & paython which complies into js.

-callback is a function passed into anthor function as an argument to be executed later.

-is an object return value that you hope to receive in the future.
-object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.
-Usually done by callbacks that are only used when doing I/O, e.g. downloading things, reading files, talking to databases

Null is an object with no value.
Undefined is a type.

typeof null; // “object”
typeof undefined; // “undefined”

Cookies allow applications to store data in a client’s browser.
Session storage property allows applications to store data until the window is closed.
Local storage property lets applications to store data without an end.

-Event Delegation is basically a pattern to handle events efficiently. Instead of adding an event listener to each and every similar element, we can add an event listener to a parent element and call an event on a particular target using the . target property of the event object.

I can increase the page performance by the following methods.

Clean up the HTML document.
Reduce external HTTP requests.
Sprites, compressed images, smaller images.
Incorporate JavaScript at the bottom of the page.
Minify CSS, JavaScript, HTML.
CDN and Caching.

AJAX (Asynchronous JavaScript and XML) allows applications to transport data to/from a server asynchronously without refreshing the page. This means that it is likely to update parts of a web page, without reloading the entire page. For instance, your new Gmail messages arrive and are marked as new even if you have not refreshed the web page.

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

-Closure is a local variable for function that kept in memo even after function is returned.
-Closure’s conflicts happen when using for loop.

    function makeFunc() {
    var name = 'Mozilla';
    function displayName() {
    alert(name);
    }
    return displayName;
    }

    var myFunc = makeFunc();
    myFunc();

-(javascript object notation), is a lightweight format for storing and transportiong data from server to webpage.

-Async operation you can move to other task before the pervious one is finished.
-sync operation task is performd in sequence

-JavaScript is a lightweight, cross-platform, and interpreted scripting language.

-it mean a variable can be used before it has been declared.
but in case const & let it will return reference error.

-BOM Stands for Browser Object Model:is the top level of
the DOM hierarchy.
▻ navigator object,
▻ screen object,
▻ history object
▻ location object,
▻ document object

▰ let + const
▰ Binary and Octal literals
▰ default Parameters
▰ Classes
▰ rest parameters
▰ iterators
▰ spread operator
▰ Generators
▰ Destructuring (array/object)
▰ Symbols
▰ Arrow Functions
▰ Proxies
▰ Enhanced object literals
▰ Modules
▰ Template strings
▰ Module loaders
▰ for..of
▰ Promises
▰ math API
▰ number API
▰ string API
▰ array API
▰ object API
▰ Data Structure/Collection
▻ map
▻ set
▻ weakmap
▻ weakset

▰ES6 represents block scope via let, const.
▻ Block starts by { and ends by }
▰ Variables declared with let and const don’t
hoist.
▰ Variables defined by let can be reassigned
▰ Variable defined by const cant be reassigned

An Immediately-invoked Function Expression is a way to execute functions immediately, as soon as they are created. IIFEs are very useful because they don't pollute the global object, and they are a simple way to isolate variables declarations

Arrow function is one of the features introduced in the ES6 version of JavaScript. It allows you to create functions in a cleaner way compared to regular functions.

pros:
- Arrow Function as an Expression
- Arrow Function with One Argument
- Arrow Function with no Argument
- Multiline Arrow Functions

cons:
- You should not use arrow functions to create methods inside objects.
- You cannot use an arrow function as a constructor.

▰Used in function definition and must be the last
parameter in function definition.
▰It gathers all remaining arguments into an array
element.

    function displayNames(p1, ...arr) {
    for (let i in arr) {
    console.log(arr[i])
    }
    }
    var fruits = ["apple", "strawberry",
    "banana", "orange", "mango"];
    displayNames(10, fruits)

▰Used in function invocation
function dis(f, n) {
console.log(f + "" + n)
}
var rest = ["ahmed", "ali"]
dis(...rest)

▰Used also in Array
var fruits = ["apple", "strawberry", "banana", "orange", "mango"];
var newFruits = ["kiwi", ...fruits]
// ["kiwi", "apple", "strawberry", "banana", "orange", "mango"]
var anotherNewFruits = ["kiwi", ...fruits, "others"]
// ["kiwi", "apple", "strawberry", "banana", "orange", "mango", "others"]

-object destructure:
    const user = {
    id: 42,
    isVerified: true
    };

    const {id, isVerified} = user; //id=42 , isVerified=true

-Array Destructuring:
    let users = ["ali", "nour", "kareem"];
    let [a, b, c] = users;
    console.log( a, b, c );
    //a = users[0]
    //b = users[1]
    //c = users[2]

var User = function (id, firstName, lastName) {
return {
id: id,
firstName: firstName,
lastName: lastName
};
}

var User = function (id, firstName, lastName) {
return {
id,
firstName,
lastName
};
}

Template strings are string literals allowing embedded expressions using `` and ${}

-Inheritance in JavaScript works through something called prototypes and this form of inheritance is often called prototypal inheritance

Directives are classes that add additional behavior to elements in your Angular applications. 

types:
Attribute Directives
Component Directives
Structural Directives

JIT(Just-in-Time) compilation: The application compiles inside the browser during runtime
AOT(Ahead-of-Time) compilation: The application compiles during the build time.

In the SPA, the whole page is not reloaded every time, only every time the view will be change.

So when you load the application for the first time, not all the pages from the server will be rendered... It's only index.html that loads when you load the application. 

Advantages of SPA:

-No page flicker. Native application feel.

-Client-side routing and data rendering on the client side.

-Data from server is in JSON format.

TypeScript is a superset of Javascript as it is Javascript + Types or extra features like typecasting for variables, annotations, variable scope and much more. The typescript is designed in a way to overcome Javascript shortcomings like typecasting of variables, classes, decorators, variable scope and many more. Moreover, Typescript is purely object-oriented programming that offers a "Compiler" that can convert to Javascript-equivalent code.

Model: It represents the data and the business logic of an application, or we may say it contains the structure of an entity.

View: View is a visual layer of the application, and so consists of the UI Code(in Angular- HTML template of a component.). It sends the user action to the ViewModel but does not get the response back directly. It has to subscribe to the observables which ViewModel exposes to it to get the response. 

ViewModel: It is an abstract layer of the application and acts as a bridge between the View and Model(business logic).  View and ViewModel are connected with data-binding so, any change in the View the ViewModel takes note and changes the data inside the Model.

-ngOnChanges( ): This method is called whenever one or more input properties of the component changes. The hook receives a SimpleChanges object containing the previous and current values of the property.

-ngOnInit( ): This hook gets called once, after the ngOnChanges hook.

It initializes the component and sets the input properties of the component.

-ngDoCheck( ): It gets called after ngOnChanges and ngOnInit and is used to detect and act on changes that cannot be detected by Angular.

We can implement our change detection algorithm in this hook. 

-ngAfterContentInit( ): It gets called after the first ngDoCheck hook. This hook responds after the content gets projected inside the component.

-ngAfterContentChecked( ): It gets called after ngAfterContentInit and every subsequent ngDoCheck. It responds after the projected content is checked.

-ngAfterViewInit( ): It responds after a component's view, or a child component's view is initialized.

-ngAfterViewChecked( ): It gets called after ngAfterViewInit, and it responds after the component's view, or the child component's view is checked.

-ngOnDestroy( ): It gets called just before Angular destroys the component. This hook can be used to clean up the code and detach event handlers.

Dependency injection is an application design pattern that is implemented by Angular and forms the core concepts of Angular. 

Dependencies in Angular are services which have a functionality. Various components and directives in an application can need these functionalities of the service. Angular provides a smooth mechanism by which these dependencies are injected into components and directives.

observable is a stream that allows passing of more than one event. A callback is made for each event in an observable.

Answer: In the SPA technology, only a single page, which is index.HTML, is maintained although the URL keeps on changing. Unlike traditional web technology, SPA technology is faster and easy to develop as well.

In conventional web technology, as soon as a client requests a webpage, the server sends the resource. However, when again the client requests for another page, the server responds again with sending the requested resource. The problem with this technology is that it requires a lot of time.

Answer: It is called Transpiling. Even though TypeScript is used for writing code in Angular applications, it gets internally transpiled into equivalent JavaScript.

ViewEncapsulation determines whether the styles defined in a particular component will affect the entire application or not. Angular supports 3 types of ViewEncapsulation:

Emulated – Styles used in other HTML spread to the component
Native – Styles used in other HTML doesn’t spread to the component
None – Styles defined in a component are visible to all components of the application

 TypeScript is a superset of Javascript as it is Javascript + Types or extra features like typecasting for variables, annotations, variable scope and much more. 
 The typescript is designed in a way to overcome Javascript shortcomings like typecasting of variables, classes, decorators, variable scope and many more. Moreover, Typescript is purely object-oriented programming that offers a "Compiler" that can convert to Javascript-equivalent code. 

Out of box Features: Several built-in features like routing, state management, rxjs library, and HTTP services are straight out of the box services provided by Angular. So, one does not need to look for the above-stated features separately.

Declarative UI: Angular uses HTML to render the UI of an application as it is a declarative language and is much easier to use than JavaScript.

Long-term Google Support: Google plans to stick with Angular and further scale up its ecosystem as it has offered its long term support to Angular.

Ivy is the standard engine for rendering your content.

With Ivy, you can compile components more independently of each other. This improves development times since recompiling an application will only involve compiling the components that changed.

There are three main reasons to create a Universal version of your application (Server-Side Rendering).
-Facilitate web crawlers through 
-search engine optimization (SEO)
-Improve performance on mobile and low-powered devices
-Show the first page quickly with a first-contentful paint (FCP)

the Angular service worker follows these guidelines:

-Caching an application is like installing a native application. The application is cached as one unit, and all files update together.

-A running application continues to run with the same version of all files. It does not suddenly start 
receiving cached files from a newer version, which are likely incompatible.

-When users refresh the application, they see the latest fully cached version. New tabs load the latest cached code.

-Updates happen in the background, relatively quickly after changes are published. The previous version of the application is served until an update is installed and ready.
The service worker conserves bandwidth when possible. Resources are only downloaded if they've changed.

"Reactive Extensions for JavaScript", a library for reactive Streams which can be used to deal with asynchronous data streams and events.

RxJS uses JavaScript reactive programming. 

"A stream refers to values of data overtime"

"Observable represents the idea of an invokable collection of future values or events."

In RxJS, you model asynchronous data streams using observable sequences Or just called observables, too.
An Observable is an object that over time and asynchronously emits multiple data values (data stream).

Promise:
A Promise emits a single event at the completion or failure of an async operation.
promise emits a single value
A promise is Not Lazy A Promise cannot be cancelled

Observable:
An observer is like a stream and allows you to pass at least zero or more events where the callback is needed for each event.
Observable is favored over Promise, it can emits multiple values over a time.
The "Observable" is cold. It's not called until we're registered to it.
You may cancel an Observable with the unsubscribe() method
Observable provides a lot of efficient operators like map, foreach, filter, reduce, retry, retryWhen etc.

-Devops is not a technology, tool or framework.

Devops is a cultural movement , mindest , philosophy to coordinate produce better, morw reliable products.

you can visualize a dvops process as an infinite loop.

Dev: code - build -plan -test
ops: release - deploy - operate - monitor

1-doocker
2-kubernetes

Docker is a tool designed to make it easier to create, deploy and run applications by using containers.

docker packages an application and all its dependencies in a virtual container that can run on linux server.

each container runs as an isolated process in the user space and take up less space than regular vms due to thier layered architecture.
so it will always work the same regardless of its environment.

kubernetes is an open source container orchestration platform that automates deploying, managing and scaling containerization apps.

Continuous Deployment - refers a system that allows deployment of every new changes that comes in source code from a developer.
Continuous Delivery - refers the automation of entire software release process.