The Adoption of Component-Based Architecture in the Development of E-Learning Website Interface

The problem that front-end web developers often face is writing program code repeatedly on the same component so that the program code becomes less efficient and flexible, and also complicating the maintenance process. In this study, the development of an e-learning website interface was carried out using a component-based architecture. The application of component-based architecture aims to make program code on a component reusable, flexible, and simplify the maintenance process. This research will use the Vue.js framework to implement component-based architectures. The results of the website interface program code using Vue.js will be tested using automated testing with a unit test using Jest. Automated testing can provide fast feedback and allow developers to find code errors after they have been created. Testing with unit testing using Jest will produce a code coverage matrix that is used to state parts of the software code that are not tested. The matrix indicates that there are sufficient tests of program code, resulting in a rarity of software bugs and providing confidence for developers to modify existing code. The results of this study show that the development of an e-learning web interface by implementing a component-based architecture using Vue.js can make program code reusable, efficient, flexible and easy to maintain.