Angular Best Practice

ทำไมต้อง Best Practice?

แน่นอน Best Practice อาจจะไม่ใช่ทุกอย่างที่เรายึดถือแต่เป็น แนวทาง เรียกได้ว่าเป็นแนวทางปฎิบัติที่ดีที่สุด เพื่อปรับปรุงประสิทธิภาพ และให้เป็นสากล

ปรับปรุงประสิทธิภาพให้ดีขึ้น เช่นอะไร

1. พยายามหลีกเลี่ยงการเขียน Logic ใน Component
2. ทำ Lazy Loading
3. ป้องกัน Memory Leaks
4. Clean code

พยายามหลีกเลี่ยงการเขียน Logic ใน Component

• เพื่อลดความซับซ้อนของ Code
• เพื่อแยกส่วนให้ชัดเจนระหว่าง Business Logic กับ Component
• ทำให้อ่าน Code ง่ายขึ้น (Clean code)

Lazy Loading

• ใช้งาน loadChildren เพื่อหลีกเลี่ยงการ load ข้อมูลที่ไม่ถูกเรียกใช้งานใน routing file

const routing: Routes = [
     {
  	   path: 'items',
   	   loadChildren: () => import('./data/data.module').
               then(d => d.DemoModule)
        }
     ];

ป้องกัน Memory Leaks

เราสามารถป้องกัน Memory Leaks ได้ในหลายๆมิติ เช่น

• Observables, subscribe and unsubscribe

lucky.service.ts

import { Observable, Subject } from 'rxjs’;

export class LuckyService {
 private luckyGenerator$: Observable<number>;
 private subscribersCount = 0;

 public getLuckyNumber(): Observable<number> {
   this.subscribersCount++;

   if (!this.luckyGenerator$) {
     this.luckyGenerator$ = Observable.create((subject: Subject<number>) => {
       setInterval(() => {
         const number = Math.floor(Math.random() * 10);
         subject.next(number);
       }, 1000);
     });
   }
   return this.luckyGenerator$;
 }

 public getSubscribersCount(): number {
   return this.subscribersCount;
 }
}

lucky.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { LuckyService } from './lucky.service';
import { Subscription } from 'rxjs’;

@Component({
 template: `
   <p>You are checking if you are lucky {{displayCount}} time</p>
   <p>Your lucky number is: {{number}}</p>
`,
})
export class LuckyComponent implements OnInit, OnDestroy {
 public subscribersCount: number = 0;
 public number: number;

 private luckySubscription$: Subscription;

 constructor(private luckyService: LuckyService) {}

 public ngOnInit(): void {
   this.luckySubscription$ = this.luckyService.getLuckyNumber().subscribe((luckyNumber: number) => {
     this.number = luckyNumber;
     console.log('Retrieved lucky number ${this.number}, for subscriber ${this.subscribersCount}');

   });
   this.subscribersCount = this.luckyService.getSubscribersCount();
 }

 public ngOnDestroy(): void {
   this.luckySubscription$.unsubscribe();
 }
}

ถ้าเราทำตามรูปแบบข้างต้นหากเราเลิกใช้งาน LuckyComponent ตัว luckySubscription จะถูกเลิกใช้งานเช่นเดียวกัน

สร้างตัวแปรโดยประกาศ Types หลีกเลี่ยงการใช้ any

แน่นอนการใช้ any นั้นสะดวกมากกับการ codeing แต่หากเราใช้มากๆอาจทำให้เกิดปัญหาในภายหลัง Programmer มือใหม่มักละเลยการใช้งาน Types เนื่องจากสามารถทำงานได้เร็วเห็นผลทันที แต่! หากตัวแปรที่เราต้องการไม่ใช่ข้อมูลในรูปแบบที่เราต้องการ ตามตัวอย่าง

let a = 10;

let b = 'xyz';

let c = a + b;

console.log(`Total of c: ${z}`)

// Output

Total of c: 10xyz

หาก Code ข้างต้น คือสูตรการคำนวนเลข แล้วข้อมูล b ถูกส่งมาเป็น string ควรจะ error มั้ย?

แน่นอนคำตอบคือควร แต่หากเราไม่ประกาศ Type Code ข้างต้นจะสามารถทำงานได้แบบ ผิด Business Logic

แต่หารเราประกาศ Type ให้มันล่ะ

let p: number = 10;
let q: number = 'xyz';
let r: number = a + b;

// compile error

Type '"xyz"' is not assignable to type 'number'.
let s: number

เราจะสามารถรู้ตั้งแต่ตอนเขียน Code ได้เลยว่าข้อมูลนั้นผิดพลาด

คิดเอาเองว่า ระหว่าง Syntax Error กับ Runtime Error อะไรจะน่ากลัวว่ากัน?