Angular *

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

Maskito содержит разные библиотеки: основная написана на TypeScript без зависимостей, есть опциональный пакет с набором готовых конфигурируемых масок, а еще есть библиотеки для удобного использования Maskito в проектах на React, Angular или Vue. Рассказываю обо всем подробнее.

Привет! С вами снова Максим, и это заключительная часть трилогии о переезде на MFE. В первой части мы говорили о том, как пришли к распилу, во второй — что подтолкнуло нас к микрофронтам, и вот настала очередь фолбэков.

Всем привет! Я Александр Бухтатый, frontend-разработчик в Тинькофф, специализируюсь на Angular. Наша команда работает в монорепозитории с четырьмя проектами. В каждом проекте много форм, нужно сопровождать их и создавать новые.

В статье покажу один из способов работы с формами в Angular-проектах, который упрощает создание новых форм и изолирует зависимость от внешней UI-библиотеки. Будет мало текста и много кода, пристегните ремни, мы начинаем.

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

Warnings типа:

has incorrect peer dependency

has unmet peer dependency

Vulnerabilities:

Prototype pollution in webpack loader-utils

loader-utils is vulnerable to Regular Expression Denial of Service (ReDoS)

Crash in HeaderParser in dicer        

Привет! Меня зовут Даниил, я фронтенд-разработчик в Тинькофф Бизнесе. Мы строим удобные интерфейсы, чтобы клиенты могли быстро зарегистрировать бизнес.

Сегодня я хочу рассказать, почему мы используем Nx для всех наших Angular-проектов, какие проблемы решает этот инструмент и чем он лучше Angular CLI.

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

Лучшие практики при разработке в Angular обеспечивают согласованность, читабельность кода, производительность, удобство обслуживания и масштабируемость.

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

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

Всем доброго дня! Меня зовут Семен, в команде я отвечаю за работу с Angular.

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

Внедряя МФ, разработчики сталкиваются с новыми проблемами. Один из таких челленджей возникает при разработке: как грамотно организовать передачу данных между микрофронтендами? Расскажу о нашем опыте и поделюсь решением для их общения. 

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

Команда работала с фреймворком Angular, ввиду этого будет он и упомянут. Утверждения правдивы и для React/Vue/... в схожих кейсах.

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

Поговорим о том, как наша команда пришла к такому подходу, какие плюсы принесло это решение и почему, если вы пишете на Angular, вам стоит хотя бы взглянуть на @ngrx/component-store.

Создание user-friendly документации для Angular проектов при помощи NgDoc.

Я давно пишу код, а React использую более пяти лет.

За это время у меня возникло несколько идей о том, как можно было бы улучшить React.

К реализации этих идей я приступил около трех лет назад. Сначала проверил концепцию, потом решил оформить всё в виде библиотеки.

А о том, что из этого вышло, я бы хотел рассказать в этой статье.

Привет! Я Дима, разработчик онлайн-бухгалтерии. Предлагаю на примере простой задачи разобрать два подхода к созданию модальных окон, связанных с url: императивный и декларативный.

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

По мере изучения RxJS разработчик рано или поздно сталкивается с такими понятиями, как cold и hot observable. А на технических собеседованиях в команды, которые используют RxJS, можно услышать вопросы по этой теме.

Например, чем горячий поток отличается от холодного? Можно ли холодный поток превратить в горячий и наоборот? И если да, то как это сделать?

В статье попробуем разобраться в теме и найти ответы.

В данной статье мы разберем 4 способа как зарегистрировать нового пользователя:

1.Сторонние сервисы авторизации (такие как Google)

2.Авторизация с использованием токенов

3.Авторизация с помощью номера телефона

4.Логин + Пароль

Статья даст вам конкретный алгоритм реализации каждого способа. Необходимые библиотеки, а также примеры кода. Я постараюсь приводить в пример реализацию на чистейшем JavaScript, для того чтобы вы смогли внедрить функционал в свое проект, не зависимо от используемого фреймворка, однако также будут примеры для тандема Angular + Asp .Net Core. Мы обсудим как защитить ваш сайт от взлома. На сколько это сложно и возможно ли в принципе гарантировать 100% защиту. Итак, давайте приступим.

Привет! С вами снова Максим. Во второй части будет о том, что мы придумали.

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

Angular Signals является частью будущей спецификации 16-й версии Angular. В первую очередь Signals нацелены на решение проблемы с обнаружением изменений в Angular, однако Angular Team позаботилась и о том, чтобы разработчики смогли не только писать более оптимальный код с точки зрения самого фреймворка, но и чтобы самим разработчикам было удобнее и приятнее писать код на Angular. Сигналы предлагают более декларативный подход для написания приложений, позволяя новичкам быстрее вкатываться в Angular и по-новому посмотреть на использование RxJs в своём приложении.

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

Когда я провожу собеседование на позицию React разработчика, обычно задаю общий вопрос об архитектуре - "как бы ты строил архитектуру своего приложения и почему?". После обсуждения, я начинаю рассказывать небольшую часть материала из этой статьи, 5% по содержанию, приводя тезисы, по которым можно будет собрать общую картину моего видения. И обычно получаю положительную обратку. Поэтому решил изложить этот материал более развернуто здесь. Буду отправлять ссылку тем, кому это может пригодиться.

Angular CDK имеет широкие возможности для скроллинга плоского списка. Если размер каждого элемента одинаков, то можно воспользоваться FixedSizeVirtualScrollStrategy: всего лишь нужно прокинуть размер элемента в пикселях, проитерироваться по данным и виртуальный скроллинг готов. Но что делать, если размер элементов разный? Данную проблему можно решить кастомной стратегией виртуального скроллинга. В данной статье мы рассмотрим как построить такую стратегию для pdf-документов.

Как мы в Mango подошли к выбору единой технологии для фронтенда, с какими трудностями столкнулись и что в конце концов из этого вышло. Итоги семи лет работы на Angular.