UP Skill วันหยุด กับ เขียนเว็บด้วย React
คุณผู้อ่านเคยมีกำแพงในใจไหมครับ ? กำแพง fix mindset ที่บอกว่าฉันทำไม่ได้ ฉันไม่สามารถทำได้ ถ้าคุณมีกำแพงแบบนี้แหละก็ เราคือเพื่อนกัน แฮะ! 😅 วันนี้เรามาทะลายกำแพงนี้ด้วยกันเถอะครับ
Why I have to learn | ทำไมผมต้องเรียน
ออกตัวก่อนว่าผมนั้นมีกำแพงในใจตั้งแต่เรียนจบมหาวิทยาลัย พร่ำบอกกับตัวเองว่า เราไม่มีสามารถเขียนเว็บได้ เว็บเป็นอะไรที่วุนวาย งง ใช้เครื่องมือเยอะมาก แต่แล้วชีวิตก็ดลบันดาล ฮาๆ ผมพอจะมี side-project ที่ต้องใช้ทักษะทางด้านเว็บไซต์ แต่ก่อนจะไปถึงตรงนั้นเรามาทำความเข้าใจกันก่อนว่าเว็บไซต์ที่พูด ๆ ถึงมีอะไรบ้าง
ในอุตสาหกรรมตอนนี้ คำว่าเว็บไซต์จะถูกมองเป็น หน้าจอแสดงผลที่มีการตอบสนองกับผู้ใช้แต่ในทางเครื่องมือนั้นจะถูกแบ่งเป็น 2 ประเภทได้แก่ backend และ frontend
Backend Website คือ service app ที่มี function logic และส่งออกผลลัพธ์มาในรูปแบบ HTTP Protocol โดยที่ service app นี้อาจจะมีการติดต่อฐานข้อมูล หรือ ติดต่อกับ 3rd party service อีกด้วย
Frontend Website คือ static website หรือ web application ที่มีหน้าตาสวยงาม อีกทั้งยังมีการตอบสนองกับผู้ใช้ได้ เช่น กดปุ่มแล้วมี popup, เล่น video เป็นต้น
ย้อนกลับไปที่ side-project ของผม ส่วนมากก็จะเป็นงานด้าน back-end ที่สร้าง service เพื่อให้รองรับกับ mobile application ฉะนั้นผมจะไม่ค่อยได้เขียน front-end แบบตรง ๆ ถ้าให้พูดถึง tag <html> <h1> <p> ลืมไปได้เลย บอกได้แค่ตัวหลักๆ ถ้าซับซ้อนระดับที่ต้องเขียน CSS ด้วยแล้วละก็ บ๊ายบาย จ้าาาาาาาาาา
ที่นี้ชีวิตกลับมาเล่นตลกได้ยังไง ?
หลังจากที่ทำงานเกี่ยวกับ mobile app ที่เป็น native iOS มาร่วมๆ 5–6 ปี native Android 3 โปรเจค ผมพบว่าถ้าเราต้องการสร้าง MVP (Minimum value product) app สักตัวหนึ่งเพื่อมา Prove of concept อะไรบางอย่าง มันมีความยากอยู่นิดหนึ่ง
เหตุผลที่ #1 : พลังงานที่จะสร้าง กับ ผลตอบแทน
ในมุมคนสร้าง
การจะสร้าง app ขึ้นมานั้นไม่ได้ใช้เวลานานมากนะ คนที่มีความเชี่ยวชาญอาจจะสร้าง mvp ให้เสร็จภายใน 1 วัน 1 คืน ผมต่อให้เลย 2-3 วันเสร็จแน่นอน แต่! ขั้นตอนการที่จะเอา app ขึ้น publisher นี้สิ มันมีค่าใช้จ่าย
ทั้งเรื่องเงิน กรณี iOS ต้องจ่าย $100 ต่อปี ส่วน Android $25 ตลอดชีวิต
ทั้งเรื่องเวลา อาจจะใช้ 1–3 วัน ถ้า app ที่สร้างขึ้นไม่ผ่าน policy จบเลย แก้ต่อจนกว่าจะได้
ในมุมคนใช้
การที่เราจะ promote app เพื่อให้คนมา download อย่างน้อยคนใช้ต้องคิดหน่อยละว่าโหลดมาลองดีไหม ? ลองดู step ด้านล่างของการโหลดมาใช้นะครับ
channel (facebook, twitter, etc.) -> app store, play store -> รอ -> เปิดใช้
ถ้าเปรียบเทียบกรณี mobile web app
channel (facebook, twitter, etc.) -> เปิดใช้
จะเห็นได้ว่า ช่วงที่คนใช้สลับไปทดลองใช้ app แทบไม่มี กด link แล้วเปิดเลย
สรุปคือ การสร้าง mvp app เพื่อมาทดลองหรือพิสูจน์อะไรบางอย่างบนเว็บ สามารถขับเคลื่อนได้เร็วกว่า
เหตุผลที่ #2 : App ที่มีหน้าจอ static ง่าย ๆ ล้วนแล้วอยู่ในรูปแบบเว็บไซต์
รู้หรือไม่ว่า … ภายใต้ app บาง app หน้าจอบางหน้าเค้าไม่ได้เขียน ui element ที่เป็น native นะครับ แต่เค้าเรียกเว็บขึ้นมาแสดงแทน เพราะอะไรนะหรอ? มันแก้ไขง่าย วันนี้อยากเปลี่ยนอะไรก็แค่แก้แล้ว push ขึ้น server ไม่ต้องรอ approve จาก app publisher
เหตุผลที่ #3 : App บริหารจัดการ ถูกแปลงจาก windows app มาสู่ web app
ถ้าถามว่ายังมี windows app อยู่ไหม ก็ต้องตอบว่ามีครับ แต่จะดีกว่าไหมถ้าเราสามารถทำงานได้บนอุปกรณ์ไหนก็ได้ที่ไม่ใช่คอมพิวเตอร์ที่รันด้วยระบบ windows?
ใช่แล้วครับเรามาสู่ยุค web app กันแบบเต็มบ้านเต็มเมือง ขนาด app hr ที่เอาไว้จัดการบริหารทรัพย์กรบุคคลในองค์กรยังถูกสร้างขึ้นมาให้อยู่ในรูปแบบของเว็บไซต์
และนี้คือเหตุผลที่ผมคิดว่า เอาแหละเราอยู่เฉยไม่ได้แล้ว เราจำเป็นต้องเรียนรู้ skill นี้
(เสียงพี่เคน นครินทร์ ลอยมา เราทุกคนต้อง re-skill up-skill unlearn relearn 😆)
ชีวิตว้าวุ่นกับ HTML , CSS
ย้อนกลับไปในสมัยยังเรียนมหาวิทยาลัย เคยได้ทดลองเขียน Django ทำเว็บ blog แค่ตอนนี้ก็รู้สึกเครียดมาก tag อะไรไม่รู้เยอะแยะไปหมด ต้องมานั่งจำว่าแต่ละอัน
ทำหน้าที่อะไร แต่สุดท้ายผมเจอทางสว่าง ผมได้เจอหนังสือเล่มนี้ HTML & CSS: Design and Build Web Sites คุณจะได้พบกับความง่ายของการทำความเข้าใจ เพราะคุณไม่จำเป็นต้องมาพิมพ์เพื่อดูผลลัพธ์ของแต่ละ tag หนังสือเล่มนี้ทำมาให้คุณเข้าใจได้ง่าย ๆ เลย
ส่วนสุดท้าย CSS อันนี้บอกเลยว่าตัวใครตัวมัน แฮะ! จนถึงตอนนี้ผมยังใช้ได้ไม่คล่องเท่าไรนะครับ ต้องมาค่อยเปิดหนังสือดูทีละนิด ๆ
ชีวิตต้องเลือกระหว่าง Angular VS React
ถามว่าทำไมผมต้องเลือก อย่าลืมนะครับเราทุกคนมีต้นทุนกันทุกคน การที่จะเลือกทำอะไรสักอย่างจะมีต้นทุนของเวลา ต้นทุนของการเสียโอกาส ผมใช้เวลา 1 วันคือวันที่ 12 สค ในการค้นหาข้อดี ข้อเสีย เครื่องมือไหนที่เข้ากับเรา ยอมรับตามตรงว่าผมทดลองอ่านหนังสือของ ng-book ไปแล้ว 1 บท เพื่อทดลองว่า angular เป็นอย่างไร ทำงานอย่างไร ที่ผมชอบที่สุดคงจะเป็นเรื่อง typescript เนื่องจากผมเป็นคนชอบเขียน code แบบ data type safe แต่หลังจากที่ได้ทดลองไปแล้วนั้นพบว่า การจัดการ html ก็เล่นเอาผมมึนไปพักใหญ่ อาจจะเป็นเพราะผมไม่เข้าใจ HTML, CSS ตั้งแต่แรก
วันที่ 2 ต่อมาผมก็ได้มองหาเครื่องมืออีก 1 ตัวที่ชื่อว่าไอ้ตาว react ทำไมน้องดังระเบิดขนาดนี้! ผมค้นหาใน google แล้วไปเจอ npm trend น้องยืนหนึ่งมาตลอด ไหนๆก็ไหนๆแล้ว ไม่มีอะไรจะเสียอยู่แล้ว ผมตัดสินใจเรียน Mastering React ของ Skooldio เนื่องจากเห็นว่าระยะคอร์สแค่ 4–6 ชม ก็เลยจัดไปเต็ม ๆ
เรียน Mastering React ของ Skooldio
ในหัวข้อนี้จะมาพูดถึงว่า ผมได้อะไรบ้างจากการลงเรียนคอร์ส Mastering React ของ Skooldio โดยในคอร์สนี้จะสอนโดย ปัญจมพงศ์ เสริมสวัสดิ์ศรี เป็น GDE ด้าน web โดยเฉพาะ แปะลิ้งค์ เผื่อใครอยากไปลองเรียน คอร์สนี้สอนพื้นฐานตั้งแต่ต้น เช่น concept ของ react เช่น component, JSX, props และ state แต่จะไม่ได้ลงไปถึง html หรือ css ส่วนการจัดการ state ก็จะเป็นส่วนของ redux
ผู้สอนสามารถอธิบายเรื่อง basic ได้เข้าใจดี แต่ถามว่าเรียนจบปุ๊บทำเว็บได้เลยไหม ก็คงต้องตอบว่า ไม่ได้! เพราะส่วนมากแต่เป็นการพาไปดู overview เท่านั้น ยังจับมือเขียน code น้อยเกินไป เอาแหละ! ในเมื่อเรารู้แล้วว่าถูกจับมือเขียน code น้อยเกินไป นั้นเราจะต้องหาแหล่งข้อมูลอื่นสำหรับการเขียน code กันแล้ว
ฝึกเขียนเว็บ ตามใน YouTube
ใช่แล้วครับ ผมมักจะพึ่งการฝึกเขียน code จากเหล่า Youtuber ที่ได้พาเขียนเว็บ โดยพวกเขาจะก๊อปปี้เว็บที่อยู่บนเว็บจริง ๆ มาให้ซ้อมเขียนกัน อันนี้เป็น Playlist ที่ผมได้ดูและฝึกตาม React.js Real-World Projects — YouTube เริ่มต้นจากการเขียนเว็บจองโรงแรม คุณเชื่อไหมครับ ผมใช้เวลา 2–3 วันกว่าจะดูและทำตามจนจบ เพราะในแต่ละจุดเราจะ งง เอามาก ๆ สิ่งที่ได้จากการฝึกเขียนตามคือ ผมได้เรียนรู้ short-cut, trick การแยก component, css การจัด layout (อันนี้สำคัญมาก มีค่ามากๆ เพราะตอนแรกที่ทำ ๆ ไปจะดูไม่ออก แต่พอทำไปหลาย ๆ component แล้วจะเริ่มเห็น), การใช้ hook แทน redux และสุดท้ายมันเป็นแรงบันดาลใจให้เรียนต่อไป
Next Step ?
ยังมีอีกหลายเรื่องมากที่ผมยังไม่รู้ เช่นกันใช้ common component ที่มีคนเขียนไว้ให้แล้วอย่าง MUI หรือแม้จะเป็นการใช้ depenedcise ที่อยู่ใน Github ซึ่งทั้งหมดนี้ เราควรจะมี topic สักเรื่องที่เราอยากทำ ส่วนตัวผมเองนั้นอยากลองทำเว็บ Problem solve ใน domain ที่สนใจ เช่น เรื่องการเงิน เป็นต้น
สุดท้ายนี้ ขอบคุณทุกคนที่เข้ามาอ่านบทความของผม นี้เป็นวันหยุดที่สนุกสุด ๆ ไปเลย เพราะก่อนเรียนผมมีโจทย์ที่ใหญ่มาก ๆ 😅 ไว้มีเรื่องสนุก ๆ ผมจะกลับมาเล่าให้ฟังอีกนะครับ จะพยายามเขียนบทความแชร์ประสบการณ์ที่เจอไปเรื่อย ๆ สามารถติดตามผมได้ที่ Fan Page : CW Story หรือจะเป็นเว็บ CWStory.com ขอบคุณครับ
