Обновить
62.08

TypeScript *

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

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

Чистая архитектура фронтенд приложений. Часть вторая

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

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

Читать

Интеграция CSS-фреймворков в Angular: советы, которые вы не знали

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

Вы создали новое Angular‑приложение, подключили популярный CSS‑фреймворк, но вместо ожидаемого вау‑эффекта столкнулись с проблемами: стили выглядят не так, как хотелось, валидация форм работает странно, а некоторые элементы вообще не реагируют на изменения состояния. Знакомо? Это типичная ситуация, когда CSS‑фреймворки интегрируются без учета особенностей Angular.

Эта статья поможет вам разобраться, почему возникают такие трудности, и покажет, как правильно интегрировать CSS‑фреймворки в Angular. Мы рассмотрим ключевые проблемы, разберем их решения и реализуем стильное, реактивное поле ввода с применением лучших практик Angular.

Читать далее

Краткая история WWW от фронтенд-разработчика

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

Всемирная паутина (WWW) — это не просто набор веб‑страниц, это революция, изменившая наше восприятие информации и общения. С момента своего появления в начале 1990-х годов WWW кардинально трансформировала мир, открыв новые горизонты для бизнеса, образования и повседневной жизни. История веб пестрит взлетами, падениями и уходами в крайности, но здесь мы пройдемся только по самым ярким моментам! Следить за эволюцией технологии, которая навсегда изменила наше общество, мы будем глазами фронтенд‑разработчика.

Читать далее

Как я писал плагин для TypeScript. Часть 2. CLI

Уровень сложностиСложный
Время на прочтение12 мин
Количество просмотров1.2K

История о плагинах для TypeScript продолжается! В этой статье расскажу о том, как написать плагин для транспиляции, зачем использовать библиотеку ts-patch, как с её помощью можно трансформировать TypeScript и о многом другом!

Конечно, из статьи вы узнаете и о тех проблемах, с которыми можно встретиться при написании плагина для CLI. Разберёмся, как их можно решить. В общем, погнали!

Читать далее

Todo-лист на максималках: разбираем архитектуру крупного приложения

Уровень сложностиСложный
Время на прочтение31 мин
Количество просмотров8.9K

В этой статье я покажу, как устроена многослойная архитектура крупного реактивного web-приложения, и особенности его запуска под Electron. Материал будет полезен, если вы планируете начать свою разработку, хотите попробовать себя в роли архитектора, вас не пугает Shared Workers, Service Workers или, в конце концов, вы хотите это попробовать или разобраться.

Читать далее

Чистая архитектура фронтенд приложений. Часть первая

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

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

Читать

Интернационализация (i18n) бэкенда в Express с использованием Intlayer

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

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

Читать далее

RUINSWORLD: Многопользовательский шутер с открытым миром для браузера на js/ts, Three и Vue. Бета-версия

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

Этой статьей я хочу представить сообществу разработку www.ruinsworld.ru, которой, по сути, посвятил пять последних лет жизни. Все начиналось с браузерного сингл‑шутера, потом была не очень удачная и быстро наскучившая попытка в стратегию, после чего я поставил себе, казалось бы, невозможную задачу. Реально ли, используя все эти наработки, построить многопользовательский шутер в браузере, да еще не просто «стрелялку внутри небольшой коробки», а с большим открытым миром и огромным количеством неписей в нем? Чтобы можно было «идти куда хочешь во все стороны и делать что заблагорассудится», как в самых лучших постапокалиптических РПГ?

Читать далее

Как TypeScript помогает решать проблемы обратной совместимости в UI-библиотеках

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

Обратная совместимость — одно из ключевых требований к современным UI‑библиотекам, которое стоит в одном ряду с требованиями к удобству использования компонентов и наличию качественной дизайн‑системы. Более того, она должна обеспечивать не только сохранение работоспособности проекта клиента после обновления библиотеки, но и неизменность самого подхода к написанию кода. Последний аспект может бросать определённые вызовы для команды разработки UI‑библиотеки и создавать уникальные сценарии.

Привет, Хабр! На связи Павел Урядышев, главный ИТ‑инженер Platform V UI Kit в СберТехе. В этом материале я расскажу, с какой необычной проблемой обратной совместимости столкнулась наша команда во время подготовки релиза UI‑библиотеки Platform V UI Kit. Это решение для построения интерфейсов любого уровня сложности: от корпоративных приложений до сайтов.

Читать далее

Рецепты TypeScript: простое тестирование типов

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

Привет, это снова Костя из Cloud.ru! В своих последних статьях я делился рецептами довольно сложных типов. Например, рассказывал, как преобразовывать ключи объектов из snake_case в camelCase. Давайте представим, что вы воспользовались одним из таких рецептов. Как его поддерживать? И что скажет ревьюер, увидев такой код?

Сегодня в меню не блюдо, а ложка — покажу, как можно надежно тестировать типы и не бояться их менять, если это нужно.

Взять ложку

Хост директивы: ключ к декомпозиции

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

В Angular 15 появилась новая фича, которой не уделяют должного внимания, — Directive Composition API. Она добавляет hostDirectives: [...] в декоратор @Component/@Directive. В этом массиве можно перечислить standalone-директивы, которые хотим автоматически навесить на компонент или директиву. Это позволяет очень удобно декомпозировать логику и открывает много дверей для новых подходов к разработке.

Читать далее

FSD 2.1 или как «pages first» подход может ухудшить структуру ваших Frontend приложений

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

Всем привет! 13 ноября, в официальном Telegram канале Feature Sliced Design состоялся релиз новой версии архитектурной методологии. Он принёс в себе несколько важных, фундаментальных изменений, о которых мы сегодня и поговорим.

Читать далее

Как мы мигрируем с JQuery на React

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

Вокруг все говорят о серверных компонентах реакта, о серверном рендеринге, и разных новшествах в мире фронтенде. Как будто JQuery в один миг взял и исчез. Несмотря ни на что он всё ещё остаётся самой популярной библиотекой 😅.

Сегодня я вам расскажу, как мы постепенно мигрируем с JQuery на React.

Читать далее

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

TS Extend: полезная утилитарная функция для расширения type

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

В текущей версии TS (5.7) нет нативного расширения типов.

Расширение в TS реализуют интерфейсы через ключевое слово extend, причем интерфейсы могут быть расширены только от одного объекта.

Хотя для типов (type/interface) предусмотрена операция интерсекции (&), которая объединяет свойства двух или более типов - она обладает важным ограничивающим свойством - при наличии одинаковых свойств, операция интерсекции присваивает их результирующему типу значение never.

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

Читать далее

Интеграция и сохранение выбранного языка пользователя в базу данных в фулстек-приложении на «Angular» и «NestJS»

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

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

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

Читать далее

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

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

TLDR. Я примерно год создавал курс из 141 урока. Курс получился хороший, все кто проходят рады и пишут положительные отзывы. Я пытался его продавать, в лучшем случае у меня получалось отбивать рекламу в ноль. Короче, я хороший разработчик, я хорошо доношу материал, но я плохой маркетолог. Все эти таргреты, ретаргеты, воронки, шморонки — тоска унылая. Мне гораздо веселее и понятнее заработать на создании и запуске IT-продуктов, чему я и учу в этом учебнике. Так что пишу эту статью, чтобы сообщить вам о существовании моего курса и предложить всем желающим абсолютно бесплатно получить от него пользу 🙂

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

Читать далее

# React-Query — Общий обзор и мотивация к применению

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

React-Query - Общий обзор и мотивация к применению. Первая проба технологии для фронтенд команды компании Chibbis. Общий обзор технологии и практика внедрения.

Читать далее

Поддержка временных зон в фулстек-приложении на основе NestJS и Angular: работа с REST и WebSockets

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

В этой статье я хотел бы поделиться своим опытом по внедрению поддержки временных зон в фулстек-приложение, построенное на NestJS и Angular. Мы узнаем, как сохранить настройки таймзоны пользователя в базе данных и правильно использовать их при взаимодействии с сервером через REST и веб-сокеты.

Читать далее

Пишем Realtime для Multiple-page application в микросервисной архитектуре

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

⌚️Пишем Realtime для Multiple-page application в микросервисной архитектуре

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

В статье описывается, как отправить пропущенные во время переподключения события WebSocket повторно в порядке очередности поступления

Читать далее

Бот за 15 минут на генераторах

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

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

Что делать? Логичное решение — максимально упростить бота и написать его на стороне фронтенда с отправкой результата на бэкенд и получением ответа одним запросом. Думаю, многие баловались или могут представить, что это несложно, но нужно писать множество конструкций и условий.

Я же предлагаю в статье посмотреть, как написать бота с помощью простого советского JavaScript‑генератора.

Читать далее