Как стать автором
Обновить
87
25
Александр Инкин @Waterplea

Google Developer Expert | Angular

Отправить сообщение

Декомпозиция — ваша суперсила

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров9.4K

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

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

Читать далее
Всего голосов 27: ↑26 и ↓1+25
Комментарии2

Taiga UI: больше чем UI kit

Время на прочтение6 мин
Количество просмотров15K

Taiga UI — огромная библиотека UI-компонентов для Angular, на которую стоит взглянуть. Но она только вершина айсберга. Мы разрабатывали ее более пяти лет, начав еще на Angular 4. И, будучи любителями декомпозиции, мы создали несколько отдельных независимых проектов, которые помогают нам писать крутые Angular-приложения. 

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

Читать далее
Всего голосов 26: ↑25 и ↓1+26
Комментарии3

DOM, DI и View: деревья в Angular

Уровень сложностиСложный
Время на прочтение8 мин
Количество просмотров8.9K

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

Читать далее
Всего голосов 25: ↑25 и ↓0+25
Комментарии3

Web API для Angular

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров4.7K

Веб — богатая экосистема с массой мощных API, которая только пополняется. В нашем распоряжении уже знакомые инструменты — Canvas или Intersection Observer, но в 2023 мы также имеем Web MIDI API, Speech Recognition и даже такие экзотические штуки, как геймпады и VR прямо в браузере. Естественно, эти API сложно использовать в Angular из-за разницы парадигм нативного JavaScript и декларативного Angular. Вот тут и появляемся мы!

Читать далее
Всего голосов 17: ↑17 и ↓0+17
Комментарии0

ContentChild, ViewChild, template reference variables

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров11K

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

Давайте!
Всего голосов 15: ↑15 и ↓0+15
Комментарии2

Taiga UI: год в Open Source

Время на прочтение4 мин
Количество просмотров8.2K

Taiga UI — это огромная библиотека компонентов на Angular. Мы в Тинькофф разрабатывали ее внутри пару лет, прежде чем выпустили вторую, мажорную версию на публику. С тех пор прошел год, и я хочу подвести итоги и обозначить планы на 2022 год.

Поехали!
Всего голосов 26: ↑26 и ↓0+26
Комментарии8

Телеграф на RxJS

Время на прочтение9 мин
Количество просмотров7.4K

На днях я смотрел кино, где оператор использовал телеграф. Он знал наизусть азбуку Морзе и очень быстро нажимал свою единственную кнопку. Я задумался: с RxJS мы способны на большее! Давайте запилим телеграф, используя единственный fromEvent и массу интересных трюков. Потренируемся с Dependency Injection, директивами и операторами RxJS, чтобы собрать демо, которое выглядит круто и звучит аутентично.

Поехали!
Всего голосов 24: ↑21 и ↓3+22
Комментарии7

Ленивая подгрузка библиотек из CDN в Angular

Время на прочтение4 мин
Количество просмотров4.8K

Когда я интегрировал свое Angular-караоке с YouTube, мне попался официальный YouTube-компонент из Angular Material. В README прилагалась инструкция для подключения. Почти каждая строка в ней примере сомнительна. Давайте разберемся, как сделать лучше и применить имеющиеся инструменты для ленивой подгрузки библиотеки.

Давайте
Всего голосов 26: ↑26 и ↓0+26
Комментарии3

Самосохраняющийся компонент выбора

Время на прочтение4 мин
Количество просмотров3.3K

Недавно Бхарат Рави опубликовал статью о директиве самосохраняющегося select-элемента на InDepth. Это интересная концепция изолирования логики в директиве, что в целом идея хорошая.

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

Поехали!
Всего голосов 17: ↑17 и ↓0+17
Комментарии4

OnPush — ваш новый Default

Время на прочтение6 мин
Количество просмотров24K

В Angular есть два режима change detection: Default и OnPush. В этой статье мы разберем, как можно спокойно использовать OnPush всегда без лишнего труда и почему стоит начать это делать.

Поехали!
Всего голосов 21: ↑21 и ↓0+21
Комментарии37

Небинарный *ngIf

Время на прочтение3 мин
Количество просмотров6.8K

Вам когда-нибудь хотелось отобразить состояние загрузки, пока ngIf ждет ответа от async-пайпа? Или, может, вы мечтали передать в ngFor шаблон для пустого массива? Возможно, вы бросили это, потому что вам не хотелось реализовывать базовую логику этих директив самому. На самом деле в этом нет нужды! Один и тот же селектор может подцепить несколько директив, что позволяет расширить функциональность встроенных директив дополнительной логикой.

Читать далее
Всего голосов 24: ↑23 и ↓1+24
Комментарии2

Bindon: малоизвестные фишки шаблонов Angular

Время на прочтение4 мин
Количество просмотров8.3K

Недавно вышел Angular 12, а вместе с ним в шаблоны подвезли оператор нулевого слияния (??). Но что еще умеют шаблоны Angular, о чем вы, возможно, и не слышали? Давайте разберемся!

Давайте!
Всего голосов 21: ↑21 и ↓0+21
Комментарии2

RxJS Challenge: Неделя 1

Время на прочтение5 мин
Количество просмотров12K

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

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

Решить челлендж!
Всего голосов 14: ↑14 и ↓0+14
Комментарии9

Глобальные объекты в Angular

Время на прочтение6 мин
Количество просмотров12K

В JavaScript мы часто используем сущности, вроде window, navigator, requestAnimationFrame или location. Некоторые из этих объектов существуют испокон веков, некоторые являются частью вечно растущего набора Web API. Возможно вы встречали класс Location или токен DOCUMENT в Angular. Давайте обсудим, для чего они нужны и чему мы можем у них научиться, чтобы сделать наш код чище и более гибким.

Давайте!
Всего голосов 19: ↑18 и ↓1+19
Комментарии1

Учим HostBinding работать с Observable

Время на прочтение6 мин
Количество просмотров9.3K

Как и многие другие Angular-разработчики, я мирился с одним ограничением. Если мы хотим использовать Observable в шаблоне, мы можем взять знакомый всем async-пайп. Но его нельзя применить к @HostBinding. Давным-давно это было возможно по ошибке, но это быстро исправили. Все потому, что хост байндинг относится к родительскому view и в нем этот пайп может быть не подключен. Это довольно желанная фича. Давайте посмотрим, как мы можем ее реализовать, пока нет официального решения.

Читать далее
Всего голосов 23: ↑23 и ↓0+23
Комментарии8

Паттерн порталов в Angular: для чего нужен root-компонент в Taiga UI

Время на прочтение6 мин
Количество просмотров8.1K

Мой коллега Роман недавно объявил о выходе нашей новой библиотеки компонентов под Angular Taiga UI. В инструкциях Getting started сказано, что приложение нужно обернуть в некий tui-root. Давайте разберемся, что он делает, узнаем, как и зачем мы используем порталы и что это вообще такое.

Разобраться
Всего голосов 25: ↑23 и ↓2+22
Комментарии4

Декларативный подход в Angular

Время на прочтение10 мин
Количество просмотров11K

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

Если говорить кратко, в compliant-механизме для обеспечения его технических характеристик используют деформацию. В то время как в традиционной технике (rigid body) гибкость зачастую является негативным качеством материала, сompliant-механизмы используют ее для передачи силы и движения в нужном направлении, вместо соединений из нескольких подвижных деталей.

Узнать, к чему это я
Всего голосов 35: ↑35 и ↓0+35
Комментарии5

5 советов для прокачки своих навыков в Angular

Время на прочтение9 мин
Количество просмотров22K

Этим летом мы с Ромой запустили серию твитов с полезными советами и приемами по Angular. Сообщество тепло встретило эту инициативу, и я решил написать обобщающую статью.

Вот мои 5 рекомендаций, которыми хочется поделиться с разработчиками. Эти советы будут подкреплены конкретными примерами из моего твиттера. Они помогут вам поднять свои навыки или как минимум дадут пару практических приемов.

Читать далее
Всего голосов 26: ↑25 и ↓1+26
Комментарии9

Как писать хорошие библиотеки под Angular

Время на прочтение6 мин
Количество просмотров8.1K

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


Angular — превосходная платформа с одними из лучших инструментов во фронтэнд-среде. И, конечно, есть определенный способ делать «по-ангуляровски». Что лично мне особенно нравится в этом фреймворке — это то чувство удовлетворенности, которое испытываешь, когда все сделано как надо: аккуратный код, четкая архитектура. Давайте разберемся, что делает код правильно написанным под Angular.


Всего голосов 28: ↑28 и ↓0+28
Комментарии5

Нативный способ покрасить SVG-иконки

Время на прочтение2 мин
Количество просмотров24K
Когда вам нужна возможность менять цвет иконок через CSS, что вы делаете? Вариантов не так много.

Обычно используются либо шрифты иконок, либо исходный код SVG скачивается и вставляется в HTML вручную. Шрифт нужно оптимизировать, иначе пользователь загрузит разом все иконки без надобности. Работа с исходным кодом требует тяжелых DOM-операций и потенциально опасна.

Чтобы защититься от вредоносного кода SVG нужно «почистить». Встроенный в Angular санитайзер, к примеру, не работает с SVG и превращает их в пустую строку. Можно воспользоваться проверенным инструментом DOMPurify и подключить его с помощью нашей библиотеки ng-dompurify, о чем я подробно рассказывал.

Давайте посмотрим на еще один способ, доступный в современных браузерах, — тэг USE.


Читать дальше →
Всего голосов 22: ↑21 и ↓1+22
Комментарии22
1

Информация

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

Специализация

Фронтенд разработчик, Веб-разработчик
Ведущий
От 1 000 000 ₽
Angular
JavaScript
TypeScript
Веб-разработка
CSS
HTML
LESS