คำว่า 'Front-End' ตรงกันกับ 'ฝั่งไคลเอ็นต์' หรือไม่ ถ้าเป็นเช่นนั้นเป็นเช่นนี้เสมอหรือไม่

ในฐานะนักพัฒนาเว็บที่ค่อนข้างใหม่ (เรียนรู้ด้วยตนเอง) ฉันเคยได้ยินคำว่าfront-end , ฝั่งไคลเอ็นต์ , back-endและฝั่งเซิร์ฟเวอร์ค่อนข้างบ่อย สำหรับฉัน front-end และ back-end นั้นมีความหมายเหมือนกันกับฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์ตามลำดับ

อย่างไรก็ตามในขณะที่ฉันเริ่มทำงานกับกรอบ MVC เช่น CodeIgniter ฉันได้เจออินสแตนซ์ของการอ้างอิงถึงอะไรก็ตามที่ผู้ใช้เห็น (โดยรวมถึงโค้ดฝั่งเซิร์ฟเวอร์) ในขณะที่แบ็คเอนด์ได้อ้างถึงสิ่งใด ผู้ใช้ปลายทางไม่เห็น (รวมถึง CMS) สำหรับฉันฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์นั้นมีความหมายที่เป็นรูปธรรมมากขึ้น พวกเขามีเส้นที่แตกต่างกันมากแยกพวกเขา ส่วนหน้าและส่วนหลังในทางกลับกันอย่าทำเช่นนั้น

ในการสนทนาฉันจำได้ว่ามีนักพัฒนาเว็บคนอื่นเขาเรียก CodeIgniter (อย่างครบถ้วน) ว่าเป็น front-end และสิ่งนี้ทำให้ฉันสับสน ฉันไม่แน่ใจว่าจะแก้ไขให้ถูกต้องและพูดว่า CodeIgniter เป็นส่วนท้ายของฉันหรือถ้าคำจำกัดความของคำศัพท์ทั้งสองนั้นผิดไปทั้งหมด

การค้นหาคำจำกัดความของ front-end-back-end ทำให้ฉันสับสนมากขึ้นในบางประเด็นแม้ว่าพวกเขาจะอธิบายบางสิ่ง ฉันแค่อยากจะรู้ว่าเส้นไหนถูกลากระหว่างคำศัพท์ทั้งสี่นี้และวิธีที่พวกเขารวมเข้าด้วยกันในบริบทของการพัฒนาเว็บ (โดยเฉพาะในกองไฟ LAMP)

ฉันไม่เชื่อว่ามีคำจำกัดความที่เป็นทางการสำหรับคำเหล่านั้นและตามที่คุณสังเกตว่ามีการทับซ้อนกันในบางกรณี

front-endและclient-sideทับซ้อนกัน
server-sideและback-endยังทับซ้อนกัน

ถ้าฉันจะแยกเส้นผมฉันจะเสนอขอบเขตคร่าวๆเหล่านี้:

• client-sideเป็นแอปพลิเคชันที่ทำงานที่คอมพิวเตอร์ของผู้ใช้ อาจเป็นแอปพลิเคชันแบบสแตนด์อโลน (บ่อยกว่า) หรืออาจอ้างถึงส่วนต่อประสานกับเว็บเบราว์เซอร์ (โอกาสน้อยกว่า)
• front-endยังเผชิญกับผู้ใช้ปลายทางและโดยทั่วไปแล้วจะทำงานในส่วนต่อประสานกับเว็บเบราว์เซอร์ front-endฉันไม่เคยได้ยินของลูกค้าหนาถูกเรียกว่าเป็น
• back-endอ้างถึงกระบวนการและบริการที่กำลังทำงานบนเซิร์ฟเวอร์อื่นหรือในพื้นหลังของคอมพิวเตอร์ของผู้ใช้ บ่อยกว่านั้นมันหมายถึงกระบวนการที่ไม่ได้อยู่ในคอมพิวเตอร์ของผู้ใช้ปลายทาง แต่กุญแจดังที่คุณกล่าวถึงก็คือผู้ใช้ปลายทางไม่จำเป็นต้องรับรู้ถึงกระบวนการที่กำลังทำงานอยู่
• server-sideเป็นส่วนเสริมของback-endแต่ตอกย้ำความจริงที่ว่ากระบวนการทำงานที่อื่นและไม่ได้อยู่ในคอมพิวเตอร์ของผู้ใช้

จากตัวอย่างและเพื่อเน้นความสับสนระหว่างคำศัพท์ฉันจะใช้ Minecraft เป็นตัวอย่าง

Minecraft มี

• client-side แอ็พพลิเคชันเมื่อคุณรันไฟล์ jar แบบโลคัลด้วย JVM ของคุณเอง
• front-end หากคุณเลือกที่จะรันแอปพลิเคชันไคลเอนต์ในเว็บเบราว์เซอร์ของคุณ
• back-end กระบวนการที่สามารถทำงานในเครื่องของคุณถ้าคุณอยู่ในโหมดสแตนด์อะโลน
• server-side ดำเนินการถ้าคุณเลือกที่จะเข้าสู่เซิร์ฟเวอร์ที่โฮสต์แอปพลิเคชันเซิร์ฟเวอร์ Minecraft

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

คำว่า 'Front-End' ตรงกันกับ 'ฝั่งไคลเอ็นต์' หรือไม่

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

ถ้าเป็นเช่นนั้นเป็นเช่นนี้เสมอหรือไม่

ในโลกของเว็บฉันจะบอกว่าใช่ ในอาณาจักรอื่นฉันจะบอกว่าไม่มีคำอธิบายตามคำจำกัดความคร่าวๆที่ฉันเสนอ

ฝั่งเซิร์ฟเวอร์ทำงานบนเซิร์ฟเวอร์ ฝั่งไคลเอ็นต์ทำงานบนไคลเอนต์ แบ็คเอนด์กำลังทำการบดอัดข้อมูล ฟรอนต์เอนด์กำลังแสดงมัน

ดูที่หน้าเว็บนี้ การดึงความคิดเห็นทั้งหมดจากฐานข้อมูลนั้นเป็นงานด้านเซิร์ฟเวอร์และส่วนหลัง การวางข้อมูลนั้นในเทมเพลตคือการทำงานส่วนหน้าและฝั่งเซิร์ฟเวอร์ วิดเจ็ตการโหวต AJAX และกล่องป้อนข้อความแฟนซีเป็นส่วนหน้า, ฝั่งไคลเอ็นต์

ฉันมักจะพบว่าการใช้ฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์เพื่ออธิบายการพัฒนา / ผู้พัฒนานั้นคลุมเครือน้อยกว่า ส่วนนั้นของฝั่งไคลเอ็นต์ที่เรากำลังเล่นกล / จัดรูปแบบข้อมูลสามารถมองได้ว่าเป็นองค์ประกอบส่วนหลัง ด้านพลิกมี templating ทั้งหมดที่มีแนวโน้มที่จะเกิดขึ้นในส่วนหลังซึ่งเป็น "สำหรับส่วนหน้า" มีแนวโน้มที่จะส่งผลให้คนพูดถึงพวกเขาในฐานะส่วนหน้า Java หรือการพัฒนา C # มันหายาก แต่ฉันเคยเห็นมันในรายละเอียดงาน

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

คำถามนี้ค่อนข้างเก่า แต่ให้ฉันเพิ่ม 2c ของฉัน:

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

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

PS: เอาละบางทีฉันควรเปลี่ยนชื่อเล่นเป็น "client_dev" ทันที;)

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

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

ในภาพต่อไปนี้คุณสามารถเห็นเทคโนโลยี / แนวความคิดทั่วไปและวิธีการที่พวกเขาเข้ากับ Quadrants (front end, back end) / (ฝั่งไคลเอ็นต์ฝั่งเซิร์ฟเวอร์)

Front End และ Back End Developers

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

และแม้ว่าฉันจะใส่เทคโนโลยีเช่นฐานข้อมูล Web SQL และAPI ฐานข้อมูลแบบดัชนีใน Quadrant "ฝั่งไคลเอนต์" บทบาทที่มักจะรู้เกี่ยวกับเรื่องนี้คือบทบาทนักพัฒนาส่วนหน้า

• ผู้พัฒนาส่วนหน้าควรรู้เกี่ยวกับ HTML, CSS, DOM และความสามารถของเบราว์เซอร์ทั่วไป (เช่นcaniuse ) โดยทั่วไปแล้วพวกเขาจะรู้ว่า jQuery หรือ React แม้ว่าจะเป็นแบ็กเอนด์ตามคำจำกัดความของฉัน แต่ฉันคาดหวังว่านักพัฒนาส่วนหน้ารู้เกี่ยวกับที่เก็บข้อมูลฝั่งไคลเอ็นต์
• ผู้พัฒนาแบ็กเอนด์ควรรู้เกี่ยวกับเว็บเซิร์ฟเวอร์เช่น nginx, gunicorn, Apache หรือ node.js พวกเขาควรรู้ฐานข้อมูล SQL อย่างน้อยหนึ่งฐานข้อมูล (Postgres, MariaDB / MySQL, ... ), ที่เก็บคีย์ - ค่า (Redis), API develpment (REST และ GraphQL) LAMPเป็นสแต็คทั่วไปเมื่อไม่นานมานี้ ฉันจะไม่คาดหวังว่านักพัฒนาแบ็กเอนด์จะรู้อะไรเกี่ยวกับเบราว์เซอร์!

UI Designer กับ Front End Developer

อีกสองบทบาทคือผู้ออกแบบ UI และผู้พัฒนาส่วนหน้า ดังนั้นสิ่งหนึ่งที่แตกต่างคือหนึ่งคือนักออกแบบและหนึ่งคือนักพัฒนา

วัตถุประสงค์:

• นักออกแบบ UI ร่างประสบการณ์ผู้ใช้
• Front End Developer ช่วยให้แน่ใจว่ามันจะเป็นไปตามที่คาดไว้

เครื่องมือ

• นักออกแบบ UI ส่วนใหญ่ใช้ Adobe Photoshop / Illustrator / Sketch / Balsamiq / Invision
• ผู้พัฒนา Front End ใช้ React, Vue, Angular

API: REST และ GraphQL

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