react-00
มีโอกาสไปร่วมงาน ReactJS Bangkok 1.0.0 โดยแบ่งออกเป็น 2 ห้องคือ

  1. ห้องพื้นฐานสำหรับผู้เริ่มต้น (น่าจะสำหรับคนที่เขียน ReactJS มาแล้ว)
  2. ห้องขั้น Advance

ส่วนผมอยู่แต่ห้องพื้นฐานซึ่งมี session ต่าง ๆ ดังนี้

  • Introduction to React
  • Redux
  • React Native
  • Discussion เป็นการถามตอบกับ speaker ทุกคน

จึงทำการสรุปไว้นิดหน่อย
โดยในแต่ละ session จะมีการทำ demo ให้ดู
แต่ว่ามีเวลาเพียง 1 ชั่วโมงจึงไม่สามารถ Live demo ได้มากนัก (ไปเร็วมาก ๆ)
จึงมี code ตัวอย่างให้กลับไปดูและทำตามต่อไป

Introduction to React

เริ่มต้นด้วยอธิบายการพัฒนา web application ตั้งแต่แบบเดิม
มาจนถึง SPA (Single Page Application) ว่าเป็นอย่างไร ทำไมจึงต้องเปลี่ยน

ตั้งแต่การพัฒนาระบบ web application ด้วย JavaScript แบบเดิม เช่น jQuery
มักก่อให้เกิด code ซ้ำซ้อน และ กระจัดกระจาย
ทำให้ reuse ไม่ดีเท่าที่ควร

ดังนั้นจึงมี JavaScript framework ต่าง ๆ ออกมาให้ใช้งาน
หนึ่งในนั้นคือ React ซึ่งพัฒนาโดยทีมของ Facebook
อีกทั้งยังถูกใช้งานจากบริษัทชื่อดังมากมาย
สามารถเข้าไปดูเพิ่มเติมได้ที่ Sites Using React

React ออกแบบมาเพื่อทำให้ reuse code ง่ายขึ้น
เนื่องจากออกแบบมาในรูปแบบ component-based
มี performance การทำงานที่รวดเร็ว (Virtual DOM)
รวมทั้งมี Ecosytem มากมาย
จึงเป็นอีกทางเลือกหนึ่งในการพัฒนา web application ที่น่าสนใจอย่างมาก

แต่ว่า React นั้นมี Learning curve ที่ค่อนข้างสูงเช่นกัน
เนื่องจากต้องทำการศึกษาหลายอย่าง ไม่ว่าจะเป็น

  • NodeJS
  • ES6, JSX (JavaScript syntax extension)
  • Bable สำหรับการแปลง ES6 ไปเป็น JavaScript
  • ESLint
  • Webpack
  • Dependency อื่น ๆ อีกมากมาย

สำหรับผู้เริ่มต้นกับ React แนะนำให้เริ่มด้วย Create React App
ทำให้เราสร้าง React app ง่าย ๆ โดยไม่ต้อง configuration อะไรเองเลย
แต่เมื่อเข้าใจแล้วก็หัดทำเองด้วยนะ

สามารถติดตั้งและเริ่มใช้งานด้วยคำสั่ง

$npm install -g create-react-app

$create-react-app my-app
$cd my-app/
$npm start

ดูผลการทำงานที่ http://localhost:3000 แสดงดังรูป

react-01

เมื่อต้องทำการ deploy ขึ้น production ให้ใช้คำสั่ง

$npm run build

จะทำการ generate code ต่าง ๆ ออกมา
เพื่อใช้ในการ deploy ต่อไป

โดยใน workshop นั้นอธิบายสิ่งต่าง ๆ ดังต่อไปนี้

  • การสร้างและใช้งาน React component
  • การใช้งานร่วมกับ bootstrap
  • การจัดการ event และ state ต่าง ๆ ภายใน React app
  • Reuse component

เป็นสิ่งที่ผู้เริ่มต้นควรศึกษา และ ลงมือทำ
เพื่อให้เข้าใจและสามารถนำไปใช้งานต่อไปได้ง่ายขึ้น
ส่วน code ตัวอย่างและ Slide สามารถ download ได้จาก Github:: Intro React BKK

ยังไม่พอนะ มีแถมสิ่งที่น่าสนใจสำหรับการศึกษาเพิ่มเติมเช่น

  • React Router
  • Redux
  • Universal ReactJS หรือ Isomorphic ซึ่งมี session ในห้อง Advance

ว่าด้วยเรื่อง Redux

เมื่อระบบงานที่พัฒนาด้วย React มีขนาดใหญ่และซับซ้อนขึ้น
ทำให้การจัดการ state ของระบบงานยากขึ้น
ซึ่งปกติจะส่ง state หรือ ข้อมูลผ่าน Props

ดังนั้นจึงมีคนคิดและสร้าง Redux ขึ้นมา
เพื่อช่วยแก้ไขปัญหาของการจัดการ state
ทำให้สามารถแยก state และ UI ออกจากกันได้อย่างชัดเจน
ซึ่งมีรูปแบบการใช้งานที่เรียบง่าย ไม่ซับซ้อน ดังนี้

  • การทำงานเป็นแบบ Publish-Subscribe model
  • ทำการเก็บ state ไว้ในสิ่งที่เรียกว่า Store
  • ถ้าใครต้องการแก้ไข state ให้ทำการส่ง action ผ่าน method dispatch()
  • ถ้าใครสนใจ state อะไรก็ให้ทำการ subscribe ไว้

แต่บางครั้งก็อาจจะทำให้เกิด code ซ้ำ ๆ ขึ้นมา
จากการสร้าง action ที่ส่งเข้าไป
ซึ่งเป็นข้อเสียอย่างหนึ่งของ Redux

โดยโครงสร้างของ Redux ประกอบไปด้วย

  • Store สำหรับจัดเก็บ state ซึ่งประกอบไปด้วย
    • State คือสถานะของการทำงาน หรือ ตัวแปรสำหรับเก็บข้อมูล
    • Reducer ทำหน้าที่คำนวณ state ต่อไป โดยรับข้อมูลเข้าเป็น action กับ state ปัจจุบัน
    • Dispatch(action) สำหรับส่ง action ต่าง ๆ ไปที่ store
  • UI/View สำหรับการแสดงผล

แสดงดังรูป

react-03

Redux มี principle 3 เรื่องที่ต้องเข้าใจ ประกอบไปด้วย

  1. Single Source of Truth นั่นคือจะมี Store เพียวตัวเดียวเท่านั้น
  2. State is read-only นั่นคือไม่สามารถแก้ไข state ได้โดยตรง ต้องส่ง action ผ่าน method dispatch() เท่านั้น
  3. Mutation as Pure function นั่นคือ Reducer จะไม่ทำการแก้ไขข้อมูลใด ๆ เลย จะรับ input เป็น state ปัจจุบัน และ action จากนั้นจะส่ง state ต่อไปกลับมาให้

ข้อดีที่ชอบมาก ๆ สำหรับ Redux คือ
สามารถทดสอบได้ง่าย
เนื่องจากเราสามารถทดสอบเรื่องของ state ที่เปลี่ยนไปได้เลย
โดยไม่ต้องสนใจว่าจะแสดงผลถูกหรือไม่
แต่ก็ต้องแลกมาด้วย learning curve ที่สูงเช่นกัน
แต่โดยรวมแล้วมีข้อดีมากกว่าข้อเสียนะ

รวมทั้งมีเครื่องมือช่วยเหลือในการพัฒนาด้วย
นั่นคือ Redux DevTool ซึ่งเป็น Google Chrome extension
ทำให้เราสามารถ record and playback พวก state การทำงานได้ง่ายขึ้น
ซึ่งสามารถ download มาใช้กันได้เลย

การติดตั้งนั้นสามารถทำผ่าน npm ได้เลย

npm install --save react-redux
npm install --save-dev redux-devtools

แนะนำให้ดู Course Getting start with Redux นะครับ
ซึ่งผู้สร้าง Redux มาสอนด้วยตัวเอง

แถมยังมีการพูดถึงเรื่องอื่น ๆ อีก ซึ่งต้องไปศึกษาเพิ่มเติมอีกแล้ว เช่น Relay

สำหรับ code ตัวอย่างและ slide อยู่ที่

โดยแนวคิดของ Redux นั้นสามารถนำไปใช้กับระบบอื่น ๆ ได้
เช่นการพัฒนา Mobile application ซึ่งผมเคยเขียน blog ไว้แล้ว
ในเรื่องสรุปเรื่องของ Redux สำหรับ Mobile Application

React Native สำหรับการพัฒนา Mobile application

ทำให้สามารถพัฒนา mobile app ทั้ง Android และ iOSด้วย JavaScript เท่านั้น
ซึ่งช่วยลดเวลาในการพัฒนา mobile app ลงไป
มันก็มีทั้งข้อดีและข้อเสีย
แต่ก็เป็นทางเลือกหนึ่งที่น่าสนใจเช่นกัน

react-05

เริ่มต้นใช้งานก็ไม่ยากเท่าไร ให้ทำการติดตั้งและลองสร้าง app ง่าย ๆ กันดู
แต่การใช้งานจริง ๆ ก็ไม่ง่ายนะ !!
และทำการ run บน iOS ดังนี้

$npm install -g react-native-cli
$react-native init AwesomeProject
$cd AwesomeProject
$react-native run-ios

การทำงานแสดงดังรูป

react-02

โดยสิ่งต่าง ๆ ที่จำเป็นต้องรู้ประกอบไปด้วย

  • ผลการทำงานบน iOS และ Android จะไม่เหมือนกันทั้งหมด
  • แนะนำให้จัดการ Layout ด้วย Flexbox
  • มี DevTool ให้อยู่แล้ว สามารถกด CMD + D บน Emulator ได้เลย
  • มี Hot reload ซึ่งจะทำการ reload ในส่วนที่เปลี่ยนแปลงเท่านั้น ทำให้การทดสอบและพัฒนาเร็วมาก ๆ

แต่ก็มีข้อเสียพอสมควรนะ เช่น

  • ตัว framework มันเปลี่ยนแปลงเร็วมาก ๆ ตอนนี้ version 0.32 แล้ว และ 0.33 rc ออกมาให้ลองใช้แล้ว
  • ผู้ใช้งานเอง ไม่ศึกษาและเรียนรู้ !!
  • Component ต่าง ๆ ยังน้อยอยู่ นั่นสะท้อนให้เห็นขนาดของ community นั่นเอง
  • โดยที่สามารถค้นหา component ต่าง ๆ ได้จาก JS-coach :: React native

ส่วนการเรียนรู้แนะนำให้ไปดู project ต่าง ๆ เช่น

ใครบ้างล่ะที่ใช้งาน React Native ?
สามารถดูเพิ่มเติมได้ที่ The React Native Showcase

โดย code ตัวอย่างของ session นี้อยู่ที่ Github::React native bkk example

Discussion ช่วงท้ายของงาน

react-04

หัวข้อที่น่าสนใจก็คือ การศึกษา React ว่าทำอย่างไรกันบ้าง ?
ซึ่งส่วนใหญ่จะมีวิธีการศึกษาคล้าย ๆ กัน
คือ เรียนรู้จาก code ที่มีอยู่ และ ตัวอย่างก่อน
เพื่อทำให้เข้าใจความสามารถต่าง ๆ
จากนั้นให้เริ่มสร้าง project ด้วยตัวเองทั้งหมด

อีกเรื่องที่น่าสนใจคือ การ migrate และโน้มน้าวให้บริษัทและทีมมาใช้ ReactJS กัน
เป็นเรื่องที่หลาย ๆ บริษัทและทีมต้องใส่ใจกันให้มาก
ประกอบไปด้วย

  • เริ่มเขียนใหม่หมดเลย
  • ค่อย ๆ ทำไปทีละส่วน
  • ถ้าเป็นระบบเก่าแนะนำให้ทำการวางแผน migrate ดี ๆ ด้วย

ทีมผู้จัดงานทำการสรุป Slide และ code ตัวอย่างของทุก ๆ session ไว้ที่ ReactBKK ให้แล้ว

ขอขอบคุณสำหรับงานดี ๆ
มีเรื่องให้ศึกษาและนำไปใช้งานเพียบเลย
ไปหัดเขียนก่อนนะครับ

มีกลุ่ม ReactJS Developer Thailand ให้เข้าร่วมอีกนะ