frontend vs backend

เรื่องของเรื่อง ความเหมือนที่แตกต่างของ Frontend และ Backend

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

เรื่องของเรื่อง คืออะไร

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

เทคโนโลยีเว็บ

ในปัจจุบันเว็บไซต์ พัฒนาไปมากมาย จนบางคนเข้าใจผิด คิดไปไกลขนาดว่า เว็บไซต์ตายไปแล้ว อ้าว….แล้วที่คุณกำลังอ่านอยู่นี่ละ หรือที่คุณเข้าใช้งานตลอด ทั้ง Social Network ทั้งระบบงานต่างๆ มันคืออะไร

รูปภาพตัวอย่างหน้าเว็บจาก KoolShop Template

รูปภาพตัวอย่างหน้าเว็บจาก KoolShop Template

ผมมองว่า มันคือระบบครับ ที่ประกอบไปด้วย Front end ที่เป็นส่วนติดต่อ กับผู้ใช้งาน หรือที่เรียกกันติดปากว่า User นั้นแหละครับ ตรงนี้ ขอพูดแบบง่ายๆ แบบอธิบายจากคนรู้น้อยอย่างผม ไปยังคนที่ blank ที่ไม่มีความเข้าใจก่อนนะ ทีนี้ไอ้เจ้า Front End นี่แหละตัวดี เนื่องจากว่า มันถูกประกอบไปด้วย Element ต่างๆมากมาย จากหน้ากระดาษเปล่าๆ เติมพื้นหลังเข้าไป เติมสีสันเข้าไป เติมหัวเรื่องเข้าไป เติมเนื้อหา เติมหัวข้อ เติมรูปภาพประกอบ ใส่ Link เชื่อมโยง บ้างเลยเถิดไปถึง เอากล่องมารับข้อมูลจากผู้ใช้ เพื่อเก็บข้อมูลต่างๆ

รูปภาพกระดาษเปล่า web blank

รูปภาพกระดาษเปล่า web blank

ภาพประกอบหน้าเว็บแบบมี Element full

ภาพประกอบหน้าเว็บแบบมี Element full

หน้าเว็บ Full ได้ยังไง

ในส่วนนี้ กว่าจะกลายมาเป็น หน้าตาแบบนี้ได้ มันไม่ใช่แค่ เออ…ตรงนี้ว่างนี่น่า เอากล่องอันนี้มาวางสิ รูปนั้นยังไม่มีที่วางเลย เอามาวางตรงนี้แล้วกัน มันไม่ใช่แบบนั้น แต่มันเกิดมาจาก การคิด การศึกษาลักษณะของผู้ใช้งาน ความเหมาะสมในการวาง ทิศทาง ลักษณะนิยม ส่วนใหญ่แล้วจะเป็นเรื่องของ ประสบการณ์ผู้ใช้ หรืออาจจะมีคนเรียกกันว่า UX Designer นั้นแหละ

แล้วใครเป็นคนวาด Wire frame 

คือคุยไปคุยมาดันพูดไปถึง UX Designer งั้นแปลว่าคนนี้คือ Front end ใช่ไหม เพราะเค้าเอาองค์ประกอบต่างๆมาวางหน้าเว็บ ผมว่าก็น่าจะยังไม่ใช่นะครับ เพราะถ้าเอาเฉพาะลงไปจริงๆ UX คงออกแบบกันแค่ “กรอบลวด” หรือเจ้า Wire frame นี่แหละครับ ที่เราได้เห็น แต่อย่าลืม!! ว่าเค้าไปคิดวิเคราะห์หาข้อมูลจากผู้ใช้ สร้างเรื่องราวในการ Design มาแล้ว กว่าจะได้เป็น กรอบลวด โล่งๆแบบนี้ ไม่ใช่ได้มาง่ายๆแบบไม่ได้คิดจากนั้นกระบวนการต่อไป คือเราจะเอารูปหรือข้อความจริงๆมาใส่แทนเพื่อให้หน้าเว็บดูมีชีวิตมากขึ้น ดูสื่อความหมายมากขึ้น อ้าว….ถ้า UX ไม่ใช่ Front end งั้นก็ต้องเป็นคนที่ใส่รูปลงไปในหน้าเว็บแน่ๆ เพราะเค้าทำให้กรอบลวด ดูเป็นเว็บขึ้นมาน่าจะเชื่อมต่อกับ User โดยตรง

Web Designer

เคยได้ยินคำนี้ไหมครับ คนนี้จะเป็นคนที่สานต่อจาก กรอบลวด Wire Frame มาเป็นรูปภาพ หรืองานกราฟิค โดยที่จะใช้โปรแกรมอย่าง Photoshop หรือ Sketch มาใส่รูป ให้ดูเหมือนหน้าเว็บจริง ตรงนี้ผมเห็นหลายคนเรียกเหมารวมไปว่า Front End Designer ก็แล้วแต่ครับ ก็ไม่น่าจะต้องงงอะไร เพราะก็ออกแบบส่วนหน้าตา ติดต่อผู้ใช้งานจริงๆ อ้าว….อ่านมาตั้งนาน แทนที่จะพูดถึง Front end developer กับไปพูดถึง front end designer ซะงั้น

ใครแปลงร่างรูปภาพที่ออกแบบเว็บให้เป็น Code 

ตรงนี้ พอเราได้รูปภาพจากทาง Designer มาแล้ว เราจะต้องเริ่ม กระบวนการเขียน Code ครับ โดย Code ที่เราจะเขียนนั้น มันจะเป็น Code ภาษา HTML, CSS, Javascript ซึ่งอาจจะประกอบไปด้วย Tool หรือ Framework ต่างๆมากมาย ก็แล้วแต่ครับ ว่าใครจะเลือกใช้อะไร แต่…. ผมว่าตรงนี้นะครับ เป็นคำที่เหมาะกับ front end developer จริงๆ (อย่าลืม!! นี่ความเห็นส่วนตัวนะครับ ทุกคนที่เห็นต่างสามารถเสนอแน่ะได้นะครับ)

ทำไมถึงคิดแบบนั้น

what-is-a-front-end-developer

what-is-a-front-end-developer

ทีแรกก็ไม่ได้คิดแบบนั้นหรอกครับ แต่พออ่านและทำงานมากขึ้นเรื่อยๆ ก็เลยเริ่มคิด 55 อันที่จริงมี Handbook หรือใครหลายๆคน พูดถึงกันไว้ในเน็ตครับ อย่างใน front end handbook ซึ่งเป็นคู่มือ การเขียน Front end ที่เหมาะสมก็พูดไว้แบบนั้น

เท่าที่พอจับใจความได้คือ “Front end มีหน้าที่เขียนโครงสร้าง ของเว็บไซต์ โดยการใช้ภาษา HTML, CSS, Javascript เพื่อสร้างส่วนติดต่อกับผู้ใช้งาน ผ่านทางเว็บ Browser ” ทีนี้ ถ้าสังเกตุดูแบบ เจาะจงลงไปอีกนิด เราจะพบว่า ภาษาที่อ้างเหล่านี้ เป็นเพียงการแสดง DOM, Element ต่างๆเท่านั้น ไม่ได้เกี่ยวข้องกับ การบันทึกข้อมูล การเชื่อมต่อฐานข้อมูล หรือการตั้งค่า Server

อะไรที่ติดต่อกับผู้ใช้

สิ่งที่จะติดต่อกับผู้ใช้งานคือ หน้าตา ข้อความ รูปภาพ สีสันต่างๆ แล้ว database ละ อันนั้นก็เห็นมีคำว่า Connect เหมือนกัน ไม่ใช่ครับ อันนั้นมันแม้จะเขียนได้ด้วย Javascript ในยุคสมัยนี้ แต่นั้นก็ปล่อยให้เป็นหน้าที่ของ back end develop ไปเถอะ ถ้าจะมองให้ง่ายๆขึ้น ให้นึกถึง HTML/CSS Template หรือ Themes ของเว็บไซต์นั้นแหละครับ แบบนี้นะชัดเลย ผู้ใช้จะต้องกดปุ่ม กรอกข้อมูล อ่านข้อมูล ดังนั้นตรงนี้เค้าต้องออกแบบไว้ แล้วกล่องเหล่านี้จะส่งค่าไปให้หลังบ้านหรือ Back end เพื่อเก็บข้อมูลหรือทำงาน ในส่วนของเค้าไป

งั้นหน้าเว็บคือหน้าที่ของ front end

แล้วถ้าเว็บนั้น มีส่วนของ Admin ที่จะต้องใช้งานละ มันก็ต้องเป็นหน้าที่ของ Back end ใช่ไหม ตรงนี้ผมว่าไม่ใช่นะ…. เรื่องของเรื่อง ก็คือ front end ทำหน้าที่สร้างส่วนติดต่อผู้ใช้ไง Admin เป็นคนใช้งานไหม เป็น User ไหม ถ้าคุณตอบว่า admin เป็น user ที่ใช้งานระบบ แล้วทำไม หน้า admin ถึงไม่ใช่หน้าที่ของ front end ละ มันก็คือ form รับข้อมูลเพื่อส่งไป บันทึกลงฐานข้อมูลไง แต่คุณสร้างแค่ สิ่งที่ designer เค้าออกแบบมาพอ ไม่ต้องไปสร้างฐานข้อมูล ไม่ต้องไปเขียนหลังบ้าน แค่ form พอ

 มาพูดถึง Back end Develop กันบ้าง

Back end คือใครเค้าคือคนที่รับหน้าที่เก็บข้อมูลทุกอย่างลงฐานข้อมูลและนำข้อมูลเหล่านั้น ออกมาแสดงตามกรอบที่ front end ทำเอาไว้ ทั้ง User ทั่วไปเห็นและทั้ง admin หรือจะเป็น user ระดับสิทธิไหนก็ตามแต่เครื่องมือหรือภาษาของเค้าคือ PHP, ASP, Ruby, Python, Java หรือยุคใหม่จะเป็น Node.js อะไรแบบนั้น

หน้าที่บางครั้งของ Back end หลายๆที่อาจจะเริ่มต้นจาก Set Server เพื่อเตรียมระบบ แล้วก็เอา Theme หรือ Template มาตัดเป็น View ในส่วนของ MVC ซึ่งอันที่จริงถ้า Front end ทำหน้าที่นี้ได้จะเยี่ยมมากเลย เขียนแค่ใน View นี่แหละที่เหลือ Controller กับ Model ปล่อยเป็นหน้าที่ของ Back เค้าไป CRUD ข้อมูลต่างๆ แล้วก็ไปต่อที่การเขียน Test ต่างๆให้ผ่าน ตรวจสอบระบบ optimization code เช็คด้านความปลอดภัยแก้แมลงหรือ Bug ทั้งหลายแล้วก็เอาระบบขึ้นใช้งานจริง

…แล้วคนทำ front end เค้าจะสร้าง form ได้ยังไง ในเมื่อเค้าไม่ได้เป็นคน ออกแบบฐานข้อมูล!!! ใครออกแบบฐานข้อมูล อันนี้มันเป็นหน้าที่ของ นักออกแบบฐานข้อมูล Database Designer ที่เค้าจะเข้ามา ออกแบบ ถ้าในบริษัทขนาดเล็กๆก็อาจจะใช้ SA  แทนกันไป

แล้ว Front end กับ Back end จะเข้าใจระบบเหมือนกันได้อย่างไร

เรื่องนี้ไม่ยากเลยครับ คือในเมื่อคุณอยู่บริษัทเดียวกัน คุณก็คุยกันสิครับ ประชุมหารือ เอาทุกคน ทุกฝ่ายในทีม มาประชุมกัน

UX: อ่อ…ประสบการณ์ผู้ใช้บอกว่า เมนูแบบนี้ ต้องออกมาเป็น Drop down list เท่านั้นนะ
Designer: ได้ๆ งั้นเดี๋ยวเราทำเป็น Drop down ลงมาพอเอาเมาส์ไปคลิกตามรูปนี้
Frontend: งั้นเราจะเขียน CSS ให้มันมี Link ออกมาหลังจากเอามาไป Hover มัน
Backend: งั้นข้อความและ url เราจะดึงออกมาจากฐานข้อมูลให้เอง

ดูเข้าใจง่ายขึ้นไหมครับ

ความเหมือนที่แตกต่าง

ทั้ง Front และ Back ต่างก็เขียน Code เหมือนกันครับ 555 แต่ต่างกันที่หน้าที่ของ Code ที่เขียนไงละ แต่อยากให้ลองดูภาพ Info ด้านล่างนี้ประกอบครับ

เครดิตรูปภาพจาก Backand.com

เครดิตรูปภาพจาก Backand.com

เรื่องของเรื่อง เครดิตภาพจาก vironit.com

เครดิตภาพจาก vironit.com

Full Stack คือใคร

แต่สมัยนี้คุณน่าจะได้ยินคำใหม่ๆอย่าง Full Stack Developer เอาง่ายๆแบบฉบับผมอีกแล้ว ก็คือคนที่สามารถเขียนได้หมดทั้ง HTML, CSS, Javascript, PHP, SQL, ASP, Ruby, Python แบบนั้นนะครับจบงานได้ด้วยตัวคนเดียว แต่ผมไม่สนับสนุนคนเก่งแบบนี้นะ ผมมองว่า ถ้าคุณแค่รู้จัก พอทำได้ แบบนี้ดีพอแล้ว แต่ถ้าจะเอาให้เก่ง ก็เก่งไปเลยในด้านใดด้านหนึ่งดีกว่าครับ

สุดท้าย ก่อนที่คุณจะเริ่มออกทะเลไปกับผมถึงไหนต่อไหน ฝากไว้ง่ายๆคือ หน้าตาของระบบหลังบ้าน หรือที่เรียกกันติดปากว่า Backend ที่เจ้าหน้าที่หรือพนักงานที่ดูแลหรือ Admin ต้องเป็นคนใช้งาน มันคือ Front end อย่าไปยึดว่า มันคือหลังบ้าน มันต้องเป็นของ backend แน่นอน โธ่……

อ้างอิง

Wikipedia Front-end web development

Front end handbook