Hot module reload with JQuery mix with React

เผอิญผมมีโอกาสได้พัฒนาต่อโปรเจ๊กต์นึงที่เคยเขียนด้วย Jquery เมื่อหลายปีมาแล้ว

เพื่อความ Productive ของตัวเองเลยพยายามหาทางว่า เห้ย ของใหม่ที่จะใส่เพิ่มเราจะใช้ React แล้วนะ แล้วถ้าจะให้ Productive จริงๆ ควรจะมี Hot reloading ที่ทำให้แก้สไตล์แล้วเห็นผลเลยด้วย

ทีนี้เราทดลองได้สิ่งนี้

chrisza4/playgrounds

1. Webpack.config เซ็ตตาม guide ของ webpack 2
2. Entry point ให้ใส่ module.hot.accept เข้าไป
3. ส่วนไหนที่เคยอยู่ใน document.ready ของ jQuery ก็แยกออกมาให้มัน Execute ใหม่อีกทีในระหว่าง hot reloading ซะนะ
4. โชคดีปกติตั้งแต่ก่อนมี React ผมก็ไม่ค่อยชอบเขียน jQuery ให้มันพยายาม mutate view เยอะๆ คือพยายามเขียนให้มี function นึงที่ reset ทั้ง div base on some data อยู่แล้ว (ซึ่งจริงๆ React ก็คือ concept นี้แหละ แต่เนียนกว่าผมพยายามแถด้วย jQuery เยอะมาก)

แน่นอนว่าถ้าเราเป็น Agile เราต้องมี Working software ตลอดเวลา และมี Progress ตลอดเวลาครับ ไม่ว่าเราจะรื้อทำใหม่หมดด้วย React หรือพยายามไปต่อกับ jQuery อันช้าผมคิดว่ามันไม่เวิร์คทั้งคู่

ถ้าใครมี Legacy code แล้วคิดจะใช้ React ลองดูตัวอย่าง Hot reloading ผสมผสานของผมได้ครับ ผมว่าเวิร์คมาก และขอย้ำว่าถ้าเราเป็น Agile แล้วเราต้องส่งมอบซอฟต์แวร์ตลอดเวลา เราต้องพยายามหาท่าการพัฒนาที่ Migrate ไปเรื่อยๆ แบบนี้แหละครับ

ปล. ผมขอย้ำเพราะเคยอ่าน Developer หลายคนบ่นว่า พอทำ Agile แล้ววาง Architecture ไม่ได้ ต้องส่งมอบตลอดเวลา ผมพบว่าเพราะเราไม่ค่อยกล้าหรือพยายามคิดทำ Architecture แบบผสมผสาน แล้วค่อยๆ ปรับไปเรื่อยๆ เหมือนเวลาเราปรับปรุงห้าง นานครั้งจริงๆ เขาก็จะปิดห้างทั้งห้าง ส่วนมากก็คือปิดเป็นโซนๆ ไป เวลาเราทำซอฟต์แวร์ก็ควรคิดในลักษณะนี้เหมือนกันคือ Migrate ไปทีละโซนทีละส่วน ไม่ใช่บอกว่าพอย้ายเป็น React ก็จะ Rewrite ใหม่หมดครับ