Chulalongkorn University Theses and Dissertations (Chula ETD)
Other Title (Parallel Title in Other Language of ETD)
Application of microfrontends to reengineering single page application
Year (A.D.)
2020
Document Type
Thesis
First Advisor
ญาใจ ลิ่มปิยะกรณ์
Faculty/College
Faculty of Engineering (คณะวิศวกรรมศาสตร์)
Department (if any)
Department of Computer Engineering (ภาควิชาวิศวกรรมคอมพิวเตอร์)
Degree Name
วิทยาศาสตรมหาบัณฑิต
Degree Level
ปริญญาโท
Degree Discipline
วิศวกรรมซอฟต์แวร์
DOI
10.58837/CHULA.THE.2020.1136
Abstract
สถาปัตยกรรมระบบซอฟต์แวร์ปกติมักแบ่งแยกเป็นส่วนหน้าและส่วนหลัง โดยที่แบ็กเอนด์มีหน้าที่ในการประมวลผลข้อมูลทางฝั่งเซิร์ฟเวอร์ ในขณะที่ฟรอนต์เอนด์รับผิดชอบการโต้ตอบระหว่างไคลเอนต์และระบบ บรรดาแนวทางสถาปัตยกรรมแบ็กเอนด์ในปัจจุบัน ไมโครเซอร์วิสเป็นทางเลือกหนึ่งที่เหมาะสมที่สุดสำหรับระบบที่สามารถขยายได้ ในขณะเดียวกัน แอปพลิเคชันฝั่งไคลเอนต์ก็เติบโตขึ้นตามขนาดและความซับซ้อนเช่นกัน แนวคิดไมโครฟรอนต์เอนส์ได้ปรากฏขึ้นเป็นวิวัฒนาการทางตรรกของสถาปัตยกรรมฝั่งฟรอนต์เอนด์ของเว็บแอปพลิเคชัน คล้ายคลึงกับไมโครเซอร์วิส แนวคิดทั้งสองมีประโยชน์ต่อการพัฒนาระบบพร้อมกัน นอกเหนือจากสมรรถนะที่เพิ่มขึ้นอันเป็นผลมาจากการแบ่งแยกแอปพลิเคชันขนาดใหญ่ออกเป็นส่วนเล็กๆ วิทยานิพนธ์นี้นำเสนอการประยุกต์ใช้ไมโครฟรอนต์เอนส์สำหรับการพัฒนาเว็บไซต์โปรแกรมสืบค้นทางกฎหมายเป็นกรณีศึกษา เนื่องจากโปรแกรมสืบค้นโดยปกติทั่วไปจัดเป็นโครงการซอฟต์แวร์ขนาดใหญ่ การพัฒนาเป็นซิงเกิลเพจแอปพลิเคชันจึงมีแนวโน้มที่จะไม่สามารถรองรับงานที่มีปริมาณมากขึ้น ระบบขยายตัวไม่ได้ดี และค่าใช้จ่ายบำรุงรักษาสูง การออกแบบฝั่งไคลแอนต์บนพื้นฐานไมโครฟรอนต์เอนด์ผนวกกับเทคโนโลยีแบ็กเอนด์แบบไมโครเซอร์วิสได้ถูกนำเสนอในงานวิจัยนี้ สำหรับการประเมินผล ความต้องการใหม่ของหน้าเว็บ รายละเอียดเอกสาร ได้ถูกพัฒนาขึ้นด้วยแองกูลาร์และเพิ่มเข้าไปในระบบปัจจุบันที่เป็นซิงเกิลเพจแอปพลิเคชัน เพื่อเปรียบเทียบกับการพัฒนาฟีเจอร์ดังกล่าวด้วยไมโครฟรอนต์เอนด์ ตัววัดทั้งสามที่ถูกเลือกสำหรับการประเมินสมรรถนะประกอบด้วย ความขึ้นต่อกันของคอมโพเนนต์ เวลาการพัฒนา และเวลาการทดสอบ ผลลัพธ์ค่าการวัดรายงานค่าตัววัดทั้งสามตัวที่ลดลงเมื่อพัฒนาด้วยไมโครฟรอนต์เอนด์ อย่างไรก็ตาม ทีมงานมีความรู้สึกว่าต้องใช้ความพยายามมากขึ้นกับการพัฒนาแบบใหม่ด้วยไมโครฟรอนต์เอนด์
Other Abstract (Other language abstract of ETD)
Software systems are traditionally separated into front and rear architecture. The backend is responsible for data processing on server side, while the frontend accounts for interaction between clients and a system. Among several today backend architectural approaches, Microservices is an alternative most suitable for scalable systems. Meanwhile, the client-side applications are also growing with size and complexity. The concept of Micro-frontends has recently emerged as logical evolution of architecture for frontend side of web applications. Similar to Microservices, both concepts benefit concurrent development in addition to greater performance that result from partitioning large applications into smaller parts. This thesis presents an application of Micro-frontends to Thai legal search engine web development as a case study. Since search engines are typically large-scale software projects, single page applications tend to bloat up, not well-scaled, and costly maintain. A design of the client-side based on Micro-frontends combined with the backend technology, Microservices, is introduced in this research. For evaluation, the new requirement of Document Detail webpage is implemented with Angular and added to the current system considered as single page application. The new feature is also implemented with Micro-frontends for comparison. The three measures: component dependency, development time, and test time are selected for performance evaluation. The results report that the measurement values of component dependency, development time, and test time all decrease with Micro-frontends implementation. However, the team feel that they spent more effort with the novel Micro-frontend development.
Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-No Derivative Works 4.0 International License.
Recommended Citation
นพปฎล, ณัฐพร, "การประยุกต์ใช้ไมโครฟรอนต์เอนส์กับการปรับโครงสร้างใหม่ซิงเกิลเพจแอปพลิเคชัน" (2020). Chulalongkorn University Theses and Dissertations (Chula ETD). 3794.
https://digital.car.chula.ac.th/chulaetd/3794