using modern web frameworks when developing an education...

7
Using modern web frameworks when developing an education application: a practical approach Slavina Ivanova and Georgi Georgiev University of Ruse, Department of Computer Systems and Technologies, Ruse, Bulgaria [email protected], [email protected] Abstract - Nowadays the technology evolves rapidly and with it, the computing devices are becoming more powerful, flexible and capable of performing complicated and tangled tasks. This results in a significant shift in the way applications are designed and developed. Yet modern web frameworks manage to cope with this client-side complexity by adopting a mindset oriented towards the design of robust and complex applications that can be delivered quickly with a high level of security, scaled easily, and extended simply. As part of our research on developing an educational application, that supports university students enrolled in Web development course, we made an overview and comparison of the existing technologies, in terms of frameworks, libraries, programming languages and deployment options, adopting a practical approach. Apart from outlining the results, a sample blueprint of the application architecture of the educational application is also proposed in this paper. Keywords - Modern web frameworks, Web development, Progressive Web Applications, Single Page Applications, Web Application Frameworks I. INTRODUCTION In the past decade we are witnessing a rapid technological growth and evolution. We are constantly seeing emerging media and new trends which also affect the capability and performance of the computing devices. The blending between the physical and virtual world is present and inevitable. From powerful smart devices, rise of artificial intelligence (AI) algorithms and Internet of Things to autonomous vehicles, home appliances or any kind of electronic device with embedded software performing complicated and tangled tasks, we are connected together and able to exchange data. This, expectedly, leads to a significant shift in the way applications are designed and developed. As part of our research on developing an educational application, that supports university students enrolled in Web development course, we made an overview and comparison of the existing modern frameworks and technologies for development of web applications that address this client-side complexity, adopting a practical approach. We would aim to explain popular concepts and techniques, as well as also push further to answer some vital questions along the way - considering the existence of a well-maintained documentation, presence of an active community, decide between a framework or library, track- record of the team supporting the framework - corporations or enthusiasts, possibilities to easily test and deploy, and last but not least, we would also consider the flexibility and learning curve from practitioners point of view. The main goal of this paper is to identify a suitable modern web framework that can be used when designing and developing an educational application that supports university students enrolled in Web development course. That’s why the paper is structured as follows. First, we introduce some general concepts and key differences related to the development of Web applications and majority of terms considering Single-Page Applications (SPA), Progressive Web Applications (PWA) and more in Section II. In Section III, we introduce some popular and modern web frameworks and libraries, as we make a comparison and analysis of their popularity including statistics from different resources. Then in Section IV, we focus on developing a better and in-depth assessment in order to ensure that the comparison and evaluation of the technologies are as objective as possible, as we reference various criteria in the context of our research. Finally, in Section V we propose a sample blueprint of the architecture of the educational application, based on the researched frameworks, together with summarized outcomes of our study and a work-in-progress. II. BACKGROUND AND GENERAL CONCEPTS The Web development process has been evolving and transforming significantly over the past decades. To some extent this change is determined by the technological progress and the advancements that enable and enhance mobile and emerging technologies. Modern web applications have not only higher user expectations and greater demands but they are also expected to be available 24/7 from anywhere in the world, and accessible from any device or screen size. Web applications must be secure, flexible, and scalable to meet urge in demand, and capable in handling complex scenarios and rich user experiences built on the client using JavaScript, and communicating efficiently through web APIs. There are two general approaches to building web applications today: traditional web applications that perform most of the application logic on the server, and single page applications (SPAs) that perform most of the user interface logic in a web browser, communicating with the web server primarily using web APIs. A hybrid approach can also be implemented, in a way that it can host one or more complex sub-applications with SPA structure within a larger traditional web application. MIPRO 2019/SSE 1729

Upload: others

Post on 15-Jun-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Using modern web frameworks when developing an education ...docs.mipro-proceedings.com/sse/01_sse_5262.pdf · A hybrid approach can also be implemented, in a way that it can host

Using modern web frameworks when developing

an education application: a practical approach

Slavina Ivanova and Georgi Georgiev

University of Ruse, Department of Computer Systems and Technologies, Ruse, Bulgaria

[email protected], [email protected]

Abstract - Nowadays the technology evolves rapidly and

with it, the computing devices are becoming more powerful,

flexible and capable of performing complicated and tangled

tasks. This results in a significant shift in the way

applications are designed and developed. Yet modern web

frameworks manage to cope with this client-side complexity

by adopting a mindset oriented towards the design of robust

and complex applications that can be delivered quickly with

a high level of security, scaled easily, and extended simply.

As part of our research on developing an educational

application, that supports university students enrolled in

Web development course, we made an overview and

comparison of the existing technologies, in terms of

frameworks, libraries, programming languages and

deployment options, adopting a practical approach. Apart

from outlining the results, a sample blueprint of the

application architecture of the educational application is

also proposed in this paper.

Keywords - Modern web frameworks, Web development,

Progressive Web Applications, Single Page Applications, Web

Application Frameworks

I. INTRODUCTION

In the past decade we are witnessing a rapid technological growth and evolution. We are constantly seeing emerging media and new trends which also affect the capability and performance of the computing devices. The blending between the physical and virtual world is present and inevitable. From powerful smart devices, rise of artificial intelligence (AI) algorithms and Internet of Things to autonomous vehicles, home appliances or any kind of electronic device with embedded software performing complicated and tangled tasks, we are connected together and able to exchange data. This, expectedly, leads to a significant shift in the way applications are designed and developed.

As part of our research on developing an educational application, that supports university students enrolled in Web development course, we made an overview and comparison of the existing modern frameworks and technologies for development of web applications that address this client-side complexity, adopting a practical approach. We would aim to explain popular concepts and techniques, as well as also push further to answer some vital questions along the way - considering the existence of a well-maintained documentation, presence of an active community, decide between a framework or library, track-record of the team supporting the framework - corporations or enthusiasts, possibilities to easily test and

deploy, and last but not least, we would also consider the flexibility and learning curve from practitioners point of view.

The main goal of this paper is to identify a suitable modern web framework that can be used when designing and developing an educational application that supports university students enrolled in Web development course. That’s why the paper is structured as follows. First, we introduce some general concepts and key differences related to the development of Web applications and majority of terms considering Single-Page Applications (SPA), Progressive Web Applications (PWA) and more in Section II. In Section III, we introduce some popular and modern web frameworks and libraries, as we make a comparison and analysis of their popularity including statistics from different resources. Then in Section IV, we focus on developing a better and in-depth assessment in order to ensure that the comparison and evaluation of the technologies are as objective as possible, as we reference various criteria in the context of our research. Finally, in Section V we propose a sample blueprint of the architecture of the educational application, based on the researched frameworks, together with summarized outcomes of our study and a work-in-progress.

II. BACKGROUND AND GENERAL CONCEPTS

The Web development process has been evolving and transforming significantly over the past decades. To some extent this change is determined by the technological progress and the advancements that enable and enhance mobile and emerging technologies. Modern web applications have not only higher user expectations and greater demands but they are also expected to be available 24/7 from anywhere in the world, and accessible from any device or screen size. Web applications must be secure, flexible, and scalable to meet urge in demand, and capable in handling complex scenarios and rich user experiences built on the client using JavaScript, and communicating efficiently through web APIs.

There are two general approaches to building web applications today: traditional web applications that perform most of the application logic on the server, and single page applications (SPAs) that perform most of the user interface logic in a web browser, communicating with the web server primarily using web APIs. A hybrid approach can also be implemented, in a way that it can host one or more complex sub-applications with SPA structure within a larger traditional web application.

MIPRO 2019/SSE 1729

Page 2: Using modern web frameworks when developing an education ...docs.mipro-proceedings.com/sse/01_sse_5262.pdf · A hybrid approach can also be implemented, in a way that it can host

In the context of our research, we would focus mainly on the development of Single-Page Applications (SPA) incorporating Progressive Web Applications (PWA) techniques. We choose this approach because of our target demographics – students of Generation Z (Gen Z), characterized as multi-taskers with preferences for digital and interactive environments when conducting a teaching process, increased visual learning ability and tendency to consume most of the information on mobile devices. That’s why we aim to develop a reliable and capable for working offline solution, fast in terms of responding to user interactions quickly, and engaging and capable to deliver a native app-like experience.

Along with defining SPA and PWA, we would also be highlighting the differences in comparison to the traditional approach. We would skip the techniques when it comes to developing native applications and/or universal applications, mainly because throughout the paper we mention the possibilities to easily migrate and extend the functionalities of existing modern web frameworks and libraries towards that, but also because we would introduce the concepts of PWA, considered a hybrid application.

A. Single Page Applications (SPA)

Nowadays, most of the websites are using SPA which is a web application that sits on top of a single page like any other desktop application. In SPA all the components like CSS, images, scripts and any other required resources are loaded at one time at the initial page load and then appropriate content/components get loaded dynamically depending on the user interaction. Once the user has loaded an initial version, after that every subsequent request will take very less amount of time because it is refreshing that particular part or region of a page rather than reloading an entire page/application. The control remains on one page until the user is on that website and that single page communicates with the server behind the curtain [1].

SPA enables a more flexible way of dealing with data while enhancing the user experience with interactive interfaces. In order to understand SPA better, a sample of the Client-Server Request-Response Cycle is presented in Figure 1.

It’s possible to extend the SPA to a Multi-Page Application (MPA) adopting, in a way, the traditional approach but this means that every change, for example, displaying the data or submitting data back to the server, requests rendering a new page from the server in the browser. This is recommended for larger and complex applications with various and many levels of user interfaces and components, combined with other good practices and approaches in terms of optimization and performance.

B. Progressive Web Applications (PWA)

Progressive web applications are the new standard in the modern era of web development. They’re pure web applications built with the very web technologies (HTML, JS & CSS) but behave as a hybrid i.e. somewhere between web and native apps.

In order to make an application progressive, technically, there are some requirements that define what a PWA is [2]:

Service Workers for offline caching - the ServiceWorker is responsible for most of the core features associated with PWA. The worker is registered on a user’s first-page visit. It consists of a JavaScript file embodying lifecycle hooks for business logic and cache control. The service worker is responsible for caching all files, serving push notifications, content updating, data manipulation and more. It’s important to understand that this script works independently of any app or website already existing on the web server, working with event listeners and commands such as “fetch”, which resembles HTTP “Get/Post/Set” commands.

Application Shell - The application shell is defined by the Google Web Fundamentals group as the minimal HTML, CSS, and JavaScript powering a user interface, categorized by fast loading time, cached, and displaying dynamic content, as data is pulled from external APIs.

Web App Manifest - The purpose of the manifest file is to expose certain modifiable settings to app developers. By providing a data extract in JSON format, it’s possible to cache this information with the help of the service worker, and then use the app shell to load CSS rules to deliver an offline version with full UI capabilities. Any time a visitor loads a new page, the service worker will cache the JSON extract anew, and store it physically in the app shell. This app shell is a self-contained wrapper that has all necessary style sheets, scripts, images, fonts and HTML outputs required for a user to render a complete page without loading anything else. Compared to a website, a PWA has the capability of still showing

Figure 1. Traditional vs SPA Page Lifecycle comparison

1730 MIPRO 2019/SSE

Page 3: Using modern web frameworks when developing an education ...docs.mipro-proceedings.com/sse/01_sse_5262.pdf · A hybrid approach can also be implemented, in a way that it can host

data when the users are no longer connected to the internet.

Security through HTTPS - By having a secure connection to the PWA, users can feel relatively safe by allowing permissions and since the network requests are routed through the service worker script, adding https to the server helps to mitigate certain vulnerabilities such as snooping. While this requirement might be focused mainly on adding safety from hijackers, having a secure connection also helps build trust with users.

Framework Agnostic – the above-mentioned requirements can be applied within any modern framework or library.

A single page application (SPA) is usually a base or part of PWA, unless the SPA approach is not used for a static webpage.

III. MODERN WEB TECHNOLOGIES AND APPROACHES

In Section II, we introduced some general concepts in terms of defining and classifying applications. In this section, we would focus on some of the popular technologies when developing applications for the Web.

In the paper so far and further, we vastly use the term “technologies” to refer to different approaches to developing applications based on either framework, library or programming languages. That’s why before we continue, it’s important to point out the difference between a library and a framework. In general, the key differentiating feature is the matter of control - frameworks set rules on how your project has to be structured, whereas libraries are building blocks that can be used anywhere.

This being clarified, let’s continue with an assessment of the proposed innovative web frameworks.

A. React

React is a declarative and component-based JavaScript library for building user interfaces [3]. Originally released in March 2013, it was developed and is maintained by Facebook. Online references point out that it’s also implemented by other leading and innovative companies as Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Wix, Paypal, Tumblr, Walmart and others [4].

Some of the key features of the library lay in the ability to design simple views for each state of the application which can be efficiently updated on data changes and the right components can be rendered when needed. It also provides the possibility to build encapsulated components that manage their own state and then compose them into more complex user interfaces. The component logic, on the other hand, is written in JavaScript using a syntax extension called JSX and instead of templates, rich data can be easily passed through the app, thus keeping the state out of the DOM. JSX is a preprocessor that adds XML syntax to JavaScript as JSX tags have a tag name, attributes, and children. Although React can be evoked and applied without JSX,

JSX makes the usage of React a lot more structured and convenient.

React can also be rendered on the server using Node.js and power mobile apps using React Native. Node.js is an open-source and cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser, enabling server-side scripting and rendering dynamic web page content before the page is sent to the user's web browser.

In September 2017, Facebook released React Fiber together with React 16, that was described as an ongoing reimplementation of React's core algorithm, aiming to increase its suitability for areas like animation, layout and gestures, and ensuring faster rendering and backward-compatibility.

B. Angular

Angular is a TypeScript-based JavaScript framework, developed and maintained by Google, originally released as AngularJS in 2010 [5]. Angular (also known as Angular 2+, Angular 2 or ng2) is the rewritten and mostly incompatible successor to AngularJS (or AngularJS 1.x), introduced in September 2016 as version 2. The newest major release is version 7.

As a framework for dynamic web applications, Angular adapts structural and modular approach and implements features like two-way data binding, dependency injection, simple template syntax, code generation, RESTful API and AJAX handling, higher performance achieved via code splitting and component router, and others.

Online references suggest that Angular is used not only by Google but also by Forbes, Udemy, Lynda and others [6].

C. Vue

Vue is one of the most rapidly growing and gaining popularity JavaScript frameworks in 2016. Vue is described as an intuitive, performant and composable Model-View-View-Model (MVVM pattern) for building interactive interfaces [7]. It was first released in February 2014 by ex-Google-employee Evan You as a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries [7].

Ever since its release, Vue has been quite a success, especially given the fact that it’s developed and maintained by a team of dozen core developers. Vue is used by Alibaba, Baidu, Expedia, Nintendo, GitLab and others [8].

D. Popularity and statistics

As already mentioned in the previous subsections, all of the above technologies are supported either by big

MIPRO 2019/SSE 1731

Page 4: Using modern web frameworks when developing an education ...docs.mipro-proceedings.com/sse/01_sse_5262.pdf · A hybrid approach can also be implemented, in a way that it can host

companies and/or communities. Yet it’s interesting to analyze their overall popularity among developers and practitioners.

According to the 2018 StackOverflow survey, Angular is loved by 36,9% and React is embraced by 27,8% of the surveyed developers, as JavaScript is leading in general for sixth year in a row as the amost commonly used programming language, with overall of 69,8% in the “Most popular technology” category [9]. Although React and Angular are voted and sharing close results in the category of popular “Frameworks, Libraries, and Tools”, Vue hasn’t occupied a place in any of the above although its potential is present.

Another interesting statistic that should be considered and is even more helpful, in terms that from it we can conclude the actual interest in a specific technology, is the number of downloads for the given npm packages as shown in Figure 2 [10].

Another tool we could use for comparison is Google Trends reporting, although it’s not that precise in terms that various names and versions of the technologies exist. Though we can limit the search terms to “Programming” category which can highlight a specific pattern as shown in Figure 3:

From the above data, we can approximate that React and Angular has a steady trend in terms of popularity and development, while Vue as technology introduced late 2014, are still emerging and gaining recognition.

IV. COMPARISON AND EVALUATION

In the previous section, we outlined some of the modern and popular web technologies that are used nowadays when approaching the design and development of a web application. Yet in the plethora of JavaScript frameworks and emerging technologies, sometimes it can be difficult to choose objectively the right one. In most cases, each application can be tackled in different way and some technologies can be more appropriate for one type of applications while alternatives might be suitable for others.

In order to make a better assessment and choose the right one for our need, we would also consider other criteria and investigate the main features in terms of the ability to work with components, programing language and templating logic, state management approach, data-binding alternatives, universal and native applications bridge, presence of detailed documentation and other.

A. Directives and components

All of the proposed technologies are based on the concept of Web components. A component could be a package, a service, a resource of some type, or a module that encloses a set of functions or data, and can be reused either within the application itself or in combination with other components. It is further defined as a set of web platform APIs that allows the creation of new, custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards can work across modern browsers, and can be used with any JavaScript library or framework that works with HTML. Web components are based on existing web standards, as features to support web components are currently being added to the HTML and DOM specifications, allowing easy extension of HTML with new elements with encapsulated styling and custom behavior [11].

Components are called directives in Angular. The title of this subsection is deluded on purpose, as we want to emphasize on the fact that after Angular 2 the directive system is an implementation of the Web Component concepts.

A simple example could be a form component, consisting of several input components and a button component with various properties (like placeholders, values, etc.) that can be easily reused with different data sets on another page or view of the application.

B. Programing language – TypeScript vs. ES6 vs. ES5

It’s important to point out that React focuses on the usage of Javascript ES6, Vue on Javascript ES5/ES6, while Angular steps on TypeScript.

ECMAScript (or ES) is a scripting-language specification standardized and trademarked by Ecma International, and created to standardize JavaScript in a way to foster multiple independent implementations. JavaScript has remained the best-known implementation, together with JScript and ActionScript. On the other hand, TypeScript is an open-source programming language developed and maintained by Microsoft, and it’s a strict

Figure 2. Number of downloads for the given npm package for the

past 1 year, available at https://www.npmtrends.com/

Figure 3. Google Trends comparison for the given search terms for the

past 5 years, available at https://trends.google.com/

1732 MIPRO 2019/SSE

Page 5: Using modern web frameworks when developing an education ...docs.mipro-proceedings.com/sse/01_sse_5262.pdf · A hybrid approach can also be implemented, in a way that it can host

syntactical superset of JavaScript, and adds optional static typing to the language.

Some of the key differences between ES6 and TypeScript are that TypeScript supports all primitive data types and variables within three scopes (global, class and local) while ES6 doesn’t support all of the types and is limited only to the global and local scopes. Yet in terms of decision-making statements, loops and modules, there isn’t much difference. Performance tests, reported by online references, suggest that ES6 is faster than TypeScript in terms of small projects and applications, yet TypeScript performs sanity checks for bugs and syntax errors on compilation which makes it a better choice for complex applications [12]. We’re not focusing on ES5, mainly because Vue supports ES6 too. Yet the major differences between the two versions tackle a lot of the limitations of the core language, making it easier for development. For example, ES6 introduces Arrow functions, Object manipulation, Asynchronous Function, Module exports and imports, Template literals, etc.

C. Templates

It’s important to point out some differences in terms of templating and logic. React uses a JSX, an XML/HTML-like syntax that extends ES so that XML/HTML-like content can co-exist together with the JavaScript/React code. The syntax itself is intended to be used by preprocessors to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse. On the other hand, there have been debates as this approach confronts with long-standing best practices, namely separating UI templates and inline JavaScript logic.

The Angular templates are enhanced HTML with special Angular attributes called structural directives (like ngIf or ngFor).

In its documentation, Vue introduces the concept of “single-file components” as templates, scripts and styles are placed in one file but ordered in three different sections. However, it’s not that strict as Angular and also allows the usage of JSX.

D. Framework vs. Libraries

We’ve already pointed out the difference between a framework and a library, but in the context of this assessment, it is important to emphasize on the fact that Angular is a full-featured framework, while React is a library and Vue is defined as a library that can be scaled to a framework depending on the approach.

Angular is a complete solution, meaning that a developer can start working on the go, without taking any considerations regarding routing, other packages or modules. On the other hand, React and Vue are flexible backed up with various packages and alternatives to choose from, but thus every project requires a decision-making process regarding its architecture, and for an inexperienced developer that can lead to confusion and frustration.

E. Other concepts

Other concepts and approaches that we should consider can be summarized below:

State management – State management is a concept that refers to the state of one or more graphical user interface (UI) elements like text fields, buttons, etc. that depend on the state of other UI elements. For a complex application, state management can be complicated and can require a certain level of understanding. Vuex is state management library for the Vue, NgRx is the state management library for the Angular and Redux is a general-purpose state management library that can be used with any of the above or other View-based libraries, but is very commonly used with React.

Data binding - A key difference between React and Angular is the data-binding technique - one-way vs. two-way data-binding. Angular’s two-way data-binding changes the model state when the UI element is updated, while React updates the model first and after that it renders the UI element. Angular’s method is cleaner in code and easier for a developer to implement, yet React’s way results in a better data overview and debugging. Vue supports both one-way data-binding by default and two-way data-binding.

MVC - The model-view-controller pattern (MVC) is a popular design pattern that splits an application into three interconnected parts: model, view and controller. Angular as an MVC-framework has MVC out of the box. React only has the View – as the Model and Controller are up to the developer.

Dependency injection - Angular includes dependency injection, a design pattern in which one object supplies the dependencies (a service) to another object (a client). This leads to more flexibility and cleaner code.

Flexibility - You can work with React or Vue by simply adding the Javascript library to the source code. This is not possible with Angular because of the defined structure and the TypeScript usage. React and Vue allow more control in terms of sizing an application by selecting only the things which are really necessary.

Universal & native apps - React and Angular both support native development which makes the migration easier. Angular has NativeScript for native apps and Ionic Framework for hybrid apps, while React uses react-native-renderer package to build cross-platform iOS and Android apps, or react-native for native applications. Since all of the technologies render pages on the client which doesn't always result in good performance, all of them support server-side pre-rendering which enables better performance, overall user experience, and SEO.

MIPRO 2019/SSE 1733

Page 6: Using modern web frameworks when developing an education ...docs.mipro-proceedings.com/sse/01_sse_5262.pdf · A hybrid approach can also be implemented, in a way that it can host

F. Size & performance

Another criteria worth considering is the size of the packages and their overall performance. All of them come with a standard scaffold command-line interface tool, that can be installed as a bootstrap package and used to initialize, develop and maintain a respective application. From the installations we performed, we can summarize that the Angular framework is quite larger in size - the gzipped file is 143K, compared to 23K for Vue and 43K for React. In terms of overall performance, it’s worth mentioning that both React and Vue take advantage of the usage of the Virtual DOM, which is supposed to improve performance in comparison with the direct DOM rendering system which Angular relies on.

From the above, we can conclude that Vue has a greater performance in comparison with the others, yet the results would depend on the specific case and application structure.

G. Testing

In terms of testing, both of the major testing frameworks - Jest and Mocha, work with React. Jasmine is the testing framework that’s shipped with Angular, but it can use integration of Mocha or Karma. Vue lacks testing guidance, yet in their documentation is recommend using Karma.

H. Learning curve

Another non-technical but important aspect that we should consider when choosing a technology is the pace with which we can advance over time. Reference [13] suggests that from a practitioner’s point of view the presence of a detailed documentation, with sample code and instructions is a base for easier adoption. Yet the lack of academic studies on the matter combined with the diversity of JavaScript frameworks makes it difficult to outline an exact pattern for evaluation of the learning curve.

Angular is often described as a framework with a steep learning curve although it has comprehensive documentation. This is due to the fact that the concepts and approaches might turn difficult and confusing, even if a developer has a deep understanding of JavaScript, and mainly because a better comprehension of the framework is required to explain certain processes and practices. In terms of set up, it can be installed effortlessly with a lot of included packages and prerequisites.

On the other hand, considering React being a library means that a lot of consideration and decisions have to be made upfront with regard to third-party packages and libraries.

Vue has a flat learning curve and is considered easier for junior developers or those migrating from other popular libraries like jQuery, but on a long-run, it can turn complicated if it’s not approached accordingly. At first, it looks like a plain JavaScript, while introducing some new concepts which we’ve already discussed as: components, an event-driven-model, and one-way data binding, etc.

In terms of debugging, React and Vue are considered easier because of the project structure, less files and clear

distinction between them and third-party libraries’ code, while debugging an Angular application is considered complicated in terms of understanding the underlying model, as error reporting messages are supposed to be clearer and informative.

V. BLUEPRINT OF AN EDUCATIONAL APPLICATION

ARCHITECTURE

When it comes to developing a web application with certain functionalities, we believe that all of the above-mentioned technologies could be a possible alternative. In the context of our study though, we want to develop an educational application addressing the following:

Purpose – to introduce a side tool that can enhance the learning process in non-obtrusive way, and even better – to deliver a native app-like experience, with some game design elements to boost retention and engagement.

Users - as we mentioned in Section II, our target group are students of Generation Z (Gen Z), enrolled in Web development course, that would be able to access the application anytime and anywhere.

We want to use an Agile approach and keep the application simple, and enhance functionalities over time. It could be implemented as a quiz-based application where students can answer various questions in order to test their knowledge on a certain topic and advance over time.

In terms of the performed analysis in the previous sections, we decided to develop our application with Angular, mainly because it’s a full-featured framework that comes packed with a lot of functionalities out of the box, which allows further scalability, it’s also well-documented and have enterprise support. As we mentioned in the above sections, Angular takes advantage of the model-view-controller design pattern and web components. We use a component-based architecture for the application, which is common. Our main component is the AppComponent that triggers different views based on user interactions. Views on the other hand can evoke other partial components. Angular components are TypeScript classes that have a Component decorator marked over them. Decorators are a design pattern as MVC that is used to separate modification or decoration of a class without modifying the original source code. In AngularJS, decorators are functions that allow a service, directive or filter to be modified prior to its usage [5]. In addition, inside these decorators, we can define what Angular calls a meta-data, which includes different assets - the template, styles, selectors, etc.. On a component level, apart from the AppComponent, we also have a SignUp and Login components to gather users’ data and access the application, and also separate components as Courses Component, Topics Component, Questions Component and Activity Component to fulfill the quiz and manage progress. A common scenario is when a user interacts with the application and trigger changes on the model calling the controller. The controller, on the other hand, handles user interaction and business logic, manipulates the model and interacts with the server as data is supplied

1734 MIPRO 2019/SSE

Page 7: Using modern web frameworks when developing an education ...docs.mipro-proceedings.com/sse/01_sse_5262.pdf · A hybrid approach can also be implemented, in a way that it can host

by a JSON-file/REST API. Angular detects the model changes and updates the user view, for example we suggest using a filter for random question generation. A sample and basic blueprint of the architecture, and explained behavior is proposed in Figure 4:

VI. CONCLUSION AND FURTHER WORK

In this paper, we have conducted a research and analysis of some of the existing modern web frameworks, as our primary goal was to identify a suitable modern approach that would allow us to quickly develop and easily scale an educational application that supports university students enrolled in Web development course. Although we have referenced some non-scientific works and existing online resources, scrutinized with particular care, we find that this is mandatory for outlining and staying up to date with the latest development trends. We believe that this paper would be beneficial for fellow-

researchers familiar with JavaScript in general but looking for a solution in the plethora of JavaScript frameworks that would allow them to prototype, build and deploy an application with ease.

An actual implementation of the application is in the process of testing with several groups of students, as we plan to use experiments to assess and wrap the results in subsequent follow-up research.

ACKNOWLEDGEMENT

The study was supported by contract of University of Ruse “Angel Kanchev”, № BG05M2OP001-2.009-0011-С01, „Support for the development of human resources for research and innovation at the University of Ruse “Angel Kanchev”. The project is funded with support from the Operational Program “Science and Education for Smart Growth 2014 – 2020” financed by the European Social Fund of the European Union

REFERENCES

[1] M.A. Jadhav, B.R. Sawant and A. Deshmukh, “Single page application using AngularJS”,. International Journal of Computer Science and Information Technologies, 6(3), pp.2876-2879, 2015.

[2] A. Biørn-Hansen, T. A. Majchrzak, and T. M. Grønli, “Progressive Web Apps: The Possible Web-native Unifier for Mobile Development”, in WEBIST, pp. 344-351, April 2017.

[3] Official website and documentation at https://reactjs.org/

[4] According to Facebook at https://reactjs.org/ and libscore.com.

[5] Official website and documentation at http://angularjs.org/

[6] According to libscore.com.

[7] Official website and documentation at https://vuejs.org/

[8] According to madewithvuejs.com

[9] The survey results and analytics are availbale online at https://insights.stackoverflow.com/survey/2018/#technology

[10] Available at https://www.npmtrends.com/

[11] Official website and documentation at https://www.webcomponents.org/introduction

[12] According to http://incaseofstairs.com/six-speed/

[13] A. Pano, D. Graziotin and P. Abrahamsson, “What leads developers towards the choice of a JavaScript framework?”, arXiv preprint arXiv:1605.04303, 2016

Figure 4. Sample architecture

MIPRO 2019/SSE 1735