Web Notes
1.0.0
อ่านออนไลน์ >>
รหัสกรณี·เอกสารอ้างอิง
การพัฒนาเว็บเป็นเรื่องง่ายที่จะเริ่มต้น แต่ยากที่จะรู้จัก มันถูกแบ่งออกเป็นขั้นตอนเช่นแวบแรกที่ประตูเข้าห้องและรวมกระบวนการทั้งหมดเข้าด้วยกัน หากคุณกำลังอ่านบทความของผู้แต่งเป็นครั้งแรกขอแนะนำให้ไปที่เส้นทางทางเทคนิคของหมีบางอย่างเพื่อความเข้าใจที่ครอบคลุม ในซีรีส์นี้ผู้เขียนมุ่งมั่นที่จะสำรวจวิธีปรับปรุงประสิทธิภาพการวิจัยและพัฒนาของทีมอย่างมีประสิทธิภาพและการส่งมอบที่สมบูรณ์ในเวลาที่เหมาะสมและน่าเชื่อถือตลอดวงจรชีวิตของการทำซ้ำผลิตภัณฑ์ ในขณะเดียวกันก็สามารถควบคุมความซับซ้อนโดยรวมของระบบและเพิ่มประสิทธิภาพและประสบการณ์ของระบบอย่างต่อเนื่อง
เมื่อมองย้อนกลับไปถึงการเปลี่ยนแปลงที่ยอดเยี่ยมในเทคโนโลยีเว็บและนิเวศวิทยาในช่วงทศวรรษที่ผ่านมาเราได้สัมผัสกับการเปลี่ยนแปลงที่น่าตื่นเต้นและมักจะหายไปจากความสับสนในการเลือก ด้วยนวัตกรรมของรุ่นเบราว์เซอร์และการปรับปรุงประสิทธิภาพของฮาร์ดแวร์การพัฒนาส่วนหน้าเว็บได้เข้าสู่ยุคที่รวดเร็วและเปลี่ยนแปลงตลอดเวลา กรอบการพัฒนาส่วนหน้านับไม่ถ้วนและระบบทางเทคนิคกำลังแข่งขันกันเพื่อความงามซึ่งทำให้นักพัฒนาสับสนและแม้กระทั่งการสูญเสีย โดยเฉพาะอย่างยิ่งกับการเกิดขึ้นของกรอบการทำงานส่วนหน้าเว็บที่ทันสมัย (เชิงมุม, ตอบสนอง, vue.js), การปรับปรุงคุณสมบัติทางภาษาเช่นจาวาสคริปต์, CSS, HTML ฯลฯ และแนวคิดเชิงทฤษฎีที่เสนอเช่นวิศวกรรม สถานะ. สำหรับวิศวกรส่วนหน้าสมัยใหม่ที่เรียกว่าพวกเขามักจะต้องใช้ความรู้ระดับมืออาชีพจำนวนมากเพื่อแก้ปัญหาทางวิศวกรรมรวมถึงวิธีการทำให้โครงการเป็นโมดูลวิธีการออกแบบการโต้ตอบระหว่างส่วนประกอบวิธีการปรับปรุงความสามารถในการนำกลับมาใช้ใหม่วิธีการปรับปรุงประสิทธิภาพการบรรจุ ไม่เหมือนก่อนหน้านี้พวกเขาต้องการเฉพาะ HTML/CSS/JS รูทีนเพื่อพัฒนาหน้าคงที่
โดยรวมแล้วระบบนิเวศการเขียนโปรแกรมใด ๆ จะต้องผ่านสามขั้นตอนก่อนอื่นช่วงเวลาเดิม เนื่องจากจำเป็นต้องขยายภาษาและ API พื้นฐานขั้นตอนนี้จะให้กำเนิดเครื่องมือเสริมจำนวนมาก ในขั้นตอนที่สองเนื่องจากสิ่งต่าง ๆ ที่เกิดขึ้นมีความซับซ้อนมากขึ้นจำเป็นต้องมีองค์กรมากขึ้นและมีการแนะนำรูปแบบการออกแบบจำนวนมากและรูปแบบสถาปัตยกรรม ขั้นตอนนี้จะให้กำเนิดเฟรมเวิร์กจำนวนมาก ในขั้นตอนที่สามด้วยความซับซ้อนที่เพิ่มขึ้นของความต้องการและการขยายตัวของทีมมันเข้าสู่เวทีวิศวกรรมและ MVC ลำดับชั้น MVP, MVVM ฯลฯ การพัฒนาภาพการทดสอบอัตโนมัติและระบบการทำงานร่วมกันของทีมเกิดขึ้น
ที่น่าสนใจเมื่อเรายืนอยู่ที่จุดต่าง ๆ ในเวลาการแบ่งของทั้งสามขั้นตอนนี้ก็ไม่สอดคล้องกันเช่นกัน ตามความเข้าใจในปัจจุบันของผู้เขียนมันถูกแบ่งออกเป็นสามขั้นตอนที่แตกต่างกัน: การแสดงผลแม่แบบการแยกส่วนหน้าและแอปพลิเคชันหน้าเดียววิศวกรรมและด้านหน้าขนาดเล็กส่วนหน้าขนาดใหญ่และเซิร์ฟเวอร์ไม่มี
แน่นอนว่าทุกขั้นตอนเล็ก ๆ จะมาพร้อมกับการเกิดขึ้นของกรอบใหม่และเครื่องมือใหม่:
การพัฒนาส่วนหน้าเว็บสามารถย้อนกลับไปที่การกล่าวถึงในที่สาธารณะของ Tim Berners-Lee ในคำอธิบาย HTML ในปี 1991 และจากนั้น W3C ได้เปิดตัวมาตรฐาน HTML4 ในปี 1999 ขั้นตอนนี้เป็นสถาปัตยกรรม B/S ส่วนใหญ่และไม่มีแนวคิดการพัฒนาส่วนหน้าที่เรียกว่า ในเวลานี้มันเป็นหน้าคงที่ส่วนใหญ่ขึ้นอยู่กับการแสดงผลแม่แบบ สิ่งสำคัญคือการเขียนเทมเพลตแบบไดนามิกผ่าน JSP, PHP และเทคโนโลยีอื่น ๆ จากนั้นแยกเทมเพลตลงในไฟล์ HTML ผ่านเว็บเซิร์ฟเวอร์ เบราว์เซอร์มีหน้าที่เฉพาะในการแสดงผลไฟล์ HTML เหล่านี้เท่านั้น ไม่มีการแบ่งงานระหว่างด้านหน้าและด้านหลังในขั้นตอนนี้และโดยปกติแล้ววิศวกรปลายด้านหลังจะเขียนหน้าส่วนหน้า
ในอีกไม่กี่ปีข้างหน้าด้วยการแนะนำมาตรฐานสถาปัตยกรรมเช่นเทคโนโลยี Ajax และการพักผ่อนแนวคิดของการแยกส่วนหน้าและลูกค้าที่ร่ำรวยได้รับการยอมรับมากขึ้น เราจำเป็นต้องขยายภาษาและ API พื้นฐาน ในขั้นตอนนี้ชุดเครื่องมือเสริมส่วนหน้าซึ่งแสดงโดย jQuery ได้เกิดขึ้นแล้ว จาก Ajax ปลายด้านหน้าและด้านหลังได้เปิดถนนแห่งการแยกและสถาปัตยกรรมการแยกด้านหน้าและด้านหลังก็ค่อยๆกลายเป็นที่นิยม Front-end รับผิดชอบต่ออินเทอร์เฟซและการโต้ตอบและ Back-End รับผิดชอบการประมวลผลตรรกะทางธุรกิจ ปลายด้านหน้าและด้านหลังโต้ตอบผ่านอินเทอร์เฟซ เราไม่จำเป็นต้องเขียน HTML ที่ยากต่อการดูแลในแต่ละภาษาแบ็กเอนด์ ความซับซ้อนของเว็บเพจได้เปลี่ยนจากเว็บเซิร์ฟเวอร์แบ็กเอนด์เป็นจาวาสคริปต์ด้านเบราว์เซอร์
ตั้งแต่ปี 2009 การพัฒนาสมาร์ทโฟนได้กลายเป็นที่นิยมและคลื่นของขั้วมือถือก็ไม่สามารถหยุดยั้งได้ แนวคิดการออกแบบของแอปพลิเคชันหน้าเดียวของ Spa ก็กลายเป็นที่นิยมเช่นกัน โมดูลส่วนหน้าที่เกี่ยวข้องส่วนประกอบการพัฒนาที่ตอบสนองการพัฒนาไฮบริดและเทคโนโลยีอื่น ๆ เป็นเรื่องเร่งด่วน โดยเฉพาะอย่างยิ่งการเกิดขึ้นของ node.js ในปี 2009 เช่นเดียวกับข้อกำหนดของ CommonJS ที่ประกอบกันและกลไกการจัดการแพ็คเกจ NPM ให้กำเนิดเฟรมเวิร์กที่ยอดเยี่ยมเช่น Angular 1 และ Ionic รวมถึงมาตรฐานโมดูลเช่น AMD, CMD, UMD วิศวกรส่วนหน้าได้กลายเป็นสาขาการพัฒนาพิเศษด้วยระบบเทคนิคและรูปแบบสถาปัตยกรรมที่เป็นอิสระจากแบ็กเอนด์
ในอดีตเราต้องการ HTML และ JS ง่ายๆเท่านั้น ตอนนี้เราต้องใช้ตัวจัดการแพ็คเกจเพื่อดาวน์โหลดแพ็คเกจบุคคลที่สามโดยอัตโนมัติใช้ Module Manager เพื่อสร้างไฟล์สคริปต์เดียวใช้คอมไพเลอร์แปลเพื่อใช้ฟังก์ชั่น JavaScript ใหม่และใช้งาน Runner Task เพื่อดำเนินการแต่ละขั้นตอนการก่อสร้างโดยอัตโนมัติ
ในช่วงสองปีที่ผ่านมาด้วยการเพิ่มขึ้นของความซับซ้อนของเว็บแอปพลิเคชันการขยายตัวของบุคลากรในทีมและความต้องการของผู้ใช้สำหรับการโต้ตอบหน้าเป็นมิตรและการเพิ่มประสิทธิภาพประสิทธิภาพเราต้องการกรอบการพัฒนาที่ยอดเยี่ยมและยืดหยุ่นมากขึ้น ขั้นตอนนี้ได้เกิดเฟรมเวิร์กมากมายที่มีความกังวลค่อนข้างเข้มข้นและแนวคิดการออกแบบที่ดีขึ้น ตัวอย่างเช่นเฟรมเวิร์กส่วนประกอบเช่น React, Vue.js และ Angular 2 ช่วยให้เราสามารถแทนที่การเขียนโปรแกรมที่จำเป็นด้วยการดำเนินงาน DOM เป็นแกนกลางที่มีการเขียนโปรแกรมแบบประกาศซึ่งเพิ่มความเร็วในการพัฒนาส่วนประกอบ Redux ซึ่งติดตามการเขียนโปรแกรมที่ใช้งานได้และ MOBX ซึ่งยืมแนวคิดของการเขียนโปรแกรมตอบสนองเป็นทั้งกรอบการจัดการสถานะที่ดีมากซึ่งช่วยให้นักพัฒนาสามารถแยกตรรกะทางธุรกิจออกจากการแสดงผลการแบ่งโครงสร้างโครงการได้ดีขึ้น ในเครื่องมือการก่อสร้างโครงการการจัดการการดำเนินงานงานที่แสดงโดยคำรามและอึกและเครื่องมือบรรจุภัณฑ์โครงการที่แสดงโดย Webpack, Rollup และ JSPM ล้วนเป็นผู้นำในการช่วยให้นักพัฒนาสร้างกระบวนการก่อสร้างส่วนหน้าได้ดีขึ้นและดำเนินการประมวลผลล่วงหน้า
วุฒิภาวะของห่วงโซ่เครื่องมือได้นำมาซึ่งความต้องการทางวิศวกรรมด้วยเทคโนโลยีชั้นนำทางธุรกิจและเทคโนโลยีผลักดันธุรกิจ วิศวกรรมส่วนหน้าคือการสร้างมาตรฐานและสร้างมาตรฐานกระบวนการพัฒนาส่วนหน้าเทคโนโลยีเครื่องมือประสบการณ์ ฯลฯ ตามลักษณะทางธุรกิจเฉพาะ วัตถุประสงค์ของมันคือการเปิดใช้งานการพัฒนาส่วนหน้าเพื่อสร้างระบบของตัวเองเพิ่มประสิทธิภาพการพัฒนาของวิศวกรส่วนหน้าและลดค่าใช้จ่ายในการประสานงานและการสื่อสารที่เกิดจากการเลือกเทคโนโลยีส่วนหน้า
ความซับซ้อนเชิงตรรกะของแอปพลิเคชันการปรับปรุงความซับซ้อนทางวิศวกรรมและการปรับปรุงความซับซ้อนของการรวมกันยังนำมาซึ่งความท้าทายบางประการมาสู่ประสิทธิภาพของส่วนหน้า ตัวอย่างเช่นเฟรมเวิร์กส่วนประกอบเช่น React จะมีเวลาหน้าจอสีขาวเมื่อเริ่มต้นหน้าซึ่งไม่เป็นมิตรกับ SEO ส่วนหน้าได้เริ่มพยายามแก้ปัญหานี้ผ่านการเรนเดอร์เซิร์ฟเวอร์และแทนที่แม่แบบของภาษาเซิร์ฟเวอร์เช่น JSP และ PHP ตามแอปพลิเคชัน isomorphic ที่ใช้โดย React, Vue ฯลฯ หรือส่งกลับไปยังเบราว์เซอร์ในรูปแบบของเอกสาร HTML ที่สมบูรณ์
มุ่งเน้นไปที่สแต็คเต็มรูปแบบหลังจากหลายปีของการพัฒนา Node.js มีความสามารถในการสนับสนุนแอปพลิเคชันระดับองค์กรอย่างเต็มที่และมีแนวทางปฏิบัติจำนวนมากใน บริษัท ในประเทศและต่างประเทศหลายแห่งเช่น Lowe, Netflix และ Alibaba ยิ่งไปกว่านั้น Node.js มีความสัมพันธ์ทางภาษาตามธรรมชาติทำให้นักพัฒนาได้ง่ายขึ้นที่จะรับผิดชอบความรับผิดชอบของสแต็คเต็มรูปแบบ ด้วยแนวคิดที่เพิ่มขึ้นเช่นสถาปัตยกรรม Microservice และ Cloud Native และ Serverless อินเทอร์เฟซแบ็กเอนด์ค่อยๆกลายเป็นอะตอมและอินเทอร์เฟซ microservice จะไม่หันหน้าเข้าหาหน้าโดยตรงอีกต่อไป ดังนั้นแนวคิด BFF (Backend for Frontend) ที่แสดงโดย GraphQL จึงเป็น ชั้น BFF ถูกเพิ่มระหว่าง microservice และ front-end และอินเทอร์เฟซถูกรวมและถูกครอบตัดโดย BFF แล้วส่งออกไปยังส่วนหน้า
ในขณะที่การแก้ปัญหาการประสานงานอินเทอร์เฟซและการรวมตัว BFF ยังมีแรงกดดันพร้อมกันในแบ็กเอนด์ซึ่งนำการพัฒนาและการดำเนินงานและการบำรุงรักษาจำนวนมากไปยังวิศวกรส่วนหน้า Serverless สามารถบรรเทาปัญหานี้ได้ เราสามารถใช้ฟังก์ชั่นเพื่อใช้การรวมและการครอบตัดของอินเทอร์เฟซ คำขอส่วนหน้าสำหรับ BFF จะถูกแปลงเป็นทริกเกอร์สำหรับทริกเกอร์ FAAS HTTP ฟังก์ชั่นนี้ใช้ตรรกะทางธุรกิจสำหรับการร้องขอเช่นการเรียกใช้ไมโครไซต์หลายตัวเพื่อรับข้อมูลจากนั้นส่งคืนผลลัพธ์การประมวลผลไปยังส่วนหน้า ด้วยวิธีนี้ความดันของการดำเนินงานและการบำรุงรักษาได้เปลี่ยนจากเซิร์ฟเวอร์ BFF ก่อนหน้าเป็นบริการ FAAS และส่วนหน้าไม่ต้องใส่ใจเกี่ยวกับเซิร์ฟเวอร์อีกต่อไป Serverless สามารถนำไปใช้กับการเรนเดอร์ฝั่งเซิร์ฟเวอร์แยกแต่ละเส้นทางก่อนหน้าออกเป็นฟังก์ชั่นแล้วปรับใช้ฟังก์ชั่นที่เกี่ยวข้องกับ FAAs ด้วยวิธีนี้เส้นทางที่ผู้ใช้ร้องขอจะสอดคล้องกับแต่ละฟังก์ชัน ด้วยวิธีนี้การดำเนินการและการบำรุงรักษาจะถูกถ่ายโอนไปยังแพลตฟอร์ม FAAS เมื่อส่วนหน้าแสดงผลด้านเซิร์ฟเวอร์ไม่จำเป็นต้องใส่ใจเกี่ยวกับการดำเนินการและการปรับใช้การบำรุงรักษาของโปรแกรมเซิร์ฟเวอร์ นอกจากนี้โปรแกรม MINI เช่น WeChat และ Alipay ยังมีแพลตฟอร์มการพัฒนาคลาวด์ที่สอดคล้องกับแนวคิดที่ไม่มีเซิร์ฟเวอร์เพิ่มขีดความสามารถในการทำซ้ำอย่างรวดเร็วของธุรกิจ
สำหรับข้อมูลเพิ่มเติมและคำแนะนำดูบทนำ
เวอร์ชันภาษาจีน เวอร์ชันภาษาอังกฤษ
หากคุณเป็นนักพัฒนาที่มีประสบการณ์มากและต้องการทราบเกี่ยวกับวิศวกรรมส่วนหน้าและสถาปัตยกรรมขอแนะนำให้อ่านวิวัฒนาการของบทความส่วนหน้า
หากคุณไม่มีความเข้าใจอย่างถ่องแท้เกี่ยวกับไวยากรณ์พื้นฐาน JavaScript ขอแนะนำให้คุณเรียกดู "พื้นฐาน JavaScript ไวยากรณ์ที่ทันสมัยและการปฏิบัติทางวิศวกรรม" เพื่อทำความเข้าใจกับไวยากรณ์ JavaScript พื้นฐานและแอปพลิเคชันที่ใช้งานได้จริง
หากคุณต้องการเข้าใจการพัฒนาสแต็กแบบเต็ม node.js คุณสามารถอ้างถึง Node-Notes
หลังจากทำความเข้าใจกับความรู้เชิงทฤษฎีขอแนะนำให้ไปที่ WX-FE เพื่อตรวจสอบโครงการโอเพนซอร์สที่เกี่ยวข้องกับผู้แต่งทั้งหมด
บทความทั้งหมดของผู้เขียนอยู่ภายใต้ Creative Commons ที่ไม่ได้ใช้งาน-ไม่ว่าจะเป็นคำอธิบายการใช้งานที่ได้รับอนุญาตการใช้งาน 4.0 ใบอนุญาตระหว่างประเทศ การพิมพ์ซ้ำยินดีต้อนรับและได้รับการเคารพลิขสิทธิ์ นอกจากนี้คุณยังสามารถไปที่หน้าแรกของหนังสือ NGTE เพื่อเรียกดูรายชื่อหนังสือสำหรับหลายหมวดหมู่รวมถึงระบบความรู้ภาษาการเขียนโปรแกรมวิศวกรรมซอฟต์แวร์โมเดลและสถาปัตยกรรมเว็บและส่วนหน้าขนาดใหญ่การฝึกอบรมด้านการพัฒนาฝั่งเซิร์ฟเวอร์และสถาปัตยกรรมวิศวกรรม
