Airbus Defence and Space Company Confidential Swift Framework Swift Framework UI Pagination & filtering Study This document has been approved and Export Rated through the Airbus Defence and Space Electronic Document System Document Author: O.Chaumont Design Authority: P.Carlin Quality Assurance: G. Edmunds Engineering/Project Manager: M.Hopwood © 2019 Airbus Defence and Space Ltd (All Rights Reserved) Company Registration No. 2449259 © 2020 Airbus Defence and Space Ltd (All Rights Reserved) Company Registration No. 2449259 Airbus Defence and Space Confidential 00000000 Issue 1 Page 1 of 15 Airbus Defence and Space Company Confidential Swift Framework INTENTIONALLY BLANK © 2020 Airbus Defence and Space Ltd (All Rights Reserved) Company Registration No. 2449259 Airbus Defence and Space Confidential 00000000 Issue 1 Page 2 of 15 Airbus Defence and Space Company Confidential Swift Framework 00000000 Issue 1 Page 3 of 15 CONTENTS 1. INTRODUCTION................................................................................................................................. 5 1.1 Purpose ........................................................................................................................................ 5 2. REFERENCES, ABBREVIATION AND DEFINITIONS ...................................................................... 5 2.1 Applicable documents (AD) ......................................................................................................... 5 2.2 Reference Documents (RD)......................................................................................................... 5 2.3 Internet references ....................................................................................................................... 6 2.4 Abbreviations ............................................................................................................................... 6 2.5 Definitions .................................................................................................................................... 6 3. DEFINITION ........................................................................................................................................ 7 3.1 Pagination .................................................................................................................................... 7 3.2 Sorting .......................................................................................................................................... 7 3.3 Filtering ........................................................................................................................................ 7 4. DESIGN COMPARISONS .................................................................................................................. 8 4.1 Pagination & sorting ..................................................................................................................... 8 4.2 Filtering ........................................................................................................................................ 9 5. MIX APPROACH ............................................................................................................................... 10 6. DESIGN CHOICE ............................................................................................................................. 14 © 2020 Airbus Defence and Space Ltd (All Rights Reserved) Company Registration No. 2449259 Airbus Defence and Space Confidential Airbus Defence and Space Company Confidential Swift Framework INTENTIONALLY BLANK © 2020 Airbus Defence and Space Ltd (All Rights Reserved) Company Registration No. 2449259 Airbus Defence and Space Confidential 00000000 Issue 1 Page 4 of 15 Airbus Defence and Space Company Confidential 00000000 Issue 1 Page 5 of 15 Swift Framework 1. INTRODUCTION 1.1 Purpose The purpose of this document is to describe the different options to design the pagination and filter feature on front layer provided by Swift framework. 2. REFERENCES, ABBREVIATION AND DEFINITIONS 2.1 Applicable documents (AD) The following publications form part of this document to the extent specified herein. Applicable documents referenced within the text are annotated [AD/*], where * refers to the key number in the table below. AD Number Issue Title 2.2 Reference Documents (RD) The following publications have been used in the preparation of this document. They provide background information and do not form part of this specification. Reference documents referenced within the text are annotated [RD/*], where * refers to the key number in the table below. RD Number Issue Title © 2020 Airbus Defence and Space Ltd (All Rights Reserved) Company Registration No. 2449259 Airbus Defence and Space Confidential Airbus Defence and Space Company Confidential Swift Framework 00000000 Issue 1 Page 6 of 15 2.3 Internet references Multiple parts of this document are copied or inspired by web articles. Here is the url reference to these articles: https://www.moesif.com/blog/technical/api-design/REST-API-Design-Filtering-Sorting-andPagination/ https://nordicapis.com/everything-you-need-to-know-about-api-pagination/ 2.4 Abbreviations This section provides an alphabetically ordered list of all abbreviations used throughout this document, with associated meanings. LHS left-hand side RHS right-hand side 2.5 Definitions Boilerplate Code Sections of code that are repeated with little or no alteration. Microservice A method of developing a software application as a suite of independently deployable, small, modular services. RESTful Pertaining to the REST standard. © 2020 Airbus Defence and Space Ltd (All Rights Reserved) Company Registration No. 2449259 Airbus Defence and Space Confidential Airbus Defence and Space Company Confidential Swift Framework 00000000 Issue 1 Page 7 of 15 3. DEFINITION 3.1 Pagination The pagination feature is used to display on the screen a part of the data. Usually a table component is used to display the data and at the bottom of this component a navigation bar is displayed. Here is a screenshot of pagination feature with PrimeNG table component. 3.2 Sorting The sorting feature is used to display on the screen the data sorted by a column value or multiple column values. Here is a screenshot of pagination feature with PrimeNG table component on multiple column: 3.3 Filtering The filtering feature is used to filter data displayed on the screen by a column value or multiple column values. The layout of a filtering feature could be really different from a component to another, here is an example with PrimeNG table. © 2020 Airbus Defence and Space Ltd (All Rights Reserved) Company Registration No. 2449259 Airbus Defence and Space Confidential Airbus Defence and Space Company Confidential Swift Framework 00000000 Issue 1 Page 8 of 15 As you can see, it is possible to filter table data with different type of filters: Filter A: Text filter The table data are filtered when the user set a value in this field. Filter B: List filter The user can select different value in a list. Note that it is also possible to search for filter value. The filter values can also be filtering… Filter C: Global filter This is global filter, like a filter on all columns. 4. DESIGN COMPARISONS 4.1 Pagination & sorting This chapter details and compare different options to design the pagination feature. 4.1.1 Front layer pagination On this design, the front layer gets all the data from the server side, store it in memory and display a pagination bar on the table component. When the user paginates, no requests are send to server side. The sorting feature is linked to pagination and where the set of data is stored. Benefits Performance are really good because the HTTP call to server side is done only one time. Implementation is easier because it is supported by default by PrimeNG table component. Downsides If the data set is too big, this design will have at minimum performance issue or not working at all: o Time out exception because server side need too much time to give the answer. © 2020 Airbus Defence and Space Ltd (All Rights Reserved) Company Registration No. 2449259 Airbus Defence and Space Confidential Airbus Defence and Space Company Confidential Swift Framework o o 00000000 Issue 1 Page 9 of 15 Display of first page is very long because all the data need to be download. Note that some workarounds are possible by download data of the first page and in back end the data of others pages, but the implementation complexity depends of the UI library. Memory issues because the browser memory is limited. If the data are updated on server side, the UI continue to display it. A system of cache expiration must be design, depending also of the context of displayed data: Refresh button, expiration time, notification…. 4.1.2 Server side pagination On this design, the front layer load only the data displayed on the screen, so if the page 1 is displayed, the server side returns only a small part of the data. The sorting feature is linked to pagination and where the set of data is stored. Benefits The data is always up to date with the server side, not need to deal with data expiration design. Implementation is more complex than the front layer pagination, but PrimeNG library supported this lazy load design, so it seems to be possible with low effort. Downsides Performance is definitively lower that front layer pagination because a HTTP call is done every time the user moves to another page. Note that a system of cache can be implemented, but in this case an complex expiration design must be because the cache doesn’t synchronize all data with one request, but only some part of the data with multiple requests. 4.2 Filtering 4.2.1 Front layer filtering On this design, the front layer need to gets all the data from the server side and stores it in memory. This implementation is working only with the front layer pagination. The filtering feature is applied directly by the component to filter displayed data. When the user modifies filtering values, no requests are send to server side. Benefits Similar to front layer pagination Downsides Similar to front layer pagination © 2020 Airbus Defence and Space Ltd (All Rights Reserved) Company Registration No. 2449259 Airbus Defence and Space Confidential Airbus Defence and Space Company Confidential Swift Framework 00000000 Issue 1 Page 10 of 15 4.2.2 Server side filtering On this design, the front layer load only the data displayed on the screen, so the server side returns only a part of the data. Note that the size of data returns by the server side depends of the filter type and filter value, there is no guarantee that the data size is not too big. (Example: Return all people on earth or “only” all men people on earth make no difference in term of memory issue…) This implementation is working with front layer and server side pagination, but there are no benefits to use it with front layer pagination, so it must be used only with server side pagination. The filter type A & B described in chapter 3.2 can be implemented with this design, but the filter type C is more complex and not yet supported by Swift. Benefits The data is always up to date with the server side, not need to deal with data expiration design. Implementation is more complex than the front layer pagination, but PrimeNG library supported this lazy load design, so it seems to be possible with low effort. Downsides Performance is definitively lower that front layer pagination because a HTTP call is done every time the user moves to another page. Note that a system of cache can be implemented, but in this case an complex expiration design must be because the cache doesn’t synchronize all data with one request, but only some part of the data with multiple requests. 5. MIX APPROACH As we can see with the previous analysis, there benefits and drawback for the both design, but it is possible to take benefit of the both approach by a custom implementation which can cache data on front layer and call the server side only when it is required. Take as example that an application displays a list of city, and the user have the possibility to filter the cities by name. The user filters the first result by city which start with “san”, so the result come back with the following list: San Francisco San Antonio San Diego San Miguel The front layer stores the 4 cities in a cache and store also the filter context which is a string “San”. Now the user changes his filter value: Option A: The new filters are stricter than the previous ones, there is no need to reload the data from the web server, the target result is a subset of original result and so only the previously loaded data are locally filtered resulting in a quick display. (Example: “San Fr”) © 2020 Airbus Defence and Space Ltd (All Rights Reserved) Company Registration No. 2449259 Airbus Defence and Space Confidential Airbus Defence and Space Company Confidential Swift Framework 00000000 Issue 1 Page 11 of 15 Option B: The new filters are less strict and should display more data than previously displayed: the web server is called to get the new filtered data. The implementation of this cache must be a component independent of the PrimeNG component, it must be an API which is called by the table. To be more explicit, here is a design which can be used to implement this component: The ActiveDataSet is the component which stores the element to displays by page. totalElts: The number of total elements of the table, used by table component to dislay th navigation bar. eltsByPage: List elements to display by page number. filterElts: List all elements of table. It is only used when the datamodel is loaded to get a subset of the datamodel after filtering. The DataModel is the cache of the system. When the system decides to load all elements of a request, it stores the result here: loaded: flag which indicates if the dataModel stores or not data. Elts: All elements retrieve from the server side. filterContext: Store the filterContext fo the request. Useful to know if the system need to reload the data or not when the filter parameters are updated. © 2020 Airbus Defence and Space Ltd (All Rights Reserved) Company Registration No. 2449259 Airbus Defence and Space Confidential Airbus Defence and Space Company Confidential Swift Framework 00000000 Issue 1 Page 12 of 15 The objective of these components is to optimize the request for the common use case, keep a robust and simple implementation, without need complex configuration. Here is a simple algorithm which can be used to populate the ActiveDataSet and the DataModel. © 2020 Airbus Defence and Space Ltd (All Rights Reserved) Company Registration No. 2449259 Airbus Defence and Space Confidential Airbus Defence and Space Company Confidential Swift Framework © 2020 Airbus Defence and Space Ltd (All Rights Reserved) Company Registration No. 2449259 Airbus Defence and Space Confidential 00000000 Issue 1 Page 13 of 15 Airbus Defence and Space Company Confidential Swift Framework 00000000 Issue 1 Page 14 of 15 6. DESIGN CHOICE So which design must be chosen for your use case? Front layer pagination & filtering? When the number and size of elements is not too big and this number can’t increase in the future, this is the best and simple choice. Server side pagination & filtering? If the number of elements are too big, and the user don’t need to update his filter values multiple time to navigate through the result, this option is a valid one. Note that the UX will be probably different in the way that a button “apply filter” must be probably use instead of dynamically update the result table when the user defined the filter. Mix approach? If the number of elements without any filter is too big to load all of them on front layer, but this number decrease quickly with few filter values, this option is the best one. The display will become quicker when the user starts to filter result. © 2020 Airbus Defence and Space Ltd (All Rights Reserved) Company Registration No. 2449259 Airbus Defence and Space Confidential Airbus Defence and Space Company Confidential 00000000 Issue 1 Page 15 of 15 Swift Framework DOCUMENT CHANGE DETAILS ISSUE CHANGE REFERENCE 01-00 CLASS RELEVANT INFORMATION/INSTRUCTIONS II First Issue. DISTRIBUTION LIST INTERNAL EXTERNAL CADM © 2020 Airbus Defence and Space Ltd (All Rights Reserved) Company Registration No. 2449259 Airbus Defence and Space Confidential
