สิ่งที่ได้รับจาก Angular Developers Thailand Meetup ประจำเดือนมกราคม 2018

เมื่อวานตอนเย็นได้ไปร่วมงาน 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 การทำงานได้ดังนี้ [gist id="39c3ea6576288c90773a9331cfbc930f" file="1.js"] คำอธิบาย ทำการดึงข้อมูล name มาจาก REST API ที่กำหนด ซึ่งมี 3 ขั้นตอนคือ getJSON, map และ subscribe ข้อเสียคือ เราใช้งานเพียง 3 operator เท่านั้น แต่ดันมีมาให้ใช้ทั้งหมดเลย (ขนาดของระบบหลังจากการ build ด้วยตัว bundler เช่น Webpack) ดังนั้นทำให้ขนาดของ app เรานั้นใหญ่ขึ้นแบบไร้ประโยชน์ แถมส่งผลต่อประสิทธิภาพการทำงาน

ต่อมาเพื่อแก้ไขปัญหาดังกล่าว RxJS จึงเพิ่ม directory ชื่อว่า add เข้ามา (Prototype Patching)

ช่วยทำให้ผู้ใช้งานทำการ import operation เฉพาะที่ต้องการได้ [gist id="39c3ea6576288c90773a9331cfbc930f" file="2.js"] ข้อเสียที่ตามมาคือ นักพัฒนาทำการ import เพียบเลย !!

สิ่งที่เกิดขึ้น ตอน import งงมาก ๆ ว่า operation แต่ละตัวมาจากไหนบ้าง ?

ดังนั้นมาลองเปลี่ยนการ import และการเขียนหน่อยสิ [gist id="39c3ea6576288c90773a9331cfbc930f" file="3.js"] ดูอ่านง่ายขึ้นนะ แต่ทำไมต้องเขียนเยอะด้วย ? ตรงนี้อยู่ที่ความชอบแล้วนะ

ต่อมาถึงคิวของ 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 ได้เลย มาดูกัน [gist id="39c3ea6576288c90773a9331cfbc930f" file="4.js"] สิ่งที่น่าแปลกใจหน่อยคือ ทำไมถึงเรียกว่า 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 ดังนี้

1. ทำการ build ในทุก ๆ brach ที่มีการเปลี่ยนแปลง ประกอบไปด้วย Line, test และ build
2. ทำการ publish ระบบในรูปแบบของ Docker Image และ push ไปยัง Docker Registry (Docker Hub) ต้องกำหนด branch ที่ต้องการ
3. ทำการ deploy ไปยัง server ที่ต้องการ โดยทำการ pull Docker image มาจาก Docker Registry

ปิดท้ายด้วยช่วงถามตอบ

ก็มีคำถามที่น่าสนใจเช่น

• รูปแบบ Git commit message ที่ดีควรเป็นอย่างไร
• การเริ่มต้นศึกษา Angular และ TypeScript
• การโน้มน้าวใจให้ทีมมาใช้งาน Angular

ขอให้สนุกกับการ coding ครับ