Client

Приклад:

Для API clients особливо корисні:

Практична роль: хороший client не без зусиль падає при помилці, а оптимізує користувачу зрозуміти, що робити далі. Практична роль: навіть якщо server швидкий, повільний client здатна зробити весь застосунок неприємним для користувача. Найчастіше client функціонує разом із server: client надсилає request, server його обробляє й повертає response. Client у SSR все одно важливий, бо він:

Accept: "application/json"

}

User-Agent здатна допомагати:

== Client у Microservices ==

== User Agent ==
Приклади:
</div>
Clients звертаються до gateway, а gateway:

<syntaxhighlight lang="graphql">

* HTML page;
* JSON data;
* image;
* file;
* authentication token;
* payment confirmation;
* search results;
* user profile;
* chat messages;
* game state. Він корисний, якщо:
'''критично:''' client library має оновлюватися разом із API. '''Game client''' — клієнтська частина гри, яка запускається на пристрої гравця. Mobile client показує баланс, надсилає payment request, отримує підтвердження від server і показує notification. * старий mobile client очікує старий API;
* новий frontend використовує нове поле;
* desktop client не оновився;
* SDK version відстає;
* browser не підтримує feature;
* breaking API changes. Client надсилає POST /api/profile

Client state здатна зберігатися в:

Ризики:

'''Практична роль:''' desktop client зручний там, де потрібен доступ до локальних файлів, системних можливостей або складний професійний UI. * web applications;
* mobile apps;
* desktop software;
* client-server architecture;
* APIs;
* HTTP communication;
* databases;
* email systems;
* multiplayer games;
* cloud services;
* microservices;
* command-line tools;
* SDKs;
* remote desktop;
* streaming platforms;
* messaging applications. Небезпечні приклади:

* web pages;
* REST APIs;
* GraphQL APIs;
* file downloads;
* webhooks testing;
* service-to-service communication;
* automation;
* monitoring. * notes app;
* mobile maps;
* email client;
* field service app;
* document editor;
* offline-first web app. * Client-side cache здатна прискорити застосунок, але здатна й показати застарілі або чутливі інформаційні дані.<div style="background:#fdecea; border-left:6px solid #e74c3c; padding:12px; margin:12px 0;">

Приклад query:

Що можна мати на client:

Client → Request → Server

* не звертатися до real API;
* тестувати service logic;
* контролювати responses;
* симулювати errors;
* прискорити tests;
* уникнути costs;
* перевірити edge cases. const response = await fetch(`${this.baseUrl}/users/${id}`, {
<div style="background:#eafaf1; border-left:6px solid #2ecc71; padding:12px; margin:12px 0;">
Response здатна містити:
<div style="background:#eafaf1; border-left:6px solid #2ecc71; padding:12px; margin:12px 0;">
</div>
</div>
'''критично:''' retry здатна допомогти при тимчасовій проблемі, але здатна й погіршити збій, якщо всі clients почнуть повторювати запити одночасно. * Матеріали щодо authentication, authorization, client-side security, caching, offline sync і error handling.== Цікавий факт ==

* більший JavaScript bundle;
* повільніший initial load у частині сценаріїв;
* SEO здатна потребувати додаткових рішень;
* більше логіки на client side;
* залежність від browser performance. Поняття

</div>

Client ← Response ← Server

<div style="background:#fff4e5; border-left:6px solid #f39c12; padding:12px; margin:12px 0;">

* показує UI;
* надсилає input;
* отримує готові інформаційні дані;
* має мало локальної логіки;
* залежить від server;
* часто простіший в адмініструванні. 2. '''Головна думка:''' client — це сторона, яка просить і взаємодіє.

зберігати local data;
працювати offline;
виконувати складні обчислення;
мати багатий UI;
синхронізуватися із server;
працювати з local files;
мати власну cache або database. const user = await response.json();

Приклади:

Timeout

Client library здатна бути офіційною або community-made. Wait forever

mocks;
stubs;
test server;
contract testing;
recorded responses;
sandbox environment. Найчастіше це browser. Один застосунок здатна бути server для одного запиту й client для іншого.

BFF або Backend for Frontend — backend-шар, створений спеціально під потреби конкретного client-а. Типовий приклад:

API gateway здатна бути проміжним server-side шаром між clients і backend services.

виступає як користувацький UI;
потрібен mobile app;
потрібен desktop app;
виступає як public API;
потрібна інтеграційні функції ERP з іншим service;
потрібен CLI;
потрібен SDK;
виступає як offline mode;
потрібно працювати з server віддалено;
виступає як кілька платформ;
потрібен спеціальний UX для різних пристроїв.

Практична роль: request — це спосіб client сформулювати, що саме йому потрібно від server.

як приклад:

критично: не кожному продукту потрібен складний frontend client.

Практична роль: offline client корисний там, де інтернет нестабільний, але користувач системи має продовжувати роботу. Він доречний, коли потрібна локальна потужність, offline mode або складний UI. критично: client state зручний для UX, але server не повинен сліпо довіряти даним, які приходять від client. Server returns HTML

automation;
scripting;
DevOps;
debugging;
administration;
CI/CD;
power users. * Mobile clients складніші через offline, battery, app store updates і різні device versions.

method;
URL;
headers;
body;
query parameters;
cookies;
authentication token;
content type;
user agent;
request id. * passwords;
tokens;
private messages;
payment data;
зайві personal data;
sensitive form content. * BFF-підхід з’явився тому, що різні clients мають різні потреби. Небезпека: найтиповіша помилка — думати, що якщо кнопка прихована в UI, то дія справді заборонена.

швидша робота;
менше network traffic;
кращий offline mode;
менше server load;
кращий UX.

Небезпека: server не має вважати client “чесним”. Критично: якщо secret потрапив у client, він більше не secret. Accessibility містить:

network glitch;
timeout;
temporary server overload;
503 Service Unavailable;
rate limit у частині scenarios;
lost connection. Server зберігає зміни

Client здатна просити:

</syntaxhighlight> Він здатна:

Retry Logic

!== Client Update == Client здатна логувати:

Game Client

Практична роль: contract testing ловить ситуації, коли server змінив response, а client ще очікує старий формат. Proxy здатна використовуватися для:

Client і Contract Testing

Головна перевага: client-server model дає можливість одному server обслуговувати багато різних clients. Практична порада: client має відповідати реальному сценарію використання: browser, phone, desktop, terminal або інший backend service. * WebSocket client підтримує постійний діалог із server, а не окремі request-response цикли. Server-side rendering або SSR — підхід, де server генерує HTML, а client отримує вже готовішу сторінку. * chats;

live dashboards;
multiplayer games;
notifications;
collaborative editing;
trading platforms;
real-time monitoring;
live sports updates.

Практична роль: SDK робить роботу з API простішою й менш помилковою для developers. Чи виступає як accessibility checks?</syntaxhighlight>

const response = await fetch("https://api.example.com/users/123");

curl https://api.example.com/status

* resources;
* HTTP methods;
* status codes;
* JSON;
* headers;
* pagination;
* filtering;
* authentication;
* errors. як приклад, браузер виступає як client; так само реалізовано мобільний застосунок виступає як client для backend API, а програма для підключення до PostgreSQL виступає як database client.</div>

Приклад:
</div>
6. '''Circuit breaker''' — pattern, який тимчасово зупиняє requests до проблемного service.</div>
Недоліки:
'''Email client''' — програма для роботи з email. Приклади:

* швидкий feedback;
* кращий UX;
* менше зайвих requests;
* зручніші forms. Client має встановлювати timeouts, щоб не чекати вічно. Недоліки:
== Browser як Client ==

'''Request''' — запит, який client надсилає server. Приклад
</div>
'''Contract testing''' перевіряє, що client і server однаково розуміють API contract.</div>
<syntaxhighlight lang="text">
'''Практична роль:''' CLI client дає можливість керувати складними системами через команди, scripts і pipelines. Server validates input

<syntaxhighlight lang="javascript">

* Матеріали з client-server architecture і network programming. }

* перевірити request;
* виконати business logic;
* звернутися до database;
* перевірити permissions;
* сформувати response;
* повернути error;
* записати logs.</div>
'''критично:''' client здатна перевірити форму для зручності, але server усе одно має перевірити login, permissions і input. Sync має вирішувати:

* Apollo Client;
* Relay;
* urql;
* GraphQL Request;
* generated clients. '''Проста аналогія:''' SSR дає сторінці тіло, а hydration додає нервову систему. '''Практична роль:''' checklist оптимізує зробити client не тільки красивим, а й надійним, безпечним і зручним.<div style="background:#e7f3ff; border-left:6px solid #2b7cff; padding:12px; margin:12px 0;">

{{SEO
|title=Client — клієнт у програмуванні, мережах, web, API, client-server architecture і застосунках
|description=Client — Wiki-стаття про client як програму, пристрій або частину системи, що звертається до server, API або сервісу. Розглянуто client-server model, web client, API client, HTTP client, desktop client, mobile client, thin client, thick client, frontend, backend, request, response, authentication, authorization, caching, SDK, переваги, ризики, цікаві факти і хороші практики.
|keywords=Client, клієнт, software client, client-server, client-server architecture, web client, API client, HTTP client, frontend client, mobile client, desktop client, thin client, thick client, server, request, response, browser, SDK, network client, application client, authentication, authorization, caching
|alternativeTo=монолітна система без розділення ролей; ручний доступ до сервера без клієнтського застосунку; прямий доступ користувача до бази даних; інтеграції без API client; браузер без frontend logic; terminal-only доступ для нетехнічних користувачів; distributed system без зрозумілого поділу client і server
}}

* зберігати local data;
* ставити changes у queue;
* синхронізувати пізніше;
* показувати cached content;
* вирішувати conflicts;
* працювати з local database;
* показувати offline status. Server перевіряє authentication
=== API integration ===
== Client Caching ==
== Client у Testing ==
Приклади:

Приклади:
</div>
Чи виступає як безпечний retry logic?<div style="background:#f0eaff; border-left:6px solid #8e44ad; padding:12px; margin:12px 0;">

* HTTPS;
* secure cookies;
* Content Security Policy;
* safe token storage;
* input/output handling;
* dependency scanning;
* no secrets in frontend;
* server-side authorization;
* secure update mechanism;
* certificate validation.== Circuit Breaker у Client ==

'''Web client''' — client, який взаємодіє з web server або web application. * frontend application;
* mobile app;
* backend service;
* CLI tool;
* SDK;
* test tool;
* integration service;
* automation script. * errors;
* crashes;
* failed requests;
* performance metrics;
* user environment;
* app version;
* device type;
* browser version;
* request ids;
* feature flags. Request здатна містити:

</div>

* startup time;
* initial load;
* bundle size;
* memory usage;
* CPU usage;
* network requests;
* caching;
* rendering speed;
* battery usage;
* image optimization;
* offline behavior;
* responsiveness;
* background tasks. });

* public API key із обмеженнями;
* publishable key для payment provider;
* client id для OAuth;
* non-secret configuration. 3.== Client-Server Architecture ==
<div style="background:#fdecea; border-left:6px solid #e74c3c; padding:12px; margin:12px 0;">
== Client і Observability ==

Чи кеш не містить sensitive data? Server має перевіряти інформаційні дані повторно. Observability для client містить:
Добрі практики:
'''WebSocket client''' підтримує постійне двостороннє з’єднання із server.<div style="background:#eafaf1; border-left:6px solid #2ecc71; padding:12px; margin:12px 0;">

 return response.json();

'''критично:''' mock client має відповідати реальному контракту API.== Client Error Handling ==

Чи виступає як server-side validation?

критично: sync — одна з найскладніших частин offline-first clients.

простіше оновлювати;
менше локальних вимог;
централізований контроль;
легше адмініструвати. Приклади:

Client caching зберігає інформаційні дані або ресурси ближче до користувача. * логіка дуже проста;

достатньо server-rendered pages;
немає offline mode;
немає складного state;
немає mobile-specific UX;
немає потреби в rich frontend;
users технічні й CLI достатній;
API застосовується для лише внутрішньо.== Коли потрібен окремий Client ==

Client відповідає за взаємодію з користувачем або іншою системою, надсилання requests, обробку responses, локальний state, caching, error handling і UX.

headers: {

не довіряти client-side data на server;
не зберігати secrets у client;
використовувати HTTPS;
робити зрозуміле error handling;
встановлювати timeouts;
мати retry logic із backoff;
кешувати обережно;
перевіряти permissions на backend;
підтримувати versioning;
тестувати старі clients;
оптимізувати performance;
враховувати accessibility;
мінімізувати персональні інформаційні дані в local storage;
логувати errors без sensitive data;
документувати API client behavior;
використовувати contract testing для важливих API.== REST Client ==

</syntaxhighlight> ! Order Service → client request → Payment Service Client-server architecture — модель, у якій client надсилає запити, а server їх обробляє. 9. user(id: "123") { Приклади HTTP clients:

Практична роль: client-side rendering робить browser активним учасником побудови interface, а не без зусиль отримувачем готового HTML.</syntaxhighlight>

це програма, пристрій, застосунок або частина системи, яка звертається до іншої системи за даними, діями або сервісом виступає ключовою рисою Client або клієнт ERP. Database client — програма або бібліотека, яка підключається до database server.

name

Request

current user;
selected language;
shopping cart;
form data;
UI state;
cached API data;
access token;
theme;
current route;
offline changes;
game state;
local preferences. 4.

Frontend client відповідає за:

Client Library

вважати frontend перевірку достатньою для security;
зберігати API secrets у client;
не опрацьовувати network errors;
не ставити timeout;
робити нескінченні retries;
не враховувати old mobile clients;
кешувати sensitive data;
довіряти role або price з client payload;
не робити server-side validation;
показувати технічні error messages користувачу;
не тестувати slow network;
не думати про accessibility;
не логувати client-side crashes;
плутати client і server responsibilities;
робити занадто товстий client без потреби. User натискає "Save"

query GetUser {

web BFF;
mobile BFF;
admin panel BFF;

TV app BFF.

конкурентні переваги:
API client зазвичай виконує:

<div style="background:#eafaf1; border-left:6px solid #2ecc71; padding:12px; margin:12px 0;">

<div style="background:#eafaf1; border-left:6px solid #2ecc71; padding:12px; margin:12px 0;">

required fields;
email format;
password length;
number range;
file size;
date format;
local form rules. * API client здатна бути людиною з Postman, script у CI або production service. критично: mobile client часто функціонує в умовах нестабільного інтернету, обмеженої батареї й маленького екрана. Важливі фактори:

class UserApiClient { Практична роль: web client перетворює web server response на сторінку або застосунок, з яким взаємодіє користувач системи. Проста аналогія: thin client — це пульт керування, а основна робота відбувається десь на server.== Thin Client == Client здатна приховувати кнопки або сторінки, якщо користувач системи не має permissions. Client здатна мати version. * Практики distributed systems, microservices, API gateways, BFF, observability, testing і software architecture. HTTP request example:

Network client має враховувати:

Проста думка: email client — це інтерфейс до поштового сервера, який зберігає й передає повідомлення.

REST client функціонує з:

Secrets не повинні бути в client-side коді.

HTML;
CSS;
JavaScript;
TypeScript;
React;
Vue;
Angular;
Svelte;
Solid;
Web Components. Окремий client потрібен, якщо:

Практична роль: frontend client — це частина застосунку, яку користувач системи бачить і через яку взаємодіє з backend.

POST /orders

* що змінилося locally;
* що змінилося на server;
* які зміни конфліктують;
* що робити з offline edits;
* як уникнути duplicates;
* як обробити retries;
* як показати user feedback;
* як зберегти data integrity.</div>

* UI;
* routing;
* user input;
* forms;
* client-side validation;
* API calls;
* state management;
* caching;
* error messages;
* accessibility;
* animations;
* rendering;
* authentication flow;
* session handling.== Джерела ==

* API versioning;
* backward compatibility;
* feature detection;
* graceful degradation;
* deprecation policy;
* migration guides;
* telemetry по client versions.</div>

Game client надсилає player actions на game server, отримує world state і відображає результат на екрані гравця. * Практики frontend development, mobile development, desktop applications і SDK design. {| class="wikitable"

== Email Client ==

</div>

Game client здатна:
застосовується для, щоб:
<div style="background:#fff4e5; border-left:6px solid #f39c12; padding:12px; margin:12px 0;">
Browser sends HTTP request

 if (!response.ok) {

* service discovery;
* retries;
* timeouts;
* circuit breaker;
* authentication;
* authorization;
* tracing;
* logging;
* idempotency;
* versioning;
* error mapping. Client-side logging оптимізує зрозуміти проблеми в реальних користувачів.

У software engineering client здатна бути браузером, mobile app, desktop application, frontend application, API client, HTTP client, game client, email client, database client, SDK або навіть іншим backend service, який звертається до API.

SDK як Client

через Client library — бібліотека, яка користувачі можуть application звертатися до service або API. Приклад: Цікавий момент: сучасний browser — це вже не без зусиль “переглядач сторінок”, а потужна runtime-платформа для web applications.== HTTP Client == 7. Retry logic — повторна спроба request після тимчасової помилки. * сильна залежність від network;

server load вищий;
offline mode слабкий;
latency здатна бути помітною. Client перевіряє форму

Висновок

`git`;
`kubectl`;
`aws`;
`gcloud`;
`az`;
`psql`;
`mysql`;
`curl`;
`gh`;
`docker`. Network client — програма, яка підключається до network service.== Network Client ==

Цікавий момент: BFF існує тому, що mobile client, web client і admin client часто потребують різних даних, навіть якщо працюють із тим самим продуктом. Server перевіряє authorization

Mock Client

XSS;
token theft;
insecure storage;
malicious extensions;
man-in-the-middle без TLS;
exposed API keys;
tampered client;
reverse engineering mobile app;
dependency vulnerabilities;
insecure local cache;
clickjacking;
CSRF у cookie-based apps. У microservices один service часто виступає як client для іншого service.== Rate Limit і Client ==

Hydration

Thick client або fat client — client, який виконує значну частину логіки локально. GET /users/123

browser;
curl;
Postman;
Insomnia;
Fetch API;
Axios;
Requests у Python;
OkHttp;
Java HttpClient;
Go `net/http`;
.NET HttpClient.

banking app;
delivery app;
social app;
fitness app;
messenger;
mobile game;
education app. Критично: client не має збирати або зберігати більше даних, ніж потрібно для реальної функції. Client, особливо frontend або mobile app, має бути доступним для різних користувачів. як приклад, backend вашого сайту виступає як server для браузера, але client для payment API, email service або database. Особливо, якщо кілька пристроїв змінюють ті самі інформаційні дані. * closed;
open;
half-open. критично: SSR не означає, що client “нічого не робить”.== Приклади сценаріїв використання ==

</syntaxhighlight>

HTTP client;
SSH client;
FTP client;
DNS client;
email client;
VPN client;
database client;
game client;
messaging client. Чи виступає як backend authorization? }

Browser opens example.com

Головне правило: client має бути зручним для користувача, але server має залишатися джерелом довіри й правил. Client здатна працювати з приватними даними. Client здатна помилитися, застаріти або бути навмисно зміненим.

Client Compatibility

CLI client корисний для:

Приклади desktop clients:

<div style="background:#e7f3ff; border-left:6px solid #2b7cff; padding:12px; margin:12px 0;">

* endpoint;
* request format;
* response format;
* status codes;
* required fields;
* optional fields;
* error structure;
* compatibility rules. * У web security усе, що відправлено на client, вважається видимим.

Приклади REST-запитів:

Типи тестів:

local storage;
cookies;
cache;
logs;
analytics;
crash reports;
screenshots;
clipboard access;
permissions;
location;
camera;
microphone;
contacts;
health data;
message previews.== Client-Side Rendering ==

CLI Client

показати login form;
надіслати credentials;
отримати token;
зберегти session cookie;
оновити access token;
виконати logout;
використати OAuth redirect;
працювати з biometric login;
показати MFA prompt. Server здатна бути дуже розумним, але користувач системи судить ERP-продукт через те, що бачить і відчуває в client. Іноді простий server-rendered UI кращий, швидший і дешевший. Моделі оновлення версій:

1. Чи не зберігаються secrets у client?

Thin client зазвичай:

Приклади web clients:

розділення відповідальностей;
незалежна розробка програмного забезпечення client і server;
краща масштабованість;
технічна підтримка різних clients;
централізована business logic на server;
зручні API;
легше оновлювати server;
можливість mobile, web і desktop clients;
security control на backend;
інтеграції через API. Але retry має бути обережним:

 }

* email client;
* database client;
* chat client;
* IDE;
* FTP client;
* game launcher;
* cloud sync app;
* remote desktop client;
* VPN client;
* Git GUI client.== Client і Privacy ==
 async getUser(id: string) {

</div>

</div>

API client здатна бути:

* psql для PostgreSQL;
* MySQL client;
* MongoDB shell;
* DBeaver;
* DataGrip;
* pgAdmin;
* SQL Server Management Studio;
* application database driver;
* ORM client. '''критично:''' production database client має використовувати least privilege. '''критично:''' caching має враховувати чутливість даних.<div style="background:#fff4e5; border-left:6px solid #f39c12; padding:12px; margin:12px 0;">

'''Цікавий факт:''' у multiplayer game client здатна “вгадувати” короткостроковий рух, щоб гра виглядала плавно, поки server підтверджує справжній state. '''Sync''' або синхронізація — бізнес-процес узгодження client-side даних із server. Роль

== Коли Client можна спростити ==

</div>

* надсилати HTTP requests;
* отримувати HTML, CSS, JS;
* виконувати JavaScript;
* керувати cookies;
* застосовувати security policies;
* кешувати ресурси;
* показувати сторінки;
* запускати frontend applications;
* відкривати developer tools;
* підтримувати extensions. * Backend service теж здатна бути client, коли звертається до іншого service. '''Client''' — це програма, пристрій або частина системи, яка звертається до server, API або service для отримання даних чи виконання дії. Contract здатна визначати:
</div>

<syntaxhighlight lang="javascript">

* endpoint URLs;
* authentication;
* serialization;
* retries;
* pagination;
* error handling;
* rate limits;
* response parsing. Mobile client здатна:
=== Multiplayer game ===
'''Практична роль:''' GraphQL client дає можливість client-у точніше описати, які саме інформаційні дані йому потрібні. '''Критично:''' client-side authentication state потрібен для UX, але справжня довіра має підтверджуватися на server. як приклад, замість ручних HTTP requests:

Але не варто логувати:

Проблеми:

 }

GraphQL client здатна:

'''Основна ідея:''' client — це сторона, яка ініціює запит і просить server або service щось зробити чи повернути інформаційні дані. }

У Client security передбачено захист client-side коду, даних і взаємодії з server. * GraphQL client здатна сам описати, які поля йому потрібні. * Документація HTTP, browser APIs, REST, GraphQL, WebSocket і API design. Не все варто зберігати на client.<div style="background:#e8f8f5; border-left:6px solid #16a085; padding:12px; margin:12px 0;">
'''критично:''' server часто має підтримувати старі clients, особливо mobile apps, які користувачі не оновлюють одразу. API й server мають перевіряти permissions незалежно від frontend.<div style="background:#fff4e5; border-left:6px solid #f39c12; padding:12px; margin:12px 0;">

== Client і Server ==

Після hydration сторінка здатна:

HTTP clients використовують для:

Стан circuit breaker:

Client має власні ризики: Host: example.com

SDK або client library здатна бути готовим client-ом для API.

}

Але client не має самостійно “вирішувати”, що користувач системи authenticated без перевірки server. Якщо ці двері незручні або недоступні, частина людей без зусиль не зможе увійти. Чи зрозуміло, який server або API використовує client? REST client — client для REST API.

Client-side rendering або CSR — підхід, де browser отримує JavaScript application і сам будує UI.== Ризики Client ==

Desktop Client

Mobile banking app

Client updates доставляють нові функції, fixes і security patches.

Sync

завантажувати HTML;
виконувати JavaScript;
показувати CSS;
надсилати forms;
робити API requests;
зберігати cookies;
працювати з local storage;
відкривати WebSocket connection;
кешувати assets;
відображати UI. * connection errors;
timeouts;
DNS;
TLS;
retries;
latency;
packet loss;
authentication;
protocol rules;
proxy settings. * memory;
local storage;
session storage;
cookies;
IndexedDB;
mobile secure storage;
local database;
cache. Практична роль: REST client інтуїтивно функціонує з ресурсами через стандартні HTTP-операції. * Найкращий client часто непомітний: він оперативно реагує, зрозуміло пояснює помилки й не змушує користувача думати про мережу.</syntaxhighlight>

Desktop client — програма, встановлена на комп’ютері, яка звертається до server, cloud service або локальних ресурсів.

{ User enters URL

Authorization: Bearer token

<div style="background:#e7f3ff; border-left:6px solid #2b7cff; padding:12px; margin:12px 0;">

* unit tests;
* component tests;
* integration tests;
* end-to-end tests;
* contract tests;
* API client tests;
* visual regression tests;
* accessibility tests;
* performance tests;
* offline tests;
* compatibility tests. '''Практична роль:''' testing client-а оптимізує перевірити не тільки “чи функціонує server”, а й “чи правильно client реагує на різні відповіді”. Він здатна:
Retry корисний при:

== API Client ==

5. Добрий client:
<div style="background:#fef2f2; border-left:6px solid #ef4444; padding:12px; margin:12px 0;">
'''CLI client''' — command-line interface програма, яка звертається до service або API. Основні конкурентні переваги:
'''Критично:''' усе, що потрапляє на client, потрібно вважати потенційно видимим або змінюваним користувачем. Найцікавіше, що один і той самий застосунок здатна бути і client, і server одночасно. Він має бути зручним для людини або системи, але не повинен бути єдиним місцем безпеки й правил.== Client State ==
CLI 0.9.8

<div style="background:#e7f3ff; border-left:6px solid #2b7cff; padding:12px; margin:12px 0;">

</div>
'''API client''' — програма або бібліотека, яка звертається до API.<div style="background:#e8f8f5; border-left:6px solid #16a085; padding:12px; margin:12px 0;">

* локальне збереження;
* offline mode;
* system tray;
* file system access;
* native UI;
* background sync;
* hardware integration;
* auto-update mechanism. Client має враховувати:
== Database Client ==
Client застосовується для в багатьох технологічних контекстах:

CSR часто застосовується для в single-page applications. Потрібно обережно ставитися до:
</div>
'''Практична роль:''' client observability показує, що відбувається не в дата-центрі, а на пристроях реальних користувачів.== Загальний SEO-опис ==

* Google Chrome;
* Mozilla Firefox;
* Safari;
* Microsoft Edge;
* embedded browser views;
* headless browsers;
* webviews у mobile apps. Водночас server має залишатися джерелом довіри: він перевіряє authentication, authorization, validation і business rules.== Тематичні мітки ==

== Типові помилки початківців ==

== Client і Accessibility ==

* status code;
* headers;
* body;
* JSON;
* HTML;
* file;
* cookies;
* cache headers;
* error message;
* redirect location. '''User-Agent''' — header, який client здатна надсилати server, щоб описати себе. Browser = client

<div style="background:#eafaf1; border-left:6px solid #2ecc71; padding:12px; margin:12px 0;">

* Browser — це client, але сучасний browser здатна виконувати величезну частину application logic.</div>

* stale data;
* privacy issues;
* cache invalidation;
* показ старих permissions;
* sensitive data in cache;
* storage limits.</div>

Ризики:

* corporate networks;
* caching;
* security filtering;
* API gateway;
* reverse proxy;
* debugging;
* routing;
* load balancing;
* privacy tools;
* development proxy.<div style="background:#eafaf1; border-left:6px solid #2ecc71; padding:12px; margin:12px 0;">

'''Thin client''' — client, який виконує мінімум логіки, а більшість роботи віддає server.</div>

Web client здатна:

Практична роль: User-Agent оптимізує server зрозуміти, який client звертається до нього.

Цікаві факти про Client

Offline client здатна: </syntaxhighlight>

Client здатна тестуватися окремо або разом із server. Практична роль: HTTP client — це інструмент, який дає можливість програмі “говорити” з web server або API.== Authorization на Client ==

критично: thick client не означає “поганий”. Інакше tests можуть проходити, а production — ламатися.

Backend service використовує payment API client, щоб створити payment intent і перевірити transaction status. * отримує HTML;

виконує hydration;
обробляє user interactions;
надсилає API requests;
керує frontend state;
завантажує scripts і assets. Client здатна звертатися до server через proxy.

Timeout — обмеження часу очікування response.</syntaxhighlight>

маршрутизує requests;
перевіряє authentication;
застосовує rate limits;
агрегує responses;
робить logging;
приховує internal services;
керує versions;
застосовує security policies. Server здатна:

Чи протестовано slow/offline network? Практична порада: хороший API client не “б’виступає як” server нескінченними requests, а поводиться ввічливо й передбачувано. Client state — інформаційні дані, які client зберігає або тримає під час роботи. Чи виступає як зрозумілі error messages? Недоліки:

критично: backend service як client теж має бути стійким до network failures, slow dependencies і partial outages.

Практична роль: response — це результат, який client отримує після свого запиту. GraphQL client — client, який виконує GraphQL queries і mutations. HTTP response example:

Чи обробляються network errors?<div style="background:#eafaf1; border-left:6px solid #2ecc71; padding:12px; margin:12px 0;">

* показувати graphics;
* опрацьовувати input;
* програвати audio;
* синхронізувати state із server;
* прогнозувати рух;
* отримувати updates;
* надсилати actions;
* перевіряти assets;
* працювати з matchmaking;
* показувати UI. '''Критично:''' client можна змінити або обійти. Хороший client швидкий, зрозумілий, безпечний, стійкий до помилок мережі й не зберігає секрети там, де їх здатна побачити користувач системи. Застосунку не завжди потрібні admin-права до бази. Client зазвичай відповідає за:
</div>
User-Agent: MyApp/1.4.2
== конкурентні переваги Client-Server поділу ==

Payment Service → response → Order Service

критично: network client має бути готовим до того, що мережа іноді повільна, нестабільна або недоступна. * показує зрозуміле повідомлення;

не губить user input;
дає retry;
не розкриває зайві technical details;
логуватиме помилки для diagnostics;
відрізняє user error від server error. constructor(private baseUrl: string, private token: string) {}

Authorization: `Bearer ${this.token}`,

debugging;
support;
API compatibility;
mobile app updates;
desktop auto-update;
analytics;
feature rollout;
deprecation management;
security patches. Старий client здатна не підтримувати нові endpoint-и або security-вимоги. Найлюдяніший факт: client — це обличчя системи. Найлюдяніший сенс: client — це двері до сервісу.

Timeout важливий для:

конкурентні переваги:

Чи server не довіряє client-side даним?

Добрі практики:

email

Погано: Практична роль: API client приховує деталі HTTP-запитів і дає зручний спосіб працювати з сервісом. Thick client здатна:

Server-Side Rendering і Client

429 response;
Retry-After header;
backoff;
request batching;
caching;
pagination;
throttling;
queueing;
user feedback. Приклад curl:

надсилання request;
отримання response;
показ даних користувачу;
обробку user input;
local validation;
caching;
session management;
authentication flow;
error handling;
retry logic;
offline mode у частині сценаріїв;
UI або command interface. Wait 5 seconds, then show error or retry safely

Hydration — бізнес-процес, коли client-side JavaScript “оживляє” HTML, згенерований server. HTTP client — client, який надсилає HTTP requests. Developer відкриває database client, підключається до PostgreSQL server і виконує SQL queries. * адаптувати API під UI;

зменшити кількість requests;
приховати complexity;
оптимізувати response format;
керувати authentication;
відокремити client-specific logic.

Чи підтримуються старі client versions? Приклади:

Client Security

Практична роль: такий class приховує деталі HTTP request і дає застосунку простий method `getUser`.

Server здатна обмежувати кількість requests від client. здатна кешуватися:

</div>

* dependency падає;
* server повільний;
* requests масово fail;
* retries погіршують проблему;
* потрібно оперативно fail fast. Client має вміти опрацьовувати помилки. ! '''Проста аналогія:''' circuit breaker — це запобіжник: якщо платформа перевантажена, він розриває ланцюг, щоб не спалити все інше.</div>
== Client і API Gateway ==
</div>

web server забезпечується через Слово '''client''' у технологіях не завжди означає “людину-клієнта”.== Приклад checklist для Client ==
<div style="background:#e7f3ff; border-left:6px solid #2b7cff; padding:12px; margin:12px 0;">

'''Response''' — відповідь server на request client-а. Але це не замінює backend authorization. "id": "123",
'''Mock client''' — тестова заміна реального client-а. Server повертає response

* debugging;
* analytics;
* compatibility;
* rate limiting;
* support;
* security monitoring;
* API client identification. DELETE /sessions/current

Приклад:
</div>
Client performance впливає на user experience. DesktopClient 5.4.0

* не повторювати non-idempotent actions без захисту;
* використовувати backoff;
* поважати rate limits;
* мати max attempts;
* не створювати retry storm;
* враховувати idempotency keys. конкурентні переваги:
'''Підказка:''' щоб зрозуміти client у системі, запитайте: хто ініціює request і хто чекає response?<div style="background:#fef2f2; border-left:6px solid #ef4444; padding:12px; margin:12px 0;">
== Хороші практики Client ==
<div style="background:#fff4e5; border-left:6px solid #f39c12; padding:12px; margin:12px 0;">
</div>

'''Client compatibility''' — здатність server або API працювати з різними версіями clients. Краще:
'''Mobile client''' — застосунок на смартфоні або планшеті, який звертається до backend, API або cloud service. MobileApp iOS 2.8.1

<div style="background:#eafaf1; border-left:6px solid #2ecc71; padding:12px; margin:12px 0;">
'''критично:''' client і server — це ролі у взаємодії. Client показує success або error

'''критично:''' client logs корисні для debugging, але можуть стати privacy-ризиком, якщо збирати занадто багато.== Client і Logging ==
як приклад:
<syntaxhighlight lang="text">

'''Найлюдяніший факт:''' client — це як відвідувач ресторану: він робить замовлення, а server на кухні готує відповідь. '''критично:''' client-side validation — це зручність, а не security boundary.== Thick Client ==

</div>
конкурентні переваги:
Client часто бере участь в authentication flow. Client можна спростити, якщо:

== Offline Client ==

* надсилати queries;
* кешувати normalized data;
* керувати fragments;
* оновлювати UI;
* підтримувати subscriptions;
* генерувати types;
* опрацьовувати errors.== Mobile Client ==

'''Перевага:''' client дає можливість користувачу або іншій системі інтуїтивно взаємодіяти з server, не працюючи напряму з його внутрішніми деталями. * SMTP для надсилання;
* IMAP для отримання й синхронізації;
* POP3 у старіших сценаріях;
* OAuth для login;
* local caching;
* spam filtering;
* encryption у частині сценаріїв. Приклади:

У multiplayer games game client часто спілкується з game server. * краще offline;
* швидша локальна реакція;
* менше server load;
* багатший UX;
* доступ до system resources.<syntaxhighlight lang="text">
<syntaxhighlight lang="bash">
<syntaxhighlight lang="text">

example.com web server = server

== Authentication на Client ==

</div>

* показувати UI;
* надсилати API requests;
* працювати з push notifications;
* використовувати camera;
* використовувати GPS;
* кешувати інформаційні дані offline;
* синхронізувати інформаційні дані;
* зберігати tokens;
* працювати з biometric login;
* опрацьовувати deep links.== Client і Secrets ==

* authentication;
* request creation;
* headers setup;
* serialization;
* response parsing;
* error handling;
* retries;
* rate limit handling;
* pagination;
* logging;
* timeout management. '''Offline client''' здатна працювати без постійного підключення до server. Його потрібно rotate.

GraphQL Client

інтерактивний UX;
швидкі переходи після завантаження;
багатий frontend;
менше повних перезавантажень сторінки. Client здатна бути browser, frontend app, mobile app, desktop app, API client, HTTP client, database client, CLI tool, SDK або backend service у ролі споживача іншого API. Приклади:

Див. так само

Client і BFF

Приклад простого API client

недовіра до client-side data;
exposed secrets;
network failures;
stale cache;
incompatible versions;
insecure storage;
XSS;
reverse engineering;
offline sync conflicts;
performance issues;
old clients;
dependency vulnerabilities;
weak error handling;
accessibility problems;
privacy leakage. const socket = new WebSocket("wss://example.com/chat");

frontend monitoring;
mobile crash reporting;
real user monitoring;
performance metrics;
error tracking;
network traces;
session diagnostics у дозволених межах;
version adoption;
feature usage;
Core Web Vitals у web-сценаріях. Чи виступає як timeouts? Практична роль: update mechanism визначає, як оперативно команда здатна виправити client-side bug або security issue.

throw new Error(`Request failed: ${response.status}`);
"name": "Anna"

class MockPaymentClient {

return { status: "success" };

Client-side validation перевіряє input ще до надсилання на server.

виконувати queries;
показувати tables;
керувати schema;
робити export/import;
аналізувати performance;
запускати migrations;
переглядати data;
керувати users і permissions. Приклад:

Рекомендовано: </syntaxhighlight>

Проста різниця: client просить, server відповідає. BFF оптимізує:

keyboard navigation;
screen reader support;
semantic HTML;
color contrast;
focus states;
readable fonts;
captions;
alt text;
reduced motion;
clear errors;
touch target size;
predictable navigation.

Browser відкриває сайт, завантажує frontend client, а той звертається до backend API для отримання user profile і dashboard data.

Database administration

Client і Proxy

Приклади:

API clients;
mobile apps;
backend-to-backend calls;
CLI tools;
database clients;
external integrations. Поширені помилки:

</syntaxhighlight>

database driver;
cloud SDK;
payment API client;
messaging client;
GraphQL client;
REST client;
email provider client;
search engine client;
analytics client. Приклад:

remote desktop terminal;
browser-based enterprise app;
lightweight kiosk client;
web app із server-side rendering;
virtual desktop client. У програмуванні client — це часто програма.== Web Client ==

Client Versioning

критично: proxy здатна змінити network behavior: headers, latency, TLS, caching або доступність ресурсів.

Але server-side validation все одно потрібна.<syntaxhighlight lang="http"> Практична роль: timeout захищає client від зависання через server або network problem. Email client здатна використовувати:

|- | Client | Ініціює запит | Browser, mobile app, API client |- | Server | Обробляє запит і повертає відповідь | Web server, API server, database server |}

конкурентні переваги:

Frontend client — клієнтська частина web application, яка функціонує в browser або webview. У сучасних web apps client і server часто ділять роботу.

PATCH /profile

Типові помилки:

Accept: application/json

network error;
timeout;
401 Unauthorized;
403 Forbidden;
404 Not Found;
409 Conflict;
429 Too Many Requests;
500 Server Error;
validation error;
offline state;
parsing error. критично: breaking change на server здатна зламати clients, які команда вже не контролює напряму. id

не показувати admin menu;
вимкнути кнопку delete;
показати read-only mode;
приховати billing settings;
показати повідомлення “немає доступу”. HTTP/1.1 200 OK

const user = await api.users.get("123");

images;
CSS;
JavaScript;
API responses;
user preferences;
offline pages;
GraphQL data;
search results;
static assets;
downloaded files. Приклади:

складніше оновлювати;
більше security risks на client side;
складніша синхронізація;
залежність від device environment. Практична роль: API gateway дає clients одну контрольовану точку входу замість десятків внутрішніх services. Проста різниця: HTTP client зазвичай питає й отримує відповідь, а WebSocket client тримає розмову відкритою. }

Client і Performance

реагувати на clicks;
оновлювати state;
відкривати menus;
виконувати client-side navigation;
робити API calls;
працювати як interactive app. Browser renders page

Приклади:

Desktop client здатна мати:

8.== Client-Side Validation == Приклад ідеї: SDK здатна приховувати:

Чи логуються client errors без приватних даних? GET /api/users/123 HTTP/1.1 Content-Type: application/json

async charge() {

Браузер — найвідоміший приклад client. Приклад:

Frontend Client

Version важлива для:

Database client здатна:

Frontend client здатна бути створений за допомогою:

browser app оновлюється при завантаженні;
mobile app через app store;
desktop auto-update;
CLI package update;
SDK dependency update;
game launcher update;
enterprise managed update. SDK 1.12.3

private API key у JavaScript bundle;
database password у mobile app;
signing key у desktop client;
admin token у frontend;
cloud secret у public repository;
secret у source map. Service client має враховувати:

Приклад client-server flow

Outlook;
Thunderbird;
Apple Mail;
Gmail web interface;
mobile mail app;
command-line mail clients.== Response ==

desktop IDE;
professional graphics editor;
offline-first mobile app;
CAD software;
game client;
email client із local mail storage.== WebSocket Client ==

застосовується для для:

Timeout

Retry Logic

Game Client

Client і Contract Testing

Request

Client Library

SDK як Client

Висновок

Mock Client

Hydration

Client Compatibility

CLI Client

Desktop Client

Mobile banking app

Sync

Цікаві факти про Client

Server-Side Rendering і Client

Client Security

GraphQL Client

Див. так само

Client і BFF

Приклад простого API client

Database administration

Client і Proxy

Client Versioning

Client і Performance

Frontend Client

Приклад client-server flow

Web application