Angular 2 Smart & Dumb Components @ NG-NL2016 [Thai Translate]

โดย Shai Reznik เจ้าของ HiRez.io twitter:@hirez_i

เล่าเรื่องนิดหน่อยก่อนเข้าเนื้อหา

วันหนึ่งคุณกำลังนั่งเขียน Angular อย่างสบายใจ มีเพื่อนคนนึงเดินมาหาคุณ ดูโค้ดที่คุณเขียนแล้วพูดว่า

A: เขียน Angular หรอ โห่ว ไม่เอาน่าเพื่อน มา React & Flux สิเพื่อน
B: เอ่อ ก็ได้ฉันจะลองดู (ย้ายมาใช้ React & Flux)

หลายวันผ่านไป เพื่อนคุณคนเดิมเดินเข้าว่าดูโค้ดคุณ

A: ห๊า! Flux? โห่ว เพื่อนนี่มันปี 2016 แล้วนะ flux มันเก่าไปแล้ว redux สิเพื่อนเจ๋ง
B: โอเคจะลองดู (#$%^&*!#@#$%^&!) (แล้วก็ย้ายจาก Flux ไป Redux)

หลายสัปดาห์ผ่านไป พอคุณลองไปคุยกับคนที่มางาน meetup แล้วเค้าพูดว่า

A: Redux อย่าไปใช้มันเลย มันน่ากลัว ใช้cycle.js สิ Funtional Reactive Programming มากกว่า
B: !@#$%^&*&^%$#@!@#$%^&

โลกของ Frontend Developer ในปัจจุบันนั้นมัน

TOO MUCH STUFF!!

Flux, Redux, Reflux, Cycle.js, RxJS, ng-rx, elm

ทุกครั้งที่มีคำศัพท์ใหม่ๆ เหล่านี้ออกมา เหมือนกับประสบการณ์เขียน Frontend ที่คุณร่ำเรียนมาละลายหายไปในพริบตา

แต่ในฐานะของ Developer คุณควรจะรักมัน และใช้มันเป็นแรงผลักดันในการก้าวไปข้างหน้า เพราะการเรียนรู้ Library เหล่านี้ทำให้คุณได้เห็นมุมมองของคนที่เก่งๆ ว่าเค้ามีแนวคิดอย่างไรในการแก้ปัญหา

“DON’T RUSH TO CHANGE YOUR STACK
BUT DO LEARN THE BACKGROUND”

แต่อย่างรีบที่จะเปลี่ยนโค้ดคุณไปใช้แนวคิดดังกล่าวในทันที เพราะแนวคิดเหล่านั้นไม่ได้สมบูรณ์แบบ (One size cannot fit all) แต่ให้คุณทำความเข้าใจถึงที่มาของปัญหาที่แนวคิดเหล่านั้นแก้ปัญหา

ซึ่งปัญหาที่ทุกคนต้องการแก้ร่วมกันคือ Web-Application ถูกไหมครับ เลิกทำสงคราม Angular VS React กันเถอะ มาแชร์ความรู้กันในด้านของ Architecture ดีกว่า

Data Flow

คือ ส่วนสำคัญของ web application ที่เป็นตัวกลางระหว่าง User และ Server

การแก้ปัญหาของ Flux & Redux นั้นคือ การทำให้การเปลี่ยนแปลง Data เกิด เป็นทิศทางเดียว (Unidirectional data flow) เช่นเดียวกันกับ Cycle.js & RxJS ที่ใช้ Unidirectional data flow เหมือนกัน แต่ผ่าน Observables (Mind blow เลย ทุกครั้งที่มีใครพูดถึง Observable)

เมื่อเรามาดูที่ Web Application จะประกอบไปด้วย 2 ส่วนคือ

Logic เปรียบเสมือน สมองของ Application
View เปรียบเสมือน Component Tree

Component คืออะไร ? => ไปดูได้ที่ HiRez.io

แล้วเราจะเชื่อม Logic กับ View ได้อย่างไร (เป็นปัญหาที่ต้องคิดเมื่อคุณต้องออกแบบโปรเจ็คที่มีขนาดใหญ่)

Option#1 Connect App Logic to Root Component

ทำการเชื่อม Logic เข้ากับ Root Component แล้วส่งผ่าน Data/State ลงไปยัง Child Component และให้ Root Component รับ events ที่ Child Component ส่งมาทั้งหมด

แต่ก็ไม่ค่อยเหมาะสำหรับ Application ขนาดใหญ่เท่าไหร่ โค้ดดูไม่สวย

Option#2 Inject Service to All Component

ทำการ Inject Service เข้ากับ Component ทุกตัว แต่ก็ดูไม่เหมาะเท่าไหร่ เพราะมันจะทำให้ Component มี Dependency ไม่สามารถทำการ REUSE ได้

Option#3 DUMB & SMART Components

What is Dumb Component?

Dumb Component เป็น Component ที่มีหน้าที่เพียงรับ State ที่ส่งต่อมาจาก Parent และส่ง Event ให้ Parent เท่านั้น เป็น Component ที่สามารถ reuse ได้

ยกตัวอย่างเช่น Button, Select, Panel, User card

What is SMART Component?

Smart Component เป็น Component ที่ทำการ Inject Service และสามารถดึงค่าของ state ออกมาได้รวมถึงการเรียกใช้ method ต่างๆ ของ service และส่งต่อไปให้ Dumb Component

ซึ่ง Flow ที่ได้จะออกมาประมาทนี้

ยกตัวอย่างการกดปุ่มที่ Dumb Component แล้วมีการส่ง event ไปให้ Smart Component เพื่อทำบางอย่างที่ Service และเมื่อ State เปลี่ยน Service จะทำการส่งค่า State ให้ Smart Component ส่งต่อให้ Dumb Component อีกที