สรุปความรู้ + ความรู้สึกที่ได้ไปงาน Angular Developers Thailand Meetup ประจำเดือนกันยายน 2018
สวัสดีครับ เมื่อวานมีโอกาสได้ไปงาน Meetup ของ Angular ซึ่งถือเป็นครั้งแรกของผมเลย ที่ได้ไปงานเกี่ยวกับ Developer
งานนี้จัดที่ BIG Co-Working ชั้น 1 ห้องโถง โดยมีหัวข้อดังนี้ครับ
1. Java to Angular ทำไมง่ายจัง โดย คุณ Sommai Krangpanich @PnP Solution
2. NestJS — Node.js Framework inspired by Angular โดย คุณ Arnon Kaewprasert@Humanize
3. Testing in Angular โดย คุณ Phongsak Ritpitakphong และ คุณ Chokchai Phatharamalai @Odds
4. เริ่มต้นเขียน Test (Side) Effect กัน โดย คุณ Siwat Kaolueng @ The Earth
5. NGXS — State Management For Angular โดย คุณ Chaiyapong Phong Lapliengtrakul @ 3DS Interactive
โดยจะสรุปคร่าวๆ ตามที่ได้ฟังมานะซึ่งอาจจะไม่ได้ Technical มากนักนะครับ ทั้งหมดทั้งมวลนี้ผมไม่ได้ถ่ายรูปมาเลย(ฮา) พอดีอยู่ในจุดที่มันถ่ายยาก บวกกับกล้องมือถือที่ค่อนข้างแย่
Java to Angular ทำไมง่ายจัง
หัวข้อนี้ ให้ข้อมูลเกี่ยวกับการใช้ Angular ตั้งแต่ AngularJS โดยพูดถึงยุคต่างๆของ Angular โดยในยุคก่อน การโค้ดต้องมี Standard (ปัจจุบันคือ Framework) เพื่อเป็นแนวทางให้โค้ดไปในทิศทางเดียวกัน สิ่งนั้นคือ Custom Library
ช่วงนั้น(นิยม?)เขียน Spring MVC+ JSP+ JSTL ครอบด้วย Spring Security พอมาถึงยุค Responsive ก็มีการเปลี่ยนแปลงโดยเพิ่ม AngularJS , Ext JS 3.3.0 , jQuery พอถึงยุค Angular อัพเครื่องใหม่เป็น Angular 2 โค้ดทั้งหมดแทบใช้ไม่ได้ ก็ต้องโค้ดกันใหม่
ไล่ตั้งแต่ 2 ไปยัน 4 ส่วนมากปัญหาในการอัพเวอร์ชั่นคือ โค้ดเดิมมักจะมีปัญหาบางส่วน ซึ่งอาจจะเป็นเพราะที่โค้ดไว้ไม่ซัพพอร์ตกับเวอร์ชั่นใหม่ๆ
พอมายุคหลังๆ ทำให้ลังเลเกี่ยวกับเรื่องที่ว่า จะเขียนอะไรดี เพราะไม่กล้าจับภาษาใหม่ๆ กลัวว่าอัพเวอร์ชั่นแล้วจะใช้ไม่ได้ ก็เลยต้องเดินหน้าต่อไปกับ Angular 4 + Node.js 6 with TypeScript ซึ่งแม้ปัจจุบัน Angular จะพุ่งทะยานไปยัง เวอร์ชั่น 6 แล้วแต่บางที่ก็ยังอยู่ที่ 4 ด้วยเหตุผลหลายๆอย่าง
สำหรับผม ผมคิดว่าการได้ลองอะไรใหม่ๆ ก็น่าจะสนุกดีนะครับ :)
NestJS — Node.js Framework inspired by Angular
หัวข้อนี้จะพูดถึง Framework ตัวใหม่ที่มีแรงบันดาลใจมาจาก Angular และใช้ภาษาเดียวกับ Angular เลยก็คือ TypeScript โดยทีมผู้บรรยายได้เลือกใช้ เพราะแก้ไขง่าย ปรับปรุงได้เร็ว ทีมไม่ได้ปรับตัวเยอะ เพราะ NestJS เป็น TypeScript เหมือน Angular นั่นเอง
ในการบรรยายก็จะพูดถึงสิ่งที่คล้ายกัน เช่น Module , Controller ก็คือ Component+Routing ประมาณนี้ครับ คือในสไลด์พรีเซ้นจะมีตัวอย่างนิดหน่อย
แต่ผมนั่งในจุดที่ถ่ายรูปมายาก จึงทำให้ไม่มีภาพประกอบ(ฮาเลย) (บังเอิญผมไปเจอบทความเกี่ยวกับ NestJS มา ซึ่งถ้าอยากลองทำหรือหาข้อมูลเพิ่มก็ลองเข้าไปที่ลิ้งค์นี้ครับ NEST JS , NESTJS ต่อ MSSQL ยังไง มาดูกัน)
ใดๆ ใน NestJS ล้วนเป็น Decorator เป็นจุดที่สะดวกดี ทำให้โค้ดอ่านง่าย แต่อาจจะงงๆ นิดนึง ทางด้าน Utilites ก็สามารถใช้ TypeORM , Mongoose หรืออื่นๆได้
สำหรับผม นี่เป็นอีก Framework ที่น่าสนใจ เพราะถ้าใหม่ด้าน Backend แล้วเขียน Angular อยู่ตัวนี้น่าจะลดเวลาในการ Learn ได้พอสมควร
Testing in Angular
หัวข้อนี้น่าสนใจมากๆ เพราะ Angular สำหรับผมแล้วคือเขียน Test ค่อนข้างยากเลย บวกกับไม่ค่อยได้เขียนด้วย หลัก ๆ แล้วหัวข้อนี้จะแนะนำให้เราไม่พึ่ง Framework มากเกินไป(อ้าว) โดยแนะให้เราเขียนเป็น Simple Class
โดยเริ่มแรก เมื่อเรา Gen Component ด้วย CLI จะได้ไฟล์ .spec มาด้วย ซึ่งการเขียนแบบนี้ Speaker บอกว่าช้า เร็วสำหรับเขาคือ 1วิเสร็จ! และโค้ดเราถูกผูกกับ Framework ทำให้ Evolve ไม่ได้เพราะเดี๋ยวนี้ Framework ใหม่ๆออกไวมาก
เมื่อต้องการย้ายไป เวอร์ชั่นใหม่ ทำให้ต้องรื้อเขียนใหม่ทุกๆ 3–5 ปี และระยะเวลามันลดลงเรื่อยๆ เมื่อดูจากเทรน ซึ่งเป็นเหตุผลที่เราต้องมาเขียน Simple Class ธรรมดาๆ
ซึ่งมันทำให้เขียน Unit Test ได้ง่ายมากๆ วิธีก็คึอจะ Refactoring Code ให้เหลือใน Component น้อยที่สุด แล้วเอาไปใส่ใน Simple Class ธรรมดาที่เรียกว่า Presenter เช่นพวก Array ธรรมดาเก็บไว้ใน Class Presenter แล้วเก็บ Service ที่ต้องการไว้ใน Component ให้ Presenter เรียก Service ผ่าน View เผื่อเกิด Dependency โดยทั้งหมดที่กล่าวมา ทำให้โค้ดยุ่งยากขึ้นมาก ก็เพื่อให้ง่ายต่อการเขียน Test นั่นเองครับ
สำหรับผม ดูแล้ววิธีนี้น่าสนใจครับ ฟังแล้วมองภาพออกเลย แม้จะยังไม่ได้ลองเขียนก็ตามครับ
เริ่มต้นเขียน Test (Side) Effect กัน
หัวข้อนี้จะพูดถึงเรื่อง NgRx ซึ่งป๊อปมากในหมู่ผู้เขียน angular นะครับ NgRx เนี่ยเปรียบเหมือน Redux + RxJS + Angular นั่นเองครับ
NgRx จะมี 3 Concept หลักๆ นะครับ คือ State , Action , Reducer โดยเก็บ State ไว้ในที่ที่เดียว (Store) และการจะเปลี่ยนแปลง State ต้อง Dispatch Action ออกไป ให้ Reducer เช็คว่าตรงกับ Action ไหนและเปลี่ยนแปลง State ครับ และมี Effect สำหรับช่วยจัดการ Side Effect(เช่น ต่อ Service) ต่างๆครับ
โดยผู้บรรยายได้อธิบายเกี่ยวกับ Marble Diagram , การเขียน Marble Test ด้วย jasmine-marbles ซึ่งมี Method อยู่ 4 Method ด้วยกันคือ hot(), cold(), expectObservable(), expectSubscription()
นอกจากนั้นยังได้แนะนำการ Marble Syntax สำหรับการเขียน Marble Test อีกด้วย
ตอนท้ายยังมี Demo การเขียน Test Effect ใน E-Commerce App ด้วยครับ
สุดท้ายก็คือ
NGXS — State Management For Angular
หลักการเหมือน State Management ตัวอื่นๆเลยครับ เหมือน NgRx เลยเพียงแต่ว่า เขียนน้อยกว่า สั้นกว่า ถ้าต้องการ Learning Curve ที่ไม่สูงมากและใช้เวลาน้อย NGXS ถือว่าค่อนข้างตอบโจทย์ได้ในระดับนึง
ข้อดีของ NGXS คือรวม Reducer, Effect, Selector ไว้ในไฟล์ State อันเดียว ทำให้มีไฟล์ที่น้อยกว่า และเขียนสั้นกว่า
และ ขอขอบคุณสปอนเซอร์ใจดี ถ้าหากไม่มีเค้าเหล่านี้งานนี้ก็ไม่อาจจะเกิดขึ้นได้
Odds & Odd-e — เราคือกลุ่มคนที่เชื่อว่า “การทำซอฟท์แวร์ต้องสนุก”
DevCamp — Hub for Developer Hacker and Camper
Humanize — ผู้นำด้าน Technology AI, Machine Learning, Natural Language Processing เปลี่ยน Chat Application เป็น Expert Assistant
BIG Co-Working — BUILD / BOND / BOOST
Link live stream : https://www.facebook.com/tonmanna/videos/2136754663004504
สำหรับความรู้สึกของผมที่ไปงาน Meetup Angular ครั้งแรก คิดว่าจัดได้ค่อนข้างดีเลยครับ ทั้งในเรื่องหัวข้อที่นำมาแชร์กัน สถานที่ที่ไม่ได้ไปยากนัก มีอาหารเครื่องดื่มรองรับทุกคน(พิซซ่า+เบียร์รีฟิล!) ติดนิดเดียวคือเป็นห้องโถงโล่ง แล้วเสียงก้อง ค่อนข้างฟังยาก + ฝนดันตกแรงมาก ไปกันใหญ่เลย (ฮา) ถ้ามีครั้งหน้าก็สัญญาว่าจะไปอีกแน่นอนครับ :)
ด้วยรักและ Angular …
