Node express up and running in 5 minutes

Follow the guidelines here: https://expressjs.com/en/starter/generator.html

All in all, from command prompt:

1. npx express-generator my-app
2. cd my-app
3. npm install
4. npm start

 

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