1 of 22

backend & frontend

Артур Атнагулов

26.11.2021

картинка из million-wallpapers.ru

2 of 22

Клиент

Сервер

2

3 of 22

Клиент — �запрашивает и иногда получает данные

...

3

4 of 22

Сервер — �получает и обрабатывает запросы, возвращает ответ

Мощный компьютер

4

5 of 22

5

6 of 22

Frontend

Backend

  • Разметка страницы (HTML)
  • Данные для фронтенда (JSON)
  • или файлы, но это не так интересно

6

7 of 22

Сервер возвращает HTML-код страницы

CTRL+U

7

8 of 22

Сервер возвращает только данные

F12 / Network

8

9 of 22

Backend (сервер)

Frontend (клиент)

  • Обслуживает запросы
  • Работает с базой данных и другими хранилищами
  • Отображает данные
  • Отправляет запросы на сервер
  • Изменяет внешний вид в зависимости от ответов сервера

9

10 of 22

Чуток определений

HTTP — протокол передачи гипертекста. Один из основных протоколов, на базе которого работает веб.

HTML — язык гипертекстовой разметки, на нем описывается содержание веб-страниц

JSON — JavaScript Object Notation — формат обмена данными между приложениями

10

11 of 22

Backend (сервер)

Frontend (клиент)

11

12 of 22

HTML + CSS + JavaScript

Технологии для разработки сайтов

  • HTML — разметка
  • CSS — оформление
  • JavaScript — интерактивность�не путать с Java, это совершенно разные языки

12

13 of 22

Сайт без CSS

13

14 of 22

JavaScript

  • Подключение: <script src=””>
  • Подробнее https://learn.javascript.ru/

14

15 of 22

15

doka.guide

16 of 22

Single Page Application

приложение, работающее на одной веб-странице без полной перезагрузки

16

17 of 22

Сайты без SPA

17

Server

Client

HTML

CSS, JS, images...

18 of 22

Сайты c SPA

18

Server

Client

JSON/XML/...

HTML, CSS, JS, images...

19 of 22

19

https://lvivity.com/single-page-app-vs-multi-page-app

20 of 22

Событийная модель

  1. Пользователь вызывает событие
  2. Событие обрабатывается
  3. Результаты отображаются на экране

20

21 of 22

jQuery

  • Библиотека для работы с DOM и упрощения некоторых рутинных операций
  • Не предлагает архитектуры приложения

Как было раньше: document.getElementById(‘some_element’).getElementsByTagName('div')[0]

С jQuery: $(“#some_element div”)

Современный JS: document.querySelector(“#some_element div”)

21

22 of 22

jQuery

22

https://jquery.com/