Больше, больше фронтенда — доклады c ЮMoneyDay
- лайфхаки в CSS, HTML и JS,
- архитектуру фронтенда ЮMoney.
Устраивайтесь поудобнее: возможно, такого вы раньше не слышали.


Прототипно-ориентированный язык программирования



Привет хабр!
В React на смену эпохи классов, пришла эпоха функциональных компонентов. И нам показали хуки, как замена методам жизненного цикла. Но многие так и не задумывались, а равнозначный ли обмен componentDidMount на useEffect. Эта статья направлена как раз на таких людей, чтобы закрыть ваш пробел, в том как работают componentDidMount, useEffect и useLayoutEffect. (данная статья является расшифровкой видео)

Максим написал рекурсивный алгоритм, и столкнулся со Stack Overflow exception.
Потому что он любит короткие и элегантные на его взгляд решения.
Он не наслаждается, когда пишет так:
function factorial(n) {
let res = 1;
for (let i = 2; i <= n; i++) {
res *= i;
}
return res;
}Он хочет писать вот так:
const factorial = (n) => (n > 1 ? n * factorial(n - 1) : 1);Но когда он запускает подобные этому рекурсивные алгоритмы, бывает так, что он видит это:


Объектно-ориентированное программирование - это способ написания кода, позволяющий создавать различные объекты из общего объекта. Общий объект обычно называется blueprint, в то время как создаваемые объекты называются экземплярами.
Каждый экземпляр имеет свойства, которые не разделяются с другими экземплярами. Например, если у вас есть blueprint Human, вы можете создавать экземпляры Human с разными именами.
Второй аспект Объектно-ориентированного программирования - это структурирование кода, когда у Вас есть несколько уровней blueprints. Это обычно называется наследованием или подклассом.
Третий аспект объектно-ориентированного программирования связан с инкапсуляцией, когда вы скрываете определенные кусочки информации внутри объекта, чтобы они были недоступны.
Начнем с основ — введения в четырех разновидностей объектно-ориентированного программирования.

По работе попалась интересная задача по автоматизации Instagram, а именно надо было просто провести розыгрыш. Сервисов для организации этой затеи достаточно, есть даже бесплатные. Но были дополнительные (читай премиум) условия, к тому же мне очень захотелось самому посмотреть, что там внутри этой популярной инстаграмы и быть может набраться опыта в построении API.
Первым делом пошел смотреть что там говорят интернеты. Чтение официальных доков по API instagram дали четко понять, что владельцы не хотят давать доступ к неограниченной автоматизации, можно автоматизировать работу со своим аккаунтом в базовом варианте, но это не подходило под мою задачу, а "бизнес" вариант API требовал верификации компании, что естественно мне не подходит. (Может быть уже что-то изменилось …)
Мне с друзьями довелось поучаствовать в хакатоне SberCloud.Advanced Hacking и пощупать облачные сервисы Сбера. На моем текущем месте работы я каждый день работаю с Serverless стеком от AWS (CloudFront + Lambda Edge + S3 + Lambda + Step Functions + Aurora PostgreSQL Serverless + DynamoDB + Cognito). Так что мне есть с чем сравнить. Если заинтересовались, то добро пожаловать под кат.


Можно представить себе redux-saga (middleware) как администратора камер хранения. В камеры хранения можно класть эффекты на неопределенный срок и забирать их оттуда, когда будет нужно. Есть такой посыльный put, который приходит к диспетчеру и просит положить в камеру хранения сообщение (эффект). Есть такой посыльный take, который приходит к диспетчеру и просит ему выдать сообщение с определенным типом (эффект). Диспетчер, по просьбе take, смотрит все камеры хранения и если этих данных нет, то take остаётся с диспетчером и ждёт, пока put не принесёт данные с нужным для take типом. Существуют разные виды таких посыльных (takeEvery и т.д.).

Со времен первой версии Deno стал модным словом для разработчиков Javascript/TypeScript/Node. Давайте погрузимся в эту технологию, создав защищенный с помощью JWT REST API.
Желательно уже иметь некоторые основы в Node и его экосистеме (Express, Nodemon, Sequelize и т.д.), чтобы следовать этому руководству.

Генераторы - это новый вид функций, который появился в ES6. О них написано немало статей и приведено множество теоретических примеров.
Представим, что генератор (функция в объявлении, которой есть *) - это некое электрическое устройство с дистанционным пультом управления. После создания и монтирования генератора (объявления функции) нужно его "крутануть" (выполнить эту функцию), чтобы он вращался на холостых оборотах и "запитал" пульт управления собой (при выполнении функции-генератора возвращает итератор). На этом пульте управления две кнопки: Пуск (вызвать первый раз метод next итератора) и Next (последующие вызовы метода next итератора). Далее с этим пультом управления можно носиться по всей электростанции (по нашему приложению) и когда понадобиться электрическая энергия (некие значения из функции-генератора) нажимать на пульте кнопку next (выполнять метод next() генератора). Генератор производит нужное количество электроэнергии (возвращает некое значение через yield) и опять переходит в холостой режим (функция-генератор ждёт следующего вызова next от итератора). Цикл продолжается, пока генератор может производить электричество (имеются операторы yield) или он не остановится (в функции-генераторе встретится return).


Стояла задача реализовать прелоадер с обратным отсчетом на реакте. Т.к. гуглить не умею и очень люблю лепить велосипеды (хороший двухместный получился из двух велосипедов "Украина"), то я был обречен глубоко копать на полях асинхреньщины. Забегу наперёд и скажу, что реализовал этот прелоадер с помощью генераторов, redux-saga, rxjs. Очень интересный опыт и хотелось бы поделиться, учитывая, что в процессе разбирательств, кроме статей, описывающих очевидные вещи, и обрывков сугубо специфической информации на stackoverflow, не находил.
Часть первая - создание кастомного хука прелоадера.
Задача синхронизации состояния между клиентом и сервером может быть решена разными способами, я хотел бы расказать про вариант с использованием спецификации JSON Patch, а также про спецификацию MessagePack и способ оптимизации размера пакета через библиотеку PatchPack.
Принцип синхронизации заключается в следующем: все состояние передается только один раз, последующие изменения состояний передаются списком операций. Каждая операция определяет конкретный тип изменения. Примерами таких изменений являются добавление элемента массива или замена значения свойства.


В этой статье я поделюсь своим кратким обзором внедрения стейт-менеджера Effector в продуктовый проект на стеке React + TypeScript, а также покажу на примере, как легко это можно сделать.

Обратная разработка для того чтобы получить алгоритм это всегда заманчиво, но обратная разработка чтобы создать что-то новое это еще круче. В этой статье мы попытаемся использовать инструмент Frida, для того чтобы сделать чуть проще процесс анализа уязвимого приложения и чуть проще создание эксплойта под это приложение.
Все примеры в статье будут касаться атак на кучу в операционной системе Linux, поэтому запасаемся терпением и попкорном.
Многие разработчики начинают разработку многопользовательского онлайн сервера на основе библиотеки socket.io. Эта библиотека позволяет очень просто реализовать обмен данными между клиентом и сервером в реальном времени, но продумать и реализовать всю логику и интерфейс взаимодействия сервера с клиентами, а также архитектуру масштабирования и оптимизацию трафика все равно придется.
Я хочу рассказать про библиотеку magx, используя которую можно не задумываться о сетевой составляющей (коммуникации сервера и клиентов), a сразу сконцентрироваться на разработке логики игры и клиентского UI.