Обновить
57.45

TypeScript *

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

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

Миграция на строгий TypeScript: наш путь и собственное решение

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

Наш проект имеет долгую историю. И за это время подходы к разработке фронтенда успели несколько раз измениться. В какой-то период в проекте можно было встретить код на JavaScript, CoffeeScript и TypeScript. Плюс сам TypeScript успел обновиться несколько раз за время существования проекта со второй до пятой версии.

Сейчас TypeScript практически вытеснил весь остальной код, но процесс по переписыванию с других языков занял много времени. И чтобы была возможность переиспользовать уже написанный код в TS-модулях, было принято решение отказаться от строгих проверок. Из-за выключенных проверок в коде накопилось большое количество использований any, а также отсутствующих проверок на null. Это, наверное, основные две проблемы, которые не позволяют единовременно пройтись по всей кодовой базе и за раз исправить все ошибки, возникающие при включении строгих проверок.

В общем, если вам знакома эта ситуация, то статья для вас. Меня зовут Максим Овчарик, я ведущий фронтенд-разработчик в Selectel. Под катом расскажу, как мы строили процесс миграции кода на строгий режим TypeScript.
Читать дальше →

Обновление Capacitor приложений в обход сторов

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

В данной статье я хочу затронуть такую интересную тему, как обновление бандла Capacitor-приложений (CodePush, live update и т.д).

Сталкивались ли Вы когда-нибудь с ситуацией, когда необходимо незначительно обновить мобильное приложение, написанное на Capacitor?

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

А если нужно сделать релизы во всех популярных магазинах? Google Play, RuStore, AppGallery и, конечно же, самые нерасторопные из существующих — App Store. Выпуск во всех интересующих магазинах может занять значительное время. Вы, конечно, можете автоматизировать этот процесс при помощи различных инструментов, но, так или иначе, это занимает время на одобрение модераторами.

Читать далее

Продвинутое использование библиотеки React Router v7: как упростить сложную навигацию и улучшить производительность

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

Привет, Хабр. Я Сергей, фронтенд-разработчик в Clevertec. И сегодня поделюсь опытом использования обновленной 7-й версии React Router. Расскажу, как мы реорганизовали структуру роутинга. Покажу, как избавились от лишних «букав кода», улучшили производительность приложения, создали навигацию по страницам и еще много полезного.

Погнали!

Создаю онлайн-плеер с нейросетями и кошкодевочками

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

Всем привет. Меня зовут Владислав. Я работаю в компании NTechLab фронтенд-разработчиком и уже более 10 лет пишу на JavaScript и TypeScript. В своей жизни я часто использую эти навыки для решения различных бытовых задач. Как и в этой истории, например.

image
Читать дальше →

Как утекает память, если забыть отписаться от Observable

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

Многие, конечно, знают, что в Angular-сообществе принято трепетно следить за подписками на Observable, потому что это чревато утечками памяти. Но не все видели эти утечки в глаза и не встречались с их последствиями. Давайте смоделируем простую ситуацию по следам утечки, с которой недавно столкнулся я (первый раз).

Читать далее

Простой TypeScript клиент для Telegram Bot Api

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

В этой статье я рассказываю о создании своей библиотеки для работы с Telegram Bot API на TypeScript.

Около половины материала посвящено разработке собственного парсера, который превращает рутинные HTTP запросы в удобный и типизированный интерфейс.

Если вам интересно, как избавиться от постоянного переключения между документацией и кодом и при этом сохранить весь набор возможностей API – эта статья для вас 😊

Читать далее

Одна React-задача, демонстрирующая ключевые навыки на собеседовании

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

Как всего одна небольшая React-задача помогает глубже понять уровень кандидата на собеседовании? Разбираем нюансы работы с хуками, асинхронностью, состоянием гонки и сайд-эффектами. На первый взгляд задача кажется простой - всего лишь компонент, загружающий данные по username. Но в процессе решения выявляются ключевые моменты: правильно ли кандидат управляет состоянием, учитывает ли смену пропсов, обрабатывает ошибки и предотвращает race conditions. Этот вопрос помогает не просто проверить знания, а увидеть, как кандидат рассуждает и принимает технические решения.

Читать далее

Нюансы автоматизированного тестирования расширений для VS Code с помощью WebdriverIO

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

Привет! Я инженер по контролю качества продукта Amplicode в компании Haulmont. Одним из направлений деятельности нашей компании является разработка плагинов для IntelliJ IDEA и расширений для VSCode. Передо мной встала задача протестировать расширение Amplicode Frontend для VS Code. Задача оказалась не самой тривиальной и в процессе мы столкнулись с немалым количеством проблем и нюансов, о которых я и хочу рассказать в этой статье.

Читать далее

Чего ждать от Angular в 2025 году? Стратегия

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

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

Не найдя ни одной статьи на русском на это тему - родилась эта :-)

Я разобрал официальную дорожную карту Angular и их стратегию на ближайшие годы. Впереди ускорение, упрощение, новая реактивность и стабильная (возможно) жизнь без zone.js. Давай разбираться, что нас ждёт!

Читать далее

Многопользовательский рой агентов для Ollama

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

🐝 Многопользовательский рой агентов для Ollama

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

Читать далее

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

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

Load-testing-hub: эволюция сервиса аналитики нагрузочного тестирования

Ранее я рассказывал о load-testing-hub, инструменте для аналитики и агрегации данных по нагрузочным тестам. Тогда он находился в стадии MVP, а теперь прошел значительные улучшения.

Что изменилось?

— Добавлено больше информации и гибкости в настройках.
— Расширены возможности сравнения результатов.
— Реализованы детальные графики и аналитика по методам.
— Оптимизирован процесс выявления аномалий в производительности сервисов.

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

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

Читать далее

«Я делаю рефакторинг ежечасно» или как за пять минут улучшить приложение

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

История этой статьи началась с того, что я вспомнил о довольно известном высказывании Мартина Фаулера, автора книг и статей по архитектуре ПО, которое нередко вызывает недопонимание (во всяком случае так было у меня) — «Я делаю рефакторинг ежечасно». Первая мысль, которая логично возникает после этого высказывания — уважаемый публицист просто лукавит. Вторая — что, наверное, кроме рефакторинга он в своей жизни ничем больше не занимается. Но так ли это?

В очередной раз с вами Костя Логиновских, ведущий разработчик и технический лидер внутреннего проекта в Cloud.ru. В этой статье предлагаю во всём разобраться и обсудить, как можно делать рефакторинг «за пять минут» и улучшить приложение буквально за утренним кофе.

Читать далее

Log4ts — библиотека, которой не должно быть

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

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

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

Библиотека Log4ts вдохновлена идеями Log4J и обеспечивает логирование в программах, написанных на  TypeScript.
Далее в этой статье я расскажу о том, как её установить, использовать и конфигурировать.

А в конце я опишу коротенько другие мои библиотеки, которые тоже не должны были бы существовать.

Читать далее

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

Книга: «Эффективный TypeScript: 83 способа улучшить код. 2-е изд.»

Время на прочтение5 мин
Количество просмотров4.7K
imageПривет, Хаброжители!

В 2020 году у издательского дома «Питер» вышел перевод «Эффективный TypeScript: 62 способа улучшить код», и книга сразу стала бестселлером. Прошло почти полных четыре года! Многое изменилось с тех пор, в том числе и вышла новая версия TypeScript. Дэн Вандеркам полностью переработал книгу, и мы представляем вам новый «Эффективный TypeScript: 83 способа улучшить код. 2-е изд.». Подробный! Понятный! С неизменным скворцом на обложке!

Но обо всём по порядку.
Читать дальше →

Effect для TypeScript разработчиков

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

В статье я рассказываю о библиотеке Effect TS – не о новом реактивном фреймворке, а о реализации системы эффектов на TypeScript.

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

Читать далее

FizzBuzz, который не помог мне найти работу

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

Fizzbuzz — это простой алгоритм, который когда-то был популярен в контексте технических собеседований.

Я знал, что это такое, но до прошлой недели меня ни разу не просили написать его.

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

Базовую реализацию fizzbuzz можно написать однострочником на Typescript:

const fizzbuzz = (n: number)=>`${n%3 ? '' : 'Fizz'}${n%5 ? '' : 'Buzz'}`;

Во время собеседования меня попросили написать fizzbuzz на любом близком мне языке; собеседующий даже сказал, что можно использовать эзотерические языки программирования, но рекомендовал не делать этого, потому что некоторые правила реализовать будет сложно. Этого вполне можно было ожидать, ведь собеседование могло длиться до 45 минут, а обсуждать простой fizzbuzz особого смысла не было. Менять язык программирования после начала собеседования тоже было запрещено.
Читать дальше →

Callback рефы в React: что это такое и где можно применять

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

При разработке у нас зачастую возникает необходимость прямого взаимодействия с DOM-элементами. Для такого случая React предоставляет нам механизм рефов (refs), который позволяет получать доступ к элементам после того, как они зарендерятся. Чаще всего используются обычные объектные рефы через useRef (обзовём их так), но также существует другой подход — callback refs. Этот метод даёт нам дополнительную гибкость и контроль над жизненным циклом элементов, позволяя выполнять необходимые нам специфические действия в точные моменты привязки и отвязки элементов. В этой статье я хочу объяснить, что такое callback refs, как они работают, показать проблемы при их использовании и примеры их использования.

Читать далее

Чем отличается мой Type Predicate Generator?

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

Кратко: это максимально безопасный по типизации инструмент, генерирует статические файлы с кодом для максимальной совместимости, быстрый благодаря предварительной компиляции (AOT) и компактный. Также он предоставляет удобный генератор модульных тестов, чтобы можно было быть почти на 100% уверенным, что создаваемые предикаты работают, как ожидается.

Этот пост предлагает детальное сравнение Generator с другими инструментами для проверки типов во время выполнения, а также дает более широкий обзор смежных тем. Со временем пост постепенно превращается в более аналитическую статью, а не просто «мой X круче, чем ваш Y».

Погрузиться

Гибкость и контроль над данными: применение моков в разработке

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

В современной разработке приложений важным аспектом является способность быстро и эффективно создавать прототипы и демонстрационные версии. В этом посте мы расскажем о нашем опыте использования моков (mocks) для эмуляции бэкенда на примере фронтенд-проекта. Мы поделимся ключевыми проблемами, с которыми столкнулись, и решениями, которые помогли нам ускорить разработку, улучшить стабильность и обеспечить гибкость в работе с данными. Вы узнаете, как мы использовали Mock Service Worker (MSW) и Vite-плагин для создания изолированного и удобного окружения, а также какие преимущества это принесло нашей команде.

Читать далее

FastAPI и Vue.js 3: телеграм-бот с MiniApp для записи и автоматических уведомлений. Пишем фронтенд

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

Друзья, приветствую! Наконец-то дошли руки до описания второй части нашего большого проекта по работе с выдуманной клиникой «Здоровье Плюс».

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

В прошлой части мы полностью закрыли вопрос логики нашего бота. Сегодня мы займемся написанием фронтенда для нашего Telegram MiniApp с использованием современного JS фреймворка Vue.JS 3.

К концу статьи мы реализуем полноценный реактивный фронтенд, который одинаково хорошо будет смотреться, как в формате веб-сайта (мобильная и пк-версия), так и в формате Telegram MiniApp.

Читать далее