Front End VS Back End

Frontend vs. Backend

By Josh Long (blog.teamtreehouse)

“ผมไม่พูดภาษาพวกคุณ” นั้นคือคำทักทายจากพ่อหนุ่ม แต่ผม จะให้ภาพรวมคร่าวๆเกี่ยวกับเทคโนโลยีในอุตสาหกรรมของเรา พวกหัวข้อต่างๆเหล่านี้จะช่วยสื่อสารกับคุณและช่วยให้สามารถสร้างผลิตภัณฑ์ที่ดีได้และมีประสิทธิภาพอย่างมากมาย

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

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

ความแตกต่างระหว่างการออกแบบ กับ การพัฒนา การถกเถียงทำให้เกิดเป็นประเด็น front-end กับ back-end ขึ้นมา เริ่มจาก front-end ก่อน

Front-end (หรือหน้าบ้าน)

เมื่อเราพูดถึง “Front End” ของเว็บ จริงๆแล้วเรากำลังพูดถึงในส่วนของผู้ใช่งานที่เห็นหน้าตาความสวยงามและปฏิสัมพันธ์ของผู้ใช้งานกับเว็บ

หน้าเว็บจะประกอบด้วย สองส่วนคือการออกแบบ และ การพัฒนาหน้าบ้าน

ในอดีตเมื่อมีคนพูดคุยเกี่ยวกับการพัฒนาระบบมันมักจะอ้างถึง backend แต่ในช่วงไม่กี่ปีที่ผ่านมามีความจำเป็นต้องแยกระหว่างนักออกแบบหรือ Designer คนที่ทำงานกับโปรแกรม Photoshop และกับคนที่สามารถใช้ HTML และ CSS  ได้ มากไปกว่านั้นคือนักออกแบบสามารถเขียนภาษา JavaScript และ jQuery

ดังนั้น ตอนนี้เมื่อเราพูดถึงคำว่า “web design” จริงๆแล้วเรากำลังพูดถึงคนที่ทำงานร่วมกับ Photoshop และ HTML, CSS, JavaScript หรือ jQuery อยู่ก็เป็นได้

ทุกสิ่งที่คุณเห็นเมื่อใช้เว็บ คือการรวม HTML, CSS และ JavaScript ทั้งหมดที่ถูกควบคุมโดยเบราว์เซอร์ของคอมพิวเตอร์ของคุณ และจะรวมถึงสิ่งต่างๆ เช่นแบบอักษร เมนูแบบเลื่อนลง

ปุ่มเปลี่ยนภาษา แถบเลื่อนด้านข้าง ฯลฯ เพื่อให้ทุกอย่างทำงานได้จริง  และเพื่อเก็บข้อมูลที่คุณใส่ลงไปในหน้า เราจำเป็นต้องใช้เทคโนโลยีเพื่อให้เว็บทำงานได้สมบูรณ์  เราจะต้องป้อนข้อมูลทั้งหมดลงสู่ระบบหลังบ้านหรือ backend

Back-end  (หรือหลังบ้าน)

Backend มักจะประกอบด้วยสามส่วน: เซิร์ฟเวอร์ (server) แอปพลิเคชัน (application) และฐานข้อมูล (database) หากคุณจองเที่ยวบินหรือซื้อตั๋วคอนเสิร์ตคุณมักจะเปิดเว็บไซต์และโต้ตอบกับส่วนหน้าบ้าน (Front-end) เมื่อคุณป้อนข้อมูลนั้นแล้วแอปพลิเคชันจะจัดเก็บไว้ในฐานข้อมูลที่สร้างขึ้นบนเซิร์ฟเวอร์ คิดง่ายๆว่าฐานข้อมูลเป็นสเปรดชีต Excel ขนาดใหญ่บนคอมพิวเตอร์ แต่คอมพิวเตอร์ในที่นี้คือ (เซิร์ฟเวอร์) ซึ่งข้อมูลของคุณอาจจะเก็บไว้ที่ไหนสักแห่งในบนโลกขึ้นอยู่กับผู้ให้บริการ

ข้อมูลทั้งหมดนั้นยังคงอยู่บนเซิร์ฟเวอร์ดังนั้นเมื่อคุณกลับเข้าสู่แอปพลิเคชันเพื่อพิมพ์ตั๋วของคุณข้อมูลทั้งหมดยังคงอยู่ในบัญชีของคุณ

เราจะเรียกบุคคลที่สร้างเทคโนโลยีนี้ทั้งหมดเพื่อให้ระบบทำงานร่วมกันได้ ว่า “backend developer” ซึ่งคนเหล่านี้ต้องมีทักษะการเขียนภาษาโปรแกรมมิ่งได้แก่  PHP, Ruby, Python, และอื่น ๆ พวกเขามักจะใช้ framework เพื่อเป็นตัวช่วยในทำงาน อย่างที่ดังๆก็มี Ruby on Rails, Cake PHP และ Code Igniter สิ่งพวกนี้ทำให้พวกเขาทำงานเร็วขึ้นและไวขึ้น

ผู้เชี่ยวชาญด้านเว็บหลายคนที่เพิ่งเข้ามาในวงการอาจเคยได้ยินคนจำนวนมากพูดถึง WordPress ซึ่ง WordPress เป็นตัวอย่างที่ดีของส่วนหน้าบ้านและส่วนหลังบ้านที่ทำงานร่วมกันได้ เพราะ WordPress เป็นเฟรมเวิร์กที่มาจากภาษา PHP ที่คุณต้องติดตั้งบนเซิร์ฟเวอร์ของคุณด้วยฐานข้อมูล จากนั้นนักออกแบบจะปรับแต่งรูปลักษณ์และฟังก์ชันการทำงานของไซต์ WordPress โดยใช้ CSS, jQuery และ JavaScript

สรุปเลยละกัน

หวังว่าสิ่งนี้จะช่วยให้คุณหลายคนเข้าใจได้อย่างชัดเจนเมื่อมีคนพูดถึงส่วนหน้าบ้านและส่วนหลังบ้านของเว็บ รวมถึงรู้ว่าการออกแบบหน้าเว็บซึ่งต่างจากการพัฒนาเว็บยังไง

เส้นแบ่งระหว่างการออกแบบและการพัฒนาดูเหมือนจะเบลอมากขึ้นทุกวันเพราะมีการพัฒนาเครื่องที่ช่วยการทำเว็บให้ง่ายขึ้น แต่โดยพื้นฐานแล้วพวกมันก็ยังแยกออกจากกันอยู่ดี

เพื่อให้ทุกคนเข้าใจในการออกแบบและการพัฒนาเว็บที่กำลังพัฒนาอยู่ ให้เป็นเว็บที่ทำงานได้อย่างสมบูรณ์ มันเป็นสิ่งสำคัญที่เราจะต้องทราบอย่างว่าส่วนใดของเว็บที่เราทำงานด้วยอยู่

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

ขอบคุณครับ

บทความแปลจากเว็บไซต์: blog.teamtreehouse

หากคุณเป็น back-end อยู่แล้ว อยากหาความท้าทายใหม่ๆ หรือ front-end ที่อยากรู้ react-native สำหรับทำ mobile อยากลับคมทักษะตัวเอง หรือยังไม่รู้ว่าตัวเองจะไปทางไหนดี วันนี้ทางสมาคมโปรแกรมเมอร์จึงจัดหลักสูตร ที่พร้อมให้คุณหาคำตอบ และเติมเต็มสิ่งที่ขาดกับ

 

Frontend Boot Camp with React and React Native

เรียนรู้การสร้าง Website ด้วย React
เรียนรู้การสร้าง Mobile Application แบบ Cross Platform ด้วย React Native
รายละเอียดเพิ่มเติมและสมัครที่นี่
หลักสูตรยาว 15 ครั้ง รวมเวลากว่า 90 ชั่วโมง จบมาทำงานได้จริง
ราคาคุ้มค่าที่สุด ตอนนี้มี promotion มา 2 คนลดเพิ่ม 10% 3 คนลดเพิ่ม 15%
สามารถขอ code ส่วนลดได้ที่ page LEAN upskillFrontend