Разное Flashcards
WebSocket это
Протокол WebSocket. обеспечивает возможность обмена данными между браузером и сервером через постоянное соединение (В отличие от http в котором отправили запрос получили ответ и связь оборвалась)
Клиент и сервер постоянно обмениваются данными
Данные передаются по нему в обоих направлениях в виде «пакетов», без разрыва соединения и дополнительных HTTP-запросов.
WebSocket особенно хорош для сервисов, которые нуждаются в постоянном обмене данными, например онлайн игры, торговые площадки, работающие в реальном времени, и т.д.
let socket = new WebSocket(“ws://javascript.info”);
Когда new WebSocket(url) создан, он тут же сам начинает устанавливать соединение.
Браузер, при помощи специальных заголовков, спрашивает сервер: «Ты поддерживаешь Websocket?» и если сервер отвечает «да», они начинают работать по протоколу WebSocket, который уже не является HTTP.
Если сервер согласен переключиться на WebSocket, то он должен отправить в ответ код 101.
let socket = new WebSocket(“wss://javascript.info/article/websocket/demo/hello”);
socket.onopen = function(e) {
alert(“[open] Соединение установлено”);
alert(“Отправляем данные на сервер”);
socket.send(“Меня зовут Джон”);
};
socket.onmessage = function(event) {
alert([message] Данные получены с сервера: ${event.data});
};
socket.onclose = function(event) {
if (event.wasClean) {
alert([close] Соединение закрыто чисто, код=${event.code} причина=${event.reason});
} else {
// например, сервер убил процесс или сеть недоступна
// обычно в этом случае event.code 1006
alert(‘[close] Соединение прервано’);
}
};
socket.onerror = function(error) {
alert([error]);
};
CORS
Это механизм на основе HTTP -заголовков, который позволяет серверу указывать любые источники (домен, схему или порт), отличные от его собственного, из которых браузер должен разрешить загрузку ресурсов.
Access-control-allow-origin заголовок header. Если источника нету в заголовке будет ошибка CORS
Паттерны программирования
Паттерн ‘команда’ дописать
Паттерн «Модуль»
Модуль — это самостоятельный фрагмент кода, который можно изменять, не затрагивая другой код проекта. Модули, кроме того, позволяют избегать такого явления, как загрязнение областей видимости, благодаря тому, что они создают отдельные области видимости для объявляемых в них переменных. Модули ES6 хранятся в файлах. Один файл может содержать лишь один модуль.
Паттерн «Синглтон»
Паттерн «Синглтон» или «Одиночка» (Singleton) представляет собой объект, который может существовать лишь в единственном экземпляре. В рамках применения этого паттерна новый экземпляр некоего класса создаётся в том случае, если он пока не создан. Если же экземпляр класса уже существует, то, при попытке обращения к конструктору, возвращается ссылка на соответствующий объект. Последующие вызовы конструктора всегда будут возвращать тот же самый объект.
Паттерн «Фабрика»
Паттерн «Фабрика» может быть использован в том случае, если нужно создавать различные объекты в зависимости от различных условий.
const factory = new VehicleFactory();
const car = factory.createVehicle({
vehicleType: ‘car’,
doors: 4,
color: ‘silver’,
state: ‘Brand New’
});
const truck= factory.createVehicle({
vehicleType: ‘truck’,
doors: 2,
color: ‘white’,
state: ‘used’
});
Паттерн «Декоратор»
Паттерн «Декоратор» (Decorator) используется для расширения функционала объектов без модификации существующих классов или функций-конструкторов. Этот паттерн можно использовать для добавления к объектам неких возможностей без модификации кода, который ответственен за их создание.
function Car(name) {
this.name = name;
// Значение по умолчанию
this.color = ‘White’;
}
// Создание нового объекта, который планируется декорировать
const tesla= new Car(‘Tesla Model 3’);
// Декорирование объекта - добавление нового функционала
tesla.setColor = function(color) {
this.color = color;
}
tesla.setPrice = function(price) {
this.price = price;
}
tesla.setColor(‘black’);
tesla.setPrice(49000);
Те мы изменяем сам созданный обект, добавляем в него новый функционал
Паттерн ‘команда’
Архитектурна веб приложений
Опробовать все
Архитектура - набор модулей или компонентов и взаимодействие этих модулей между собой. В хорошей архитектуре удаление модуля/компонента должно быть как можно более простым и безболезненным.
В любой архитектуре нужно следовать принципам
DRY,KISS,SOLID
- Классическая архитектура
https://images.ctfassets.net/htsjgx8vu9xb/7ySWdS4ax45Kl0tlQRiwoz/c3d86eae5758e61a822c1d210e977113/Screenshot_2024-11-07_at_11.21.39.png - Модульная архитектура
https://images.ctfassets.net/htsjgx8vu9xb/6Q9lGAsnOBu1DXXk55PPMS/5058b84cb61ea48925f9a44eeaff2916/Screenshot_2024-11-07_at_11.55.55.png
https://images.ctfassets.net/htsjgx8vu9xb/6X4Io6xSCvn8nqHhP1y3nt/6ffcda94d0e9d9886a9cf217f43713c0/Screenshot_2024-11-07_at_11.57.25.png
- Atomic design
https://images.ctfassets.net/htsjgx8vu9xb/329eNotJVsz3tyyCnhscDK/f076a294234b8635912e2a810e8b93f3/Screenshot_2024-11-07_at_11.58.31.png - Featured sliced design
https://images.ctfassets.net/htsjgx8vu9xb/6klRWEJblypN0HUqwrOoO1/72386c8c74279c9fb9e9185c5eba28b8/Screenshot_2024-11-09_at_17.19.19.png
shared - ui без бизнес логики
entities - компановка shared компонентов. уже могут иметь бизнес логику
featured - какая - либо фича бизнес логики. лайк дизлайк кнопка подписаться и тд
одна featured = одна функциональность
widget - самостоятельные блоки которые комбинируют низлежащие слои
pages - страницы, экраны приложения
Принципы Solid — Что такое принципы разработки Solid
SOLID это абревеатура о 5 принципах разработки. (правила, ограничения, наборе каких-то действий). SOLID про то как сделать модули менее связанными и обособленными друг от друга
1.SINGLE RESPONSOBILITY
Принцип единичной ответственности. Каждый модуль или функция должна решает единственную задачу. Не пишем супер функции которые решают все задачи сразу
Плюсы:
выросла читабельность кода
стало проще вносить изменения в код
- OPEN CLOSE
Принцип открытости/закрытости
Модули, компоненты, функции должны быть открыты для расширения но закрыты для изменения. Изменять существующий код это плохо по такой причине что он уже протестирован, работает и с ним проблем нету.
Плюсы:
Нет необходимости в повторном тестировании
Меньше вероятность допустить ошибку при изменении кода
3.LISKOV SUBSTITUTION
Принцип подстановки Лисков
Наследуемый класс должен дополнять а не замещать поведение базового класса
4.INTERFACE SEGREGATION
Принцип разделения интерфейса
Программые сущности не должны зависить от методов которые они не используют. (слишком «толстые» интерфейсы необходимо разделять на более маленькие и специфические, чтобы программные сущности маленьких интерфейсов знали только о методах, которые необходимы им в работе)
Плюсы
Более предсказуемая работа
Менее связанный код
5.DEPENDENCY INVERTION
Принцип инверсии зависимости
Модули высокого уровня не должны зависеть от модулей более низкого уровня. Иначе программисту придется менять несколько модулей при проблемах в модуле низкого уровня
Принцип kiss, dry, YAGNI
YAGNI
You Aren’t Gonna Need It / Вам это не понадобится
Если вы занимаетесь рефакторингом метода, класса или файла, не бойтесь удалять лишние методы. Даже если раньше они были полезны – теперь они не нужны.
Don’t Repeat Yourself / Не повторяйтесь
Дублирование кода – пустая трата времени и ресурсов. Вам придется поддерживать одну и ту же логику и тестировать код сразу в двух местах, причем если вы измените код в одном месте, его нужно будет изменить и в другом.
KISS
Keep It Simple, Stupid / Будь проще
Применительно к разработке ПО он значит следующее – не придумывайте к задаче более сложного решения, чем ей требуется.
HTTP. разница http1 и http2
HTTP - это протокол для обмена данными.
HTTP - структура:
Обязательные параметры
HTTP Method: GET, POST, PUT, DELETE - что мы хотим сделать с ресурсом (получить, создать, удалить )
Code: 404 Код состояния является
информацией об ответе сервера
URL: /login
HTTP-HEADER:Несут информацию о http запросе, информацию о браузере или о типе устройства, тип контента
Host: ru.wikipedia.org - куда отправляем запрос
HTTP-body:
в боди отправляются какие-то данные
CI / CD — Что это и как работает
CI/CD расшифровывается как Continuous Integration и Continuous Delivery aka Deployment — то есть непрерывная интеграция и непрерывная доставка.
Что входит в CI
-линтеры (ESLlint, TSLint , Prettier)
-тесты (Jest)
-сборка приложения (webpack, dotenv). проверка билдится ли приложение без ошибок или нет
Перед каждым git коммитов запускаем эти скрипты
Что входит в CD
Автоматический деплоимент и развертывание новых коммитов на сервер
Что такое middleware
MIddlevare - это кокое-то промежуточное звено(промежуточный код), между запросом и функцией, которая должна обработать этот запрос. Этих middlevare может быть сколько угодно.
Пример middleware - middleware для проверки authorization, проверка роли пользователя
Затем запрос доходит до функции обрабатывается и возвращается обратно
https://images.ctfassets.net/htsjgx8vu9xb/2kscZqTNG23F5EOSmRGLUJ/b084b6d224116dfcd01d9a47e58e2512/Screenshot_2024-11-07_at_18.15.01.png
Метологиям Scrum / Agile / Kanban / Waterfall
В Agile можно выделить Scrum и Kanban подход
Agile принципы:
- Конечная цель работы в любой момент может измениться, и это нормально.
- В результате каждого небольшого цикла работы должен получаться готовый продукт, пусть и без некоторых функций
- Новые требования к продукту обязательно должны быть учтены и добавлены в следующих рабочих циклах
- Сроки проекта должны быть гибкими, с запасом на задержки и изменения
- Руководитель должен на протяжении всего цикла принимать деятельное участие в работе команды, а не приходить в начале с требованиями и в конце с ревизией.
Scrum - выполнение проекта разбивается на спринты и в окончании спринта (2-4 недели) получается обновленный проект с обновленной логикой. После выполнения спринта задачи которые не успели и баги отправляются в беглог, смотрят что успели сделать что нет. Общаются с заказчиком и начинают новый спринт.
Kanban - задачи выполняются без спринтов. Таски распределяются между колегами. Все видят процесс выполнения и стадию в которой находится таска.
waterfall - Это наверное про то как в максимально короткий период написать mvp. тестирование переписка старого функционала и его улучшение уходят на задний план
ООП
ООП
Построено на 3 концепциях. Инкопсуляция, полиморфизм, наследование
Инкапсуляция - сокрытие реализации методов или свойств класса. Если какие-либо методы или свойства класса не должны будут вызываться в созданном методе используем делаем метод или свойство класса private
Наследование - концепция, согласно которой одни классы, называемые родительскими, могут лежать в основе других — дочерних. При этом, дочерние классы перенимают свойства и методы своего родителя.
class Clindren extends Parents {
}
Полиморфизм - переопределение родительских методов в дочерних классах. В результате получаются классы с разной реализацией методов. Те разная логика методов в наследуемых классах
Еще есть композиция и агрегация
Rest API — Что это
REST API - набор правил сообщающий как нужно общаться клиенту с сервером. REST API про семантику, как стоит общаться клиенту с сервером.
API- (aplication programming interface) - интерфейс как стоит общаться с программой
- Модель взаимодействия REAST-api это клиент сервер
- Каждый раз клиент и сервер общаются как в первый раз. Клиент должен отправить всю информацию , необходимую для выполнения запроса
(3. Серверная система может быть многоуровневой. ТЕ на сервере могут быть дополнительные сервисы, микросервисы)
- Единообразный унифицированный интерфейс
для каждой crud операции мы используем правильный http метод(get,post,delete,put)
- Может содержать Кеширование
Может быть осуществленно путем проставления http заголовков - Может быть Версионирование
Сохранение совместимости ендпоинтов с помощью версирования
https://images.ctfassets.net/htsjgx8vu9xb/xSfbsmxlbKPGTci75SCGJ/189b7db429a6b00face5a56e4e33c1c8/Screenshot_2024-11-07_at_16.48.53.png - В идеале есть Документация
документация апи, что ожидается на входе и на выходе. какие хедеры ожидаются
SOAP (ПОЩУПАТЬ ЧТО ТАКОЕ)
Simple Object Access Protocol
SOAP - протокол обмена структурируемыми сообщениями
Формат данных в soap - XML(SOAP-XML если конкретнее)
есть язык wsdl, и с помощью его описывают эти soap сервисы
https://images.ctfassets.net/htsjgx8vu9xb/3V7LbgiI9uT21gZOiGir8O/0d75f383101f23155a0d6a1275280529/Screenshot_2024-11-07_at_16.55.43.png
GRAPHQL
GRAPHQL это язык запросов.
С помощью graphql клиент сам выбирает какие даные ему нужны в этом endpoint, все данные не подтягиваются.
В GRAPHQL есть два вида запроса - QUERY(аналог GET), MUTATION(аналог POST).
еще есть subscription - подписка на изменение данных
ПРЕИМУЩЕСТВА -
частичная самодокументация
клиент запрашивает тольно нужный обем данных
Виды баз данных
Реляционные базы данных
Например PostgreSQL. Суть реляционных баз в хранении данных в связанных таблицах.
Документо-ориентированные базы данных
Если вам нужно хранить много файлов/документов и вы не хотите задумываться (до разумных пределов, разумеется) о структуре хранения, иерархии, связях, вам может подойти одна из документо-ориентированных баз данных
Наиболее популярной документо-ориентированной базой данных на текущий момент является MongoDB.
