Перейти до вмісту

Client

Матеріал з K2 ERP Wiki

Приклад:

REST Client

7.; Thick client або fat client — client, який виконує значну частину логіки локально.; Чи є собою server-side validation?; !; name </syntaxhighlight>

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

CLI client — command-line interface програма, яка звертається до service або API.; Критично: якщо secret потрапив у client, він більше не secret.; API й server мають перевіряти permissions незалежно від frontend.; Browser = client

  • email client;
  • database client;
  • chat client;
  • IDE;
  • FTP client;
  • game launcher;
  • cloud sync app;
  • remote desktop client;
  • VPN client;
  • Git GUI client.;

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

Чи підтримуються старі client versions?; * Матеріали щодо authentication, authorization, client-side security, caching, offline sync і error handling.; Client має вміти обробляти помилки.;== Цікавий факт == Authorization: Bearer token 

Ризики:

</div>

Client → Request → Server

Game client має змогу:

'''Практична роль:''' HTTP client — це інструмент, який надає можливість програмі “говорити” з web server або API.; Але server-side validation все одно потрібна.;=== Multiplayer game ===
Server returns HTML
Developer відкриває database client, підключається до PostgreSQL server і виконує SQL queries.;== Client і Secrets ==

* mocks;
* stubs;
* test server;
* contract testing;
* recorded responses;
* sandbox environment.; Приклади HTTP clients:
== Цікаві факти про Client ==
'''Frontend client''' — клієнтська частина web application, яка функціонує в browser або webview.; '''істотно:''' sync — одна з найскладніших частин offline-first clients.; Окремий client потрібен, якщо:

Ризики:
<syntaxhighlight lang="text">
== Client у Microservices ==

'''істотно:''' retry має змогу допомогти при тимчасовій проблемі, але має змогу й погіршити збій, якщо всі clients почнуть повторювати запити одночасно.; * Backend service теж має змогу бути client, коли звертається до іншого service.; '''Практична роль:''' навіть якщо server швидкий, повільний client має змогу зробити весь застосунок неприємним для користувача.; Застосунку не завжди потрібні admin-права до бази.; '''BFF''' або '''Backend for Frontend''' — backend-шар, створений спеціально під потреби конкретного client-а.;

</syntaxhighlight> class MockPaymentClient {

Game Client

HTTP request example:

Практична роль: GraphQL client надає можливість client-у точніше описати, які саме інформаційні дані йому потрібні.; Найлюдяніший факт: client — це обличчя системи.;

</syntaxhighlight>

Критично: client можна змінити або обійти.; істотно: client state зручний для UX, але server не повинен сліпо довіряти даним, які приходять від client.; Database client — програма або бібліотека, яка підключається до database server.; істотно: client і server — це ролі у взаємодії.; Client надсилає POST /api/profile Desktop client — програма, встановлена на комп’ютері, яка звертається до server, cloud service або локальних ресурсів.; Практична роль: response — це результат, який client отримує після свого запиту.; 1.; * логіка дуже проста;

  • достатньо server-rendered pages;
  • немає offline mode;
  • немає складного state;
  • немає mobile-specific UX;
  • немає потреби в rich frontend;
  • users технічні й CLI достатній;
  • API застосовується лише внутрішньо.; Client у SSR все одно важливий, бо він:
  • frontend monitoring;
  • mobile crash reporting;
  • real user monitoring;
  • performance metrics;
  • error tracking;
  • network traces;
  • session diagnostics у дозволених межах;
  • version adoption;
  • feature usage;
  • Core Web Vitals у web-сценаріях.; }

Client має враховувати:

Джерела

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

Client Update

Authentication на Client

</syntaxhighlight> 

return response.json();

</syntaxhighlight>

Загальний характеристика

Головна перевага: client-server model надає можливість одному server обслуговувати багато різних clients.; Server-side rendering або SSR — підхід, де server генерує HTML, а client отримує вже готовішу сторінку.;

== Client Caching ==
DELETE /sessions/current
4.; Browser sends HTTP request
== Коли Client можна спростити ==

Чи є собою accessibility checks?; User-Agent має змогу допомагати:

* простіше оновлювати;
* менше локальних вимог;
* централізований контроль;
* легше адмініструвати.; * debugging;
* analytics;
* compatibility;
* rate limiting;
* support;
* security monitoring;
* API client identification.; '''Response''' — відповідь server на request client-а.; '''Практична роль:''' testing client-а сприяє перевірити не тільки “чи функціонує server”, а й “чи правильно client реагує на різні відповіді”.;== User Agent ==

* швидша робота;
* менше network traffic;
* кращий offline mode;
* менше server load;
* кращий UX.; '''істотно:''' SSR не означає, що client “нічого не робить”.;<div style="background:#f0eaff; border-left:6px solid #8e44ad; padding:12px; margin:12px 0;">

У software engineering client має змогу бути браузером, mobile app, desktop application, frontend application, API client, HTTP client, game client, email client, database client, SDK або навіть іншим backend service, який звертається до API.; '''Практична роль:''' web client перетворює web server response на сторінку або застосунок, з яким взаємодіє користувач системи.; web server забезпечується через Слово '''client''' у технологіях не завжди означає “людину-клієнта”.; GraphQL client має змогу:

Web application

Головна думка: client — це сторона, яка просить і взаємодіє.; Server має змогу обмежувати кількість requests від client.;

  • вважати 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 без потреби.; істотно: network client має бути готовим до того, що мережа іноді повільна, нестабільна або недоступна.;
  • надсилати queries;
  • кешувати normalized data;
  • керувати fragments;
  • оновлювати UI;
  • підтримувати subscriptions;
  • генерувати types;
  • обробляти errors.; Email client має змогу використовувати:

застосовується для: Небезпека: server не має вважати client “чесним”.; }

  • desktop IDE;
  • professional graphics editor;
  • offline-first mobile app;
  • CAD software;
  • game client;
  • email client із local mail storage.; * debugging;
  • support;
  • API compatibility;
  • mobile app updates;
  • desktop auto-update;
  • analytics;
  • feature rollout;
  • deprecation management;
  • security patches.; Після hydration сторінка має змогу:
Server має змогу:

* psql для PostgreSQL;
* MySQL client;
* MongoDB shell;
* DBeaver;
* DataGrip;
* pgAdmin;
* SQL Server Management Studio;
* application database driver;
* ORM client.; Приклад:

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

'''Client-server architecture''' — модель, у якій client надсилає запити, а server їх обробляє.; CSR часто застосовують, коли потрібно в single-page applications.;<div style="background:#fff4e5; border-left:6px solid #f39c12; padding:12px; margin:12px 0;">

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

Thick client має змогу:

'''Проста аналогія:''' SSR дає сторінці тіло, а hydration додає нервову систему.;<syntaxhighlight lang="http">
</div>
== Server-Side Rendering і Client ==
<div style="background:#e7f3ff; border-left:6px solid #2b7cff; padding:12px; margin:12px 0;">
Приклад curl:

Браузер — найвідоміший приклад client.;<syntaxhighlight lang="typescript">

* сильна залежність від network;
* server load вищий;
* offline mode слабкий;
* latency має змогу бути помітною.; Wait forever
== Sync ==

переважні аспекти:

== Висновок ==

API client зазвичай виконує:

* local storage;
* cookies;
* cache;
* logs;
* analytics;
* crash reports;
* screenshots;
* clipboard access;
* permissions;
* location;
* camera;
* microphone;
* contacts;
* health data;
* message previews.; Приклад ідеї:

переважні аспекти:

Database client має змогу:

Client має змогу працювати з приватними даними.; 5.; return { status: "success" };

* memory;
* local storage;
* session storage;
* cookies;
* IndexedDB;
* mobile secure storage;
* local database;
* cache.; Найцікавіше, що один і той самий застосунок має змогу бути і client, і server одночасно.;== Типові помилки початківців ==

* показує зрозуміле повідомлення;
* не губить user input;
* дає retry;
* не розкриває зайві technical details;
* логуватиме помилки для diagnostics;
* відрізняє user error від server error.; Client має змогу тестуватися окремо або разом із server.;<div style="background:#eafaf1; border-left:6px solid #2ecc71; padding:12px; margin:12px 0;">

<syntaxhighlight lang="typescript">
Чи кеш не містить sensitive data?;<div style="background:#e7f3ff; border-left:6px solid #2b7cff; padding:12px; margin:12px 0;">
'''Mobile client''' — застосунок на смартфоні або планшеті, який звертається до backend, API або cloud service.; * Практики distributed systems, microservices, API gateways, BFF, observability, testing і software architecture.;</div>
Приклад:
API gateway має змогу бути проміжним server-side шаром між clients і backend services.; Server перевіряє authorization
</div>

Приклади:

Приклади:

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

* UI;
* routing;
* user input;
* forms;
* client-side validation;
* API calls;
* state management;
* caching;
* error messages;
* accessibility;
* animations;
* rendering;
* authentication flow;
* session handling.;== Thick Client ==
'''Критично:''' усе, що потрапляє на client, потрібно вважати потенційно видимим або змінюваним користувачем.; Server має перевіряти інформаційні дані повторно.; * Найкращий client часто непомітний: він оперативно реагує, зрозуміло пояснює помилки й не змушує користувача думати про мережу.;== Thin Client ==

* не звертатися до real API;
* тестувати service logic;
* контролювати responses;
* симулювати errors;
* прискорити tests;
* уникнути costs;
* перевірити edge cases.; Server validates input
як ілюстрація, замість ручних HTTP requests:
== Client і Server ==

'''Практична порада:''' хороший API client не “б’є собою” server нескінченними requests, а поводиться ввічливо й передбачувано.;== HTTP Client ==
</div>
</div>

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

API Client

Приклад: {{SEO

Email client — програма для роботи з email.; * API client має змогу бути людиною з Postman, script у CI або production service.; Старий client має змогу не підтримувати нові endpoint-и або security-вимоги.; Приклади:

  • SMTP для надсилання;
  • IMAP для отримання й синхронізації;
  • POP3 у старіших сценаріях;
  • OAuth для login;
  • local caching;
  • spam filtering;
  • encryption у частині сценаріїв.;== Client і Performance ==

</syntaxhighlight>

Sync має вирішувати:

Client library має змогу бути офіційною або community-made.; * service discovery;

  • retries;
  • timeouts;
  • circuit breaker;
  • authentication;
  • authorization;
  • tracing;
  • logging;
  • idempotency;
  • versioning;
  • error mapping.; const user = await response.json();
  • remote desktop terminal;
  • browser-based enterprise app;
  • lightweight kiosk client;
  • web app із server-side rendering;
  • virtual desktop client.; * BFF-підхід з’явився з цієї причини, що різні clients мають різні потреби.; Практична порада: client має відповідати реальному сценарію використання: browser, phone, desktop, terminal або інший backend service.; * більший JavaScript bundle;
  • повільніший initial load у частині сценаріїв;
  • SEO має змогу потребувати додаткових рішень;
  • більше логіки на client side;
  • залежність від browser performance.; У програмуванні client — це часто програма.; * показати login form;
  • надіслати credentials;
  • отримати token;
  • зберегти session cookie;
  • оновити access token;
  • виконати logout;
  • використати OAuth redirect;
  • працювати з biometric login;
  • показати MFA prompt.; Order Service → client request → Payment Service
  • browser app оновлюється при завантаженні;
  • mobile app через app store;
  • desktop auto-update;
  • CLI package update;
  • SDK dependency update;
  • game launcher update;
  • enterprise managed update.; Але client не має самостійно “вирішувати”, що користувач системи authenticated без перевірки server.;

Contract має змогу визначати: Wait 5 seconds, then show error or retry safely HTTP response example:

Client ← Response ← Server застосовується, щоб: 

Найчастіше client функціонує разом із '''server''': client надсилає request, server його обробляє й повертає response.; Network client має враховувати:
Приклади desktop clients:
<div style="background:#fff4e5; border-left:6px solid #f39c12; padding:12px; margin:12px 0;">
Client state має змогу зберігатися в:

== Коли потрібен окремий Client ==

У Client security передбачено захист client-side коду, даних і взаємодії з server.; Він має бути зручним для людини або системи, але не повинен бути єдиним місцем безпеки й правил.; Приклади:

  • не повторювати non-idempotent actions без захисту;
  • використовувати backoff;
  • поважати rate limits;
  • мати max attempts;
  • не створювати retry storm;
  • враховувати idempotency keys.; Небезпечні приклади:
  • HTML;
  • CSS;
  • JavaScript;
  • TypeScript;
  • React;
  • Vue;
  • Angular;
  • Svelte;
  • Solid;
  • Web Components.;
<div style="background:#fff4e5; border-left:6px solid #f39c12; padding:12px; margin:12px 0;">

</div>

<syntaxhighlight lang="text">

* status code;
* headers;
* body;
* JSON;
* HTML;
* file;
* cookies;
* cache headers;
* error message;
* redirect location.;<div style="background:#e7f3ff; border-left:6px solid #2b7cff; padding:12px; margin:12px 0;">

* 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.; * dependency падає;
* server повільний;
* requests масово fail;
* retries погіршують проблему;
* потрібно оперативно fail fast.; * Практики frontend development, mobile development, desktop applications і SDK design.; Server перевіряє authentication
8.;</div>
Приклад query:

як ілюстрація:

</div>

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

* web BFF;
* mobile BFF;
* admin panel BFF;
* TV app BFF.; * виконувати queries;
* показувати tables;
* керувати schema;
* робити export/import;
* аналізувати performance;
* запускати migrations;
* переглядати data;
* керувати users і permissions.; Приклад
Browser opens example.com
<div style="background:#e7f3ff; border-left:6px solid #2b7cff; padding:12px; margin:12px 0;">

'''User-Agent''' — header, який client має змогу надсилати server, щоб описати себе.; Client має змогу мати version.;<div style="background:#fff4e5; border-left:6px solid #f39c12; padding:12px; margin:12px 0;">

'''істотно:''' mobile client часто функціонує в умовах нестабільного інтернету, обмеженої батареї й маленького екрана.;<div style="background:#fff4e5; border-left:6px solid #f39c12; padding:12px; margin:12px 0;">

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

'''істотно:''' client має змогу перевірити форму для зручності, але server усе одно має перевірити login, permissions і input.; Proxy має змогу використовуватися для:

* 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.; '''Request''' — запит, який client надсилає server.;</div>
6.; '''Практична роль:''' API client приховує деталі HTTP-запитів і дає зручний спосіб працювати з сервісом.; * Mobile clients складніші через offline, battery, app store updates і різні device versions.; Типові помилки:
<div style="background:#fdecea; border-left:6px solid #e74c3c; padding:12px; margin:12px 0;">
Payment Service → response → Order Service

example.com web server = server
Чи протестовано slow/offline network?; Приклади:
Offline client має змогу:
User enters URL
'''Практична роль:''' API gateway дає clients одну контрольовану точку входу замість десятків внутрішніх services.;== CLI Client ==
Secrets не повинні бути в client-side коді.;</div>
query GetUser {
<div style="background:#e7f3ff; border-left:6px solid #2b7cff; padding:12px; margin:12px 0;">

 constructor(private baseUrl: string, private token: string) {}

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

<syntaxhighlight lang="text">

GET /users/123

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

* швидкий feedback;
* кращий UX;
* менше зайвих requests;
* зручніші forms.; User-Agent: MyApp/1.4.2

Недоліки:
</div>
</div>

</div>

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

Він має змогу:

* current user;
* selected language;
* shopping cart;
* form data;
* UI state;
* cached API data;
* access token;
* theme;
* current route;
* offline changes;
* game state;
* local preferences.; Іноді простий server-rendered UI кращий, швидший і дешевший.; Приклад:

* connection errors;
* timeouts;
* DNS;
* TLS;
* retries;
* latency;
* packet loss;
* authentication;
* protocol rules;
* proxy settings.;== Response ==
== Request ==
'''істотно:''' caching має враховувати чутливість даних.;<div style="background:#fff4e5; border-left:6px solid #f39c12; padding:12px; margin:12px 0;">

Client має змогу просити:

* 429 response;
* Retry-After header;
* backoff;
* request batching;
* caching;
* pagination;
* throttling;
* queueing;
* user feedback.; '''Перевага:''' client надає можливість користувачу або іншій системі комфортно взаємодіяти з server, не працюючи напряму з його внутрішніми деталями.; * startup time;
* initial load;
* bundle size;
* memory usage;
* CPU usage;
* network requests;
* caching;
* rendering speed;
* battery usage;
* image optimization;
* offline behavior;
* responsiveness;
* background tasks.; це програма, пристрій, застосунок або частина системи, яка звертається до іншої системи за даними, діями або сервісом виступає ключовою рисою '''Client''' або '''замовник'''.; Добрі практики:

Browser renders page

'''Практична роль:''' desktop client зручний там, де потрібен доступ до локальних файлів, системних можливостей або складний професійний UI.; як ілюстрація, backend вашого сайту є собою server для браузера, але client для payment API, email service або database.;<div style="background:#fdecea; border-left:6px solid #e74c3c; padding:12px; margin:12px 0;">

Client має встановлювати timeouts, щоб не чекати вічно.;== Client і Proxy ==

 "id": "123",

* frontend application;
* mobile app;
* backend service;
* CLI tool;
* SDK;
* test tool;
* integration service;
* automation script.; GET /api/users/123 HTTP/1.1
</div>
Чи обробляються network errors?;</div>

* локальне збереження;
* offline mode;
* system tray;
* file system access;
* native UI;
* background sync;
* hardware integration;
* auto-update mechanism.; * складніше оновлювати;
* більше security risks на client side;
* складніша синхронізація;
* залежність від device environment.; !; Приклад:
== Client Versioning ==
має змогу кешуватися:

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

</div>

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

* зберігати local data;
* працювати offline;
* виконувати складні обчислення;
* мати багатий UI;
* синхронізуватися із server;
* працювати з local files;
* мати власну cache або database.; email

<div style="background:#fff4e5; border-left:6px solid #f39c12; padding:12px; margin:12px 0;">
<div style="background:#fdecea; border-left:6px solid #e74c3c; padding:12px; margin:12px 0;">
'''Практична роль:''' CLI client надає можливість керувати складними системами через команди, scripts і pipelines.; Host: example.com

== Mobile 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.; Він доречний, коли потрібна локальна потужність, offline mode або складний UI.;</div>
== Client і BFF ==
== Client-Side Rendering ==

Але retry має бути обережним:

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

  • показувати graphics;
  • обробляти input;
  • програвати audio;
  • синхронізувати state із server;
  • прогнозувати рух;
  • отримувати updates;
  • надсилати actions;
  • перевіряти assets;
  • працювати з matchmaking;
  • показувати UI.;== Frontend Client ==

Чи є собою timeouts?; 3.;== GraphQL Client ==

  • Apollo Client;
  • Relay;
  • urql;
  • GraphQL Request;
  • generated clients.;== Desktop Client ==

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

Тематичні мітки

  • розділення відповідальностей;
  • незалежна розробка програмного забезпечення client і server;
  • краща масштабованість;
  • супровід різних clients;
  • централізована business logic на server;
  • зручні API;
  • легше оновлювати server;
  • можливість mobile, web і desktop clients;
  • security control на backend;
  • інтеграції через API.; Погано:
  • краще offline;
  • швидша локальна реакція;
  • менше server load;
  • багатший UX;
  • доступ до system resources.; Роль
  • passwords;
  • tokens;
  • private messages;
  • payment data;
  • зайві personal data;
  • sensitive form content.; Client має змогу логувати:
</div>
'''Практична роль:''' offline client корисний там, де інтернет нестабільний, але користувач системи має продовжувати роботу.;== Client і Contract Testing ==
<div style="background:#fff4e5; border-left:6px solid #f39c12; padding:12px; margin:12px 0;">
 "name": "Anna"

{

* Browser — це client, але сучасний browser має змогу виконувати величезну частину application logic.;<div style="background:#fff4e5; border-left:6px solid #f39c12; padding:12px; margin:12px 0;">
<div style="background:#fff4e5; border-left:6px solid #f39c12; padding:12px; margin:12px 0;">
}
<div style="background:#fdecea; border-left:6px solid #e74c3c; padding:12px; margin:12px 0;">
== Client і Logging ==
'''Практична роль:''' request — це спосіб client сформулювати, що саме йому потрібно від server.; Недоліки:
</div>
DesktopClient 5.4.0

Приклади:

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

* HTML page;
* JSON data;
* image;
* file;
* authentication token;
* payment confirmation;
* search results;
* user profile;
* chat messages;
* game state.;</div>
<div style="background:#eafaf1; border-left:6px solid #2ecc71; padding:12px; margin:12px 0;">
'''Практична роль:''' contract testing ловить ситуації, коли server змінив response, а client ще очікує старий формат.;== Client Security ==

* private API key у JavaScript bundle;
* database password у mobile app;
* signing key у desktop client;
* admin token у frontend;
* cloud secret у public repository;
* secret у source map.;</div>
Accept: application/json

</div>

HTTP/1.1 200 OK

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

* 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.; * API versioning;
* backward compatibility;
* feature detection;
* graceful degradation;
* deprecation policy;
* migration guides;
* telemetry по client versions.; async getUser(id: string) {
SDK 1.12.3
class UserApiClient {

BFF сприяє:

== Web Client ==

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

* network glitch;
* timeout;
* temporary server overload;
* 503 Service Unavailable;
* rate limit у частині scenarios;
* lost connection.; Для API clients особливо корисні:
'''Критично:''' client-side authentication state потрібен для UX, але справжня довіра має підтверджуватися на server.; * Client-side cache має змогу прискорити застосунок, але має змогу й показати застарілі або чутливі інформаційні дані.; Потрібно обережно ставитися до:

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

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

Backend service використовує payment API client, щоб створити payment intent і перевірити transaction status.; У сучасних web apps client і server часто ділять роботу.; Інакше tests можуть проходити, а production — ламатися.;</div>
<div style="background:#fef2f2; border-left:6px solid #ef4444; padding:12px; margin:12px 0;">
</div>

Game client надсилає player actions на game server, отримує world state і відображає результат на екрані гравця.;</div>

'''Offline client''' має змогу працювати без постійного підключення до server.;== Client і Observability ==

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

'''API client''' — програма або бібліотека, яка звертається до API.; Один застосунок має змогу бути server для одного запиту й client для іншого.;<div style="background:#eafaf1; border-left:6px solid #2ecc71; padding:12px; margin:12px 0;">

'''Circuit breaker''' — pattern, який тимчасово зупиняє requests до проблемного service.; user(id: "123") {

 id

* не довіряти 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.; Frontend client відповідає за:
== Rate Limit і Client ==

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

'''Практична роль:''' update mechanism визначає, як оперативно команда має змогу виправити client-side bug або security issue.; |-
| Client
| Ініціює запит
| Browser, mobile app, API client
|-
| Server
| Обробляє запит і повертає відповідь
| Web server, API server, database server
|}

== Приклад client-server flow ==
Але це не замінює backend authorization.; істотно: client logs корисні для debugging, але можуть стати privacy-ризиком, якщо збирати занадто багато.;

Приклади web clients:

Приклад:

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

  • 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.; Не все варто зберігати на client.;
    <div style="background:#eafaf1; border-left:6px solid #2ecc71; padding:12px; margin:12px 0;">

Thin client зазвичай:

* corporate networks;
* caching;
* security filtering;
* API gateway;
* reverse proxy;
* debugging;
* routing;
* load balancing;
* privacy tools;
* development proxy.; '''Практична роль:''' client observability показує, що відбувається не в дата-центрі, а на пристроях реальних користувачів.;<syntaxhighlight lang="text">
== Retry Logic ==
'''Thin client''' — client, який виконує мінімум логіки, а більшість роботи віддає server.;<div style="background:#e7f3ff; border-left:6px solid #2b7cff; padding:12px; margin:12px 0;">

'''Практична роль:''' timeout захищає client від зависання через server або network problem.; Добрий client:
Response має змогу містити:
</div>

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

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

Чи логуються client errors без приватних даних?; Client можна спростити, якщо:

* перевірити request;
* виконати business logic;
* звернутися до database;
* перевірити permissions;
* сформувати response;
* повернути error;
* записати logs.; '''Game client''' — клієнтська частина гри, яка запускається на пристрої гравця.; Водночас server має залишатися джерелом довіри: він перевіряє authentication, authorization, validation і business rules.;== Ризики Client ==

'''Головне правило:''' client має бути зручним для користувача, але server має залишатися джерелом довіри й правил.;</div>

</div>

* images;
* CSS;
* JavaScript;
* API responses;
* user preferences;
* offline pages;
* GraphQL data;
* search results;
* static assets;
* downloaded files.; * WebSocket client підтримує роботу постійний діалог із server, а не окремі request-response цикли.;== Client і API Gateway ==
'''Retry logic''' — повторна спроба request після тимчасової помилки.; переважні аспекти:

* endpoint URLs;
* authentication;
* serialization;
* retries;
* pagination;
* error handling;
* rate limits;
* response parsing.;<syntaxhighlight lang="text">

}
Типи тестів:
=== Mobile banking app ===

== WebSocket Client ==

== Timeout ==

переважні аспекти:

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

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

 const response = await fetch(`${this.baseUrl}/users/${id}`, {

 }

* web pages;
* REST APIs;
* GraphQL APIs;
* file downloads;
* webhooks testing;
* service-to-service communication;
* automation;
* monitoring.; Краще:
 async charge() {
<div style="background:#e8f8f5; border-left:6px solid #16a085; padding:12px; margin:12px 0;">
Чи server не довіряє client-side даним?; Client має змогу помилитися, застаріти або бути навмисно зміненим.; Observability для client охоплює:

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

'''REST client''' — client для REST API.; '''Практична роль:''' client-side rendering робить browser активним учасником побудови interface, а не без ускладнень отримувачем готового HTML.; Чи є собою зрозумілі error messages?;== Network Client ==

Чи не зберігаються secrets у client?; як ілюстрація, браузер є собою client; додатково реалізовано мобільний застосунок є собою client для backend API, а програма для підключення до PostgreSQL є собою database client.; Client-side logging сприяє зрозуміти проблеми в реальних користувачів.; Стан circuit breaker:
</div>
</div>

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

const socket = new WebSocket("wss://example.com/chat");

</div>

* 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.; * GraphQL client має змогу сам описати, які поля йому потрібні.;</div>
Client, особливо frontend або mobile app, має бути доступним для різних користувачів.; * Матеріали з client-server architecture і network programming.;== Hydration ==

POST /orders

* старий mobile client очікує старий API;
* новий frontend використовує нове поле;
* desktop client не оновився;
* SDK version відстає;
* browser не підтримує роботу feature;
* breaking API changes.; SDK має змогу приховувати:

'''Цікавий момент:''' BFF існує з цієї причини, що mobile client, web client і admin client часто потребують різних даних, навіть якщо працюють із тим самим продуктом.;== Client Error Handling ==

</div>

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

== Client-Server Architecture ==

* зберігати local data;
* ставити changes у queue;
* синхронізувати пізніше;
* показувати cached content;
* вирішувати conflicts;
* працювати з local database;
* показувати offline status.; Client performance впливає на user experience.;</div>

'''Проста різниця:''' HTTP client зазвичай питає й отримує відповідь, а WebSocket client тримає розмову відкритою.; 2.; Хороший client швидкий, зрозумілий, безпечний, стійкий до помилок мережі й не зберігає секрети там, де їх має змогу побачити користувач системи.; '''Web client''' — client, який взаємодіє з web server або web application.;== Database Client ==
</div>
Поширені помилки:

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

Client зазвичай відповідає за:

</div>

== Email Client ==
9.; Якщо ці двері незручні або недоступні, частина людей без ускладнень не зможе увійти.;== Хороші практики Client ==

'''Client-side rendering''' або '''CSR''' — підхід, де browser отримує JavaScript application і сам будує UI.; }
}
'''SDK''' або client library має змогу бути готовим client-ом для API.; Добрі практики:
Чи зрозуміло, який server або API використовує client?; * automation;
* scripting;
* DevOps;
* debugging;
* administration;
* CI/CD;
* power users.; Він має змогу:

'''істотно:''' breaking change на server має змогу зламати clients, які команда вже не контролює напряму.; CLI 0.9.8

Client відповідає за взаємодію з користувачем або іншою системою, надсилання requests, обробку responses, локальний state, caching, error handling і UX.;<div style="background:#fff4e5; border-left:6px solid #f39c12; padding:12px; margin:12px 0;">

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

Моделі актуалізація:
'''WebSocket client''' підтримує роботу постійне двостороннє з’єднання із server.;<div style="background:#e7f3ff; border-left:6px solid #2b7cff; padding:12px; margin:12px 0;">

* 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.; * Документація HTTP, browser APIs, REST, GraphQL, WebSocket і API design.; Client показує success або error
Client caching зберігає інформаційні дані або ресурси ближче до користувача.; Browser відкриває сайт, завантажує frontend client, а той звертається до backend API для отримання user profile і dashboard data.; Client має змогу бути browser, frontend app, mobile app, desktop app, API client, HTTP client, database client, CLI tool, SDK або backend service у ролі споживача іншого API.; Server повертає response
Client має змогу приховувати кнопки або сторінки, якщо користувач системи не має permissions.;<div style="background:#eafaf1; border-left:6px solid #2ecc71; padding:12px; margin:12px 0;">

'''істотно:''' не кожному продукту потрібен складний frontend client.;</div>

'''істотно:''' client-side validation — це зручність, а не security boundary.; * `git`;
* `kubectl`;
* `aws`;
* `gcloud`;
* `az`;
* `psql`;
* `mysql`;
* `curl`;
* `gh`;
* `docker`.; '''Практична роль:''' frontend client — це частина застосунку, яку користувач системи бачить і через яку взаємодіє з backend.; Чи є собою безпечний retry logic?; Приклади REST-запитів:

Проблеми:

</div>

'''істотно:''' server часто має підтримувати старі clients, особливо mobile apps, які користувачі не оновлюють одразу.; Web client має змогу:
== Authorization на Client ==
'''Проста різниця:''' client просить, server відповідає.;== Client і Privacy ==
Clients звертаються до gateway, а gateway:

== Circuit Breaker у Client ==

'''Найлюдяніший сенс:''' client — це двері до сервісу.;

</div>

'''Проста аналогія:''' circuit breaker — це запобіжник: якщо платформа перевантажена, він розриває ланцюг, щоб не спалити все інше.; * отримує HTML;
* виконує hydration;
* обробляє user interactions;
* надсилає API requests;
* керує frontend state;
* завантажує scripts і assets.;

Client compatibility — здатність server або API працювати з різними версіями clients.;== Див.; додатково ==

  • required fields;
  • email format;
  • password length;
  • number range;
  • file size;
  • date format;
  • local form rules.; Client state — інформаційні дані, які client зберігає або тримає під час роботи.; Mock client — тестова заміна реального client-а.; Проста думка: email client — це інтерфейс до поштового сервера, який зберігає й передає повідомлення.;
    Рекомендовано:
Request має змогу містити:
'''GraphQL client''' — client, який виконує GraphQL queries і mutations.; '''Timeout''' — обмеження часу очікування response.; '''Практична роль:''' REST client комфортно функціонує з ресурсами через стандартні HTTP-операції.;</div>
</div>
'''Практична роль:''' SDK робить роботу з API простішою й менш помилковою для developers.; * адаптувати API під UI;
* зменшити кількість requests;
* приховати complexity;
* оптимізувати response format;
* керувати authentication;
* відокремити client-specific logic.; '''Небезпека:''' найтиповіша помилка — думати, що якщо кнопка прихована в UI, то дія справді заборонена.; Його потрібно rotate.; * надсилати HTTP requests;
* отримувати HTML, CSS, JS;
* виконувати JavaScript;
* керувати cookies;
* застосовувати security policies;
* кешувати ресурси;
* показувати сторінки;
* запускати frontend applications;
* відкривати developer tools;
* підтримувати extensions.; REST client функціонує з:
У microservices один service часто є собою client для іншого service.; Найчастіше це browser.;<div style="background:#eafaf1; border-left:6px solid #2ecc71; padding:12px; margin:12px 0;">

Приклади:

Недоліки:

* HTTP client;
* SSH client;
* FTP client;
* DNS client;
* email client;
* VPN client;
* database client;
* game client;
* messaging client.; '''істотно:''' mock client має відповідати реальному контракту API.; Приклади:

Client застосовується в багатьох технологічних контекстах:

'''Hydration''' — бізнес-процес, коли client-side JavaScript “оживляє” HTML, згенерований server.; Accept: "application/json"

* endpoint;
* request format;
* response format;
* status codes;
* required fields;
* optional fields;
* error structure;
* compatibility rules.;</div>

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

* Outlook;
* Thunderbird;
* Apple Mail;
* Gmail web interface;
* mobile mail app;
* command-line mail clients.;<div style="background:#f0eaff; border-left:6px solid #8e44ad; padding:12px; margin:12px 0;">

* інтерактивний UX;
* швидкі переходи після завантаження;
* багатий frontend;
* менше повних перезавантажень сторінки.;</div>
Accessibility охоплює:
Mobile client має змогу:

== Client Compatibility ==

</div>

'''істотно:''' production database client має використовувати least privilege.; '''Практична роль:''' User-Agent сприяє server зрозуміти, який client звертається до нього.;<div style="background:#eafaf1; border-left:6px solid #2ecc71; padding:12px; margin:12px 0;">

* Google Chrome;
* Mozilla Firefox;
* Safari;
* Microsoft Edge;
* embedded browser views;
* headless browsers;
* webviews у mobile apps.; Server має змогу бути дуже розумним, але користувач системи судить програмний продукт через те, що бачить і відчуває в client.; У multiplayer games game client часто спілкується з game server.;== Client у Testing ==

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

Desktop client має змогу мати:

* database driver;
* cloud SDK;
* payment API client;
* messaging client;
* GraphQL client;
* REST client;
* email provider client;
* search engine client;
* analytics client.; Він корисний, якщо:

</div>

SDK як Client

Основні переважні аспекти:

Client — це програма, пристрій або частина системи, яка звертається до server, API або service для отримання даних чи виконання дії.;
  • показує UI;
  • надсилає input;
  • отримує готові інформаційні дані;
  • має мало локальної логіки;
  • залежить від server;
  • часто простіший в адмініструванні.;
  • що змінилося locally;
  • що змінилося на server;
  • які зміни конфліктують;
  • що робити з offline edits;
  • як уникнути duplicates;
  • як обробити retries;
  • як показати user feedback;
  • як зберегти data integrity.; * завантажувати HTML;
  • виконувати JavaScript;
  • показувати CSS;
  • надсилати forms;
  • робити API requests;
  • зберігати cookies;
  • працювати з local storage;
  • відкривати WebSocket connection;
  • кешувати assets;
  • відображати UI.;== Offline Client ==

Retry корисний при:

Client і Accessibility

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

API integration

Приклад checklist для Client

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

HTTP client — client, який надсилає HTTP requests.; завдяки наявності Client library — бібліотека, яка користувачі можуть application звертатися до service або API.; }

  • надсилання request;
  • отримання response;
  • показ даних користувачу;
  • обробку user input;
  • local validation;
  • caching;
  • session management;
  • authentication flow;
  • error handling;
  • retry logic;
  • offline mode у частині сценаріїв;
  • UI або command interface.; * API clients;
  • mobile apps;
  • backend-to-backend calls;
  • CLI tools;
  • database clients;
  • external integrations.; * closed;
  • open;
  • half-open.; }

</syntaxhighlight> Практична роль: checklist сприяє зробити client не тільки красивим, а й надійним, безпечним і зручним.; Особливо, якщо кілька пристроїв змінюють ті самі інформаційні дані.; User натискає "Save"

Mobile client показує баланс, надсилає payment request, отримує підтвердження від server і показує notification.; Критично: client не має збирати або зберігати більше даних, ніж потрібно для реальної функції.;
  • public API key із обмеженнями;
  • publishable key для payment provider;
  • client id для OAuth;
  • non-secret configuration.; * authentication;
  • request creation;
  • headers setup;
  • serialization;
  • response parsing;
  • error handling;
  • retries;
  • rate limit handling;
  • pagination;
  • logging;
  • timeout management.;
  • stale data;
  • privacy issues;
  • cache invalidation;
  • показ старих permissions;
  • sensitive data in cache;
  • storage limits.; переважні аспекти:

переважні аспекти Client-Server поділу

Найлюдяніший факт: client — це як відвідувач ресторану: він робить замовлення, а server на кухні готує відповідь.; Client має змогу звертатися до server через proxy.;

Network client — програма, яка підключається до network service.;== Mock Client == істотно: thick client не означає “поганий”.; API client має змогу бути: Цікавий факт: у multiplayer game client має змогу “вгадувати” короткостроковий рух, щоб гра виглядала плавно, поки server підтверджує справжній state.; * resources;

  • HTTP methods;
  • status codes;
  • JSON;
  • headers;
  • pagination;
  • filtering;
  • authentication;
  • errors.; * notes app;
  • mobile maps;
  • email client;
  • field service app;
  • document editor;
  • offline-first web app.; Проста аналогія: thin client — це пульт керування, а основна робота відбувається десь на server.; Підказка: щоб зрозуміти client у системі, запитайте: хто ініціює request і хто чекає response?; headers: {
  • chats;
  • live dashboards;
  • multiplayer games;
  • notifications;
  • collaborative editing;
  • trading platforms;
  • real-time monitoring;
  • live sports updates.; PATCH /profile
  • method;
  • URL;
  • headers;
  • body;
  • query parameters;
  • cookies;
  • authentication token;
  • content type;
  • user agent;
  • request id.; !;== Client State ==
Client-side validation перевіряє input ще до надсилання на server.;
  • banking app;
  • delivery app;
  • social app;
  • fitness app;
  • messenger;
  • mobile game;
  • education app.; Server зберігає зміни

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

Sync або синхронізація — бізнес-процес узгодження client-side даних із server.; істотно: client library має оновлюватися разом із API.; if (!response.ok) {

  • browser;
  • curl;
  • Postman;
  • Insomnia;
  • Fetch API;
  • Axios;
  • Requests у Python;
  • OkHttp;
  • Java HttpClient;
  • Go `net/http`;
  • .NET HttpClient.; Практична роль: хороший client не без ускладнень падає при помилці, а сприяє користувачу зрозуміти, що робити далі.;</syntaxhighlight>

Client Library

Приклади сценаріїв використання

Чи є собою backend authorization?; * errors;

  • crashes;
  • failed requests;
  • performance metrics;
  • user environment;
  • app version;
  • device type;
  • browser version;
  • request ids;
  • feature flags.; Content-Type: application/json
throw new Error(`Request failed: ${response.status}`);

Цікавий момент: сучасний browser — це вже не без ускладнень “переглядач сторінок”, а потужна runtime-платформа для web applications.; Типовий приклад: const user = await api.users.get("123"); Client має власні ризики:

Contract testing перевіряє, що client і server однаково розуміють API contract.;

MobileApp iOS 2.8.1

Приклади: 

});

</syntaxhighlight>

<syntaxhighlight lang="typescript"> Приклади:

Client часто бере участь в authentication flow.; * У web security усе, що відправлено на client, вважається видимим.; Поняття Важливі фактори:

Приклади:

<syntaxhighlight lang="text">

Отримано з https://wiki.corp2.eu/index.php?title=Client&oldid=1402