ความหมายของการเป็น Front-end Developer ในปี 2020 (และอื่น ๆ )

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

​​"ส่วนหน้า" โดยพื้นฐานแล้วหมายถึงเว็บเบราว์เซอร์ ฉันคิดว่าตัวเองเป็นนักพัฒนาซอฟต์แวร์ส่วนหน้า และฉันจะไม่เกลียดเลยถ้าคุณเรียกฉันว่านักพัฒนาเว็บเบราว์เซอร์ แต่นั่นอาจจะไม่เกิดขึ้น (และดูเหมือนว่าคุณสร้างเว็บเบราว์เซอร์) ในฐานะนักพัฒนาส่วนหน้า คุณทำงานอย่างใกล้ชิดกับเว็บเบราว์เซอร์และเขียนโค้ดที่ทำงานในนั้น โดยเฉพาะ HTML, CSS, JavaScript และภาษาอื่นๆ ที่เว็บเบราว์เซอร์พูด (เช่น รูปแบบสื่อ เช่น SVG) หรือบางทีอาจอธิบายโดยทั่วไปมากกว่านั้น โค้ดที่ได้รับการประมวลผลเป็นภาษาที่เบราว์เซอร์เข้าใจในท้ายที่สุด นั่นคืออาณาเขตของคุณในฐานะนักพัฒนาส่วนหน้า!

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

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

​​หากคุณเพิ่งจบการศึกษาจาก Bootcamp การเขียนโค้ดและประสบการณ์ในการสร้างเว็บไซต์ค่อนข้างแคบและใหม่ คุณอาจได้รับการให้อภัยหากคุณคิดว่าการพัฒนาส่วนหน้าเป็น "สิ่งที่ตอบสนอง" และการพัฒนาส่วนหลังเป็น "โหนด" สิ่งของ” หรือ “สิ่งของ Python” เช่นเดียวกับรสชาติที่ร้อนแรงที่สุดในปัจจุบัน คุณไม่ผิดเช่นกัน โดยทั่วไปแล้ว React จะใช้เป็นเฟรมเวิร์กส่วนหน้า (แท้จริงแล้วคือ JavaScript ที่ทำงานในเบราว์เซอร์) Node และ Python เป็นตัวอย่างของภาษาที่ไม่ได้ใช้งานจริงในเว็บเบราว์เซอร์ มันถูกสร้างขึ้นเพื่อทำงานบนเว็บเซิร์ฟเวอร์ (เอ่อ คอมพิวเตอร์)

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

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

พวกเขาทั้งคู่อาจจะถูกต้อง ตราบใดที่ไม่มีใครน่ารังเกียจ ก็เป็นส่วนหนึ่งของกระแส

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

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

​​ในขณะที่ "ส่วนหน้า" ยังคงเป็นเพียงเบราว์เซอร์ ภาษาของเบราว์เซอร์, HTML, CSS และ JavaScript ยังคงเป็นเทคโนโลยีหลักที่ใช้งานได้ ภาษาเหล่านั้นมีวิวัฒนาการ และเบราว์เซอร์เองก็เช่นกัน แต่ช้ากว่า พวกเขาทำสิ่งที่ตรงกันข้ามกับสโลแกนโปรดของ Silicon Valley นั่นคือ เคลื่อนไหวให้เร็วและทำลายสิ่งต่างๆ พวกมันเคลื่อนไหวช้าและแทบไม่มีอะไรแตกหักเลย

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

คุณ ทำอะไร ในฐานะนักพัฒนาส่วนหน้า?

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

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

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

​​การพัฒนาส่วนหน้าในปัจจุบันอาจรวมถึง:

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

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

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

โชคดี!

อะไรต่อไป: ทำไม Chris Coyier เลือก Local และ Flywheel เพื่อขับเคลื่อนเว็บไซต์ของเขา

เรียนรู้วิธีที่ Chris ใช้ Local และ Flywheel เพื่อยกระดับไซต์ของเขาไปอีกระดับ ดูว่าฟีเจอร์โปรดของเขาคืออะไร ใช้ Flywheel ในการโยกย้ายไซต์ได้อย่างไร (ฟรี!) และอื่นๆ อีกมากมาย! คลิกที่นี่เพื่อเรียนรู้เพิ่มเติม