เมื่อวานตอนเย็นได้ไปร่วมงาน Angular Developers Thailand Meetup January 2018
จากลุ่ม Angular Developer Thailand จัดที่ HANGAR Coworking Space by DTAC
โดยครั้งที่มีหัวข้อดังนี้
- Create package on NPM
- Make readable code in Angular with Lettable(Pipe) Operator
- Angular CI/CD with DroneCI
เนื่องจากไปช้าจึงได้ฟังเฉพาะหัวข้อที่ 2 ปลาย ๆ กับหัวข้อที่ 3
และมีการให้ถามตอบคำถามต่าง ๆ จากคนที่เข้ามาพูดและฟัง
มีหลายอย่างที่น่าสนใจดังนี้
สิ่งที่ได้รับจาก Make readable code in Angular with Lettable(Pipe) Operator
ซึ่งใน RxJs 6 ขึ้นไปนั้นเปลี่ยนจาก Lettable ไปเป็น Pipeable operator แล้วนะ
ความจริงจังของเอกสารคือ Stop trying to make “lettable” happen
มาดูรายละเอียดกันหน่อย
เนื่องจากไม่เคยเขียนหรือรู้จักเรื่องพวกนี้เลย
ดังนั้นก็ทำการจด ๆ ถ่ายรูปเอาไว้
เพื่อนำมาศึกษาต่อ !!
หลังจากที่ไปศึกษาเพิ่มเติม ก็ได้เรื่องประมาณนี้ (ไม่แน่ใจว่าถูกหรือไม่ !!)
Lettable/Pipeable operator นั้น
เป็นแนวทางใหม่ในการ compose observrable ต่าง ๆ เข้าด้วยกัน
ซึ่งมีข้อดีทั้งนักพัฒนาและผู้สร้าง library ด้วย
แต่ก่อนอื่นต้องไปดูก่อนว่า
วิธีการ compose observrable ก่อนหน้าที่จะเป็น Lettable/Pipeable นั้นเป็นมาอย่างไร ?
แล้วทำไมต้องเปลี่ยนและมาใช้วิธีการใหม่ ๆ ด้วย
เริ่มจากการ bundle ทุกอย่างมาใน RxJS library เลย (Bundle All)
นั่นคือ นักพัฒนาเพียงทำการ import rxjs มาเพียงตัวเดียว
ก็สามารถใช้ operator ทั้งหมดผ่าน Observable.prototype ไปเลย
สามารถทำการ compose การทำงานได้ดังนี้
คำอธิบาย
ทำการดึงข้อมูล name มาจาก REST API ที่กำหนด
ซึ่งมี 3 ขั้นตอนคือ getJSON, map และ subscribe
ข้อเสียคือ เราใช้งานเพียง 3 operator เท่านั้น
แต่ดันมีมาให้ใช้ทั้งหมดเลย (ขนาดของระบบหลังจากการ build ด้วยตัว bundler เช่น Webpack)
ดังนั้นทำให้ขนาดของ app เรานั้นใหญ่ขึ้นแบบไร้ประโยชน์
แถมส่งผลต่อประสิทธิภาพการทำงาน
ต่อมาเพื่อแก้ไขปัญหาดังกล่าว RxJS จึงเพิ่ม directory ชื่อว่า add เข้ามา (Prototype Patching)
ช่วยทำให้ผู้ใช้งานทำการ import operation เฉพาะที่ต้องการได้
ข้อเสียที่ตามมาคือ นักพัฒนาทำการ import เพียบเลย !!
สิ่งที่เกิดขึ้น ตอน import งงมาก ๆ ว่า operation แต่ละตัวมาจากไหนบ้าง ?
ดังนั้นมาลองเปลี่ยนการ import และการเขียนหน่อยสิ
ดูอ่านง่ายขึ้นนะ
แต่ทำไมต้องเขียนเยอะด้วย ?
ตรงนี้อยู่ที่ความชอบแล้วนะ
ต่อมาถึงคิวของ Lettable หรือ Pipeable operator กันบ้าง
สิ่งที่น่าสนใจคือ
ทำการ import operator ต่าง ๆ จาก directory operator ได้เลย
ซึ่งไม่ต้องกลัวว่า operator ที่ไม่ได้ใช้จะถูกรวมเข้ามาเหมือนวิธีการแรก
เพราะว่าวิธีการนี้สนับสนุนจาก Tree-shaking (Dead code elimination จาก Webpack)
นั่นคือมั่นใจได้ว่า มีเท่าที่ใช้แน่นอน
และทำให้ขนาดของระบบเล็กลงอีกด้วย
ลองอ่านเพิ่มเติมได้จาก RxJS — Reduce Angular app bundle size using lettable operators
อีกทั้งยังทำให้อ่านง่ายขึ้นอีกด้วย (Readable)
เพื่อความง่ายในการใช้งาน
จะมี method pipe() ใหม่มาให้
ซึ่งสามารถรวมหรือเรียงลำดับการทำงานของแต่ละ operator ได้เลย
มาดูกัน
สิ่งที่น่าแปลกใจหน่อยคือ
ทำไมถึงเรียกว่า Lettable operator ด้วย ?
นำมาจาก let operator ใน RxJS นั่นเอง
ซึ่งมันทำงานคล้าย ๆ กับ map operator
แต่ทำเพียงการรับค่าและ return ค่าเป็น observable เท่านั้น
อีกทั้งมีประโยชน์ต่อการ compose การทำงานต่าง ๆ เข้าด้วยกันอีกด้วย
แต่กลับไม่ค่อยมีใครใช้งานมากนัก !!
ชื่อ Lettable แต่ทำไมต้องเรียกใช้ method pipe() ด้วย ?
ตรงนี้นี่เองที่ทำให้เกิดความสับสน
ระหว่างชื่อและการใช้งาน
ดังนั้นจึงเปลี่ยน Pipeable opertaor แทน
สิ่งที่ได้รับจาก CI/CD with DroneCI
เริ่มต้นว่าด้วยเรื่องของ CI (Continuous Integration)
แน่นอนว่าเป็นแนวปฏิบัติที่ทีมพัฒนา software จำเป็นต้องมี
ซึ่งมันคือแนวปฏิบัติเพื่อ
- ช่วยหาข้อผิดพลาดได้ทันที ไม่ต้องไปรอนาน
- ทำให้เราสามารถหาต้นเหตุของปัญหาได้เร็ว
- ส่งมอบระบบงานได้เร็วและบ่อย
จากนั้นเพื่อทำให้สามารถทำงานได้เร็วตามที่ต้องการ
จึงต้องมีเครื่องมือช่วยเหลือ
ซึ่งมีให้เลือกมากมายโดยหนึ่งในนั้นคือ DroneCI
ทำต้องใช้ DroneCI ?
- สนับสนุน Git provider ทั้ง Github, Bitbucket, Gitlab, Gogs, Gitea และ Coding เป็นต้น
- เร็วและง่าย
- Docker friendly นั่นคือ configuration ต่าง ๆ เหมือน docker เลย พร้อมทั้งทำงานกับ docker ได้ง่าย
- ง่ายต่อการขยายระบบ
- ฟรีต่อการใช้งาน ที่สำคัญสามารถนำมาติดตั้งเองได้
ข้อเสียหลัก ๆ คือ
เรื่องของการติดตั้ง และ เริ่มใช้งาน
ตลอดจนเรื่องของ community ที่ยังเล็ก
เนื่องจากอยู่ในช่วงเริ่มต้นของระบบนั่นเอง
แต่ก็น่าจะเป็นเรื่องปกติไปแล้ว
ใช้ก่อนเจ็บก่อน
สิ่งที่สำคัญของระบบ CI/CD คือ Pipeline
โดยใน DroneCI นั้นสามารถเขียนในรูปแบบไฟล์ YML (.drone.yml)
เหมือนหรือคล้ายกับ docker-compose ของ Docker เลย
การ demo เป็นระบบ TODO List ซึ่งพัฒนาด้วย Angular
ซึ่งมีขั้นตอนของ pipeline ดังนี้
- ทำการ build ในทุก ๆ brach ที่มีการเปลี่ยนแปลง ประกอบไปด้วย Line, test และ build
- ทำการ publish ระบบในรูปแบบของ Docker Image และ push ไปยัง Docker Registry (Docker Hub) ต้องกำหนด branch ที่ต้องการ
- ทำการ deploy ไปยัง server ที่ต้องการ โดยทำการ pull Docker image มาจาก Docker Registry
ปิดท้ายด้วยช่วงถามตอบ
ก็มีคำถามที่น่าสนใจเช่น
- รูปแบบ Git commit message ที่ดีควรเป็นอย่างไร
- การเริ่มต้นศึกษา Angular และ TypeScript
- การโน้มน้าวใจให้ทีมมาใช้งาน Angular
ขอให้สนุกกับการ coding ครับ
