![react-00]()
![react-00]()
มีโอกาสไปร่วมงาน
ReactJS Bangkok 1.0.0 โดยแบ่งออกเป็น 2 ห้องคือ
- ห้องพื้นฐานสำหรับผู้เริ่มต้น (น่าจะสำหรับคนที่เขียน ReactJS มาแล้ว)
- ห้องขั้น Advance
ส่วนผมอยู่แต่ห้องพื้นฐานโดยในห้องนี้มี session ต่าง ๆ ดังนี้
จึงทำการสรุปไว้นิดหน่อย
โดยในแต่ละ 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 แสดงดังรูป
![react-01]()
เมื่อต้องทำการ 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 สำหรับการแสดงผล
แสดงดังรูป
![react-03]()
Redux มี principle 3 เรื่องที่ต้องเข้าใจ ประกอบไปด้วย
- Single Source of Truth นั่นคือจะมี Store เพียวตัวเดียวเท่านั้น
- State is read-only นั่นคือไม่สามารถแก้ไข state ได้โดยตรง ต้องส่ง action ผ่าน method dispatch() เท่านั้น
- 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 อยู่ที่
โดยแนวคิดของ Redux นั้นสามารถนำไปใช้กับระบบอื่น ๆ ได้
เช่นการพัฒนา Mobile application ซึ่งผมเคยเขียน blog ไว้แล้ว
ในเรื่อง
สรุปเรื่องของ Redux สำหรับ Mobile Application
React Native สำหรับการพัฒนา Mobile application
ทำให้สามารถพัฒนา mobile app ทั้ง Android และ iOSด้วย JavaScript เท่านั้น
ซึ่งช่วยลดเวลาในการพัฒนา mobile app ลงไป
มันก็มีทั้งข้อดีและข้อเสีย
แต่ก็เป็นทางเลือกหนึ่งที่น่าสนใจเช่นกัน
![react-05]()
เริ่มต้นใช้งานก็ไม่ยากเท่าไร ให้ทำการติดตั้งและลองสร้าง app ง่าย ๆ กันดู
แต่การใช้งานจริง ๆ ก็ไม่ง่ายนะ
และทำการ run บน iOS ดังนี้
[code]
$npm install -g react-native-cli
$react-native init AwesomeProject
$cd AwesomeProject
$react-native run-ios
[/code]
การทำงานแสดงดังรูป
![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 ดี ๆ ด้วย
ขอขอบคุณสำหรับงานดี ๆ
มีเรื่องให้ศึกษาและนำไปใช้งานเพียบเลย
ไปหัดเขียนก่อนนะครับ
มีกลุ่ม
ReactJS Developer Thailand ให้เข้าร่วมอีกนะ
เนื่องจากช่วงนี้ต้องทำงานกับ IBM Websphere บ้างนิดหน่อย
ดังนั้นจึงอยากจะลองติดตั้งและใช้งานนิดหน่อย
แต่เมื่อไปดูขนาดของไฟล์ติดตั้ง และ ความต้องการต่าง ๆ แล้วไม่น่าจะรอด
จึงไปดูว่า มีวิธีการไหนที่น่าเป็นไปได้บ้าง
เมื่อไปดูแล้วพบว่ามี Websphere Liberty ให้ใช้งาน
ซึ่งสามารถใช้งานกับ Docker ได้อีก
ดังนั้นมาลองใช้งานกันดูหน่อยสิ
ที่สำคัญคือ สามารถทำงานร่วมกับ
Docker, Chef, Puppet, Apache Maven และ Jenkins ได้ง่าย ๆ อีกด้วย
เพียงเท่านี้ก็สามารถติดตั้ง Java web application บน WebSphere Liberty ได้แล้ว
ชีวิตง่ายขึ้นเยอะเลยนะ
Reference Websites
https://wasdev.net/
https://developer.ibm.com/wasdev/websphere-liberty/
เนื่องจากต้องกลับบ้านต่างจังหวัดและไม่ได้เอา notebook กลับไปด้วย
แต่ต้องการเรียนรู้เกี่ยวกับ programming ผ่าน Mobile app
จึงลองค้นหา app หลาย ๆ ตัว
โดย app ที่ลองเรียนแล้วชอบคือ 
แต่ถ้าต้องการลงรายละเอียดเชิงลึกของแต่ละภาษา
ก็มี app แยกออกไปอีกนะ ประกอบไปด้วย
สำหรับ iOS developer ทั้งหลายคงต้องใช้ dependency หรือ library อื่น ๆ อย่างแน่นอน
ซึ่งถ้า copy code มาใส่ project เองคงไม่ดีเท่าไรนัก !!
ดังนั้นน่าจะต้องจัดการผ่านเครื่องมือต่าง ๆ เช่น
มีโอกาสไปร่วมงาน 
Redux มี principle 3 เรื่องที่ต้องเข้าใจ ประกอบไปด้วย
เริ่มต้นใช้งานก็ไม่ยากเท่าไร ให้ทำการติดตั้งและลองสร้าง app ง่าย ๆ กันดู
แต่การใช้งานจริง ๆ ก็ไม่ง่ายนะ
และทำการ run บน iOS ดังนี้
[code]
$npm install -g react-native-cli
$react-native init AwesomeProject
$cd AwesomeProject
$react-native run-ios
[/code]
การทำงานแสดงดังรูป
โดยสิ่งต่าง ๆ ที่จำเป็นต้องรู้ประกอบไปด้วย
หัวข้อที่น่าสนใจก็คือ การศึกษา React ว่าทำอย่างไรกันบ้าง ?
ซึ่งส่วนใหญ่จะมีวิธีการศึกษาคล้าย ๆ กัน
คือ เรียนรู้จาก code ที่มีอยู่ และ ตัวอย่างก่อน
เพื่อทำให้เข้าใจความสามารถต่าง ๆ
จากนั้นให้เริ่มสร้าง project ด้วยตัวเองทั้งหมด
อีกเรื่องที่น่าสนใจคือ การ migrate และโน้มน้าวให้บริษัทและทีมมาใช้ ReactJS กัน
เป็นเรื่องที่หลาย ๆ บริษัทและทีมต้องใส่ใจกันให้มาก
ประกอบไปด้วย
เนื่องจากทำการ review code ของระบบที่พัฒนาด้วยภาษา Swift
แล้วพบว่าการสร้าง object บางตัวนั้น
สามารถสร้างได้หลายแบบ
ทำให้มี constructor จำนวนมาก !!
ซึ่งมันเป็น Code Smell อย่างหนึ่ง
ดังนั้นได้เวลาปรับปรุง code ให้ดีขึ้นแล้วนะ
อ่านเจอบทความเรื่อง 
พอดีมีคำถามมาจากน้อง ๆ ที่เขียน Android app ว่า
ถ้าต้องการทดสอบพวก Custom View โดยไม่ต้องเปิดหรือทดสอบผ่าน Activity ได้ไหม ?
ตอบไปแบบไม่คิดว่า ทดสอบยังไงหว่า ไม่ผ่าน Activity !!
แต่เมื่อคิดให้ดี ๆ ก็นึกออกว่า สามารถทดสอบด้วยการใช้ 
หรือทำการ run ผ่าน grade wrapper ด้วยคำสั่ง
[code]
$./gradlew clean testDebugUnitTest
[/code]
จะแสดงผลการทำงานดังรูป
ซึ่งใช้เวลาในการทดสอบนานใช้ได้เลยนะ
ดู code ตัวอย่างเต็ม ๆ ได้ที่ 
ว่าง ๆ ช่วงฝนตกมานั่งวิเคราะห์ code ของภาษา Swift ด้วย 
ยังไม่พอนะ ยังสามารถทำงานร่วมกับ 
เนื่องจากงานที่ดูอยู่เป็นระบบที่พัฒนาด้วยภาษา Java
ส่วนโครงสร้างและ build tool ที่ใช้งานเป็นหลักคือ 
ในการทดสอบระบบ Web application ด้วย Robot framework
หนึ่งในปัญหาและสิ่งที่ต้องทำซ้ำ ๆ เสมอคือ
เพียงเท่านี้ก็สามารถนำไปใช้งานแบบสบาย ๆ แล้วครับ
ตัวอย่างของ Dockerfile อยู่ที่ 
จากประสบการณ์การพัฒนา Android app อันเล็กน้อย
เลยนำมาสรุปไว้นิดหน่อยรวมกับข้อมูลจาก website ต่าง ๆ
ซึ่งอาจจะเป็นประโยชน์บ้างสำหรับ Android Developer
เพื่อที่จะไม่ต้องมาผิดซ้ำรอยกันอีก
มาเริ่มกันเลยดีกว่า
ฝนตกช่วงค่ำ ๆ เลยเปิดบทความอ่านเล่น ๆ
เจอบทความที่น่าสนใจเรื่อง 
วันนี้ทำการ update Firefox หลังจากที่ไม่ได้ update มานาน ๆ ๆ ๆ มาก
ทำให้พบกับปัญหาการทดสอบระบบ web บน Firefox 48 ด้วย Robot Framework
อาการที่พบเจอเป็นดังนี้
เปิด Firefox ขึ้นมาได้ แต่ไม่เข้าไปยัง url ที่ต้องการ
บางครั้ง Firefox ก็ปิดตัวเองไปเลย
งานเข้าสิครับ จะแก้ไขกันอย่างไรดีล่ะ ?
แสดงผลการทำงานดังรูป
Error message เป็นดังนี้
[code]
[ WARN ] Keyword 'Capture Page Screenshot' could not be run on failure: No browser is open
WebDriverException: Message: Can't load the profile.
Profile Dir: /var/folders/t5/8kg23s_97z9dw44tfc1d6dqw0000gn/T/tmp4y9Zfw/webdriver-py-profilecopy
If you specified a log_file in the FirefoxBinary constructor, check it for details.
[/code]
เนื่องจากได้แบ่งปันเรื่องการทดสอบแบบอัตโนมัติสำหรับ iOS app
ซึ่งแน่นอนว่า พัฒนาบน XCode นั่นเอง
โดยการ setting หรือตั้งค่าปกติของ XCode นั้น
ไม่ค่อยเอื้อต่อการทดสอบมากสักเท่าไร
เนื่องจากจะสลับหน้าและ tab ต่าง ๆ ไปมา น่าปวดหัว
ดังนั้นเรามากำหนดค่าใน XCode กันนิดหน่อย
โดยความสามารถที่จะใช้งานคือ Behaviors และ Tabs
ดังนั้นมาเริ่มกันเลย
จากนั้นทำการ build ( Command + B ) จะแสดงผลดังนี้
เมื่อผลการทดสอบผ่านทั้งหมด
สามารถกำหนดให้ซ่อน navigator ด้านซ้ายมือ
และซ่อน debugger ไปซะ
และยังแสดง code ใน tab Coding เหมือนเดิม
แสดงการตั้งค่าดังรูป
และเมื่อการทดสอบไม่ผ่าน
ให้ทำการแสดง Issue navigator เพื่อแสดงให้เห็นถึงปัญหาได้อย่างชัดเจน
หรือจะแสดง Test navigator ก็ได้นะ
แสดงการตั้งค่าดังรูป
จากนั้นทำการทดสอบในกรณีทดสอบไม่ผ่าน
จะแสดง issue ขึ้นมาทางด้านซ้ายทันที
ทำให้ไม่ต้องสลับหน้าไปมา แสดงดังรูป
หรือถ้าต้องการจัดการเรื่องต่าง ๆ ผ่าน command line
ก็สามารถติดตั้งผ่าน NPM ด้วยคำสั่ง
[code]
$npm install -g appium
$appium
[/code]
จากนั้นทำการกำหนดค่าต่าง ๆ เพื่อให้สามารถทดสอบ Mobile app ได้
ทั้ง Android และ iOS app
โดยในบทความนี้เฉพาะ iOS app เท่านั้น
เพื่อให้สามารถทดสอบ app ได้ทั้ง Emulator และ device จริง ๆ
มาเริ่มกันเลย
สิ่งที่จะเหนื่อยหน่อยคือ App Path
ถ้าต้องการให้สามารถทดสอบบน Emulator ได้ต้องทำการ
กำหนด App Path ไปยัง Application ที่เราต้องการจาก XCode ดังนี้
เข้าไปยัง XCode เพื่อเปิด App ใน Finder
แสดงดังรูป
แต่ folder ที่เปิดขึ้นมาใน Finder นั้นมันผิด !!
ดังนั้นให้ทำการเปลี่ยนไป Folder ที่ถูกต้อง
ไปที่ Finder -> Go -> Enclosing Finder
จากนั้นให้ทำการเลือก Application ใน Folder iphonesimulator
ซึ่งเราจะใช้ Application นี้ใน App Path นั่นเอง
แสดงดังรูป
จากนั้นให้เริ่มการทดสอบด้วย Inspector หรือรูปแว่นขยายนั้นเอง
เพื่อใช้ inspect element ต่าง ๆ ของ App
ทำให้ง่ายต่อการเขียน code เพื่อทดสอบต่อไป
ถ้าทุกอย่างเป็นไปด้วยดี จะแสดงดังรูป
แสดงการ configuration ดังนี้
จากนั้นให้ทำการ Launch และ Inspector ดูนะ
จะพบว่าสามารถเปิด app บน device จริง ๆ ได้
และใช้งาน inspector ได้ปกติ เหมือนกับบน Emulator เลย
ปล. ถ้ามีปัญหาเรื่องของ Instrument ก็ให้ทำการ restart เครื่อง device
แล้วปัญหาจะหายไปนะครับ !!!
[code]
Error launching instruments: Instruments crashed on startup
[/code]
ปัญหาที่นักพัฒนาพบเจอเป็นประจำก็คือ Legacy code (Code ที่ไม่มี test)
ซึ่งมีคุณสมบัติเฉพาะตัวนั่นก็คือ พังง่าย !!
อาการประมาณว่า
แก้ไขตรงนั้นนิดตรงนี้หน่อยแล้วส่วนอื่นพังไปด้วย !!
เหมือนกับการแก้ไข bug เพียงตัวเดียวแล้วได้ bug มาอีกเป็นฝูง
โดย code เหล่านี้นักพัฒนาต้องเจ็บตัวกันมาทุกคน ไม่ว่าจะมากหรือน้อยก็ตาม
เพื่อทำการแก้ไข และ ปรับปรุง code เหล่านี้ให้ดีขึ้น
เพิ่งไปแบ่งปันเรื่องระบบ Automated deployment สำหรับ Mobile app มา
โดยประกอบไปด้วยส่วนต่าง ๆ เช่น
จากงาน Universe Conference นั้นทาง 
มาสร้าง Project ใหม่กัน
จากนั้นทำการสร้าง Column ต่าง ๆ หรือ workflow ได้เลย
สามารถเพิ่ม Note เข้าไปในแต่ละ column ได้อีกด้วย
รวมทั้งสามารถแก้ไขได้ และ ยัง convert ไปเป็น Issue ได้อีกด้วย
เพียงเท่านี้เราก็สามารถจัดการงานต่าง ๆ ของระบบได้แล้ว
ขาดแต่เรื่อง report เท่านั้นเอง !!
สามารถดู VDO เพิ่มเติมได้
https://www.youtube.com/watch?v=C6MGKHkNtxU
ขอให้สนุกกับการใช้งาน Github ครับ