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

TypeScript *

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

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

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

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

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

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

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

Читать далее

Pipelining & Composing: улучшаем читаемость кода. Реализация на TypeScript

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

В статье мы рассмотрим, как можно значительно улучшить читаемость кода с помощью двух мощных техник: пайплайнинга (pipelining) и композиции функций (composing). Мы будем использовать TypeScript для демонстрации этих подходов.

Читать далее

Добавление базы данных Postgres в проект и запуск миграций через Flyway для NestJS-mod приложения

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

База данных будет подниматься через Docker Compose.

Миграции пишутся вручную и запускаются через Flyway мигратор.

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

Конфигурации для Docker Compose и Flyway генерируются через запуск NestJS-mod в режиме инфраструктуры.

Читать далее

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

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

Всем привет!

Время от времени меня сильно тянет на разработку игр и я даже публиковал на любимом хабре пару статей (здесь и тут) о том, что из этого получается. И вот в очередной раз, когда желание пересилило все остальное я почему-то решил, что могу сделать "простую" игру "длинные нарды" за несколько дней. Если вам интересно что из этого вышло, то усаживайтесь поудобнее, сегодня я расскажу о том, как все начиналось.

Читать далее

Nestjs, Firebase, GCloud. Как быстро поднять API backend на TypeScript

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

Меня зовут Федор, занимаюсь JS Fullstack разработкой последние несколько лет. Хочу поделиться своим примером организации backend проекта с использованием Nestjs и Firebase. В этом туториале мы создадим кодовую базу на Nestjs, законфигурируем линтеры и Firebase.

В статье приведены примеры кода, ссылки на коммиты и сам репозиторий. Мы пройдем от генерации проекта, до итогового CRUD примера, который можно использовать при разработке своих пет проектов и не только. Для работы с Firebase может потребоваться иностранная платежная карта.

Читать далее

Создание пустого Angular проекта и связь его с существующим сервером на NestJS

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

Создание приложения происходит через nx схематик для Angular.

Адрес сервера задается жестко в коде, в следующих постах адрес будет перенесен в переменные окружения.

Для запуска E2E-тестов используется "Playwright".

Читать далее

Angular: переменная в шаблоне, хорошо или плохо?

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

Недавнее объявление о блоке @let в Angular вызвало бурное обсуждение в сообществе разработчиков, одни считают его ценным дополнением, другие видят в этом ненужное усложнение.

Читать далее

Создание пустого проекта с помощью NestJS-mod

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

После многих лет написания различных проектов на NestJS и Angular, я решил переписать группу проектов из репозитория https://github.com/rucken и использовать текущий стиль кодирования, он не сильно поменялся, просто стало меньше однотипного кода.

Разработку основного fullstack-бойлерплейта для фронтенд и бэкэнд без бизнес функционала буду вести в отдельной организации "NestJS-mod" (https://github.com/nestjs-mod).

Читать далее

Адаптивная верстка на React Native

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

⚛️ Адаптивная верстка на React Native

При разработке веб-приложений на React, браузер Chrome тратит много оперативной памяти. Это связано с тем, что для эффективного обхода Virtual Dom, используется JIT компилятор, наслаивающий более эффективные реализации скомпилированных JavaScript функций поверх интерпретируемой реализации. Это создает высокую сложность по памяти: нагрузка на GC возрастает кратно.

Избежать просадки производительности может использование движка Hermes из React Native. Однако, React Native не умеет работать с адаптивной версткой: из коробки есть Yoga Layout, реализующий только Flexbox.

Описание проблем, возникших при портировании классического React приложения в React Native можно прочитать в этой статье. Речь идет о поддержке различных форм факторов устройств, в том числе, Galaxy Fold

Читать далее

Формат описания идентификатора зависимости в JS DI

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

Эта статья для тех, кто знает, что такое “внедрение зависимостей” и имеет практический опыт его использования. Меня зовут Алекс Гусев и я являюсь автором библиотеки “@teqfw/di”. Цель моей библиотеки - дать возможность использовать функционал “внедрение зависимостей через конструктор” в проектах на JS (фронт и бэк) и TS (бэк). Минимальной единицей внедрения является отдельный экспорт es6-модуля. Поэтому библиотека не может использоваться с модулями CJS или UMD.

В основу внедрения зависимостей заложена идея о том, что вместо статического связывания исходного кода на этапе написания (через import) применяется динамическое связывание объектов программы в режиме выполнения. В моей библиотеке это достигается за счёт размещения в коде конструкторов (или фабричных функций) инструкций по созданию нужных им зависимостей, которые интерпретируются Контейнером Объектов при работе программы и на основании которых загружаются нужные исходники и создаются нужные зависимости.

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

Читать далее

Основы типизации props в React

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

Данная статья рассчитана на тех, кто только начинает писать свои React приложения на TypeScript, а также является памяткой для меня, ведь совсем недавно я путался в типизации children props.

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

Если же чувствуете, что несмотря на то, что в проекте нет сложной логики, но дерево компонентов и количество и вариация передаваемых пропсов внушительные, я бы воспользовался prop-types. Ранее эта фича входила в состав React и использовали её так: React.PropTypes. Но начиная с версии React 15.5 она переехала в отдельную библиотеку, поэтому теперь её необходимо устанавливать как, например, npm/yarn пакет. Она используется для валидации типов props в компонентах React. Это всё из возможностей TS, но для проекта с большим количеством компонентов и пропсов - то, что нужно. Синтаксис описания типов пропсов отличается от TS.

Углубиться в детали

Руководство по использованию Signal в Angular 17

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

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

Читать далее

TypeScript что нового 5.5. Перевод. Часть 1

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

Всем привет, меня зовут Сергей, в этой статье я опубликую свой перевод официального анонса релиза TypeScript 5.5 версии, спасибо Dan Vanderkam за оригинал. Опыта в написании статей ранее не имел, переводы тоже не делал, решился внести свою лепту в сообщество Хабра. Открыт к критике, если первая часть понравится и в комментариях я увижу интерес к продолжению, то займусь выпуском следующих частей.

В первой части предлагаю ознакомиться с предикатами выводимого типа и то как всё это поменялось в TypeScript 5.5 версии, приступим!

Читать далее

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

Все, что вы хотели знать про иерархию инжекторов в Angular

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

Привет. Меня зовут Дмитрий, я фронтенд-разработчик в компании «Цифровая индустриальная платформа». В своей работе мне часто приходится использовать Dependency Injection (DI) в Angular. Это мощный и популярный инструмент, который упрощает работу с зависимостями в наших приложениях. Он позволяет легко интегрировать необходимые сущности в компоненты, упрощает процесс тестирования и поддерживает принцип инверсии зависимостей. Однако часто мы не используем все возможности DI, потому что не знаем, как он работает под капотом. Давайте разберемся, как функционирует DI, что такое иерархия инжекторов и какие изменения принесла версия Angular 14.

Читать далее

TypeScript + React: путь к идеально типизированному коду

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

Частенько сталкиваются с проблемой поддержания типовой безопасности в React-проекте. Код разрастается, и управление типами становится всё сложнее. Ошибки, вызванные неправильной типизацией, приводят к крашам и длительным отладкам. Тогда приходит время внедрения TypeScript!

В статье рассмотрим как TypeScript может помочь решить проблемы с типизацией и сделать React-код идеально типизированным.

Читать далее

Как мы уменьшили количество кода для генерации графиков в 10 раз, сделав Vue-компонент

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

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

Читать статью →

Я перестал использовать Copilot после 2 месяцев. И вот почему

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

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

Читать далее

Работа с массивами по-новому. React Custom Hook: useArray

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

В этой серии статей мы отправимся в путешествие по миру пользовательских хуков React, открывая для себя их огромный потенциал для улучшения ваших проектов разработки. Сегодня мы сосредоточимся на хуке «useArray», одном из многих тщательно разработанных хуков, доступных в коллекции пользовательских хуков React.

Читать далее

Web components как альтернатива iframe на примере Angular-компонентов

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

Всем привет! Я Сергей, фронтенд-разработчик из команды привлечения Центрального университета. Занимаюсь проектами, связанными с регистрацией абитуриентов на мероприятия, и внутренними проектами по управлению мероприятиями. 

Осенью мы ждем поступление бакалавров. Чтобы начать набор, нужно встроить форму регистрации в лендинг на CMS. Форма довольно простая: пара полей для ввода данных, диалоговое окно с текстом соглашения об обработке персональных данных и кнопка отправки данных на сервер. Для скорости работы и проверки работоспособности идеи решили встроить приложение через iframe. Но форма стала обрастать различными бизнес-требованиями, которые приносили проблемы. В статье расскажу, с какими трудностями мы столкнулись и как их решали.

Читать далее

Tuner — гибкий конфигуратор проекта as code для Deno

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

К черту YAML и JSON, конфигурируем проект «as code» на TypeScript с гибкой иерархией. Решение для Deno.

Поглазеть