Все потоки
Поиск
Написать публикацию
Обновить
31.14

TypeScript *

Cтрого типизированная надстройка для JavaScript

Сначала показывать
Порог рейтинга
Уровень сложности

Ручной деплой NestJS и Angular приложений на выделенном сервер через «Docker Compose» и «PM2»

Время на прочтение33 мин
Количество просмотров2.3K

Покупаем выделенный сервер и настраиваем SSH доступ к нему с локального компьютера.
Добавляем https://github.com/SteveLTN/https-portal в "Docker compose" для автоматической генерации и продления сертификатов.

Читать далее

Истории и боли frontend-разработчика

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров7.8K

После нескольких лет веб разработки хочу поделиться с вами историями и своим опытом, делая при этом полезные (или не очень) выводы.

Читать далее

Playwright + Cucumber необычная связка. Практические примеры написания авто тестов

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров3.5K

Cucumber уже не молодой и вероятно не самый популярный инструмент для разработки, ориентированной на BDD, но он все еще используется некоторой популярностью так как фокусируется на определении и тестировании ожидаемого поведения системы с точки зрения пользователей.

Я решил использовать связку из этих двух инструментов исходя из того что BDD тесты – это простой текст, на человеческом языке, написанный в форме истории (сценария), описывающей некоторое поведение, значит Cucumber прост для понимания как начинающему специалисту с небольшим опытом тестирования так и для лица технически не подкованным. При этом мощная сердцевина playwright дает большие возможности для написания авто тестов. Градация фреймворка на части позволит опытному специалисту создавать базовую часть функций (в данном примере на Playwright + TypeScript), а начинающему специалисту покрывать тестами приложение с использованием готовой базы и знаниями (Cucumber, X-path). PS попробую показать это на примере в конце статьи.

Используемые фреймворки/инструменты:

Читать далее

Frontend. MVA архитектура

Уровень сложностиСредний
Время на прочтение11 мин
Количество просмотров4.7K

Здравствуйте.

Из этой статьи вы узнаете об определенном архитектурном подходе, который я назвал MVA.

Вы, возможно, узнаете в данном подходе Flux или MVI, но я считаю, что это что-то другое. Почему - вы узнаете дальше.

На самом деле не важно как это всё называется, придумал ли я что-то новое или нет.

Я пришел к определенному архитектурному подходу, решил поискать нечто подобное и точно такого же не нашел. Решил поделиться, потому что считаю его очень удобным и простым.

Эта статья является расширением/продолжением прошлой статьи, которую, как мне кажется, многие не поняли. Если вы дочитаете эту статью до конца и заинтересуетесь - советую прочесть прошлую вместе с комментариями для лучшего понимания.

Читать далее

Сборка приложений на NestJS и Angular и запуск их в двух вариантах: через PM2 и через «Docker Compose»

Время на прочтение42 мин
Количество просмотров1.5K

Для запуска собранных приложений в режиме PM2 фронтенд будет встроен в бэкенд в виде статичных файлов.

Для запуска в режиме "Docker Compose" бэкенд будет собран в виде Docker образа, а собранная статика фронтенда будет отдаваться через и Nginx.

База данных запускается через "Docker Compose".

Читать далее

Требуется мультиязычность на странице: английский и французский

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров805

Требуется мультиязычность на странице: английский и французский.

Будем использовать Redux ToolKit, Axios, sessionStorage.

Перевод состоит из двух частей.

Читать далее

Добавление Swagger документации в NestJS-mod приложение и генерация REST-клиента для Angular-приложения

Время на прочтение18 мин
Количество просмотров1K

Подключение генератора Swagger документации к бэкенду.
Подключение https://www.npmjs.com/package/prisma-class-generator для генерации DTO из Prisma - схемы.
Создание nx библиотеки для работы с бэкендом.
Подключение https://www.npmjs.com/package/@openapitools/openapi-generator-cli для генерации SDK для работы с бэкендом.

Читать далее

Как я создавал онлайн игру «нарды» (часть третья). Сервер

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров1.8K

Всем привет!

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

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

Читать далее

Работа с массивами в формах(динамическое добавление полей) с использованием библиотеки react-hook-form

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров2.4K

Привет друзья!

В данной статье я хочу показать вам, как разработать форму  с динамическими добавлениями полей на React.js с использованием библиотеки react-hook-form и валидацией полей с использованием библиотеки yup на конкретном примере.

Формы являются неотъемлемой частью веб-разработки, и эффективная обработка пользовательского ввода является ключевым аспектом создания интерактивных приложений. Библиотека React Hook Form предоставляет разработчикам мощный инструментарий для упрощения работы с формами в React-приложениях. 

Читать далее

Новый фронтенд-фреймворк?

Время на прочтение4 мин
Количество просмотров13K

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

Такие компоненты можно будет затем собирать в полноценные веб-приложения, сопоставимые с теми, что созданы с использованием React, Angular, Vue, Solid, Svelte и т.д.

Читать далее

Как построить мост между JavaScript и C++ через WASM, или гайд для самых маленьких

Уровень сложностиПростой
Время на прочтение11 мин
Количество просмотров6.9K

Всем привет. Сегодня я хочу рассказать об использовании WASM с C++ и разберу, как взаимодействовать с этим всем делом через JavaScript.

Материал предназначен для новичков в данной теме.

Читать далее

Как организовать работу с API в Nuxt 3 без шума и пыли

Время на прочтение5 мин
Количество просмотров4.7K

Задавшись вопросом «а как же лучше всего организовать работу с API в Nuxt 3?», я столкнулся с суровой действительностью: каких-то масштабируемых решений не так уж и много...

Читать далее

Использование isolatedModules в Angular 18.2

Время на прочтение1 мин
Количество просмотров1.2K

Angular теперь поддерживает TypeScript isolatedModules начиная с версии Angular 18.2. Благодаря этой поддержке мы сможем заметить увеличение производительности до 10% во времени сборки для production на своих проектах.

Читать далее

Ближайшие события

От любви до ненависти с process.send

Уровень сложностиСредний
Время на прочтение3 мин
Количество просмотров1.8K

Столкнулся со странной проблемой замедления получения данных от process.send - и решил поделиться симптомами и итоговым решением.

Что там?

Подключение PrismaORM в NestJS-mod приложение и проверка его работы через REST

Время на прочтение20 мин
Количество просмотров731

Подключение Prisma к NestJS происходит через пакет https://www.npmjs.com/package/@nestjs-mod/prisma.

Проверка работы происходит через запуск E2E тесты на REST-ендпойтны.

Читать далее

Сериализация сущностей с помощью декораторов на TypeScript

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров7.2K

В процессе написания приложения с более-менее сложной бизнес-логикой на фронтенде возникает необходимость держать всю эту логику на слое предметной области в "толстых" моделях. Например, для работы с формой, которая отображает на пользовательский интерфейс создание или редактирование сущности с большим количеством взаимозависимых свойств. Если "размазать" обработчики изменения состояния этой сущности и входящих в неё подсущностей по слою Application, легко можно потерять целостность модели в разных actions, reducers, валидаторах. Такой код будет трудно читать, отлаживать и поддерживать.

Можно использовать паттерн Aggregate Root для единой точки входа управления моделью, тогда упростится поддержка инварианта такой сущности. Методы доступа к свойствам и методы, меняющие состояние сущности, можно вызывать из одного объекта, а сам объект будет обеспечивать целостность и валидность своих данных. Но здесь появляется ещё одна проблема: сериализация. К примеру, бывает нужно сохранить всю сущность в каком-нибудь хранилище -- localStorage, redux store. Или отправить на бэкэнд для сохранения. Или событием обновить пользовательский интерфейс, а в payload события при этом надо передать часть сущности в виде простого плоского объекта. В этих случаях нам нужна выжимка данных из сущности, которую можно будет восстановить потом при запросе из хранилища для дальнейшей работы. Это особенно актуально, если на проекте используется SSR, там данные, которые собираются для страницы на серверной стороне, должны быть сериализуемыми.

Читать далее

Как я создавал онлайн игру «нарды» (часть вторая). Сервер

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров3.3K

Всем привет!

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

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

Читать далее

Настройка eslint-plugin-import для нового eslint 9 версии

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров8.3K

Весь код пишется в файле eslint.config.mjs, а не в eslint.json или eslint.config.js, однако вы можете указать свой формат. В доке пишут, что приоритет наивысший у .js и .mjs и имеет смысл их использовать. А .mjs нужен для корректной работы, поэтому не .js, хотя это тоже всё настраивается, если есть желание.

Этот код немного отличается от того, что было в исходнике, т.к. пока писал - тестил правила линтера, (в статье их нет, для меньшего количества кода).

Так же добавлена пара новых импортов

Читать далее

Динамический рендеринг Angular-компонентов

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров5.2K

Привет Хабр. На связи Даня, Angular-разработчик из команды Т-Бизнеса.

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

Добро пожаловать под кат!

Читать далее

Правильный инструмент для аналитики нагрузочного тестирования

Время на прочтение14 мин
Количество просмотров6.6K

В данной статье хочу рассказать про сервис load-testing-hub, главная задача которого это сбор, агррегация, анализ и визуализация данных о нагрузочном тестировании

Расскажу о том, какие проблемы решает сервис, как он помогает оценивать производительность выпускаемых релизов, а также поделюсь примерами его использования

Рассмотрим основные возможности load-testing-hub, такие как создание наглядных графиков и отчетов, сравнение результатов нагрузочных тестов

Читать далее