• Facebook
• Twitter
• Line

ถ้าพูดถึงภาษาตระกูล Website คงหนี้ไม่พ้น Javascript และ PHP สองภาษานี้อยู่เป็นคู่ทุกข์คู่ยากกับชาว Website มาช้านาน จริง ๆ แล้วไม่ผิดหรอกครับ การใช้สองภาษานี้แต่เราอาจต้องศึกษาข้อมูลกันซักนิดก่อนที่จะเลือกใช้แต่ละอย่าง เช่นเดียวกัน เดี๋ยวนี้ CSS Framework และ “ UI Framework “ นั้นก็มีให้เลือกมากมาย วันนี้ผมจะยกเคสนึงที่เคยเจอกับการใช้ Stack เก่า PHP JQUERY (ปนกันมั่ว ๆ ด้วย) มาเป็น Vuejs ให้ฟังกันครับ

Pain point คืออะไร?

               ไม่ใช่ Jquery PHP ไม่ดีนะครับ แต่นี่มัน 2022 แล้วมีของที่ดีกว่าเพียบ (ฮ่า ๆ)  อย่าไปยึดติดว่าเราทำอันนี้ได้แล้วจะใช้ตลอดไปนะครับ สิ่งที่ผมเจอใน Jquery คือ

• เมื่อก่อนเราทำงานบนพื้นฐาน การแยก Script รวมเป็น file เดียว ซึ่งสมัยก่อนก่อนที่เรารู้จักคำว่า Component การใช้แนวคิดนั้นจัดระเบียบ Code นั้นไม่ผิด แต่ในปี 2020 เป็นต้นมา Web component ได้สร้างปรากฎการณ์ให้เราได้รู้จักกับคำว่า component มากขึ้น แน่นอน Frontend สมัยใหม่ก็หันไป Reuse code แบบ component หมดแล้วซึ่งพอใช้ไปใช้มา ดีแฮะ และง่ายกว่าการจัดระเบียบ Code แบบเก่าที่ต้องมานั่งแยก File และหนำซ้ำบางครั้งหา Code ไม่เจอใน File script.js อีกต่างหาก ฮ่า
• ไม่มี Two-Way Blinding เวลาจะรับค่าเปลี่ยนค่าต้องดึงจาก DOM มือ ทำให้จัดการยากมาก และทำให้ทำงานแล้วเผลออับเดทค่าได้ง่ายมาก Debug แอบยาก
• Jquery ใช้ DOM เก็บค่าซะส่วนใหญ่ ซึ่งจริง ๆ แล้วเราสามารถสั่งให้มันเก็บที่อื่นก็ได้นะ แต่ Doc มันออกแนว DOM- Traversal ทำให้เราก็จะเน้นใช้ DOM เก็บค่าไปซะเลย
• ผลจากการใช้ DOM มาก ๆ คือ ช้าครับ Dev ต้องมีประสบการณ์พอควรในการทำให้ข้อมูลเยอะ ๆ เร็ว ๆ ซึ่งจะไม่ค่อยเจอใน Framework ใหม่ ๆ ละเพราะเค้าจัดการส่วนนี้แทบจะทั้งหมดแล้ว
• ทำงาน ซับซ้อนหลายหน้าลำบากครับ ยังไม่สามารถแยก Front-Back ได้ชัดเจนเพราะขาดพวก Route – Navigator
• พอไม่มี Route-Navigator ก็ไม่มีการจัดการเก็บข้อมูลข้ามหน้า อับเดทข้อมูลข้ามหน้า จำเป็นต้องพึ่งพา Local storage ไม่ก็การเก็บข้อมูลแบบอื่น ๆ

ทำไมต้อง Vue ไม่ใช้ React ,angular หรือ ตัวอื่น ๆ ?

                ผมเริ่มจาก Angular 1 เลยครับเขียน คู่กับ Ionic ตอนนั้น เป็นประสบการณ์ ที่ก็แปลกใหม่ดีอาจเพราะเราเปลี่ยนจาก Jquery มั้งครับเลยไม่คุ้นชิน แต่ยอมรับว่ามันยังยากพอสมควร พองานครั้งนั้นจบก็ลองหาตัวอื่น ๆ มาลองเล่นดูครับ React ต่อเขียน React Native บน Mobile และ React.JS บน Web เจอสัจธรรมที่เรียกว่า  “Bootrap Code HELL” มันคือการที่เรากำลังจะเขียนอะไรซักอย่างต้องเขียนไรก่อนหน้าอีกหลายอย่างซึ่งเหนื่อยมาก ทำให้ Speed ในการทำสิ่งใดสิ่งหนึ่งนั้นตกลงไปมาก (React Native 0.5X เก่าละ) หนำซ้ำตอนนั้นเราพึ่ง คนตัด CSS จำนวนมาก JSX ทำให้เราทำงานเป็น 2 เท่าเมื่อเทียบกับการทำ เว็บแบบเดิม ซึ่งหลังจากนั้นได้ลอง Vue.JS เหมือนเจอเนื้อคู่ครับ ทั้งง่ายและมันแยก Template ออกจาก Code ชัดเจนเรียดได้ว่า คนตัด CSS เข้ามาช่วยเขียนได้โดยไม่เขินอะไร

พอเปลี่ยนเป็น Vue แล้วเป็นอย่างไร

การปรับยากหน่อยครับในช่วงแรกเพราะจริง ๆ ต้องปรับ Mideset ด้วยครับ ซึ่งทีมที่ผมเข้าไปดูดื้อมาก และไม่ฟังอะไรผมเลยจะทำแต่ของเดิม ๆ หัวหน้าทีมก็โอเคอนุมัติแต่ของเดิม ๆ อวยแต่ของเดิม ๆ ปวดหัวมากครับ ครับผมใช้วิธี

1. Fork-Module แยกส่วนที่เป็น Front ออกมา ให้ Dev เก่าเขียนเป็น API แทน ค่อยๆ Transform Module ใหม่ ๆ
2. ทำให้คนแก่ดู (ไม่ใช่เด็กละ) ว่าสิ่งที่ทำมันว้าวและจะเปลี่ยนชีวิตเค้าขนาดไหน
3. ทำให้มันเป็นธรรมชาติที่สุดให้เค้ารู้ว่างานมันจะง่ายเหนื่อยน้อยลงมีเวลากินเบียร์มากขึ้น

พอค่อย ๆทยอยปรับสิ่งที่ได้มีหลายอย่างมากครับ ทั้งในด้านความง่ายของการ Dev ทั้งในด้าน Performance Server และในด้านของความสวยงาม

1. พอเรา Reuse ทั้ง Component เราก็จะแก้ไขหรือปรับอะไรมัน Isolate อยู่ใน Component นั้นทำให้เราไม่ต้องไปกวาดสายตาไปหลาย ๆ File เวลาจะใช้ Component ที่ไหนก็ไม่ต้องกังวลว่าจะตีกับ CSS หน้าอื่น
2. Performance Server รองรับ Concorrent ได้เยอะขึ้น เพราะมันไม่ต้องมา handle logic ที่ไม่จำเป็นของฝั่ง Frontend
3. ความสวยงานมากขึ้นและลูกเล่นใส่ได้เยอะขึ้นเพราะ Vue ของเล่นเยอะมากพอ ๆ กับ React เลย
4. มีเวลาทำอย่างอื่นมากขึ้น (อันนี้ผลพลอยได้)

อยากให้ทุกท่านได้ลองเทคโนโลยีใหม่กันเยอะ ๆ นะครับโลกเรามันเปลี่ยนไปไวมากสิ่งใหม่ ๆ มีการพัฒนาอย่างไม่หยุดครับ สำหรับท่านที่สนใจบริการของ Cloud HM สามารถติดต่อเราได้ผ่านช่องทางนี้นะครับ ขอบคุณครับ

— Cloud HM