อยากทำเว็บมันต้องรู้อะไรบ้างหว่า?

เนื้อหาในรูปทั้งหมดในบทความนี้ไม่ใช่ของ Saladpuk นะจ๊ะ แต่พอดีไปอ่านมาแล้วรู้สึกว่าก็แนะนำได้กว้างดี ถึงจะมีบางเรื่องที่ไม่เห็นด้วยแต่โดยรวมๆก็ถือว่าทำมาได้ดีมากครับ ไปอ่านเนื้อหาจากต้นทางได้จากลิงค์นี้เบย https://github.com/kamranahmedse/developer-roadmap

เนื้อหาใน roadmap นี้เป็นแค่เพียงคำแนะนำว่า คุณควรจะศึกษาเรื่องอะไรบ้าง ซึ่งมันจะช่วยให้เราเข้าใจภาพรวมทั้งหมดว่าของต่างๆมันทำงานร่วมกันได้ยังไง สำหรับมือใหม่ ไม่ต้องตกใจ และ ไม่ต้องตะบี้ตะบันเรียนมันทั้งหมดก็ได้นะจ๊ะ ค่อยๆเรียนค่อยๆศึกษามันไปทีละตัว เดี๋ยวเขาจะทำไกด์ไลน์ของมือใหม่ให้อีกที

🥰 สายอาชีพคนทำเว็บ

สำหรับคนที่อยากทำเว็บนั้นตอนที่กระโดดเข้ามา เราสามารถเลือกได้ 2 เส้นทางคือ Front-end กับ Back-end ตามรูปด้านบนนั่นเอง ซึ่งทั้งสองสายนี้ต้องมีความรู้ในการเขียนโค้ดในระดับหนึ่งเหมือนกัน แต่จะเป็น coding skill คนละแบบกัน และหน้างานที่รับผิดชอบก็ไม่เหมือนกันตามนี้

🔥 Front-end (เด็กหน้าบ้าน)

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

🔥 Back-end (เด็กหลังบ้าน)

เป็นงานที่เตรียมให้ระบบทั้งหมดดำเนินการไปตามที่คนจ้างอยากให้มันเป็น ซึ่งงานฝั่งนี้จะรอให้ฝั่ง Front-end ส่งข้อมูลทำงานต่อ เช่น ผู้ใช้กดสั่งซื้อสินค้าจากหน้าเว็บปุ๊ป ฝั่ง Back-end ก็จะต้องทำให้การสั่งซื้อนั้นไปดำเนินการต่างๆต่อ เช่น เช็คสต๊อกสินค้า ออกใบเสร็จ บลาๆ จนกระทั้งลูกค้าได้รับสินค้าไรงี้ ซึ่งนรกของฝั่งนี้ก็คือโค้ดโค้ดโค้ดและก็โค้ด เพราะความสวยงามของฝั่งนี้ที่จับต้องได้มีเพียงอย่างเดียวคือ เทสเคสสีเขียวสีแดง เพราะทุกอย่างของฝั่งนี้คือการออกแบบวางแผน Architecture ให้ระบบของเรามันดำเนินการได้โดยไม่ล่มนั่นเอง

🔥 DevOps

ถ้าดูจากรูปแล้วเขาจะบอกว่าคนฝั่ง Front-end จะฝันมาเล่นการทำ DevOps ซึ่งในมุมผมคือก็ถูกส่วนหนึ่ง แต่จริงๆแล้วการทำ DevOps นั้นเราสามารถไปได้ทั้ง Front-end และ Back-end ครับ ส่วนมันเป็นอะไรไปอ่านต่อได้จากลิงค์นี้ละกัน 👶 DevOps พื้นฐาน

🔥 สิ่งสำคัญที่ขาดไม่ได้

ไม่ว่าเราจะเลือกสายไหนก็ตาม แต่สิ่งที่สำคัญที่เราต้องเรียนรู้และใช้มันเป็นก็คือ

  • Git version control - เพราะสมัยนี้ไม่มี developer คนไหน copy งานใส่ flash drive แล้วส่งให้กับอีกแล้วนั่นเอง ส่วนถ้าสนใจอยากเรียนรู้เรื่อง Git ก็ไปศึกษาต่อได้จากวีดีโอชุดนี้ครับภาษาไทย Git Fundamental

  • Basic Terminal Usage - คำสั่งจากพวก command line เดี๋ยวนี้จำเป็นมาก เพราะมันเร็ว และส่วนใหญ่มันจะทำได้มากกว่าใน IDE แต่ที่ขาดมันไม่ได้เลยคือการ build ในหลายๆเรื่องมันต้องใช้ command เท่านั้น

  • Data structure & Algorithms - เพราะมันจะช่วยให้เราเข้าใจหลักการคิดแบบพื้นฐาน และโครงสร้างในการทำงานหลายๆอย่างมันใช้ของพวกนี้เป็นหลัก เช่น ถ้าบอกว่ามันทำงานแบบ Stack เราก็จะเข้าใจทันทีว่ามันทำงานยังไง โดยไม่ต้องเสียเวลาไปอธิบาย ซึ่งของพวกนี้เจอบ่อยม๊วก

  • HTTP/HTTPS & API - สมัยนี้ถ้าคนทำเว็บไม่เข้าใจหลักในการทำงานของมันนี่ เตรียมบอกลาอาชีพนี้ได้เลย เพราะมันเหมือนกับ เรารู้แต่บวกลบ แต่ทำคูณหารไม่เป็น นั่นเอง เพราะต่อไปนี้งานฝั่ง front-end มันจะวิ่งไปที่เรื่องเหล่านี้หมด เช่น จะจัดการเรื่อง performance ก็ต้องรู้จัก roundtrip เป็นอย่างน้อย หรือการทำงานของ POST กับ PUT มันต่างกันยังไง (Developer 70% ทำเรื่องพวกนี้ผิดนะจ๊ะ มันไม่ได้บาปหรอก แต่คนทำเป็นดูปุ๊ปเขาจะเห็นว่าคุณกำลังเอาฆ้อนไปเลื่อยไม้อ่ะ)

  • เรื่องอื่นๆที่เขาแนะนำมา ส่วนตัวผมก็คิดว่ารู้ไว้ก็ไม่เสียหาย แต่ไม่รู้ก็ยังไปในสายอาชีพนี้ได้อยู่นะ ดังนั้นไม่ขอลงรายละเอียดละกัน

🥰 สาย Front-end

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

กดไปดูที่เว็บเขาจะง่ายกว่าเยอะเลย ไม่ก็ดาวโหลดลงมาดูในเครื่องเอาละกัน

🤮 รูปบ้าอะไรด้านบนไม่เห็นรู้เรื่องเลย

โดยหลักๆของสายนี้จะเน้นไปที่เรื่อง CSS, Javascript และการจัดการ Build pack ต่างๆ ดังนั้นถ้าไม่รู้เรื่องอะไรเลย ลองศึกษา CSS กับ Javascript แค่ตัวพื้นฐานของมันให้ทะลุเสียก่อน เพราะเวลาเราไปทำงานจริงนั้นส่วนใหญ่ เขาจะไม่ใช้ CSS ดิบๆ หรือใช้ Javascript ดิบๆ สุดท้ายก็ไปใช้ Framework ต่างๆต่ออยู่ดี เช่น CSS ก็จะไป SASS กับ Compass ส่วน Javascript ก็กระโดดไป TypeScript เล่นพวก Angular, React, Ionic บลาๆ ส่วนพวก Build pack เดี๋ยวความรู้พวกนี้ก็จะได้ตอนที่ไปเจอ node, gulp, bower แล้วค่อยไปตกนรกกับมันต่ออีกที

🥰 สาย Back-end

สำหรับเหล่าแมวน้ำที่หลงไหลในโค้ดเป็นชีวิตจิตใจ ชอบความท้าทายที่มองไม่เห็น ยอมรื้อโปรเจคเพื่อ Architecture ที่ดีกว่าได้เสมอ ก็จงไปดูเอาละกันว่าต้องเรียนรู้เรื่องอะไรบ้าง ตามรูปด้านล่างเบย

กดไปดูที่เว็บเขาจะง่ายกว่าเยอะเลย ไม่ก็ดาวโหลดลงมาดูในเครื่องเอาละกัน

🤮 รูปบ้าอะไรด้านบนไม่เห็นรู้เรื่องเลย

โดยหลักๆของสายนี้เน้นไปที่ ภาษาใดภาษาหนึ่งเป็นหลักก่อน ศึกษาให้เข้าใจมันจนถึงแก่นเสียก่อน เพราะทุกภาษามันมีแก่นอันเดียวกัน ซึ่งเมื่อเข้าใจแล้วจะเปลี่ยนภาษาเมื่อไหร่ก็ได้ และตามมาด้วย Best Practices ที่ developer บ้านเราไม่ยอมอ่านไม่ยอมทำกัน เลยเกิดปัญหาเปิด stackoverflow ไปก๊อปงานมาส่งทุกครั้งที่เจอปัญหายังไงล่ะ (70-80% ของปัญหา ยิ่งเรื่อง security leak มันเกิดเพราะเราไม่ทำตาม best practices นะจ๊ะ) ถัดมาเป็นเรื่องความเข้าใจใน Architecture และ Database family เพื่อเลือกใช้มันให้เหมาะสมกับแต่ละโปรเจค แล้วก็ปิดท้ายด้วยการทำ Automation นั่นเอง ซึ่งฝั่ง Backend จำเป็นต้องเรียนรู้โคตรเยอะ เพราะงานมันล่มไม่ได้เลยทำให้ค่าตัวโดยเฉลี่ยเขาสูงกว่ายังไงล่ะ (ไม่ได้หมายความว่าคนทำ back-end จะเก่งกว่า front-end เสมอไป)

🥰 สาย DevOps

สำหรับแมวน้ำที่สุดท้ายก็ต้องการทำ Automation ให้กับระบบ และ ชื่นชอบในการทำงานร่วมกันเป็นทีมโดยไม่ต่อยกัน ก็จงเรียนรู้สิ่งต่างๆเหล่านี้ต่อเลย

กดไปดูที่เว็บเขาจะง่ายกว่าเยอะเลย ไม่ก็ดาวโหลดลงมาดูในเครื่องเอาละกัน

🤮 รูปบ้าอะไรด้านบนไม่เห็นรู้เรื่องเลย

โดยสรุปคนทำรูปนี้เน้นเรื่อง DevOps ไปในเชิงการทำ Infrastructure ดังนั้นเลยหนีไม่พ้นการเรียนรู้พวก คลาว์, Build pipeline (CI/CD), IaC (Infrastructure as Code), OS ต่างๆ และเหล่า VM & Containers นั่นเอง

Last updated