แชร์ประสบการณ์ทำ Landing Page ของ Nextzy ต้อนรับปีใหม่ส่งท้ายปี 2017
คำเตือน: บทความนี้ค่อนข้าง Bias ไปทาง React
หนึ่งในงานที่ผมได้รับมอบหมายคือทำ Landing Page อันใหม่ design คร่าวๆ ก็จะเป็นแบบนี้
แต่ว่าทำออกมาจริงๆจะไม่ค่อยเหมือนเท่าไหร่ต้องกราบขออภัย Designer มา ณ ที่นี้
ทำไมถึงใช้ React?
หลังจากที่ผมได้เห็น design ตามรูปข้างบนแล้วก็นึกถึง React ก่อนเลย เพราะเราแบ่งเป็น section หลายๆอันและแบ่งซ้ายกับขวาเหมือนกันแต่จะมีบางอันที่ title อยู่ด้านซ้ายบางอันอยู่ด้านขวา(อันนี้ไม่เป็นปัญหาเพราะว่าเรามีตัวช่วยอย่าง Flexbox :D) นอกจากเรื่อง design แล้วยังมีเรื่องของ Functional Programming ที่สามารถเขียนด้วย React แล้วอ่านง่ายด้วย วิธีสร้างproject ก็ง่ายมากเพียงเราลง package ที่ชื่อว่า create-react-app มันก็จะสร้าง folder ใหม่ที่พร้อมเริ่มต้นสำหรับพัฒนาได้เลย
ในหน้าเว็บเราพยายามทำให้เป็น CSSless
จากประสบการณ์ที่เคยเขียน React และใช้ CSS ด้วย จะมีปัญหาให้การตั้งชื่อ class เพราะว่าเวลาเราประกอบร่างเข้าด้วยกันชื่อ class ซ้ำกันมันดัน overwrite ทับไปด้วย วิธีแก้เรื่องนี้ก็มีหลายวิธี
- ตั้งชื่อให้เป็นชื่อเฉพาะ: อันนี้เป็นวิธีแรกๆที่ทำมันก็โอเคในตอนแรกๆแหละ แต่ถ้า component เราเยอะล่ะ? CSS จะบวมตามไปด้วย
- ใช้ SCSS สิ: เจอปัญหาเดียวกันกับข้างบนตรง file มันจะบวม
- in-line style: อันนี้ก็ยังใช้ในหน้าเว็บอยู่แต่พยายาม refactor ให้มันน้อยลงเพราะว่าถ้าเรามี component ที่ใช้ style เหมือนๆ กันมันจะกลายเป็น code ที่ WET(We Enjoy Typing) มากๆ
- ใช้ Styled-Component: อันนี้เป็นท่าที่สวยงามเพราะว่าเราทำแค่ Stateless Component ก็พอแถมเรายังสามารถ reuse component ได้อีกด้วย code แบบนี้ DRY(Don’t Repeat Yourself) แน่นอน แถมเรายังทำให้ Project ของเรามี File (เกือบ)ทั้งหมดเป็น File JS
เส้นใยที่คุ้นเคย
ผมเชื่อว่าผู้อ่านหลายๆ คนน่าจะเคยเห็นเส้นใยนี้ผ่านมาหลายๆ เว็บซึ่งมันก็คือ library ที่ชื่อว่า particles.js เราสามารถปรับค่าตามใจชอบได้หลายอย่างลองไปเล่นกันดูได้
Scrolling
ที่กดตรง navbar ด้านบน ผมใช้ react-scroll จริงๆ มีตัวอื่นอีกหลายเจ้ามากๆ แต่ติดใจตรงที่เราสามารถเปลี่ยน animation ตอน scroll ได้ มีหลายแบบมากๆ ดูได้จากที่นี่ ทั้งนี้จะขอเตือนไว้ว่าเราไม่ควรใช้ animation ที่เป็นแบบ linear เพราะมันจะทำให้ animation กระตุก แนะนำให้เลือกเป็นแบบ S-shape กำลังดี
Carousel
Carousel ที่ผมใช้คือ react-slick library เขามี layout พื้นฐานที่เราใช้ค่อนข้างครอบคลุมหมดแล้ว ใช้ดีเลยทีเดียว
Animation เด้งๆ ที่นักบินอวกาศ
ผมใช้ animate.css ซึ่งมี animation หลายแบบมาก ช่วยให้เว็บเราดูน่าสนใจมากขึ้น
Progressive Web App
เนื่องจากเจ้าตัว create-react-app ได้สร้างตัว strategy ของ service worker มาให้แล้ว (File จะชื่อ registerServiceWorker.js) เราไม่ต้องไป set อะไรเลย ยกเว้นถ้าเราจะเปลี่ยน Strategy ในการ cache ก็ไปเปลี่ยนใน file นี้ได้ แต่ที่ใส่มาให้มันก็ดีอยู่แล้วผมเลยไม่ได้ไปเปลี่ยนอะไร สิ่งที่เราต้องทำคือไปเพิ่ม file ที่ชื่อว่า manifest.json ใส่ข้อมูลเบื้องต้นให้ครบที่จะเป็น PWA ได้ หรือจะตรวจตาม checklist ของทาง Google ก็ได้ ถ้าใช้ Google Chrome ก็จะมี Chrome app ที่ชื่อว่า Lighthouse ใช้ตรวจก็สะดวกดีเหมือนกัน
จากผลที่เห็น(อันนี้ของจริง) ก็จะเห็นว่า Performance ยังไม่ค่อยดีก็ต้องไปปรับแก้กันไป
สรุป
จริงๆ หน้าเว็บนี้ไม่ค่อยได้ใช้ประสิทธิภาพของ React อย่างเต็มที่เท่าไหร่ แต่ใช้พื้นฐานของการวาง Component ในแบบของ React ให้เกิดประโยชน์สูงสุด
ถ้าจะขึ้น project ใหม่ใช้ create-react-app ดีที่สุดแล้วเพราะว่ามันทำ webpack แล้วก็ project structure รวมถึง pre-PWA ให้เราเรียบร้อยแล้ว
คำแนะนำ: พยายามอย่าใช้ npm อันที่ต้อง eject react script ออกมาเพราะเขา set ค่าเริ่มต้นมาให้ดีอยู่แล้ว
Style Component เป็น library ที่ดีอันนึงที่เราควรใช้ ช่วยลด code ซ้ำๆของเราได้เยอะมากๆ
