Front End Developer vs Back End Developer - ความหมายและความหมายในทางปฏิบัติ

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

  • หลายชั้นของการพัฒนา
  • แต่เราไม่ได้เต็มสแต็กทั้งหมด
  • อะไรคือความแตกต่างระหว่าง Front End Development และ Back End Development?
  • Front End Development คืออะไร?
  • Back End Development คืออะไร?
  • ที่สิ่งต่างๆเลือนลาง
  • แหล่งเรียนรู้

หลายชั้นของการพัฒนา

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

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

นักพัฒนา“ Fullstack” pic.twitter.com/yfymQmJJgq

- Brian Holt (@holtbt) 24 มีนาคม 2018

แต่เราไม่ได้เต็มสแต็กทั้งหมด

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

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

อะไรคือความแตกต่างระหว่าง Front End Development และ Back End Development?

แม้ว่าคุณจะเป็นนักพัฒนาสแต็กเต็มรูปแบบ แต่ก็ไม่ได้หมายความว่าจะไม่มีการแบ่งส่วนความรับผิดชอบ

สิ่งเหล่านี้มีลักษณะอย่างไร?

Front End Development คืออะไร?

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

การพัฒนาส่วนหน้าโดยทั่วไปมีลักษณะอย่างไร

ปัจจุบัน Javascript ใช้กฎของเว็บส่วนหน้า แต่ก็ไม่ได้เป็นเช่นนั้นเสมอไป แม้ว่าจะสามารถใช้เพื่อเพิ่มการโต้ตอบเล็กน้อยให้กับไซต์ได้ แต่โดยทั่วไปแล้วส่วนหน้าจะแสดงผลโดยใช้ภาษาเทมเพลตฝั่งเซิร์ฟเวอร์เช่น PHP ที่ขับเคลื่อนด้วยเฟรมเวิร์กและ Template Toolkit (Perl)

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

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

เครื่องมือส่วนหน้าแบบดั้งเดิมบางอย่าง ได้แก่ :

  • ไลบรารีเช่น jQuery หรือ MooTools
  • กรอบเว็บไซต์เช่น Wordpress
  • CSS ธรรมดา
  • การใช้องค์ประกอบตารางอย่างมากมาย

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

การพัฒนาส่วนหน้าตอนนี้หน้าตาเป็นอย่างไร

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

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

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

เครื่องมือส่วนหน้าบางส่วนที่ใช้กันทั่วไปและได้รับความนิยมเพิ่มขึ้น ได้แก่ :

  • กรอบงาน UI เช่น React หรือ Vue
  • เว็บเฟรมเวิร์กเช่น Gatsby
  • คอมไพเลอร์เช่น Babel
  • Bundlers เช่น Webpack
  • เครื่องมือ CSS เช่น Sass

แต่ APIs เหล่านั้นไม่ว่าจะเป็นคนที่เราต้องจ่ายสำหรับตัวเองหรือสร้างความต้องการที่จะสร้างขึ้นที่ใดที่หนึ่ง นั่นคือจุดที่ด้านหลังเข้ามา

Back End Development คืออะไร?

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

การพัฒนา Back End ตามเนื้อผ้ามีลักษณะอย่างไร

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

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

เครื่องมือแบ็คเอนด์แบบดั้งเดิมบางอย่าง ได้แก่ :

  • เซิร์ฟเวอร์ที่มีการจัดการในองค์กรหรือจากระยะไกลเช่น Rackspace
  • เซิร์ฟเวอร์ HTTP โดยใช้ Apache
  • ฐานข้อมูลเช่น MySQL
  • ภาษาฝั่งเซิร์ฟเวอร์เช่น PHP หรือ Perl
  • กรอบการใช้งานเช่น Ruby on Rails

การพัฒนา Back End ตอนนี้เป็นอย่างไร?

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

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

แต่วิธีการทำงานของเซิร์ฟเวอร์อาจแตกต่างกันอย่างสิ้นเชิง ในขณะที่ก่อนหน้านี้เราอาจเรียกใช้ python บนเซิร์ฟเวอร์ที่มีการจัดการของเราเอง (เรายังทำได้) ตอนนี้เราสามารถใช้ฟังก์ชันแบบไร้เซิร์ฟเวอร์ด้วยเครื่องมือเช่น AWS Lambda ที่ทำให้วิธีจัดการโค้ดง่ายขึ้น

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

เครื่องมือส่วนหลังบางส่วนที่พบได้ทั่วไปและได้รับความนิยมเพิ่มขึ้น ได้แก่ :

  • เซิร์ฟเวอร์คลาวด์เช่น AWS EC2
  • บริการแบบไร้เซิร์ฟเวอร์เช่น AWS Lambda
  • ฐานข้อมูล NoSQL เช่น MongoDB
  • ภาษาเช่น Python หรือ javascript ผ่าน NodeJS
  • เฟรมเวิร์กแอปพลิเคชันบนเว็บเช่น Serverless Framework

ที่สิ่งต่างๆเลือนลาง

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

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

แต่มันก็เริ่มมาเต็มวงซึ่งตอนนี้คุณจะเห็นระบบที่สร้าง API ถัดจากส่วนหน้าคล้ายกับที่คุณอาจเห็นในสแต็กแบบเดิม

ส่วนหน้าและส่วนหลัง

ไม่ว่ากองไหนก็มักจะมีการแยกข้อกังวล UI และการโต้ตอบทั้งหมดไม่ว่าจะแสดงผลบนเซิร์ฟเวอร์หรือในเบราว์เซอร์เป็นสิ่งที่ทำให้ส่วนหน้าเป็นส่วนหน้าและข้อมูลและตรรกะทางธุรกิจไม่ว่าจะมาจากเซิร์ฟเวอร์ในตู้ของ บริษัท หรือฟังก์ชันที่มีการจัดการก็ตาม ทำให้ด้านหลังสิ้นสุดด้านหลัง

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

แหล่งเรียนรู้

ส่วนหน้า

  • freecodecamp.org การรับรองการออกแบบเว็บไซต์ที่ตอบสนอง (freecodecamp.org)
  • Javascript สำหรับผู้เริ่มต้น (beginnerjavascript.com - Wes Bos)
  • React Tutorial สำหรับมือใหม่ (youtube.com - การเขียนโปรแกรมด้วย Mosh)
  • Front End Masters (frontendmasters.com)

แบ็คเอนด์

  • freecodecamp.org API และการรับรองไมโครเซอร์วิส (freecodecamp.org)
  • เริ่มต้นง่ายๆแบบไร้เซิร์ฟเวอร์ (kentcdodds.com)
  • AWS Certified Cloud Practitioner Training 2019 - หลักสูตรวิดีโอฟรี 4 ชั่วโมง (freecodecamp.org)
  • บทนำสู่วิทยาการคอมพิวเตอร์ของ CS50 (edx.org)

ทั้งหมดข้างต้น

  • วิธีการเป็นนักพัฒนาเว็บแบบ Full Stack ในปี 2020 (colbyfayock.com)
  • Egghead.io (egghead.io)
  • 100 วันของรหัส (100daysofcode.com)
  • Bootcamp สำหรับนักพัฒนาเว็บ (udemy.com - Colt Steele)

ติดตามฉันสำหรับ Javascript, UX และสิ่งที่น่าสนใจอื่น ๆ !

  • เหรอ? ติดตามฉันบนทวิตเตอร์
  • ? ️สมัครสมาชิก Youtube ของฉัน
  • ✉️ลงทะเบียนเพื่อรับจดหมายข่าวของฉัน