Masaryk University Faculty of Informatics Development of Modern User Interfaces in Angular Framework Master’s Thesis Bc. Martin Hamerník Brno, Fall 2020 This is where a copy of the official signed thesis assignment and a copy of the Statement of anAuthor is located in the printed version of the document. Declaration Hereby I declare that this paper is my original authorial work, which I have worked out on my own. All sources, references, and literature used or excerpted during elaboration of this work are properly cited and listed in complete reference to the due source. Bc. Martin Hamerník Advisor: RNDr. Daniel Tovarňák, Ph.D. i Acknowledgements My thanks belong to my advisor RNDr. Daniel Tovarňák, Ph.D for leading this thesis, valu- able consultations, and technological leadership. I would also like to thank my family and friends for their endless support. iii Abstract This thesis aims to analyze the current state of development of web user interfaces in gen- eral and in the CSIRT-MU environment, design and apply modern architectural approaches based on microservices, and create a set of supportive tools to improve quality and speed of development of new user interfaces. To achieve this goal, the author designs and imple- ments a framework for Angular applications. The framework consists of libraries provid- ing a unified pre-defined layout, a set of base components for the development ofcomplex user interfaces, and interfaces for authentication and authorization. In addition to the afore- mentioned capabilities, the framework proposes several architectural patterns suitable for developing complex Angular applications. A part of this thesis is a practical application of the proposed architectural patterns and integration of the framework into the KYPO Cyber Range Platform and Security Dashboard web applications. iv Keywords frontend, user interface, angular, kypo, cybersecurity, csirt-mu, software architecture, soft- ware engineering v Contents 1 Introduction 1 2 Modern Frontend Development 3 2.1 The Basics .......................................3 2.2 Types of Web Applications ..............................4 2.2.1 Traditional Web Applications . .4 2.2.2 Single Page Applications . .5 2.2.3 Progressive Web Applications . .5 2.3 Rendering Approaches ................................6 2.3.1 Static Server-side Rendering . .7 2.3.2 Server-side Rendering . .8 2.3.3 Client-side Rendering . .8 2.3.4 Combining the Approaches . .9 2.4 Modern JavaScript Frameworks ........................... 11 2.4.1 Angular . 11 2.4.2 React . 17 2.4.3 Vue . 19 2.5 Summary ....................................... 20 3 Environment 21 3.1 Organizational Context ................................ 21 3.1.1 CSIRT-MU . 21 3.1.2 Projects . 21 3.2 Author’s Work ..................................... 23 3.3 Technological Environment .............................. 23 3.3.1 Architecture of KYPO . 23 3.3.2 Architecture of Security Dashboard . 26 3.3.3 Development Technologies . 27 3.4 Motivation for Development of Unified Framework ................. 29 3.5 Functional Requirements of the Framework ..................... 30 3.6 Non-functional Requirements of the Framework ................... 30 4 Analysis and Design 31 4.1 Micro Frontends ................................... 31 4.2 Micro Frontends in Angular ............................. 34 4.3 Angular Libraries ................................... 35 4.4 Architecture of an Agenda .............................. 37 4.5 Smart-dumb Components ............................... 39 vii 4.6 Application State ................................... 40 4.7 Anatomy of CSIRT-MU Applications ........................ 41 4.8 API Code Generation ................................. 43 4.9 Build Once, Deploy Many .............................. 44 5 Sentinel Framework 47 5.1 Sentinel Common ................................... 47 5.2 Sentinel Layout .................................... 48 5.2.1 Breadcrumbs . 49 5.2.2 Notifications . 50 5.2.3 Schematics . 51 5.3 Sentinel Auth ..................................... 51 5.4 Sentinel Components ................................. 53 5.4.1 Bug Reporting . 54 5.4.2 Control Panel . 55 5.4.3 Confirmation Dialog . 55 5.4.4 Error Directive . 55 5.4.5 Infinite Scroll . 55 5.4.6 Infinite List . 56 5.4.7 Code Viewer . 56 5.4.8 Loading Component . 56 5.4.9 Markdown Editor . 56 5.4.10 Resource Selector . 57 5.4.11 Stepper . 57 5.4.12 Free Form . 57 5.4.13 Table . 59 5.4.14 Tour Guide . 60 5.4.15 User Assignment . 60 5.5 Agendas ........................................ 62 5.6 Dynamic Environments ............................... 64 6 Application of the Sentinel Framework 67 6.1 The KYPO GUI .................................... 67 6.2 The Security Dashboard GUI ............................. 70 7 Testing 73 7.1 General Principles .................................. 73 7.2 Testing in Angular .................................. 74 7.2.1 Karma . 74 7.2.2 Unit and Integration Testing . 75 viii 7.2.3 End-to-end Testing . 77 8 Conclusion 79 8.1 Future Work ...................................... 79 A Sentinel Framework 81 B KYPO CRP 83 Bibliography 85 ix 1 Introduction Over the last couple of years, a rise in the popularity of complex full-fledged web appli- cations can be observed. In our minds, writing a document, media playback, or even pro- gramming is no longer an activity strictly associated with desktop applications. Increasing performance of desktop and mobile devices, expansion of high-speed internet connection availability, and capabilities of modern web browsers allow us to conduct most of these activities directly in the browser. The increase of capabilities and amount of features, present in today’s web applications, projects into the complexity and costs of frontend development. Today’s frontend develop- ment often handles complex business and rendering logic. The goal of this thesis is to analyze the current state of development of user interfaces in the context of CSIRT-MU organization, design and apply architectural patterns, and pro- vide essential building blocks such as base components, to increase the efficiency of devel- opment of new user interfaces. After this introductory chapter, the thesis discusses the current state of modern fron- tend development in chapter 2. The chapter briefly introduces languages and standards of today’s web development, continued by a distinction of types of web applications and rendering approaches, and introduction of modern JavaScript frameworks. Chapter 3 describes the environment in which the thesis originated, puts the work in the context of CSIRT-MU from an organizational and technological point of view. It also states requirements on the architectural patterns and development framework. Chapter 4 analyzes modern architectural and design patterns used in frontend devel- opment and its suitability for the CSIRT-MU environment. It starts with the high-level ar- chitecture of web applications in the context of complex systems and continues to analyze patterns on lower levels, covering patterns for the decomposition of an application, state management, and best practices for component architecture. A framework developed to provide an implementation of the proposed architectural patterns as well as essential reusable building blocks for web applications is described in chapter 5. Next, chapter 6 demonstrates the application of the patterns and shared building blocks in two existing projects. Chapter 7 discusses approaches and possibilities of testing in frontend environment and specifically in the Angular framework. It also introduces and compares several libraries for testing. The last chapter summarizes the thesis, states its practical outputs, and proposes possi- bilities of further improvements and extension. 1 2 Modern Frontend Development Web development is a dynamic and ever-changing environment with a large and active open-source community. Standards, languages, and tooling are continually evolving. This chapter briefly introduces web development basics in section 2.1, followed by an overview of types of web applications in section 2.2. Section 2.3 covers current approaches application rendering and associated challenges related to performance, search engine visibility, and user experience. The last section 2.4 introduces Angular, React, and Vue, the three most popular JavaScript frameworks for building modern web applications. 2.1 The Basics HTML - Hyper Text Markup Language HTML is still the basic building block of the web. It gives structure and meaning to a simple text, in a way understood by a web browser. The HTML consists of elements. Attributes can modify the elements, and user interactions can be detected by listening to events [1]. When rendering a website, the web browser fetches an HTML file from a server, parses the HTML code, and constructs a hierarchical tree structure called Document Object Model (DOM) [2]. CSS - Cascading Style Sheets CSS is a style sheet language describing the presentation and layout of web documents. CSS consists of rules and selectors. Numerous predefined rules supported by web browsers can be used to alter the presentation of a DOM element. The element which should be affected by the rules is determined by matching a pattern described by a selector [3].Asthe DOM is being built, the web browser parses the CSS and creates a render tree, containing information on how should the HTML and its styles be displayed in a browser window [4]. JavaScript JavaScript is an interpreted programming language, mostly known and used for running