TypeScript *

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Edge рантайм. Один из главных функционалов компании Vercel — компании, которая разработала и развивает next.js. Тем не менее, её влияние по edge рантайму вышло далеко за рамки её фреймворков и утилит. Edge рантайм работает и в недавно купленном Vercel Svelte, и в nuxt, и в более чем 30 других фронтенд фреймворках. Эта статья будет посвящена edge рантайму — что это, как это используется в Vercel, какими возможностями дополняет next.js и какие решения сделал я, чтобы эти возможности расширить.

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

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

Привет! Меня зовут Сергей, я ведущий разработчик в Lad. В этой статье речь пойдет об опыте работы с Payload.

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

Хочу рассказать, как мы реализуем на практике контакты по спецификации OpenAPI, стараемся следовать подходу Contract First и в целом разрабатывать так, чтобы удобно было как разработчикам в команде, так и всем, кто использует наши сервисы. В статье описана генерация Java и typescript, а так же конфигурации maven.

Контракты OpenAPI — спецификация, которая позволяет описывать интерфейс взаимодействия с сервисом в виде REST. Или не REST, тут зависит от задачи и ее реализации.

Вдаваться в историю появления спецификации и ее развития не буду. Если кратко — эта спецификация позволяет описывать контракт взаимодействия с сервисом с помощью yaml‑синтаксиса. А с помощью OpenAPI generators можно генерировать из такого описания клиент‑серверные интерфейсы на различных языках. На данный момент последняя версия OpenAPI — 3.1.0 — является наиболее удобной и структурированной, позволяет описывать контракт с помощью JSON. Мы осознанно используем версию 3.0.3. Почему? Расскажу далее.

Infinite Scrolling - это популярный метод загрузки данных по мере необходимости (on-demand quests). При начальном рендере приложение запрашивает только часть контента (только ту, которую он сможет увидеть) и динамически подгружает следующие части по мере прокрутки страницы пользователем, обеспечивая бесшовный user experience.

В этой статье описан самый простой способ реализации - на хуках.

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

По праву основной фичей Angular 18 стала Zoneless Change Detection. Именно с ней так и хочется разобраться.

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

Перед тем как мы перейдем к Zoneless Change Detection, вкратце пробежимся по концепции механизма CD (Change Detection) и тому, как он реализуется с помощью zone.js.

Привет, на связи Surf Web Team и Никита, QA Surf! 

Давайте разберемся, какие проблемы возникают при тестировании SSR-сайтов с помощью подмены данных и как сделать так, чтобы все заработало.