🐈‍⬛ Микросервисы gRPC в NestJS: пошаговое руководство

В процессе иллюстрации возможностей gRPC создадим два микросервиса: службу заказа (order-service) и службу пользователя (user-service).

В службу заказов (order-service) внедрим API MyOrders, возвращающий фиктивные заказы пользователя. Прежде чем вернуть заказ, служба связывается с помощью gRPC с user-service для проверки прав пользователя в системе.

Такой смоделированный вариант позволит демонстрировать взаимодействие между микросервисами. При этом возможны индивидуальные отличия, например служба заказа может получать данные пользователя в режиме реального времени для отправки уведомлений на мобильный телефон или по электронной почте.

Настройка проекта
Предполагается, что вы знакомы с основами NestJS. Сначала определим специфичные для gRPC элементы.

С помощью командной строки NestJS инициализируем проекты user-service и order-service.

nest new order_service
nest new user_service

Установим специфичные для gRPC зависимости.

В gRPC определяем API в файлах буфера протокола или proto. Наши клиенты NestJS должны понимать этот интерфейс, и для этого мы будем использовать пакет ts-proto, который автоматически сгенерирует код адаптера NestJS для определений proto.

npm i --save @grpc/grpc-js @grpc/proto-loader
npm i protoc-gen-ts_proto
npm install ts-proto

Примерная структура проекта:

📌Читать

@javascriptv

🖥 Анимированная форма обратной связи

Хороший способ сделать ваш сайт более интересным. Проект реализован с помощью CSS, jQuery и TweenMax.js.

Посмотреть код можно тут:

https://codepen.io/izmaelmag/pen/NqyEKx

@javascriptv

🖥 Magic Wand Reveal - красивый эффект хайд для изображений.

https://codepen.io/Hyperplexed/pen/wvQzbGz

@javascriptv

🖥 Генераторы и итераторы в JavaScript

В языке JavaScript итераторы и генераторы являются мощными инструментами, позволяющими разработчикам контролировать итерацию и поток данных. Вместе эти функции образуют впечатляющий дуэт, позволяющий писать лаконичный, эффективный и гибкий JavaScript-код.

В JavaScript функция-итератор — это уникальная функция, возвращающая объект-итератор. Объект-итератор — это объект, который через метод next() возвращает объект с двумя свойствами: value и done. Свойство value представляет собой следующее значение в последовательности, а свойство done указывает, достиг ли итератор конца последовательности.

Функции-итераторы могут использоваться для перебора наборов данных, таких как массивы и объекты.

Ниже приведен пример функции-итератора, выполняющей итерацию по массиву:

function Iterator(array) {
let nextIndex = 0;
return {
next: function () {
if (nextIndex < array.length) {
return {
value: array[nextIndex++],
done: false,
};
} else {
return {
value: undefined,
done: true,
};
}
},
};
}

const array = [1, 2, 3, 4, 5];
const arrayValue = Iterator(array);

console.log(arrayValue.next()); // { value: 1, done: false }
console.log(arrayValue.next()); // { value: 2, done: false }
console.log(arrayValue.next()); // { value: 3, done: false }
console.log(arrayValue.next()); // { value: 4, done: false }
console.log(arrayValue.next()); // { value: 5, done: false }
console.log(arrayValue.next()); // { value: undefined, done: true }
В приведенном выше коде определена функция Iterator, которая принимает в качестве аргумента массив и возвращает объект итератора. Объект итератора через метод next возвращает следующий элемент массива и обновляет внутреннюю переменную nextIndex для отслеживания индекса массива.

Метод next проверяет, меньше ли nextIndex длины массива. Если это так, то метод возвращает объект со значением массива в позиции nextIndex и устанавливает свойство done в false. После этого переменная nextIndex увеличивается на единицу. Если nextIndex больше или равно длине массива, то метод next устанавливает свойство done в true.

📌Читать дальше

@javascriptv

🖥 Neumorphic Liquid Slider

Анимация на чистом Javascript. В JS устанавливаются значения и запускаются анимации.

https://codepen.io/konstantindenerz/pen/qBMvXNK

@javascriptv

🖥 Variable font animation — анимация переменных шрифтов. Реализован с помощью CSS и JavaScript.

#анимация #css #javascript #текст

https://codepen.io/michellebarker/pen/bPEWGK

@javascriptv

🖼 Почему разрабатывать веб-интерфейсы так сложно?

Разработка веб-интерфейсов кажется простой, но только на первый взгляд.

Если углубиться в нее, обнаруживается множество сложностей, озадачивающих даже опытных специалистов.

Эта статья поможет вам разобраться с рядом проблем разработки веб-интерфейсов, начиная с несоответствия между веб-языками и современными требованиями к пользовательскому интерфейсу и заканчивая сложными вопросами управления данными и вызовами асинхронных API.

Кроме того, мы исследуем так называемые “нерезультативные пути” (“unhappy paths”), часто упускаемые из виду. К ним относятся состояния загрузки, обработка ошибок, а также более широкие архитектурные аспекты, включающие безопасность, производительность и доступность.

Читать

🖥 8 продвинутых вопросов для собеседования по JavaScript

В этой статье мы детально рассмотрим важнейшие вопросы для собеседования по JavaScript. Надеюсь, что скрупулезный разбор каждого вопроса поможет вам усвоить основные концепции и ответить на другие подобные вопросы на собеседованиях.

1. Подробнее о свойствах операторов + и —
console.log(1 + '1' - 1);
Можете ли вы предположить, как поведут себя операторы + и — в ситуациях, подобных приведенной выше?

Когда JavaScript имеет дело с выражением 1 + '1', то обрабатывает его с помощью оператора +. Интересным свойством этого оператора является то, что он предпочитает конкатенацию строк, когда один из операндов является строкой.

В нашем случае ‘1’ является строкой, поэтому JavaScript неявно преобразует числовое значение 1 в строку. Следовательно, 1 + '1' становится '1' + '1', в результате чего получается строка '11'.

Теперь у нас есть выражение '11' - 1. Поведение оператора — прямо противоположно. Приоритет отдается числовому вычитанию независимо от типа операндов. Если операнды не относятся к числовому типу, JavaScript выполняет неявное принуждение для их преобразования в числа. В данном случае '11' преобразуется в числовое значение 11, и выражение упрощается до 11 - 1.

Собираем все вместе:

'11' - 1 = 11 - 1 = 10
2. Дублирование элементов массива
Рассмотрите следующий JavaScript-код и постарайтесь найти в нем какие-либо проблемы:

function duplicate(array) {
for (var i = 0; i < array.length; i++) {
array.push(array[i]);
}
return array;
}

const arr = [1, 2, 3];
const newArr = duplicate(arr);
console.log(newArr);
В этом фрагменте кода требуется создать новый массив, содержащий дублированные элементы входного массива. При первоначальном рассмотрении кажется, что код создает новый массив newArr, дублируя каждый элемент исходного массива arr. Однако в самой функции duplicate возникает критическая проблема.

Функция duplicate использует цикл для перебора каждого элемента конкретного массива. Но внутри цикла она добавляет новый элемент в конец массива, используя метод push(). В результате массив каждый раз становится длиннее, что создает проблему, при которой цикл никогда не останавливается. Условие цикла (i < array.length) всегда остается истинным, поскольку массив продолжает увеличиваться. В результате цикл может продолжаться бесконечно, что приводит к зацикливанию программы.

Чтобы решить проблему бесконечного цикла, вызванного ростом длины массива, можно перед входом в цикл сохранить начальную длину массива в переменной. Затем эту начальную длину можно использовать в качестве ограничения для итерации цикла. Таким образом, цикл будет выполняться только для исходных элементов массива и перестанет зависеть от роста массива за счет добавления дубликатов. Вот модифицированная версия кода:

function duplicate(array) {
var initialLength = array.length; // Сохранение начальной длины
for (var i = 0; i < initialLength; i++) {
array.push(array[i]); // Дублирование каждого элемента
}
return array;
}

const arr = [1, 2, 3];
const newArr = duplicate(arr);
console.log(newArr);
В результате дублированные элементы окажутся в конце массива, и цикл не будет бесконечным:

[1, 2, 3, 1, 2, 3]

📌Читать дальше

@javascriptv