สรุปสิ่งที่ได้รับจากงาน ReactJS Bangkok 1.0.0 ในห้องสำหรับผู้เริ่มต้น

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view. มีโอกาสไปร่วมงาน 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 อะไรเองเลย แต่เมื่อเข้าใจแล้วก็หัดทำเองด้วยนะ สามารถติดตั้งและเริ่มใช้งานด้วยคำสั่ง [code] $npm install -g create-react-app $create-react-app my-app $cd my-app/ $npm start [/code] ดูผลการทำงานที่ http://localhost:3000 แสดงดังรูป Image may be NSFW.
Clik here to view. เมื่อต้องทำการ deploy ขึ้น production ให้ใช้คำสั่ง [code] $npm run build [/code] จะทำการ 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 ต่อไป
  • Dispatch(action) สำหรับส่ง action ต่าง ๆ ไปที่ store
• UI/View สำหรับการแสดงผล

แสดงดังรูป Image may be NSFW.
Clik here to view. 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 เป็น current state และ action จากนั้นจะส่ง next state กลับมาให้

ข้อดีที่ชอบมาก ๆ สำหรับ Redux คือ สามารถทดสอบได้ง่าย เนื่องจากเราสามารถทดสอบเรื่องของ state ที่เปลี่ยนไปได้เลย โดยไม่ต้องสนใจว่าจะแสดงผลถูกหรือไม่ แต่ก็ต้องแลกมาด้วย learning curve ที่สูงเช่นกัน แต่โดยรวมแล้วมีข้อดีมากกว่าข้อเสียนะ รวมทั้งมีเครื่องมือช่วยเหลือในการพัฒนาด้วย นั่นคือ Redux DevTool ซึ่งเป็น Google Chrome extension ซึ่งสามารถ download มาใช้กันได้เลย การติดตั้งนั้นสามารถทำผ่าน npm ได้เลย [code] npm install --save react-redux npm install --save-dev redux-devtools [/code] แนะนำให้ดู Course Getting start with Redux นะครับ ซึ่งผู้สร้าง Redux มาสอนด้วยตัวเอง แถมยังมีการพูดถึงเรื่องอื่น ๆ อีก ซึ่งต้องไปศึกษาเพิ่มเติมอีกแล้ว เช่น Relay สำหรับ code ตัวอย่างและ slide อยู่ที่

• Slide
• Code ตัวอย่าง

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

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

ทำให้สามารถพัฒนา mobile app ทั้ง Android และ iOSด้วย JavaScript เท่านั้น ซึ่งช่วยลดเวลาในการพัฒนา mobile app ลงไป มันก็มีทั้งข้อดีและข้อเสีย แต่ก็เป็นทางเลือกหนึ่งที่น่าสนใจเช่นกัน Image may be NSFW.
Clik here to view. เริ่มต้นใช้งานก็ไม่ยากเท่าไร ให้ทำการติดตั้งและลองสร้าง app ง่าย ๆ กันดู แต่การใช้งานจริง ๆ ก็ไม่ง่ายนะ และทำการ run บน iOS ดังนี้ [code] $npm install -g react-native-cli $react-native init AwesomeProject $cd AwesomeProject $react-native run-ios [/code] การทำงานแสดงดังรูป Image may be NSFW.
Clik here to view. โดยสิ่งต่าง ๆ ที่จำเป็นต้องรู้ประกอบไปด้วย

• ผลการทำงานบน 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 ต่าง ๆ เช่น

• Pepperoni
• Snowflake

ใครบ้างล่ะที่ใช้งาน React Native ? สามารถดูเพิ่มเติมได้ที่ The React Native Showcase โดย code ตัวอย่างของ session นี้อยู่ที่ Github::React native bkk example

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

Image may be NSFW.
Clik here to view. หัวข้อที่น่าสนใจก็คือ การศึกษา React ว่าทำอย่างไรกันบ้าง ? ซึ่งส่วนใหญ่จะมีวิธีการศึกษาคล้าย ๆ กัน คือ เรียนรู้จาก code ที่มีอยู่ และ ตัวอย่างก่อน เพื่อทำให้เข้าใจความสามารถต่าง ๆ จากนั้นให้เริ่มสร้าง project ด้วยตัวเองทั้งหมด อีกเรื่องที่น่าสนใจคือ การ migrate และโน้มน้าวให้บริษัทและทีมมาใช้ ReactJS กัน เป็นเรื่องที่หลาย ๆ บริษัทและทีมต้องใส่ใจกันให้มาก ประกอบไปด้วย

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

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