Forem: Ben

Single Sign On of Micro-Service Architecture (Authentication and Authorization)

Ben — Thu, 24 Oct 2019 12:41:31 +0000

How do you implement Single Sign On of Micro-Service Architecture?

OAUTH with JWT
Shared Session by Memory Database (Redis/Spring Session)

Date Handling in Angular Application (Part 2 - Angular Http Client and Ngx Datepicker)

Ben — Tue, 02 Jul 2019 16:26:29 +0000

Original Post: https://medium.com/self-learning/date-handling-in-angular-application-part-2-angular-http-client-interceptor-and-ngx-datepicker-bf32231010f8

Introduction

The below is a summary of previous post about JavaScript Date Object and JSON Date.

JSON is common communication format between server side and client side
JavaScript Date Object is Time zone and Locale Dependent
ISO 8601 Date Format is a general agreement for JSON Date representation
JavaScript do not know JSON date type. Conversion between JSON Date String and JavaScript Date Object is required.

Seamless Integration Approaches

In Angular Application, what could be done in order to make the seamless integration of JavaScript Date Object, JSON and UI Components?

There would be two important parts for the seamless integration.

Communication between Client Side and Server Side
Datepicker Handling

Communication between Client Side and Server Side

In Angular Application, it would provide HttpClientModule for simplifying HTTP Communication between client side and server side.

this.httpClient.get<DataModel>("/api/getData").subscribe(
  (data: DataModel) => {
    console.log(data);
  }
);

Although, the data model (Interface) is defined above, JSON does not have date object. The date object would be presented as Data String in ISO format. The Data String would simply assign to date even though it is defined as Date in Interface in TypeScript. Note that the interface would be compiled to nothing and it is only for tying checking in typescript context.

interface DataModel {
  data1: string; 
  data2: string; 
  data3: string
  date1: Date; 
  date2: Date; 
  date3: Date
}

There would be two approaches to convert

Http Client Pipe
Angular Http Interceptor

Http Client Pipe

Http Client would return Observable for various provided method. The map operator in pipe could be used to convert date string to date object.

this.httpClient.get<DataModel>("/api/getData")
  .pipe(
    map((data)=>{
      data.date1 = new Date(data.date1);
      data.date2 = new Date(data.date2);
      data.date3 = new Date(data.date3);
      return data;
    })
  ).subscribe(
    (data: DataModel) => {
      console.log(data);
    }
  );

Angular Http Interceptor

As the date string is in ISO 8601, we want to have a generic way to do all the conversion. A custom HttpInterceptor would be added to Angular Application for intercepting request and response.

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
export class JsonDateInterceptor implements HttpInterceptor {


  private _isoDateFormat = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d*)?Z$/;

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(map( (val: HttpEvent<any>) => {
      if (val instanceof HttpResponse){
        const body = val.body;
        this.convert(body);
      }
      return val;
    }));
  }


  isIsoDateString(value: any): boolean {
    if (value === null || value === undefined) {
      return false;
    }
    if (typeof value === 'string'){
      return this._isoDateFormat.test(value);
    }    return false;
  }
  convert(body: any){
    if (body === null || body === undefined ) {
      return body;
    }
    if (typeof body !== 'object' ){
      return body;
    }
    for (const key of Object.keys(body)) {
      const value = body[key];
      if (this.isIsoDateString(value)) {
        body[key] = new Date(value);
      } else if (typeof value === 'object') {
        this.convert(value);
      }
    }
  }
}

this._httpClient.post<Value>("/api/posts", this.value)
  .subscribe((val: Value) => {
    console.log(val.date1);
  });

Angular UI Datepicker

The Date Object in Browser is timezone and locale dependent. Sometimes, we would like to have custom presentation of date which in defined in the web application. We do not want to care about the browser setting.

TO BE CONTINUED

https://medium.com/self-learning/ngx-datepicker-utc-datepicker-design-77e33789e9d7

Reference

Date Handling in Angular Application (Part 1 — JSON and JavaScript Date Object Study)

Ben — Sun, 30 Jun 2019 17:41:11 +0000

https://medium.com/self-learning/date-handling-in-angular-application-part-1-json-and-javascript-date-object-s-8f77a69734c7

Introduction

In modern web application, JSON is widely used as communication format between server side and client side. However, JSON do not specify the format of date object.

General Agreement

ISO 8601 (YYYY-MM-DDTHH:mm:ss.sssZ) is a general agreement for exchange format of date object.

JavaScript Date Object

var now = new Date()

The above is a way to create a date object in browser environment.

Time zone and locale dependent

By Default, browser would use the time zone and locale to display date in browser. i.e.

var now = new Date();
console.log(now.toString());

Result: Sun Jun 30 2019 23:18:34 GMT+0800 (China Standard Time)

The some method in the date object in browser are timezone and locate dependent.

var now = new Date();
now.getHours()

result: 23

ISO Format (Time zone and locale independent)

As mention above, ISO Date String Format is a general agreement format in JSON format.

var now = new Date()
console.log(now.toISOString());

result: 2019-06-30T15:55:46.936Z

JSON Conversion

Convert Date Object to JSON

var jsonData = {date1: new Date()};
console.log(JSON.stringify(jsonData));

result: {"date1":"2019-06-30T16:26:18.460Z"}

Revert JSON to JavaScript Object

var jsonData = {date1: new Date()};
var jsonDataStr = JSON.stringify(jsonData)
var revertedJsonData = JSON.parse(jsonDataStr);
console.log(revertedJsonData);

result: {date1: "2019-06-30T16:30:19.096Z"}

It is found the JSON reversion (JSON.parse) do not know the type of Date. It cannot convert the date string to Date object.

The ISO 8601 is a agreed format for the date object json string. We could use the reviver function in JSON.parse to help the conversion.

var isoDateFormat = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d*)?Z$/;
function parseIsoDateStrToDate(key, value){
  if (typeof value === "string" && isoDateFormat.test(value)){
    return new Date(value);
}
  return value
}
var jsonData = {date1: new Date()};
var jsonDataStr = JSON.stringify(jsonData)
var revertedJsonData = JSON.parse(jsonDataStr, parseIsoDateStrToDate);
console.log(revertedJsonData);

result: {date1: Mon Jul 01 2019 01:00:04 GMT+0800 (China Standard Time)}

Summary of JSON Date And JavaScript Date Object

JavaScript Date Object is Time zone and Locale Dependent
ISO 8601 Date Format is a general agreement for JSON Date representation
JavaScript do not know JSON date type

Reference

Part2: https://dev.to/imben1109/date-handling-in-angular-application-part-2-angular-http-client-and-ngx-datepicker-3fna

Complex and Dynamic Form Design in Angular (Part 1 - Form Group)

Ben — Sat, 29 Jun 2019 12:15:12 +0000

Introduction

In Modern Web Application, a from could be very very very complicated. It would require a fancy layout, dynamic, validated, functional and also performance.

All make the Web Application Development difficult and cost so much resource. All the developed framework tried to make it easier but still very very very difficult.

Here, I would like to share some approaches to handle it in Angular.

Form Group as Parameter (FormGroup Approach)
Self Register Form (FormGroup Approach)
Context Service (RxJs Approach)
Angular Input Output Handling (Input Out Approach)
Angular Two Way binding Approach (Input Out Approach)
NgRx Store Approach (Redux Approach)

Form Group as Parameter

Self Register Form Group

The mother form is required to provide the addControl mechanism to the form when the child form is initialized and destroyed. For example, the ngFor and ngIf situation should be catered.

Mother Form

abstract class MotherForm {
  form: FormGroup;
  constructor(){
    this.from = this.initializeForm();
  }

  initializeForm(): FormGroup {
    return new FormGroup({})
  }
  addControlGroup(name: string, formGroup: AbstractControl): void {
    this.form.addControl(name, formGroup);
  }
  removeControl(name: string){
    this.form.removeControl(name);
  }
}

Children Form

abstract class ChildrenForm implements OnInit, OnDestroy {
  @Input()
  intialValue: any
  form: FormGroup
  constructor(@Host private _motherForm: MotherForm){
    this.form = this.initializeForm();
  }
  initializeForm() : FormGroup{
    return new FormGroup({});
  }
  getFormName(): string {
    return 'emptyForm'
  }
  ngOnInit(){
    if (this.intialValue){
      this.form.setValue(this.initialValue)
    }
    this._motherForm.addControlGroup(this.getFormName(), this.form);
  }
  ngOnDestroy(){
    this._motherForm.removeControlGroup(this.getFormName());
  }
}

Now, The implementation class would leverage these abstract class for self registration.

app-self-register.component.ts

import { Component, OnInit } from '@angular/core';
import MotherForm from './mother-form';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
  selector: 'app-self-register',
  templateUrl: './self-register.component.html',
  styleUrls: ['./self-register.component.css']
})
export class SelfRegisterComponent extends MotherForm {
  constructor() {
   super();
  }
  initializeForm(){
    return new FormGroup({
      name: new FormControl('')
    })
  }
}

app-self-register.component.html

<form [formGroup]="form">
  <input formControlName="name"/>
  <app-self-register-children1></app-self-register-children1>
</form>
{{form.value | json}}

self-register-children1.component.ts

import { FormGroup, FormControl } from '@angular/forms';
import { Component, OnInit, Host } from '@angular/core';
import ChildrenForm from '../children-form';
import { SelfRegisterComponent } from '../self-register.component';
@Component({
  selector: 'app-self-register-children1',
  templateUrl: './self-register-children1.component.html',
  styleUrls: ['./self-register-children1.component.css']
})
export class SelfRegisterChildren1Component extends ChildrenForm  {
  constructor(@Host() _motherForm: SelfRegisterComponent) {
    super(_motherForm);
  }
  initializeForm(): FormGroup{
    return new FormGroup({
      name: new FormControl('')
    })
  }
  getFormName(): string {
    return "selfRegisterChildren1";
  }
}

self-register-children1.component.html

<form [formGroup]="form">
  <input formControlName="name"/>
</form>

Result

Reference

https://medium.com/self-learning/nested-custom-component-and-form-group-53806a2cd0f5

How do you develop angular application with with different back-end technologies

Ben — Mon, 08 Oct 2018 10:38:55 +0000

I am trying to develop angular application with J2EE.

Server-side: Java, J2EE, Spring, Spring MVC, MyBatis, Maven
Client-side: TypeScript, Angular, Yarn, Webpack

In development environment, I would like to use webpack dev server to route angular application to spring application. I would use different ide to develop front end application and backend application which is eclipse and visual studio code.

In integration environment, they would be packaged as a single war.

What is your way to develop angular application with different back-end technologies

How would you manage a system which the original author have left your team?

Ben — Thu, 27 Sep 2018 07:47:14 +0000

You may be assigned to manage a system. Unfortunately, the original author of your system have left your team.

How could you manage your system such enhancement, bug fixing, etc?

How do you think of angularjs application

Ben — Fri, 21 Sep 2018 10:53:33 +0000

As you know angular 2x is nearly completely different js framework, what do you think of application which is just actively developing in angularjs?

How would you define your deliverables quality

Ben — Fri, 21 Sep 2018 05:26:56 +0000

How would you write a guideline for junior developer

Ben — Thu, 20 Sep 2018 12:19:07 +0000

As there are many way for implementation, it would be chaos if no standard for implementation.

How would you guide the junior devloper to follow the same way?

How do limit the application behaviour for change

Ben — Wed, 19 Sep 2018 12:03:48 +0000

As chanage is inevitable, how would you prevent change in a specific period in order to make project completed.

What is difference among enterprise architect, solution architect, software architect, system architect and cloud architect?

Ben — Wed, 19 Sep 2018 08:20:16 +0000

What is difference of In-house Development Team and Vendor?

Ben — Mon, 17 Sep 2018 06:32:13 +0000

What do you think of In-house Development Team and Vendor?

What is the difference?
What is the advantage and disadvantage?
Any other feeling on them?