Во фронтенде часто попадаются сложные формы. Создавая их, мы хотим, чтобы пользователю было удобно все заполнять. Числа нужно правильно форматировать, чтобы с первого взгляда было видно, что нет лишнего нолика. Когда вводишь номер кредитной карты, сверять его удобно блоками по 4 цифры, как он напечатан на пластике. Пользователь может вбивать номер телефона, дату рождения, номер паспорта и тому подобное — существует масса случаев, когда пользовательский ввод нужно форматировать на лету. Этим занимается маска.

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

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

Кто такой Maskito и зачем он вам

Maskito — это набор библиотек для маскирования ввода с акцентом как на пользовательском, так и на разработческом опыте. В нашей документации вы найдете множество примеров и подробное руководство по API. Раздел «Начало работы» объяснит основы и быстро познакомит вас с концепциями и вариантами использования.

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

Я знаю, что у нас уже есть здесь некоторая аудитория инженеров, которые ценят наш вклад в open source. Ниже я приведу аргументы, с которыми вы сможете прийти к менеджеру или тимлиду, когда встанет вопрос о выборе технологии для маски. Если вас интересует только технически полезный контент, вы можете прочитать другую статью от ведущего разработчика Maskito Никиты Барсукова, а эту пропустить.

Поддержка крупного бизнеса

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

У нашей команды есть ряд успешных проектов, таких как Taiga UI и Web APIs для Angular, к примеру. Мы относимся к ним очень серьезно, потому что это не пет-проекты или хобби (хотя мы любим их, как если бы так и было). Поэтому вы можете ожидать, что наша документация будет понятной, примеров будет много, а на ваши вопросы вы получите своевременные ответы в нашем телеграм-канале.

Независимость от фреймворка

Неважно, используете вы React, Vue или Angular для вашего продукта или полагаетесь на какой-либо другой фреймворк или даже на ванильный JavaScript, — Maskito вам подойдет. Наш основной пакет не имеет зависимостей и может использоваться в любом фронтенд-приложении. То же самое касается и масок, которые мы рассмотрим дальше.

У нас есть специальные пакеты для комфортного использования Maskito в React, Vue и Angular. Поскольку публичный API довольно лаконичен, будет легко расширить поддержку на другие популярные фреймворки. Фактическая конфигурация маскирования остается той же и может быть легко пошарена между различными проектами и архитектурами.

Независимость от среды

Maskito работает во всех современных браузерах независимо от среды, в которой вы его запускаете. Вы можете использовать Web Components с Shadow DOM или применять SSR для улучшения TTI и SEO — поля ввода не будут вызывать проблем, пытаясь получить доступ к window под nodejs или путаясь в инкапсулированном фокусе. 

Maskito также будет корректно работать на сенсорных устройствах и виртуальных клавиатурах как для полей ввода, так и для элементов textarea или даже contenteditable. Взаимодействие с буфером обмена, Undo/Redo, перетаскивание текста или автозаполнение браузера поддерживаются.

Наша цель — создать универсальное решение для маскирования в вебе, а веб крайне разнообразен. Если вы столкнетесь с какими-либо проблемами с конкретной конфигурацией, не стесняйтесь сообщить об этом.

Качественный код

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

Весь код написан на строгом TypeScript и покрыт 1000+ e2e-тестов, а вклад сообщества тщательно проверяется. У нас есть хорошо настроенные линтеры и автоматизированные пайплайны, которые мы совершенствовали на других проектах в течение многих лет, чтобы убедиться, что технические недостатки не попадают в релиз. Мы используем его в бизнес-продукте с миллионами пользователей. Нам важно, чтобы курсор не прыгал в полях ввода.

Не только мы

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

В своей уверенности мы не одни: Ionic, знаменитый кроссплатформенный UI-фреймворк, принял Maskito в качестве своей официальной библиотеки маскирования. Их команда провела исследование существующих альтернатив и рассматривала возможность разработки собственной маски. Они решили, что Maskito удовлетворит потребности их крайне разнообразной пользовательской базы и добавили примеры маскирования своих компонентов в документацию.

Сообщество Maskito продолжает расти, на GitHub уже больше 1300 звезд, и библиотеку можно встретить в зависимостях самых разных компаний — от АльфаБанка до турецкого Trandyol. Возможно, она станет решением и для вас.

Готово к использованию

Maskito поставляется с отдельным пакетом готовых к использованию масок. Мы поддерживаем огромную библиотеку компонентов, которая включает ввод чисел, кредитные карты, телефоны, даты и так далее. Она используется в десятках приложений в нашей экосистеме, где требуется дополнительное маскирование для почтовых индексов, IP-адресов, серийных номеров и так далее. Как только эти маски реализованы и должным образом протестированы, все общие решения попадают в @maskito/kit.

Это постоянно растущая коллекция пресетов, которые вы можете использовать как есть и быть уверенными, что они работают правильно. Вы можете внести свой вклад в нее или создать issue на добавление функции для конкретного решения в нашем репозитории на GitHub. 

Благодаря хорошей обособленности Maskito будет таким маленьким или таким обширным, как вам нужно. Основной пакет весит всего около 3 КБ в сжатом виде, а неиспользованные пресеты отбросит tree-shaking, так что размер вашего бандла в надежных руках.

Резюме

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

Я надеюсь, что оно поможет вам сделать ваши интерфейсы удобными как для ваших пользователей, так и для разработчиков. Ознакомьтесь с Maskito и, если вам понравится, поддержите нас звездой и расскажите о нем коллегам. Удачного маскирования всем!