В 2010 году Сами Камкар написал скрипт, который позволял идентифицировать пользователя сайта, если тот ранее посещал его. Решение было названо эверкукой (суперкукой). Данная статья рассматривает механизм восстановления куки и отвечает на вопрос работает ли это в 2023 году. В конце статьи приводится реализация части evercookie для Angular.
Веб — богатая экосистема с массой мощных API, которая только пополняется. В нашем распоряжении уже знакомые инструменты — Canvas или Intersection Observer, но в 2023 мы также имеем Web MIDI API, Speech Recognition и даже такие экзотические штуки, как геймпады и VR прямо в браузере. Естественно, эти API сложно использовать в Angular из-за разницы парадигм нативного JavaScript и декларативного Angular. Вот тут и появляемся мы!
В последнее время все больше компаний сталкиваются с необходимостью создания нескольких брендов на одном сайте или приложении. Такая задача может быть связана с различными целевыми аудиториями пользователей, регионами или продуктами. Реализация мультибрендинга может быть непростой задачей, особенно если у вас уже есть готовый проект.
В этой статье я расскажу, как на проекте с Angular добавить несколько брендов, как добавить разную для них логику, о преимуществах NX для этой задачи и важности архитектуры.
Эта статья будет полезна для всех, кто работает со сложным приложением или задумывается о его масштабировании.
В такие нестабильные времена, когда предприятия стремительно закрываются, транснациональные корпорации увольняют сотрудников, экономика обречена, одна из цифровых платформ демонстрирует стремительный рост, как никогда ранее.
Nx Generator: имба или не стоит разбираться?
Всем привет, меня зовут Дима, я angular-разработчик из департамента среднего и малого бизнеса в Тинькофф. Недавно мой коллега рассказал, почему мы выбрали Nx, а я расскажу про самый мощный инструмент Nx — Nx Generator.
Покажу, что нужно установить для запуска генераторов, и объясню, как писать собственные генераторы и создавать с ними шаблонные файлы. А еще рассмотрим генераторы из коробки от Nx. Предлагаю начинать.
Зачастую, когда я наталкиваюсь на информацию о работе с DOM в Angular, в них присутствуют упоминания об одном или нескольких из этих классов: ElementRef, TemplateRef, ViewContainerRef. Именно упоминания, ведь общее представление достаточно сложно сложить, даже тщательно изучив документацию Angular. Поэтому я решил подробно сформулировать, как это работает и для чего нужно.
Новый синтаксис шаблонов, встроенное управление потоком данных и прощание с структурными директивами? В последние годы не так много менялось. Angular был стабильным для некоторых разработчиков и застойным для других. Теперь он движется вперед со сверхсветовой скоростью. Но куда именно он направляется?
Создавать веб-приложения становится проще, если для разработки вы используете фреймворк Angular. Вы столкнетесь с удивительным сочетанием декларативных шаблонов, интегрированных лучших практик, внедрения зависимостей и сквозного инструментария. Если вы знаете, как использовать расширенные возможности для разработки приложений на базе Angular, то это поможет вам преодолеть различные трудности в процессе работы. Узнайте больше о передовых практиках Angular из лучших учебников по данному фреймворку.
Но по каким причинам вы должны рассмотреть возможность использования этого фреймворка? Для этого давайте рассмотрим некоторые из его преимуществ.
Работая с монорепозиторием, ты наверняка слышал о наборе инструментов Nrwl Nx. Если вкратце, то Nx ускоряет и упрощает работу с монорепой, снабжает полезными утилитами. Держи документацию.
Часто работа с Nx заканчивается на имеющихся дефолтных настройках. Все остальное остается черным ящиком. Время сборки проектов начинает расти, а причины так и остаются неизвестными. Может, есть что-то, что способно улучшить работоспособность монорепы и хотя бы частично решить проблемы?
Предлагаю отправиться на изучение официальной документации и поискать лайфхаки вместе со мной. Ниже приведу список полезных инструментов и механизмов, вкратце расскажу о них и дам ссылки для детального изучения.
Итак, что же ты мог упустить при работе с Nx:
• nx run-many
• dependency graph + nx affected
• nx-enforce-module-boundaries es-linting
• computation cache
• nx cloud
• buildable libs
Рады поделиться: выложили нашу разработку 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.
