สรุป Angular Meetup เดือนมีนาคม 2561

Panusitt Khuenkham

5 min readMar 6, 2018

Event พบปะและแลกเปลี่ยนเรื่อง Angular

Typescript ในเวอร์ชั่น 2.7 มีอะไรมาบ้างน๊าา

เราจะหยิบสิ่งที่น่าสนใจมาพูดถึงแค่บางส่วนอย่างเช่น

— Constant-named properties (คุณสมบัติของค่าคงที่)

สามารถใช้ Symbol ได้แล้ว ตัวอย่างเช่น

// Lib
export const SERIALIZE = Symbol("serialize-method-key");

export interface Serializable {
    [SERIALIZE](obj: {}): string;
}_______________________________________________________// Consumer หรือตัวอย่างการนำไปใช้
import { SERIALIZE, Serializable } from "lib";

class JSONSerializableItem implements Serializable {
    [SERIALIZE](obj: {}) {
        return JSON.stringify(obj);
    }
}

นอกจากนี้ยังสามารถใช้
constant เป็น key ใน object ได้

const Foo = "Foo";
const Bar = "Bar";// การเรียกใช้ constant name -> [constant name] -> [Foo]let x = {
    [Foo]: 100,
    [Bar]: "hello",
};

let a = x[Foo]; // has type 'number'
let b = x[Bar]; // has type 'string'// ==> จะได้ว่า a มีประเภทเป็น'ตัวเลข' และ b มีประเภทเป็น'สตริง'

ผลลัพธ์เมื่อลอง Transpile แล้ว Run console

Important!! Symbol มาใหม่ใน ES6 เพราะฉนั้นจะ support ใน browser ใหม่ๆ

ลองเช็คได้จากเว็บนี้: http://kangax.github.io/compat-table/es6

— Strict Class Initialization(มีการเข้มงวดเรื่องการกำหนดค่าเริ่มต้น)

เพิ่มคำสั่งเมื่อ transpile การเรียกใช้งาน

--strictPropertyInitialization// ==> จะทำการตรวจสอบเพื่อให้แน่ใจว่าเราได้กำหนดค่าเริ่มต้นใน constructor() หรือยัง// ตัวอย่างเช่นclass C {
    foo: number;
    bar = "hello";
    baz: boolean;
//  ~~~
    constructor() {
        this.foo = 42;
    }
}//  Error!! เพราะว่ายังไม่ได้กำหนดค่าเริ่มต้นให้กับตัวแปร baz ใน constructor()

แต่ถ้าเราตั้งใจที่จะไม่กำหนดค่าเริ่มต้นให้กับตัวแปร baz หรือคิดว่าเมื่อนำไปใช้แล้วจะมีค่าแน่นอน เราก็สามารถเลี่ยงการตรวจสอบได้โดยใช้เครื่องหมาย !

class C {
    foo: number;
    bar = "hello";
    baz!: boolean;    constructor() {
        this.foo = 42;
    }
}//  Pass

อ่านเพิ่มเติมได้ที่: #strict-class-initialization

อ้างอิง: TypeScript#typescript-27

Custom Reuse Strategy คืออะไรน๊าา

จริงๆ แล้วมันอยู่ในเรื่องของการทำ Component Reuse Strategy
>> มันก็คือการนำ component ที่เคยสร้างขึ้นมาแล้วนำกลับมาใช้ใหม่ได้นั่นเอง

ตัวอย่างเช่น

เวลาที่เรา search แล้วได้ข้อมูลมาจาก api แล้ว render ใส่ grid เมื่อเรากดดู detail แล้ว back กลับมาหน้า search อีกรอบ มันจะไม่ยิง api ซ้ำเพื่อไปเอาข้อมูลมาใหม่

แต่!! มันจะใช้ข้อมูลเดิมที่เคย search ไว้แล้วนั่นเอง

**สมมติว่า ตอนนี้ข้อมูลใน database ของเรามี 10 rows.[1] domain.com/users>> ข้อมูลใน grid มี users 10 rows.[2] domain.com/users/5/detail>> ดูข้อมูล users id ที่ 5**สมมติว่า ตอนนี้ข้อมูลใน database ของเรามี 20 rows. แล้ว[3] กดปุ่ม back > navigate to > domain.com/users>> ข้อมูลใน grid มี users 10 rows. เหมือนเดิมก็คือการนำ component เดิมที่เคยสร้างแล้วนำกลับมาใช้อีกครั้งนั่นเอง

ตัวอย่างโค้ด: https://github.com/tumit/reusable-strategy-demo

paramsInheritanceStrategy ประโยชน์ของมัน !?

ก็คือปกติเมื่อเราต้องการดึงค่าจาก params จาก url เช่น

domain.com/users/5/detailid: Observable<string>;constructor(private route: ActivatedRoute) { }ngOnInit() {   this.id = this.route.parent.paramMap.pipe((
      map((params) => {
         return params.get('id');
      })
   ));
}
// Result: id => 5แล้วถ้ามี Params เพิ่มอีกหล่ะเช่นdomain.com/users/5/detail/6/sub/6
this.route.parent.parent.parent.....บลาๆ มันก็ไม่ใช่เรื่อง

จึงมีเรื่องของ paramsInheritanceStrategy เข้ามาช่วยในเรื่องพวกนี้

วิธีใช้งานก็ไม่ยากนะ

ในหน้า app.module.ts ในส่วนของ Router ก็ตั้งค่าเพิ่มเติม ดังนี้

static forRoot(routes: Routes, config?: ExtraOptions);RouterModule.forRoot([{path}], {
   paramsInheritanceStrategy: 'always'
});// การใช้งานที่ componentid: Observable<string>;constructor(private route: ActivatedRoute) { }ngOnInit() {   /**
   เปลี่ยนจาก
   this.route.parent.paramMap.pipe
   เป็น
   this.route.paramMap.pipe
   **/
   
   // ตัวอย่างเต็มรูปแบบ
   this.id = this.route.paramMap.pipe(
      map((params) => {
          return params.get('id');
      })
   );
}ทีนี้เราก็จะได้ค่าของ id ไปใช้ได้เลย
หากมี params อื่นๆ เพิ่มเติม ก็สามารถประยุกต์จาก จุดๆ นี้ได้เลยเช่นกัน

ศึกษาเพิ่มเติมได้จาก: https://angular.io/api/router/ExtraOptions

ทดสอบโปรแกรม: https://angular-jrgnnz.stackblitz.io

ตัวอย่างโค้ด: https://stackblitz.com/edit/angular-jrgnnz

สุดท้ายและท้ายสุดพระเอกของเราก็คืออออออออออ……..

Angular ในเวอร์ชั่น 6.0.0 มีอะไรน่าว้าวๆ บ้าง^^

— New Render Engine: ngIvy
ngIvy จริงๆ แล้วก็คือ Renderer ตัวใหม่นั้นเอง หรือเรียกว่า renderer3
“ The render engine for Angular version 5.x is renderer2. ngIvy is renderer3”
ข้อดีของมันก็คือการแสดงผลที่รวดเร็วและไฟล์ที่ได้มาเมื่อ Build ทาง angular เค้าเคลมมาว่า มีขนาดที่เล็กมากกกกกกกกกกกกกก ซึ่งเมื่อเทียบกับเวอร์ชั่นก่อนหน้า

“Rob Wormald spoke” ได้พูดและสาธิตใน “Angular Mountain View slash Modern Web meetup in February of 2018” ว่าเมื่อสร้าง app ที่แสดงคำว่า “hello world” หลังจากที่ทำการ bundle เรียบร้อยแล้ว มีขนาดเพียงแค่ 3.2 kb.(kilobyte)
ซึ่งถือว่ามีขนาดที่เล็กมาก ถือเป็นเรื่องที่ตื่นเต้นและน่าสนใจอย่างมาก