Videos → Sponsored Session by KBTG - JavaScript Bangkok 1.0.0

แนะนำสปอนเซอร์ KBTG และหัวข้อเกี่ยวกับ React และ Functional Programming0:00

อ่า เอาล่ะค่ะ ถัดไปเนี่ยจะเป็นหัวข้อจากทางฝั่งของ partner ของเรานะคะ เป็นสปอนเซอร์ที่น่ารักท่านแรกนะคะ มาจาก KBTG นะคะ วันนี้เนี่ยจะมีหัวข้อพิเศษมาพูดในเรื่อง Understanding React Practice by Learning Functional Programming in JavaScript นะคะ ก็ผู้ที่เป็น speaker ของเราในรอบนี้นะคะ ก็คือคุณ Nattapon Rattajak ค่ะ เป็น full stack JavaScript developer จาก กสิกร Business Technology Group หรือว่าเราเรียกกันสั้นๆ ว่า KBTG นะคะ So for this special session is from our one of our beloved sponsor KBTG. He is going to talk about Understanding React Practice by Learning Functional Programming in JavaScript by Mr. Nattapon Rattajak, full stack JavaScript developer from Kasikorn Business Technology Group or KBTG. เอาล่ะค่ะ ตอนนี้พร้อมแล้ว ขอเสียงปรบมือต้อนรับคุณณัฐพลด้านบนเวทีค่ะ

แนะนำตัววิทยากรและหัวข้อที่จะพูด1:13

ครับ ชื่อ Nattapon Rattajak ครับ

เป็น full stack developer อยู่ที่ KBTG นะครับ ก็วันนี้รู้สึกยินดีมากๆ ที่ได้มาพูดในงานวันนี้นะครับ

สำหรับวันนี้ผมจะมาพูดในหัวข้อ การทำความเข้าใจ React Practice โดยการเรียนรู้ functional programming ในภาษา JavaScript นะครับ

ความสำคัญของ Functional Programming ในการพัฒนา JavaScript โดยเฉพาะ React1:41

ที่ KBTG เนี่ย เราใช้ React ในการทำ front-end application ค่อนข้างมากนะครับ

JavaScript developer เนี่ย มักจะต้องเจอกับคำศัพท์เกี่ยวกับ functional programming บ่อยๆ นะครับ เช่น pure function, mutation, side effect แล้วก็ library หลายๆ ตัวที่เราใช้เนี่ย มักจะมีการเอาแนวความคิดของ functional programming มาใช้กันอย่างแพร่หลายนะครับ library ที่สำคัญๆ ที่เราใช้ เช่น Redux, Lodash หรือว่าพวก RxJS นะครับ

เป็นสิ่งที่หลีกเลี่ยงไม่ได้นะครับ ว่า JavaScript ต้องทำความเข้าใจเกี่ยวกับ functional programming นะครับ

Functional Programming คืออะไรและข้อดี2:25

functional programming คืออะไร functional programming เป็น programming paradigm นะครับ programming paradigm ก็คือ กระบวนการแนวความคิดในการทำ software construction นะครับ ข้อดีของ functional programming เนี่ย ก็คือ โค้ดจะมีความสั้นกระชับ

เข้าใจง่าย แล้วก็คาดเดาผลลัพธ์ได้ แล้วก็ทำให้ทำ test ได้ง่ายนะครับ

หัวข้อที่จะพูดถึง: JavaScript Feature, Key Concept และการประยุกต์ใช้กับ React2:50

ผมจะมาพูดใน 3 หัวข้อนะครับ หัวข้อแรกเป็น JavaScript feature ที่สำคัญๆ แล้วมันทำให้เกิดการเขียนโค้ดแบบ functional programming นะครับ แล้วก็หัวข้อที่ 2 เป็น key concept ของ functional programming แล้วก็หัวข้อที่ 3 เป็นการประยุกต์ใช้ functional programming เข้ากับการเขียน React application นะครับ

JavaScript Feature ที่ทำให้เกิดการเขียนโค้ดแบบ Functional Programming3:16

หัวข้อแรก JavaScript feature ที่ทำให้เกิด

การเขียนโค้ดแบบ functional programming นะครับ มี feature ที่สำคัญๆ 3 ตัวนะครับ มาดูตัวแรกกันเลย

First-class Function, Anonymous Function, Higher-order Function และ Closure3:31

feature แรก first-class function first-class function เป็นคุณสมบัติของการทำให้ function เนี่ย มันทำตัวเป็น data value นะครับ แล้วก็เราจะสามารถให้ function เนี่ย มัน pass ไปเป็น argument ของ function อื่นก็ได้ แล้วก็เราจะให้ function เนี่ย มัน assign ไปเป็น variable ก็ได้ หรือว่าเราจะ return function ออกมาจาก function อื่นก็ได้นะครับ แล้วก็ feature ที่ 2 anonymous function

anonymous function เป็นความสามารถในการประกาศ function โดยไม่ต้องระบุชื่อนะครับ ลองดูจากโค้ดตัวอย่างนะครับ

function add1 = x => x + 1 นะครับ

เป็น function expression ในภาษา JavaScript ที่ เราประกาศ function โดยไม่ต้องใส่ชื่อนะครับ anonymous function เนี่ย มันช่วยให้เกิด feature ใหม่ที่เราเรียกมันว่า higher-order function นะครับ higher-order function มันก็คือ function ที่มีการรับ function เข้าไปแล้วก็ return หรือไม่ return function ใหม่ออกมาก็ได้นะครับ

feature ถัดไปเป็น closure closure เป็น combination ของ function ที่รวมตัวกันนะครับ เมื่อมีการประกาศ function เอาไว้ด้านใน function อื่น function ด้านในจะสามารถเข้าถึง argument ของ function ด้านนอกได้ ตัว argument ของ function ด้านนอกเนี่ยครับ เราจะเรียกมันว่า fixed argument ของ function ด้านในนะครับ

Key Concept ของ Functional Programming: 5 หลักการสำคัญ5:17

หัวข้อที่ 2 concept ของ functional programming

จาก 3 feature ที่เราได้พูดถึงนะครับ มันนำมาสู่แนวคิดการเขียน functional programming ในภาษา JavaScript เนี่ย มีหลักการที่สำคัญๆ 5 หลักการนะครับ

Pure Function: ฟังก์ชันที่ให้ Output เดิมๆ เสมอและไม่ทำ Side Effect5:36

แนวคิดแรกเป็น pure function pure function เป็นแนวความคิดที่ว่าด้วย การทำให้ function เนี่ย มีความ purity นะครับ เมื่อ function รับข้อมูลเข้าไปเนี่ย

function จะ return output เดิมๆ เสมอนะครับ แล้วก็ function จะต้องไม่ทำ side effect กับตัว context ด้านนอกตัวมันเองนะครับ ลองดูจากโค้ดตัวอย่าง function add2 นะครับ รับค่าเข้าไปเอาไปบวก 2 เมื่อเรามีการเรียก function add2 หลายๆ ครั้ง จะเห็นว่ามัน return 3 เสมอ การเขียนโค้ดแบบนี้เราจะคาดเดาผลลัพธ์ของ function ได้ แล้วก็การที่ function เนี่ย มัน return ผลลัพธ์เดิมๆ เนี่ย มันทำให้เกิดการ test ได้ง่ายขึ้นนะครับ

Function Composition: การรวมฟังก์ชันหลายๆ ตัวเข้าด้วยกัน6:29

แล้วก็แนวคิดที่ 2 function composition function composition เป็นการรวมฟังก์ชันหลายๆ ตัวเข้าด้วยกันนะครับ เพื่อ produce หรือว่าทำ computation ข้อมูลนะครับ ลองดูจากโค้ดตัวอย่าง เราจะมีฟังก์ชัน f รับค่าเข้าไปบวก 2 แล้วก็ฟังก์ชัน g รับค่าเข้าไปบวก 1 แล้วก็ในบรรทัดนี้นะครับ เรา compose f เข้ากับ gx แล้วก็ได้ค่า 3 ออกมา ตรงนี้ syntax ตรงนี้เราจะเรียกมันว่า function composition นะครับ หรือว่าเป็น declarative style นะครับ

Avoid Shared State: หลีกเลี่ยงการใช้ Data ร่วมกัน7:07

concept ที่ 3 avoid shared state shared state ก็คือการที่ฟังก์ชันหลายๆ ตัวเนี่ยครับ มีการเข้าถึง data ที่อยู่ด้านนอกนะครับ ลองดูจากโค้ดตัวอย่าง

y2 เข้าถึง y1 กับ y2 นะครับ เข้าถึงค่า y.value นะครับ จะเห็นว่าทั้งสองฟังก์ชันเนี่ยใช้ y.value ร่วมกัน แล้วก็การเขียนโค้ดแบบเนี้ยครับ

ลำดับของ function call เนี่ยจะส่งผลต่อผลลัพธ์ของระบบนะครับ ลองดูโค้ดตัวอย่าง เราเรียก y2 แล้วค่อยเรียก y1 นะครับ ผลลัพธ์จะได้ 5 ในทางกลับกัน เราเรียก y1 แล้วค่อยเรียก y2 ผลลัพธ์จะได้ 6 จะเห็นว่าลำดับการทำงานของฟังก์ชันเนี่ย ส่งผลต่อความแปรปรวนของผลลัพธ์ในระบบนะครับ ซึ่งตรงนี้จะต้องหลีกเลี่ยง

Avoid Mutate State: หลีกเลี่ยงการแก้ไขค่า Object ตรงๆ8:09

แนวคิดที่ 4 avoid mutate state นะครับ mutate state คืออะไร mutate state คือการเข้าไปแก้ค่า object ตรงๆ นะครับ จะเห็นว่า JavaScript เนี่ยมี syntax const อยู่นะครับ แต่ว่า const เนี่ยไม่ได้สื่อความถึงว่ามันแก้ไขค่าไม่ได้นะครับ จะเห็นว่าตัวแปร a.name เนี่ยจะยังแก้ไขค่าได้เหมือนเดิมนะครับ แล้วก็ JavaScript มี feature นึง object.freeze นะครับ ที่จะช่วยทำ immutable data แต่ว่ามันทำได้แค่ระดับเดียวนะครับ จะเห็นว่า a.bar เนี่ยมันแก้ไขค่าไม่ได้ มันจะ error นะครับ แต่ a.foo.name เนี่ยยังแก้ได้เหมือนเดิม ซึ่งการใช้ object ธรรมดาแบบเนี้ยครับ เป็นสิ่งที่เราจะหลีกเลี่ยงนะครับ

Avoid Side Effect: หลีกเลี่ยงการเข้าถึง Context ด้านนอก9:02

แล้วก็ concept ที่ 5 avoid side effect นะครับ

side effect ก็คือการที่ฟังก์ชันเนี่ย มีการเข้าถึง context ด้านนอกตัวมันเองนะครับ ดูจากโค้ดตัวอย่าง y1 เข้าถึง y.value ที่อยู่ด้านนอกนะครับ ก็การทำ side effect เนี่ยจะเห็นว่า เมื่อมีการเรียกฟังก์ชัน y1 หลายๆ ครั้ง ผลลัพธ์ที่ได้จะไม่เหมือนเดิมนะครับ ตรงเนี้ยจะทำให้เราคาดเดาผลลัพธ์ของฟังก์ชันไม่ได้ แล้วก็จะทำ test ได้ยากนะครับ

การประยุกต์ใช้ Functional Programming กับ React Application9:37

โอเค ถัดมา เราจะประยุกต์ใช้แนวความคิดทั้ง 5 แนวความคิดของ functional programming เข้ากับการเขียน React application ได้ยังไงนะครับ

ตัวอย่าง: การสร้าง Header Component ด้วย Function Composition9:48

ลองดูตัวอย่างแรกกันนะครับ

ตัวอย่างแรกผมจะวาด header กับ logo ขึ้นมานะครับ

ถ้าเราจะเอาแนวคิดแบบ functional programming มาใช้เนี่ย อันดับแรกเราจะทำ component header ให้มันเป็น pure component ก่อนนะครับ เสร็จแล้วเราก็ทำ with logo ขึ้นมาให้มันเป็น pure component เหมือนกัน เสร็จแล้วเราก็เอา with logo composition กับตัว header component

ก็จะได้ผลลัพธ์เป็น with logo ที่สามารถเอาไป plugin กับ component อื่นๆ ได้นะครับ ก็ concept การเขียนโค้ดแบบนี้เราจะเรียกมันว่า function composition นะครับ

ตัวอย่าง: ปัญหาจาก Shared State และ Mutation ใน React Component10:40

โอเค ตัวอย่างถัดไปครับ avoid shared state นะครับ จะเห็นว่าเรามี component สองตัวนะครับ A กับ component B component A เนี่ย มีการเข้าถึง data.value จากด้านนอกนะครับ แล้วก็ component B เนี่ย เข้าถึง data.value ตัวเดียวกันเลย แล้วก็จะเห็นว่า component A เนี่ย มีการแก้ไขค่า data.value

แล้วก็เอามาวาด ซึ่งการแก้ไขค่าตรงนี้ถือว่าเป็นการ mutation ค่าถูกไหมครับ แล้วก็ทำให้ component B เนี่ย มีการ render ที่ผิดพลาดนะครับ ก็ตรงนี้เป็นสิ่งที่เราจะหลีกเลี่ยง

การจัดการ Side Effect ใน React Application11:25

โอเค ตัวอย่างถัดไป ใน application จริงๆ เนี่ย

เราหลีกเลี่ยงการทำ side effect ไม่ได้นะครับ เพราะว่าปกติแล้วเนี่ย application จะต้องมีการ interact กับ server มีการเรียก network มี user interaction แล้วก็มีพวก event listener ต่างๆ ดังนั้นเราจะจัดการกับ side effect action ตรงนี้ยังไงนะครับ

จะเห็นว่าเราจะมี สมมุติว่า service QR payment ตรงนี้นะครับ เป็น React component ที่ทำตัวเป็น pure component นะครับ เสร็จแล้วเราจะมีการ composition ค่าจากตัว side effect ทั้งหลายนะครับ ไม่ว่าจะเป็นข้อมูลจากตัว global state แล้วก็ action ต่างๆ ในการทำ interaction กับตัว network นะครับ จะเห็นว่าเรา compose มันเข้ามา ซึ่งการเขียนโค้ดแบบนี้มันทำให้ตัว component กับตัว side effect action มีการแยกออกจากกันอย่างชัดเจนนะครับ แล้วก็มีการแก้ไขได้ง่าย แล้วก็ตัว component เนี่ยก็ยังทำ test ได้ง่ายด้วยนะครับ

การใช้ Immutable Data Structure Library ในการแก้ไข Global State12:34

ตัวอย่างต่อไป เราหลีกเลี่ยงไม่ได้ในการที่จะไม่แก้ไข

global state เลยนะครับ ดังนั้น การจะแก้ไข global state เนี่ยเราจะใช้ immutable data structure library นะครับ เช่น immutable.js หรือว่า immer ในการช่วยให้เราแก้ไขค่า ได้ง่ายขึ้นนะครับ

สรุปหลักการ Functional Programming และแนะนำงาน Meetup13:01

โอเค ก็สุดท้ายนะครับ ผมอยากจะฝากทิ้งท้ายเอาไว้นะครับว่า

หลักการเกี่ยวกับ functional programming เนี่ย มีทั้งหมด 3 หลักการนะครับ pure function over shared state and side effect function composition over imperative flow control แล้วก็ immutability over mutable data นะครับ สุดท้าย KBTG จะจัดงาน meetup ร่วมกับสมาคม

โปรแกรมเมอร์ไทยนะครับ ในวันพฤหัสบดีที่ 27 กุมภาพันธ์นะครับ ที่สยาม Innovation District สำหรับคนที่สนใจนะครับ สแกน QR code มาดูรายละเอียด ได้เลยนะครับ ในงานจะมี speaker จาก KBTG แล้วก็ speaker รับเชิญนะครับ มาพูดเกี่ยวกับเทคนิคการทำงานเกี่ยวกับ ReactJS แล้วก็ frontend application นะครับ ก็สำหรับวันนี้ ผมก็จะมีหัวข้อพูดเพียงเท่านี้ครับ ก็ขอบคุณมากครับผม

ขอบคุณวิทยากรและประกาศพักเบรก14:03

ขอบคุณค่ะ ขอบคุณคุณณัฐพลนะคะ จาก KBTG นะคะ สปอนเซอร์ที่น่ารักของเราค่ะ เดี๋ยวเราพักเบรกประมาณ 10 นาที เข้าห้องน้ำพักผ่อนตามอัธยาศัย เดี๋ยวกลับมาเจอกันในหัวข้อถัดไปค่ะ ขอบคุณค่ะ Let's take a break for 10 minutes. Thank you.