Аудит UI-форм бізнес-процесів
Назва | Критичність |
---|---|
Висока |
|
Середня |
|
Висока |
|
Висока |
|
Висока |
|
Середня |
|
Середня |
|
Висока |
|
Середня |
|
Висока |
FR-01. Великі форми
Критичність: Висока |
Робити форми якомога простішими та короткими
-
Зниження продуктивності при рендерінгу форми в браузері
-
Ускладнення внесення змін до форми розробниками регламенту
-
Погіршення користувацького досвіду при заповненні або перегляді форми
-
Збільшення ймовірність виникнення системної помилки у користувача при роботі з формою (наприклад, втрата заповнених даних через закінчення сесії користувача)
-
Ускладнення тестування форми. Велика кількість тест кейсів, які треба покрити
-
При внесенні даних, розбивати форму на декілька окремих і робити збір даних поетапно
-
При перегляді даних:
-
Показувати обмежений набір даних за замовчуванням
-
Для перегляду детальної інформації використовувати звіти чи витяги
-
-
Уникати комплексної вкладеності компонентів зі складними зв’язками
Детальніше про кращі практики по розробці WEB форм можна ознайомитись за посиланням |
FR-02. Lazy load для компонента Select
Критичність: середня |
При наявності великої кількості компонентів Select на формі, використовувати lazy load для підвантаження даних по URL. За замовчуванням компонент Select заздалегідь дістає дані (eager load) по URL в наступних випадках:
-
При первинному рендерінгу форми
-
При зміні в пов’язаному компоненті
-
При оновленні користувацького токена (системна поведінка, яка відбувається безумовно незалежно від дій користувача)
-
Додаткове навантаження на сервери та мережу
-
Збільшення часу рендерінгу форми
-
На момент написання документа в деяких випадках при значній кількості компонентів Select у користувача може виникати системна помилка з оновленням авторизаційного токена
-
Уникати створення великих форм (див. FR-01. Великі форми)
-
Використовувати lazy load для компонентів Select якщо їх кількість на формі достатньо велика (понад 5)
-
Використовувати eager load у випадках, коли це дійсно може покращити користувацький досвід. Наприклад, для першого компоненту Select на формі, щоб у користувача відразу після рендерінгу форми були необхідні дані для вибору
FR-03. Javascript логіка в компонентах форми
Критичність: висока |
Конструктор форм дозволяє втілити значну кількість обробки даних та валідацій за допомогою вбудованих можливостей. Додатково, існує можливість для певного переліку налаштувань (validation, conditional, custom default value) реалізувати індивідуальну логіку на javascript. Це дозволяє з одного боку гнучко налаштовувати форму, однак, складна та об’ємна логіка створює приховану складність, яка може призвести до проблем, що важко відлагоджуються або непередбачуваної поведінки форми.
Підтримка та розвиток складної javascript логіки на рівні моделювання форми стають крайно незручними. Це може призвести до додаткового часу, витраченого на відлагодження, а також збільшити ймовірність помилок. Особливо це стає актуальним, коли команда розробників змінюється або проєкт передається на підтримку.
-
Контроль обсягу використання Javascript. Обмежувати складність javascript логіки в формах. Намагатися зберігати логіку якомога простішою та більш прямолінійною.
-
Використовувати вбудовані можливості конструктора форм для валідації та обробки даних
-
Уникати побічних ефектів в місцях використання. Кожна вставка javascript логіки має єдину відповідальність (валідація, умовне відображення, обробка даних тощо) та не має впливати на інші частини форми
FR-04. Зовнішні АПІ сервіси в компоненті Select
Критичність: висока |
Компонент Select як джерело даних може використовувати зовнішні АПІ сервіси за довільним доменом, наприклад, як довідник. Додатково існує можливість додавання кук (cookie) домену АПІ сервісу у виклик, який може містить куку (cookie) для авторизації. Треба узгодити налаштування на такому АПІ сервісі (якщо є можливість впливати на ці налаштування) та формою, яка виконує цей запит.
Безпосередньо отримання авторизаційної кукі (cookie) поза скоупом рішення і не є предметом цього документу. |
-
Браузер заблокує виконання запиту до АПІ сервісу через CORS політики
-
АПІ сервіс заблокує запит через відсутність необхідної Cookie
-
Якщо АПІ сервіс відкритий і не потребує авторизації:
-
В налаштуваннях компонента Select виключити передачу авторизаційної інформації при запиті на АПІ сервіс (параметр Add authentication cookies for cross-site requests = false)
-
Значення заголовка Access-Control-Allow-Origin у відповіді АПІ сервісу повинно мати значення домену кабінету користувача або вайлкард *
-
-
Якщо АПІ сервіс потребує авторизації та рішення припускає наявність кукі (cookie) для авторизації на домен АПІ сервісу в браузері необхідні наступні умови:
-
В налаштуваннях компонента Select додати передачу авторизаційної інформації при запиті на АПІ сервіс (параметр Add authentication cookies for cross-site requests = true)
-
Значення заголовка Access-Control-Allow-Origin у відповіді АПІ сервісу повинно мати значення домену кабінету користувача (вайлдард * не допускається)
-
-
Додатково перед виходом в промислове середовище потрібно перевірити налаштування АПІ сервісу та форми та впевнитися, що вони заздалегідь адаптовані до вимог CORS політик. Наприклад, домен користувача кабінету доданий в налаштування зовнішнього АПІ сервісу
FR-05. Компонент карти. Нестандартні тайл-сервери
Критичність: висока |
При використанні нестандартних тайл-серверів для базового шару карти необхідно провести додаткові налаштування на сервері для оновлення Content-Security-Policy (CSP) заголовка відповіді.
На момент написання документа стандартними тайл-серверами вважаються tile.openstreetmap.org та visicom.ua. |
Без додаткових налаштувань на сервері браузер буде блокувати запити на тайл-сервер і карта не буде працювати.
Заздалегідь провести налаштування на відповідному оточенні, якщо відомо, що будуть використовуватися нестандартні тайл-сервери.
На момент написання статті конфігурація Content-Security-Policy (CSP) задається у файлі deploy-templates/templates/kong-response-transformer-plugin.yaml репозиторію common-web-app |
FR-06. Експериментальні компоненти
Критичність: середня
Компоненти в конструкторі форм в Веб-інтерфейсі моделювання регламенту розділені по 3 категоріям:
-
Оновлені: адаптовані компоненти під рішення та дизайн кабінетів. Розробка та тестування цих компонентів підтримується командою розробки платформи
-
Експериментальні: стандартні компоненти Form.io. Не адаптовані під систему. Не підтримуються командою розробки платформи й не тестуються на відповідність вимогам системи
-
Компоненти: застарілі адаптовані компоненти, які вже не підтримуються командою розробки платформи
При моделюванні форм рекомендується використовувати компоненти з категорії Оновлені
-
Працездатність форми, яка містить компоненти з категорій Експериментальні та Компоненти не гарантується
-
Використовувати компоненти з категорії Оновлені
-
Якщо використання компонентів з інших категорій є обґрунтованим, врахувати всі можливі ризики й приділити тестування таких форм більшу увагу
-
Окремо слід зауважити, що використання компонентів з категорії Експериментальні чи Компоненти з подальшим ручним виправленням коду і зміни типа на latest, що відповідає оновленому компоненту може призвести до непередбачуваних наслідків і працездатність не гарантується в такому випадку
FR-07. Ліміти на критеріях пошуку для компонента Select
Критичність: середня
При використанні компонента Select з інтеграцію з довідниками через критерії пошуку дата моделі реєстру чи зовнішніми сервісами завжди вказувати параметр limit в налаштуваннях компонента. В промисловому середовищі кількість даних може бути набагато більшої, чим у тестовому, тому використання параметра limit дозволить уникнути проблем з продуктивністю.
Велика кількість даних, отримана в компоненті Select з відсутнім параметром ліміту, може призвести до наступних потенційних проблем:
-
Додаткове непотрібне навантаження на реляційну базу даних
-
Додаткове непотрібне навантаження на сервіс синхронного управління даними реєстру
-
Збільшення часу рендерінгу форми
-
Задавати параметр limit для компонента Select в мінімально необхідне значення для коректного функціонування форми
-
Використання параметра Disable limiting response повинно бути обґрунтоване і у більшості випадків не рекомендується
FR-08. Математичні обчислення
Критичність: висока
Будь-які математичні обчислення (в особливості фінансові), результат виконання яких є достатньо критичним для функціонування реєстру повинні виконуватися на сервері в рамках DMN таблиць чи бізнес-процесів.
-
Результат математичних обчислень, що виконують на стороні клієнта можуть бути скомпрометовані й не можуть вважатися правдивими
-
Компонент Number використовує Javascript тип Number, який не є точним для фінансових обчислень і його використання для великих чисел може бути небезпечним
-
Використовувати DMN таблиці чи бізнес-процеси для виконання математичних обчислень
-
Для покращення користувацького досвіду та швидшого розуміння результату обчислення користувачем, логіка може бути продубльована на клієнті, але результат повинен ігноруватися на сервері
FR-09. Маска на текстовому полі
Критичність: середня
Для спрощення вводу даних у компонент текстового поля можна використовувати маску. Маска визначає формат введення даних у поле. Для коректного передзаповнення полів з маскою, дані повинні відповідати формату маски.
-
Користувач не зможе підписати дані форми через помилку валідації на клієнті, якщо текстове поле з маскою не було передзаповнено коректно і відповідно бізнес-процес неможливо буде завершити
-
Користувач не зможе виконати користувацьку задачу при наступних умовах:
-
Текстове поле містить маску
-
Текстове поле налаштоване як таке, що не можливо редагувати
-
Дані для передзаповнення не відповідають формату маски для текстового поля
-
-
На формах, де передбачається використання маски, перевіряти відповідні дані для передзаповнення полів в бізнес-процесі
-
Особливу увагу приділяти даним, які були отримані зі сторонніх систем, і які з великою ймовірністю можуть не відповідати масці
-
Розглянути можливість відмови від використання масок. Іноді додаткові зусилля на підтримку масок для даних з різних джерел можуть бути недоцільними. Також маску можна залишити для вводу даних, але не використовувати її для передзаповнення
FR-10. Edit Grid
Критичність: висока
При використанні компонента Edit Grid слід враховувати, що наявність складної логіки вкладених компонентів може суттєво впливати на продуктивність рендерінгу форми в поєднанні з великою кількістю рядків у таблиці. Це однаково стосується як і режиму для читання, де дані для відображення готуються в бізнес-процесі, так і режиму редагування, де користувач вносить дані в таблицю.
В рамках цього пункту значення в тексті Таблиця та Edit Grid є синонімами. |
-
Збільшення часу рендерінгу форми через наступні причини:
-
Виконання запитів на критерії пошуку для кожного рядка таблиці. Тобто, якщо в таблиці 100 рядків, з 3 селектами, то буде виконано 300 запитів на критерії пошуку
-
Виконання запиту на пошук файлів в Сервіс цифрових документів для кожного рядка таблиці при наявності файлу. Слід зауважити, що запит зі сторони клієнта виконується 1 раз для таблиці, проте час його виконання буде пропорційно збільшуватися від кількості файлів через деталі внутрішньої реалізації (складність дорівнює O(n))
-
-
Використовувати параметр для оптимізації рендерінгу колонок Edit Grid (Вкладка Data, чекбокс Optimize column render). Цей параметр вимикає всі можливості по складній логіці вкладених компонентів (javascript код, який відповідає за валідацію, умовне відображення, обчислювальне значення, виклики критеріїв пошуку тощо). Тобто, таблиця буде відображати тільки дані які підготовлені заздалегідь в бізнес-процесі, або додані користувачем. При цьому форма, яка відповідає за додавання нового елементу в таблицю збереже відповідні можливості.
-
Уникати використання файлів в Edit Grid для відображення даних, які були підготовленні в БП. Для перегляду файлів використовувати детальну картку для окремого запису на окремій формі.
-
Використовувати мінімум даних для перегляду в таблиці:
-
Зменшити кількість рядків до мінімального допустимого значення. За можливості, розглянути альтернативу у вигляді звітів, якщо необхідно працювати з усіма даними відповідної таблиці
-
Зменшити кількість колонок до мінімально необхідного значення. Як і в рекомендації з файлами, використовувати окрему форму для перегляду детальної інформації про рядок
-