2022 The 1st International Conference on Software Engineering and Information Technology (ICoSEIT)

The Adoption of Component-Based Architecture in

the Development of E-Learning Website Interface
2022 1st International Conference on Software Engineering and Information Technology (ICoSEIT) | 978-1-6654-7303-3/22/$31.00 ©2022 IEEE | DOI: 10.1109/ICOSEIT55604.2022.10030066

1st Muhamad Aziz Al-asaad 2nd Nungki Selviandro 3rd Eko Darwiyanto
School of Computing School of Computing School of Computing
Telkom University Telkom University Telkom University
Bandung, Indonesia Bandung, Indonesia Bandung, Indonesia
[email protected] [email protected] [email protected]

Abstract—The problem that front-end web developers often The user interface is one of the essential things in develop-
face is writing program code repeatedly on the same component ing a website-based e-learning platform. User interface design
so that the program code becomes less efficient and flexible, is one of the most critical and challenging aspects of designing
and also complicating the maintenance process. In this study,
the development of an e-learning website interface was carried a computer system. This is the point of contact between the
out using a component-based architecture. The application of user and the system to determine the most system usability
component-based architecture aims to make program code on and effectiveness [4].
a component reusable, flexible, and simplify the maintenance Website user interface developers often face the problem
process. This research will use the Vue.js framework to imple- of writing repetitive program code so that the program code
ment component-based architectures. The results of the website
interface program code using Vue.js will be tested using auto- that is written becomes less efficient and less flexible, and
mated testing with a unit test using Jest. Automated testing can also complicates the maintenance process. In developing a
provide fast feedback and allow developers to find code errors website-based platform user interface, several device architec-
after they have been created. Testing with unit testing using Jest ture approaches and software can be adopted, one of which is a
will produce a code coverage matrix that is used to state parts component-based architecture. The goal of using component-
of the software code that are not tested. The matrix indicates
that there are sufficient tests of program code, resulting in a based architecture is to make it easier to reuse a particular
rarity of software bugs and providing confidence for developers system’s components [5].
to modify existing code. The results of this study show that the Currently, there are several website interface development
development of an e-learning web interface by implementing a frameworks that implement component-based architecture
component-based architecture using Vue.js can make program such as Angular, React.js, and Vue.js. In this research, the
code reusable, efficient, flexible and easy to maintain.
Index Terms—component-based architecture, vue.js, auto- author uses Vue.js framework to implement component-based
mated testing architecture in the development of e-learning website interface.
Vue.js has a component-based architecture that allows devel-
I. I NTRODUCTION opers to partition the application into reusable and independent
Along with the rapid development of Information Technol- components. The advantages of the Vue.js framework are that
ogy (IT), the need for a concept and IT-based teaching and it is easy to learn, has high flexibility, and has high adaptability
learning mechanisms (education) is inevitable. The idea of in application integration. While the disadvantages of the
e-learning brings the influence of the transformation process Vue.js framework are its popularity and small community [6].
of conventional education into digital form, both in terms of Automated unit testing using Jest is the type of software
content and system. Currently, the concept of e-learning has program testing used in this study. Automated testing allows
been widely accepted by the students world community, as developers to identify problems early and solve them quickly.
evidenced by the widespread implementation of e-learning The software development team can become more productive
in educational institutions, such as in schools, training, and with automated testing, maintaining the speed of software
universities, and also in the industry, such as Cisco Systems, development [7].
IBM, HP, and Oracle [1], [2]. The aim of this research is to implement the component-
There are several reasons why e-learning is adopted and based architecture in this case is using Vue.js on the develop-
implemented; for example, e-learning is a relatively fast way ment of the e-learning website interface. Other than that, we
to distribute teaching materials, and e-learning materials can also aim to test the developed web interface, specifically, we
also be updated quickly [3]. The main problem experienced adopted the automated testing based on Jest.
when to start applying e-learning is the high initial cost or Furthermore, this paper is organised as follow. In the Section
in other words is the economic factor. It is becoming a major 2, we briefly discussed the related work of the study. In Section
focus for the institutions that will implement e-learning. [2]. In 3, the development process of the e-learning web interface is
addition to economic factor, users are limited to one learning presented. In Section 4, the evaluation part of the study is
method, such as independent learning, which offers text-based discussed. Finally, the conclusion and the future work area
learning without videos. are described in Section 5.

Authorized licensed use limited to: Polytechnic University of Bucharest. Downloaded on June 13,2023 at 11:43:44 UTC from IEEE Xplore. Restrictions apply.
978-1-6654-7303-3/22/$31.00 ©2022 IEEE 108
 II. R ELATED W ORK API calls, event handling, database connections, and server-
side methods. In the style tag segment, the component’s
A. Component Based Architecture
style is generated with CSS or any preprocessor that enables
Component-based architecture is the result of the selection developers to utilize features that are not part of the CSS [6].
and composition of reusable components. The process of 2) Main Features: A few core features of the Vue.js frame-
selecting and composing components is evolutionary and aims work allow the connection between template tags and script
to achieve results that optimize quality. The architecture level tags while maintaining the appearance of different sections [6].
represents a level of abstraction that allows designers to under- • The syntax of curly brackets enables the declarative
stand and analyze the trade-offs required. Therefore, evolution rendering of data to the DOM. Algorithm 1 ”greeting”
in terms of restructuring the architecture (e.g. reconfiguration, variable demonstrates how the greeting data is interpreted
component replacement, etc.) is very important at this level. To in the current component tag template.
support the evolution towards achieving reliable architectures, • Directives: Directives are ”certain special tokens in the
automated compositions and techniques for analyzing failure markup that instruct the library to perform some action
behaviour at the system level are required. Moreover, these on the DOM element,” prefixed with ”v-.” The most
methods should be incorporated into a development process common and effective Vue directives include ”v-model”
that permits the separation of concerns [8]. to bind data, which will be discussed in greater detail
in the following section, ”v-on” to handle events, ”v-
B. Vue.js
for” to perform repetitions, ”v-if” and ”v-else” to build
Vue.js is a progressive framework to build user interface conditions, etc.
application [9]. Vue.js allows developers to start building ap- • Data Binding: Vue allows us to bind any data received
plications with minimal effort because the Vue.js core library in the script tag through the backend function to the data
focuses only on the interface layer. As the functionality and displayed in the template tag.
complexity of the application increase, developers can adjust
Vue.js-integrated libraries to the application [10]. C. Automated Testing
1) Framework Structure: Vue.js is a component-based Automated testing is an approach widely used by applica-
framework. Reusable components can be compiled as a small tion developers to detect errors during application development
piece of fully functional code and embedded into different [11]. Running automated tests enables developers to detect
application pages [6]. defects early and repair them swiftly; mistakes are inspected
<script> prior to being committed to version control [12]. Automated
export default { testing is more efficient than manual testing and enables
data() { faster release rates. These tests improve the efficiency of
return { software development teams and facilitate the attainment and
greeting: ’Hello World!’
}
maintenance of a rapid development rate [7].
} 1) Code Coverage: Code coverage is a metric used to
} identify which sections of software are not tested [13], [14].
</script> The metric applies to various types of automated testing, such
as unit testing. Coverage is typically expressed as a percentage,
<template>
<p class="greeting">{{ greeting }}</p>
indicating the relationship between 15 test materials and
</template> materials discovered [14]. Pittet [15] defines five common test
coverage metrics based on distinct criteria:
<style>
.greeting {
• Function coverage: How many defined functions have
color: red; been called?
font-weight: bold; • Statement coverage: How many statements have been
} executed?
</style> • Branches coverage: How many branches of the control
Algorithm 1. Basic Structure of Vue.js Components structure have been executed (e.g. if blocks)? In other
words, if the code was executed through a path in which
As shown by the first algorithm, each Vue.js component an if block returned true or false.
consists of three segments: template tags (HTML), script tags • Condition coverage: How many boolean subexpressions
(JavaScript), and style tags (CSS). Vue.js uses an HTML- were evaluated for false and correct values? In other
based template syntax that enables developers to bind DOM words, for each, if block in which the condition consists
(Document Object Model) with declared Vue.js instance data. of one or more boolean statements, is the combination of
These HTML templates can be interpreted and parsed by all those statements resolved as true or false?
browsers, operating systems, and HTML parsers. The script • Line coverage: How many source code lines have been
section of the tag handles all back-end operations, including executed? Line coverage can be very close to statement

Authorized licensed use limited to: Polytechnic University of Bucharest. Downloaded on June 13,2023 at 11:43:44 UTC from IEEE Xplore. Restrictions apply.
109
 scope; developers usually put each new statement on the
line separately.
2) Jest: Jest is an open-source JavaScript testing framework
created and maintained by Facebook. Jest is one of many
JavaScript testing frameworks, alongside Mocha, Jasmine,
Karma, and others [7]. In the annual State of JavaScript survey
for 2018, where more than 20,000 developers were surveyed,
Jest was rated best compared to its competitors in terms of total
satisfaction-to-use ratio, winning the ”Highest Satisfaction”
award. In addition, 96.5% of Jest library users stated that
they would like to use it again [16]. The most favourable
aspects of the framework mentioned in the survey include good
documentation, facilitation of elegant programming styles and Fig. 1. Research Stages Flowchart
patterns, ease of learning, fast performance, and an established
testing option supported by a good development team/com-
pany [16]. 2) Mentor: register, login, forgot password, reset the pass-
Jest is a test runner, assertion library, and mocking library. word, create a course, edit course, delete a course,
Jest also provides built-in test coverage tools and a feature mentor dashboard, create course materials, edit course
called snapshot testing. Unlike some of its predecessors, such materials, delete course materials, check course materi-
as Jasmine, Jest does not require the environment’s native als, publish the course, unpublish course.
browser to run. Instead, it runs inside the Node.js process 3) Admin: payment validation, course validation.
where the browser API is emulated with jsdom. The speed
of the browser environment is simulated up test execution and
makes it possible to run tests on different systems with the B. Design of Component Hierarchy
same results. For example, the same test can be run on the
developer’s machine and a continuous delivery server [17]. The e-learning website interface design is made by a mem-
ber of the startup team who has the role of being the Product
III. S YSTEM D ESIGN Owner. From the website interface design, the author will
In this section, Fig.1 shown five parts that represent the analyze the design and then create a component hierarchy.
design of the application system and must be conducted related These component hierarchies will be used to define data
to our study: flows, functions, etc. For example, Fig.2 is an example of a
1) Requirement analysis: carried out to determine the need registration page component hierarchy that is analyzed from
for making e-learning website features. the registration page interface design:
2) Design of the component hierarchy: carried out to deter- 1) AutoLayout: layout component to provide authentication
mine the components to be made in accordance with the elements and functions.
results of the analysis of the e-learning website interface 2) RegisterPage: page component to wrap and display
design. register components.
3) Development of UI components with Vue.js: carried out 3) AuthHero: component to display illustrations, titles and
to develop the program code of an e-learning website subtitles.
using the Vue.js framework. 4) AuthForm: component contains a back button and regis-
4) Application Development: carried out for overall appli- tration form.
cation development by combining UI components that 5) ButtonBackCircle: component to display and function as
have been created using Vue.js. a back button.
5) Testing of UI components with Jest, carried out to 6) CoreButton: core component to display and function as
test program code that has been created using the Jest a button.
framework. 7) AuthFormRegister: component to display and function
as a registration form.
A. Requirement Analysis 8) AuthFormGreeting: component to display the greeting at
Based on the results of the requirement analysis conducted the top of the authentication form.
by observing the e-learning website, three actors can access 9) CoreInput: core component to display and function as
the website: students, mentors, and admins. Here are the use input.
cases of the three actors: 10) CoreSelect: the core component for displaying and func-
1) Student: register, login, forgot password, reset password, tioning as an option.
student dashboard, class, search course, course detail, 11) AuthFormAction: component to display and serve as the
buy a course. action of the authentication form.

Authorized licensed use limited to: Polytechnic University of Bucharest. Downloaded on June 13,2023 at 11:43:44 UTC from IEEE Xplore. Restrictions apply.
110
 Fig. 2. Registration Page Component Hierarchy

C. Development of UI Components with Vue.js 3) Vue.js Component Style Tag: In the development of the
Vue.js component in the style tag section, there is the use of
At this stage, the interface component is made using Vue.js CSS code for the appearance of the website so that better and
framework. One example of implementing the main compo- in accordance with the interface design. In the style tag, there
nents, namely the CoreInput component, is used as the primary is a lang option which is used to define a different styling
input component and can be reusable according to system language used. In the style tag, there is also the use of the
requirements. scoped option, which serves to limit the styling code so that
1) Vue.js Component Template Tag: In creating the Vue.js it does not give a styling effect to its child components. The
component of the template tag section, there is the use of author also uses an additional CSS framework, Tailwindcss,
HTML code to compile website structure and pages. The which provides CSS utilities that are packaged in the form.
HTML code is compiled into a single component in the 4) Communication between Front-End and Back-End:
template tag, so that it can be reused in components that Front-End applications and back-end applications are created
need it template tag from CoreInput. In addition, there is in a different modules. The back-end makes REST API to
the use of the Vue.js feature in the CoreInput component transfer data, and the REST API will be called using the library
template tag. Declarative rendering is used to display data to addition is Axios, a promise-based HTTP client. REST API
the DOM HTML. Data binding is used to connect the data was created by one of the team members’ start-ups with the
that is declared on the script tag to HTML input attribute. role of Back-End Developer.
Directive v-on(@) is used to connect event of the HTML DOM
to function in the script tag. D. Application Development
2) Vue.js Component Script Tag: In developing the Vue.js At this stage, the overall application is made by integrating
component in the script tag section, javascript code is used the UI components which were created using Vue.js according
to make the website dynamic and interactive. There is the to component hierarchy. Components that have been created
use of the javascript ”export default object” feature export are imported in the ”components” option in the script tag.
javascript code so that it can be used in components that re- After being imported in script, components can be used in
quire javascript code from the CoreInput component. ”Name” template tag component.
option is used to create name for the component. The name
is used as the identity of one component when imported in E. Testing of UI Components with Jest
another. “Props” option is used to receive data from the parent The test method used to test UI components is automated
component. Data received from the “props” option is read- testing with unit tests. The framework used to test UI compo-
only. To change the data received in the ”props” option, it nents is Jest. The following is an example of implementing a
must go through the parent component that sends the data unit test using Jest on a CoreInput component.
and using the emit event called from the child component. 1) Setup Unit Testing: In 6th line, there is the use of the
”Emit” event is used to call events from child components to mount function from the Jest library, which is used to initialize
parent components. There are two parameters received at the the CoreInput component and the required options. In 9th and
”emit” event, the first is the name of the event and the second 10th lines, there is the use of the find function, which is used
is the value want to be sent. ”Methods” option which serves to search for HTML input elements and labels in CoreInput
to declare functions that are want to be made. “Components” components. Finally, in 11th line, the setup function will return
option is used to import other components that are already the wrapper component, HTML input elements and labels so
created. that they can be used during the testing process.

Authorized licensed use limited to: Polytechnic University of Bucharest. Downloaded on June 13,2023 at 11:43:44 UTC from IEEE Xplore. Restrictions apply.
111
1 import { mount } from ’@vue/test-utils’ Fig.3 shown the result of register form UI with input fullname,
2
email, and password that are created from reuseable CoreInput
3 import CoreInput from ’../CoreInput.vue’
4 component. CoreInput component receive props to bind data
5 const setup = (propOverrides) => { and use emit event to update the data between parent and child
6 const wrapper = mount(CoreInput, { component.
7 ...propOverrides,
8 })
9 const input = wrapper.find(’input’)
10 const label = wrapper.find(’label’)
11 return { wrapper, input, label }
12 }

Algorithm 2. CoreInput Component Unit Testing Setup

2) Component Render Test: In 1st line, there is the use of

the describe function which is used to group tests. In 2nd line,
there is a wrapper initiation that has been created in the setup
function Algorithm 7. In 3rd line, there is the use of expect
and toBe functions used to validate tests.
1 it(’should render CoreInput component’, () => {
2 const { wrapper } = setup()
3 expect(wrapper.exists()).toBe(true)
4 })

Algorithm 3. CoreInput Component Rendering Test

Fig. 3. Register Form UI
3) Component Props Test: In 4th line, there is a use of
the propsData option which is used to initialize props in the
Automated testing method unit tests using the Jest frame-
CoreInput component. In line 8th, there is the use of the expect
work aims to test UI component that have been created using
and toBe functions which are used to validate test props value.
the Vue.js framework. Tests are carried out on the structure of
1 it(’should receive props value’, () => { HTML elements, functions and javascript variables that exist
2 const value = ’muhazizal’ in the components that have been made. Testing using the
3 const { wrapper } = setup({ Jest framework generates code coverage which aims to state
4 propsData: {
5 value,
the component parts being tested.
6 }, Fig.4 shown the results of the code coverage of unit
7 }) test, it was obtained that the test coverage was 99.42% on
8 expect(wrapper.props(’value’)).toBe(value) Statements which means 99.42% of statements have been
9 })
executed, 97.82% of the branch, which means 97.82% of the
Algorithm 4. CoreInput Component Props Test branch of the control structure has been executed, 100% of
Functions which means 100% of function has been called,
4) Component Emit Event Test: In 2nd line, there is the im- 99.42% of Lines which means 99.42% of the code lines have
port of the wrapper component and the input HTML element been executed, and there is an Uncoverage Line in the 101st
from the setup function. In 3rd line, HTML element triggers line of the AuthFormLogin component.
an input event. In the 4th line, there is the use of the expect 2) Analysis Results: Components created with prefix
and functions toHaveProperty to validate the emit event test. ”Core” are components that have a purpose for being reuse-
1 it(’should emit on-input event, able, along with implementation of component based archi-
and update value props’, async () => { tecture. For example in Fig.3 CoreInput component is used
2 const { wrapper, input } = setup() three times with different data (fullname, email, passowrd)
3 await input.trigger(’input’) but with the same purpose (input and label). The UI and
4 expect(wrapper.emitted())
function of CoreInput component is independent in one file,
.toHaveProperty(’on-input’)
5 }) make program code more flexible and easy to maintain also
reduce duplication of program code.
Algorithm 5. CoreInput Component Props Test Analysis results obtained from the automated testing method
using unit tests with the Jest framework is the percentage
IV. E VALUATION of program code that has been tested on components made
1) Result: Results of this research is core components using Vue.js. The test results do not produce 100% code
created using Vue.js Framework. Core components is created coverage because there are lines of code that are not executed
according to requirements of the UI of website e-learning. by author-generated test code. The code coverage results also

Authorized licensed use limited to: Polytechnic University of Bucharest. Downloaded on June 13,2023 at 11:43:44 UTC from IEEE Xplore. Restrictions apply.
112
 2) Implementing automated testing using integration tests
and end-to-end tests. Testing using integration tests fo-
cuses on integration between functions and components,
while end-to-end tests focus on the program code flow.
R EFERENCES
[1] Nungki Selviandro, Mira Suryani, and Zainal A Hasibuan. Open learning
optimization based on cloud technology: case study implementation
in personalization e-learning. In 16th International Conference on
Advanced Communication Technology, pages 541–546. IEEE, 2014.
[2] Nungki Selviandro, Mira Suryani, and Zainal A Hasibuan. Enhanc-
ing the implementation of cloud-based open learning with e-learning
personalization. In 2015 17th International Conference on Advanced
Communication Technology (ICACT), pages 472–479. IEEE, 2015.
[3] Nungki Selviandro and Zainal Arifin Hasibuan. Cloud-based e-learning:
A proposed model and benefits by using e-learning based on cloud com-
puting for educational institution. In Information and Communication
Technology-EurAsia Conference, pages 192–201. Springer, 2013.
[4] A Lee and FH Lochovsky. User interface design. In Office automation,
pages 3–20. Springer, 1985.
[5] Sylvain Chardigny, Abdelhak Seriai, Mourad Oussalah, and Dalila
Tamzalit. Extraction of component-based architecture from object-
Fig. 4. Test Coverage Result of Unit Test using Jest Framework
oriented systems. In Seventh working IEEE/IFIP conference on software
architecture (WICSA 2008), pages 285–288. IEEE, 2008.
[6] Hoang An Pham. Developing mobile application with vue. js framework:
do not determine the quality of the test but useful for software Case: Osmi application and superapp oy. 2019.
[7] Bogdan Moroz. Unit test automation of a react-redux application with
developers to choose which part of program code to test. jest and enzyme. 2019.
Testing is said to be sufficient if the software program code can [8] Barbara Gallina, Muhammad Atif Javed, Faiz Ul Muram, and Sasiku-
run smoothly and notify the developer to change the program mar Punnekkat. A model-driven dependability analysis method for
component-based architectures. In 2012 38th Euromicro Conference
code if there is an error in the program code. on Software Engineering and Advanced Applications, pages 233–240.
IEEE, 2012.
V. C ONCLUSION [9] Alex Kyriakidis, Kostas Maniatis, and Evan You. The majesty of Vue.
js. Packt Publishing, 2016.
Interface development has a lot of duplication of program [10] Brett Nelson. Getting to Know Vue. js. Springer, 2018.
code because of the appearance and function of components [11] Lasse Koskela. Effective unit testing: A guide for Java developers. Simon
and Schuster, 2013.
made relatively the same. In this study, the author applies a [12] Jez Humble. Continuous delivery sounds great, but will it work here? it’s
component-based architecture using Vue.js in the development not magic, it just requires continuous, daily improvement at all levels.
of an e-learning website interface. Queue, 15(6):57–76, 2017.
[13] Gerard Meszaros. xUnit test patterns: Refactoring test code. Pearson
Authors make core component of the e-learning website Education, 2007.
that have a purpose for being reuseable component. CoreInput [14] Sten Pittet. An introduction to code coverage. Dostopno na: https://www.
atlassian. com/continuous-delivery/software-testing/code-coverage [3.8.
component is example of reusable core component for input 2019], 2021.
field (fullname email, password). Program code of the CoreIn- [15] Sten Pittet. The different types of software testing. Atlassian CI/CD.
put component is in one file, make it flexible, easy to maintain https://www. atlassian. com/continuous-delivery/software-testing/types-
of-software-testing, 2018.
and reduce ducplication of program code. [16] Sacha Greif and Raphaël Benitte. The state of javascript, 2019.
Components that has been created is in the form of a Vue.js [17] Trevor Burnham. Test-driven react: Find problems early, fix them
framework is tested using the automated testing method with quickly, code with confidence. Test-Driven React, pages 1–170, 2019.
unit tests and the Jest framework. Results from automated tests
with unit tests using Jest in the form of code coverage that is
used as a metric to state that a section of program code has
been tested. The test is done to ensure that the program code
that is created can run smoothly and notify the developer to
change the program code if there is an error in the program
code.
Further research can be done to increase the use of
component-based architecture and automated testing; here’s a
list of further research topics.
1) Application of micro-frontend architecture to the devel-
opment of large-scale website software interfaces. The
purpose of implementing a micro-frontend architecture
is to optimize the components created into a separate
software module.

Authorized licensed use limited to: Polytechnic University of Bucharest. Downloaded on June 13,2023 at 11:43:44 UTC from IEEE Xplore. Restrictions apply.
113