Как стать автором
Обновить
73
Карма
0
Рейтинг
Роман Седов @MarsiBarsi

Angular Google Developer Expert | Frontend dev

Библиотека как продукт: от папки в проекте до международного опенсорса

Блог компании TINKOFF JavaScript *Angular *GitHub *

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

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

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

Давайте посмотрим
Всего голосов 19: ↑17 и ↓2 +15
Просмотры 2.8K
Комментарии 0

Пять причин для ИТ-компании полюбить опенсорс

Блог компании TINKOFF Open source *JavaScript *Angular *GitHub *

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

Всю статью я построил на примерах опыта Taiga UI — огромной библиотеки компонентов под Angular, которая долго развивалась внутри компании, а 10 месяцев назад была выложена в опенсорс. Несмотря на то, что примеры взяты из опыта фронтовой библиотеки, все пункты применимы и актуальны для любого другого стека.

И что же он дает?
Всего голосов 34: ↑34 и ↓0 +34
Просмотры 6.3K
Комментарии 8

Концепция контроллеров компонента в Angular: часть вторая

Блог компании TINKOFF Разработка веб-сайтов *JavaScript *Angular *TypeScript *

Несколько месяцев назад я написал статью «Как мы делаем базовые компоненты в Taiga UI более гибкими: концепция контроллеров компонента в Angular». Я рассказал о том, как мы добавляем гибкости и избавляемся от дублирования кода с помощью DI. Пришло время продолжить статью.

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

Давайте посмотрим
Всего голосов 23: ↑22 и ↓1 +21
Просмотры 5.3K
Комментарии 6

Компоненты-конструкторы: мощь ng-content в Angular

Блог компании TINKOFF Разработка веб-сайтов *JavaScript *Angular *TypeScript *

Проекция контента — одна из базовых возможностей Angular, о которой слышали почти все. А с недавних пор по ней появилась и хорошая официальная документация. Тем не менее в реальных задачах разработчики часто обходят ng-content стороной, прибегая к более сложным и перегруженным решениям и усложняя дальнейшее использование и поддержку компонента.

В этой статье я хотел бы показать несколько типовых кейсов для ng-content при разработке многократно используемых компонентов. А еще — рассказать о преимуществах, которые они могут нам дать.

Давайте посмотрим
Всего голосов 30: ↑30 и ↓0 +30
Просмотры 9.9K
Комментарии 1

Angular Moscow Meetup #19: наш митап и там, и тут передают

Блог компании TINKOFF Angular *

После длительного перерыва Angular Moscow Meetup наконец вернулся, да еще и в новом гибридном формате! 28 апреля мы собрали в офисе почти 100 человек и еще столько же людей следили за происходящим в прямой трансляции. Мероприятие длилось больше двух часов, мы послушали два доклада и круглый стол с экспертами, среди которых аж три GDE по Angular.

Зрители тоже были полноценными участниками митапа: мы зачитывали их вопросы спикерам, отвечали на комментарии и провели розыгрыш подарков. Кажется, наш эксперимент получился удачным! А в этой статье я расскажу, какие доклады у нас были, дам ссылки на них и фотографии с самого ивента.

Давайте посмотрим
Всего голосов 20: ↑20 и ↓0 +20
Просмотры 2.2K
Комментарии 1

Упрощаем работу с Angular с помощью @taiga-ui/cdk: 5 наших лучших практик

Блог компании TINKOFF Разработка веб-сайтов *JavaScript *Angular *TypeScript *

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

Среди всех этих инструментов я выделил мою пятерку фаворитов. Я использую их во всех своих проектах и уже давно не представляю, как писать на Angular без них, потому что они ежедневно экономят мне массу времени.

Заглянуть в мультитул
Всего голосов 18: ↑18 и ↓0 +18
Просмотры 5.1K
Комментарии 5

Как мы делаем базовые компоненты в Taiga UI более гибкими: концепция контроллеров компонента в Angular

Блог компании TINKOFF Разработка веб-сайтов *JavaScript *Angular *TypeScript *

В процессе эволюции нашей библиотеки компонентов Taiga UI мы стали замечать, что некоторые компоненты посложнее имеют @Input просто для того, чтобы прокинуть его значение в @Input другого нашего базового компонента внутри себя. Иногда встречается такая вложенность даже в три слоя.

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

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

Посмотреть
Всего голосов 26: ↑26 и ↓0 +26
Просмотры 7.8K
Комментарии 14

Taiga UI — библиотека компонентов под Angular, которую вам стоит попробовать

Блог компании TINKOFF Разработка веб-сайтов *JavaScript *Angular *TypeScript *

Привет!

Саша Инкин и я регулярно пишем на Хабр статьи по Angular. Почти все они основаны на нашем опыте разработки большой библиотеки компонентов.

Эту библиотеку мы развиваем, перерабатываем и дополняем уже несколько лет, а свои идеи проверяем на нескольких десятках проектов Тинькофф Бизнеса и внутренних систем компании. Мы рады сообщить: выложили нашу библиотеку в открытый доступ!

В этой статье хочу описать основные концепции и практики, на которых строится библиотека, а также рассказать, почему ее стоит внедрить как в новые проекты, так и в уже готовые — с иными компонентами или UI Kit’ами.

Что там за Taiga UI?
Всего голосов 43: ↑43 и ↓0 +43
Просмотры 15K
Комментарии 29

Давайте сделаем переиспользуемый компонент tree view в Angular

Блог компании TINKOFF Разработка веб-сайтов *JavaScript *Angular *TypeScript *
Tutorial

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

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

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

Давайте сделаем
Всего голосов 22: ↑22 и ↓0 +22
Просмотры 6.5K
Комментарии 10

Простые TypeScript-хитрости, которые позволят масштабировать ваши приложения бесконечно

Блог компании TINKOFF JavaScript *Angular *ReactJS *TypeScript *

Мы используем TypeScript, потому что это делает разработку безопаснее и быстрее.

Но, на мой взгляд, TypeScript из коробки содержит слишком много послаблений. Они помогают сэкономить немного времени JavaScript-разработчикам при переходе на TS, но съедают очень много времени в долгосрочной перспективе.

Я собрал ряд настроек и принципов для более строгого использования TypeScript. К ним нужно привыкнуть один раз — и они сэкономят массу времени в будущем.

Сэкономить время в будущем
Всего голосов 41: ↑39 и ↓2 +37
Просмотры 28K
Комментарии 32

Что можно положить в механизм Dependency Injection в Angular?

Блог компании TINKOFF JavaScript *Angular *TypeScript *
Почти каждый разработчик на Angular может найти в Dependency Injection решение своей проблемы. Это хорошо было видно в комментариях к моей прошлой статье. Люди рассматривали различные варианты работы с данными из DI, сравнивали их удобство для той или иной ситуации. Это здорово, потому что такой простой инструмент дает нам столько возможностей.

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

Давайте посмотрим на этот механизм в Angular чуть глубже.


Всего голосов 19: ↑19 и ↓0 +19
Просмотры 11K
Комментарии 11

Как мы открывали первое в России сообщество Developer Student Clubs

Блог компании Google Developers Управление сообществом *Конференции Социальные сети и сообщества
До нового учебного года осталось две недели — под катом история Романа Седова об открытии первого в России студенческого комьюнити DSC HSE Nizhny Novgorod в рамках международной программы Developer Student Clubs от Google Developers.

Немного цифр за год: 5 мероприятий, более 200 участников, спикеры из Intel, Tinkoff, Five9 и First Line Software.


Читать дальше →
Всего голосов 12: ↑11 и ↓1 +10
Просмотры 1.7K
Комментарии 2

Топ-10 Angular-приемов, выбранных сообществом

Блог компании TINKOFF JavaScript *Angular *TypeScript *Социальные сети и сообщества
В течение июня Саша Инкин и я, Рома Седов, запилили в Твиттере челлендж.

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

Я решил написать статью о десяти приемах, которые набрали больше всего лайков, а также объяснить показанные в них концепции более подробно.

Давайте начнем!


Всего голосов 28: ↑28 и ↓0 +28
Просмотры 11K
Комментарии 9

Используем DI в Angular по максимуму — концепция частных провайдеров

Блог компании TINKOFF JavaScript *Angular *TypeScript *
В Angular очень мощный механизм Dependency Injection. Он позволяет передавать по вашему приложению любые данные, преобразовывать и переопределять их в нужных частях.

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

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

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


Всего голосов 28: ↑27 и ↓1 +26
Просмотры 19K
Комментарии 25

Декларативный шопинг в интернете с помощью Payment Request API и Angular

Блог компании TINKOFF Open source *JavaScript *Angular *TypeScript *
Как давно вы платили на веб-сайте в один клик с помощью Google Pay, Apple Pay или заранее заданной в браузере картой?

У меня такое получается редко.

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

Это не очень удобно. Особенно когда знаешь об альтернативе: в последние пару лет стандарт Payment Request API позволяет легко решать эту проблему в современных браузерах.

Давайте разберемся, почему его не используют, и попробуем упростить работу с ним.


Читать дальше →
Всего голосов 25: ↑25 и ↓0 +25
Просмотры 4.5K
Комментарии 4

Создаем готовый для опенсорса проект на Angular в пару кликов

Блог компании TINKOFF Open source *JavaScript *Angular *GitHub *
Недавно я публиковал статью о том, как быстро настраивать npm-пакеты перед публикацией в opensource. В ней я разобрал настройку версионирования, CI, построение воркфлоу и удобный деплой на страничку с демо. Все советы той статьи распространяются и на библиотеки Angular. Но все же специфика Ангуляра не позволит вам развернуться сходу.

С шестой версии Ангуляра мы используем Angular Workspaces. Это отличный инструмент для организации проекта, но он может добавить сложностей при его первичной настройке для опенсорса. Мы решили предусмотреть их и автоматизировать процесс.


Читать дальше →
Всего голосов 30: ↑29 и ↓1 +28
Просмотры 5.2K
Комментарии 0

Как заопенсорсить npm-пакет с нормальным деплоем, CI и демо (без потери радости к жизни)

Блог компании TINKOFF Open source *JavaScript *GitHub *DevOps *

Вот вы сделали что-то новое и крутое, приходит мысль — выложить в опенсорс и опубликовать в npm.


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


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


На самом деле всё это может занять у вас меньше часа. Без знаний DevOps и совершенно бесплатно.


Читать дальше →
Всего голосов 64: ↑64 и ↓0 +64
Просмотры 9.8K
Комментарии 8

Собираем окружение для современного TDD на JavaScript + VS code

Блог компании TINKOFF JavaScript *TDD *Тестирование веб-сервисов *
TDD уже давно не является чем-то диковинным: на хабре можно найти об этом подходе сотни статей, а каждый новичок знает, какую книгу об экстремальном программировании ему нужно прочитать.

image

Многие мои коллеги тоже используют TDD. Они добавляют тест, пишут код, рефакторят, повторяют. Процесс вроде одинаковый, но у одних он занимает одну минуту, а у других пять. И дело не в том, что вторые медленнее думают. Просто у первых есть набор хитростей, позволяющих оптимизировать работу с тестами.
Читать дальше →
Всего голосов 30: ↑27 и ↓3 +24
Просмотры 11K
Комментарии 5

Сборка библиотеки angular-компонентов в виде веб-компонентов

Блог компании TINKOFF Разработка веб-сайтов *Angular *
Из песочницы
Про Angular Elements сейчас пишут много статей и регулярно читают доклады. Мол, больше не нужно разворачивать несколько полноценных ангуляров — достаточно собрать веб-компоненты и использовать их на своей странице.

Но, как правило, эти материалы ограничиваются рассмотрением довольно утопичной ситуации: мы делаем отдельный проект, создаем angular-компонент, настраиваем проект на сборку Elements и, наконец, компилируем несколько JS-файлов, подключение которых к обычной странице даст нам необходимый результат. Ура, компонент работает!..

image

На практике же возникает потребность вытащить несколько компонентов из готового работающего angular-проекта, да еще желательно так, чтобы не влиять на его текущую разработку и использование. Эта статья получилась как раз благодаря одной из таких ситуаций: я хотел не просто собрать отдельные элементы проекта, а сделать процесс компиляции целой UI-библиотеки на Angular в набор файлов с нативными веб-компонентами.
Читать дальше →
Всего голосов 19: ↑17 и ↓2 +15
Просмотры 4.9K
Комментарии 0

Информация

В рейтинге
Не участвует
Откуда
Нижний Новгород, Нижегородская обл., Россия
Работает в
Зарегистрирован
Активность