A primer on Angular (Not AngularJS)

Disclaimer: I am writing this for my understanding and reference. Also provided the links on each topic what I referred to. Please refer them for complete details.

What are the differences between Angular and AngularJS?

https://stackify.com/angular-vs-angularjs-differences-between-angular-and-angularjs/

https://gorrion.io/blog/angularjs-vs-angular

"Angular JS, based on JavaScript, uses terms of scope and controllers while Angular uses a hierarchy of components. Angular is component-based while AngularJS uses directives."

What is the official site for Angular?

https://angular.io

What do you need to know to work an Angular app?

HTML, CSS, JavaScript, TypeScript, knowledge of JavaScript classes, modules

Basic architecture concepts of an Angular app

How do you set up an Angular app to begin with?

https://angular.io/guide/setup-local

> npm i -g @angular/cli

> ng new angular-app

> cd angular-app

> ng serve --open (app opens up at http://localhost:4200/)

Explain the process of application launch/bootstrapping?

An Angular application launches by bootstrapping the root module which creates the components listed in the bootstrap array and inserts each one into the browser DOM.

https://angular.io/guide/bootstrapping

What are the key components in Angular?

• NgModule - class with @NgModule decorator
• Component - class with @Component decorator. Go through the component life cycle.
• Service - class with @Injectable decorator
• Dependency Injection - a class requests dependencies from external sources rather than creating them. 
• Decorators - a decorator appears immediately before class definition, which declares the class to be of the given type, and provides metadata suitable to the type.
• Directives
• structural directives - add, remove, manipulate the HTML elements. Exa: *ngIf, *ngFor
• attribute directives - change the appearance or behavior of a DOM element. Exa: ngModel, ngSwitch, ngStyle, ngClass
• Binding  (Interpolation, property binding [ ], event binding ( ), attribute binding, class binding, style binding, two-way binding [( )])
• Pipes

Best tutorial to learn Angular?

https://angular.io/tutorial (Tour of Heroes app)

Web Components or Custom Elements

In short:

• We all know the HTML elements like header elements (h1, h2, etc.), content elements (div, p, span, etc.).
• To create a custom element(Web Component), per say, my-custom-element, you need to follow the steps as below:
• Create a class that extends the HTMLElement.
• Add the structure, style, and behavior to the class.
• Add the life cycle to the custom element depending on the need.
• Attach a shadow DOM tree to the custom element.
• Define it in window.customElements.
• Use libraries like Stencil to build the web components in a breeze.

I started reading about Web Components from a layman level. 

Initially I went through the fundamentals of Web Components here: https://www.webcomponents.org/introduction

Then I read about window.customElements.define here: https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements

Then I went through the examples and the details given here: https://www.robinwieruch.de/web-components-tutorial.

Also, to make your hands dirty:

This is the best (short and sweet): https://www.youtube.com/watch?v=mTNdTcwK3MM

try Stencil and build a stop-watch (a library to build your web component project) :  https://medium.com/@ahsan.ayaz/building-web-components-with-stencil-a3717787954a

Handling data with Web Components: https://itnext.io/handling-data-with-web-components-9e7e4a452e6e

Well, I ended up with some understanding after going through these articles. Happy coding 😊

Additional read: Thorough coverage on Stencil props, events, state: https://blog.logrocket.com/building-reusable-web-components-with-stencil-js/

Data binding example with NO stencil: https://medium.com/swlh/https-medium-com-drmoerkerke-data-binding-for-web-components-in-just-a-few-lines-of-code-33f0a46943b3

A quick look through before an interview

 ES6 important features:

https://frontendjournal.com/javascript-es6-learn-important-features-in-a-few-minutes/

https://www.mkwd.net/learn-es6-in-5-minutes-tutorial/

TypeScript:

https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html

Angular

https://angular.io/start

JavaScript - Comparing Objects and finding the difference

 Though posted a while back, I tried the solution suggested by Johan Persson and I liked it:

https://stackoverflow.com/questions/31683075/how-to-do-a-deep-comparison-between-2-objects-with-lodash

All about SAS Macros

https://communities.sas.com/t5/SAS-Programming/Value-returned-in-a-macro/td-p/461868

React Hooks Testing

I am adding the reference to this blog, https://medium.com/javascript-in-plain-english/testing-react-hooks-be74ec3fc0c4, only because the author used a gif of 'Indiana Jones' which is a cool way of explaining a mock function. I haven't read the article yet.

More to come here...

React Redux Example

Basics:

• Redux provides means to create an empty store where application state can be manufactured.
• You tell the store what to create as the application state, how to update the application state thru reducer.
• Reading from the application state in application is straight forward.
• Updating the application state is by triggering the update logic in the store by dispatching the actions.
• NOTE: When you update a state, you don’t update the state but rather create a new state out of old state.

• react-redux provides couple of additional facilities, Provider and connect.
• Provider to provide the store to the root component.
• Connect passes state, dispatch actions to child component. 

Example:

• npx create-react-app reduxexample
• cd reduxexample
• npm install redux
• npm install react-redux
• Remove all files under src folder and public folder
• Create index.html under public folder
• Create rest of the files under src folder
• npm start

index.html

index.js

reducer.js

dispatcher.js

kitchen.jsx

Menu.jsx

App.jsx