Pull to refresh
0
Сергей Паничев @SergeyPanichevread⁠-⁠only

Frontend разработчик

Send message

Шесть проблем UX-редакции, которые поможет решить планирование

Reading time6 min
Views2.4K

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

Читать далее
Total votes 10: ↑9 and ↓1+8
Comments4

Ультимативный гайд по HTTP. Структура запроса и ответа

Level of difficultyEasy
Reading time9 min
Views77K

Привет! Меня зовут Ивасюта Алексей, я техлид команды Bricks в Авито в кластере Architecture. Я решил написать цикл статей об истории и развитии HTTP, рассмотреть каждую из его версий и проблемы, которые они решали и решают сейчас. 

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

Читать далее
Total votes 16: ↑14 and ↓2+12
Comments4

Ультимативный гайд по HTTP. Cookies и CORS

Level of difficultyEasy
Reading time7 min
Views33K

Привет! Меня зовут Ивасюта Алексей, я техлид команды Bricks в Авито в кластере Architecture, а это мой цикл статей о протоколе HTTP. В первой части мы уже познакомились с версией протокола 1.0 и поговорили о структуре ответов и запросов. Теперь пришло время узнать, что такое Cookies и для чего нужен CORS.

Читать далее
Total votes 18: ↑17 and ↓1+18
Comments2

Ультимативный гайд по HTTP. HTTP/1.1 vs HTTP/2

Level of difficultyEasy
Reading time6 min
Views26K

Продолжаем цикл статей о протоколе HTTP: расскажем, что нового привнесла версия HTTP/1.1 и какие у нее принципиальные отличия с версией HTTP/2.

Читать далее
Total votes 9: ↑7 and ↓2+7
Comments10

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

Reading time7 min
Views33K
В Angular очень мощный механизм Dependency Injection. Он позволяет передавать по вашему приложению любые данные, преобразовывать и переопределять их в нужных частях.

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

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

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


Total votes 25: ↑24 and ↓1+26
Comments25

Возможности Angular DI, о которых почти ничего не сказано в документации

Reading time6 min
Views38K

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

Читать далее
Total votes 31: ↑31 and ↓0+31
Comments10

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

Reading time5 min
Views19K
Почти каждый разработчик на Angular может найти в Dependency Injection решение своей проблемы. Это хорошо было видно в комментариях к моей прошлой статье. Люди рассматривали различные варианты работы с данными из DI, сравнивали их удобство для той или иной ситуации. Это здорово, потому что такой простой инструмент дает нам столько возможностей.

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

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


Total votes 19: ↑19 and ↓0+19
Comments11

Все, что вам нужно знать об обнаружении изменений в Angular

Reading time8 min
Views85K
Наткнулся на хорошую статью об устройстве Angular'овского механизма обнаружения изменений (change detection). Т.к. тема достаточна важна, но при этом недостаточно глубоко раскрыта даже на англоязычных ресурсах, а найти русскоязычные материалы на эту тему, вообще, не представляется возможным, решил перевести данную статью.
Перевод под катом
Total votes 21: ↑20 and ↓1+19
Comments8

Observable сервисы в Angular

Reading time7 min
Views15K

Всем привет, меня зовут Владимир. Я занимаюсь фронтенд разработкой в Tinkoff.ru.


В Ангуляре для передачи данных внутри приложения или для инкапсуляции бизнес-логики мы привыкли использовать сервисы. Для управления асинхронными потоками отлично подходит RxJS.


Ангуляр в сочетании с RxJS позволяет писать в декларативном стиле, коротко и ясно. Но иногда мы сталкиваемся со сторонними библиотеками или API, которые используют коллбэки, промисы, тем самым подталкивают нас отступить от привычного стиля и писать императивно.


Цель статьи — показать на примере подобных API, как с помощью RxJS их можно без проблем обернуть в Observable-сервисы. Это поможет достичь удобства использования в Ангуляре. Начнем с Geolocation API.


Читать дальше →
Total votes 19: ↑18 and ↓1+17
Comments19

Что нового в Angular v15?

Reading time10 min
Views9.4K

За последний год мы удалили устаревший компилятор Angular и пайплайн рендеринга, что позволило разработать ряд улучшений для разработчиков за последние пару месяцев. Angular v15 является кульминацией этого с десятками усовершенствований, которые обеспечивают лучший опыт разработчиков и производительность.

Читать далее
Total votes 4: ↑4 and ↓0+4
Comments0

Redux в Angular. Туда и обратно

Reading time29 min
Views7.5K

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

Читать далее
Total votes 4: ↑4 and ↓0+4
Comments8

Простая масштабируемая структура Angular приложения

Reading time5 min
Views8.6K

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

Первое время разработка идет бодро, добавлять новые функции легко и приятно, приложение работает быстро, все просто и понятно. Но с ростом количество модулей, компонентов, сервисов скорость разработки падает, как и скорость работы приложения. Задач на рефакторинг появляется в спринте все больше. Кроме прочего, команда разработчиков может регулярно меняться (одни увольняются, другие приходят), что не добавляет порядка. Со временем может показаться, что проще все снести и написать заново.

Читать далее
Total votes 7: ↑6 and ↓1+6
Comments13

Ловушка приоритетов Angular Guards

Reading time4 min
Views4.7K

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

Читать далее
Total votes 6: ↑6 and ↓0+6
Comments0

Новые возможности Angular 14 изменят ваш код

Reading time4 min
Views6K

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

Это не должно повлиять на другие проекты Angular. Запомните — "Angular". Неважно, какую версию вы используете, главное, что вы применяете Angular. Каждый год вы получаете новую версию Ubuntu, обновляете свой мобильный телефон, или каждые восемь месяцев NodeJS публикует новую версию.

Читать далее
Total votes 7: ↑6 and ↓1+6
Comments4

Signals – новая веха развития Angular

Level of difficultyHard
Reading time9 min
Views25K

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

Читать далее
Total votes 7: ↑6 and ↓1+6
Comments9

Использование директивы NgOptimizedImage для реализации загрузки изображений в Angular

Reading time2 min
Views4.1K

Директива NgOptimizedImage в Angular отвечает за реализацию загрузки изображений, сохраняя высокую производительность. Она доступна в Angular v14.2.0. Директива помечена как standalone и может быть импортирована в standalone компоненты и модули.

Чтобы ее использовать, мы должны...

Читать далее
Total votes 9: ↑9 and ↓0+9
Comments0

Изучаем mergeMap, switchMap, concatMap и exhaustMap

Level of difficultyMedium
Reading time4 min
Views29K

Я Angular разработчик. Это моя первая статья и таких я собираюсь написать много. Пришла эта идея мне в голову потому что иногда, пытаясь найти какую-то информацию в интернете о принципах работы какого-либо инструмента разработки, я не нахожу абсолютно ничего. Это либо ненавистные обожаемые мною доки, в которых написаны очень краткие принципы работы для знающих людей, либо stackoverflow, где кто-то норовит написать кучу слов ни о чём или без практической составляющей, либо просто статьи, не отражающие сути. Но иногда можно наткнуться на знающего человека, который за одну минуту объяснит тебе всю суть и от счастья хочется прыгать. Я решил писать обо всех таких моментах, которые мне очень сложно давались в понимании из-за отсутствия адекватной информации или моей криворукости. Я буду писать подобные статьи прежде всего для себя и если кому-то это поможет - я буду безумно рад, что какому-нибудь камраду не пришлось долго мучиться и понимать смысл того или иного инструмента для разработки. Статьи будут максимально краткими и по делу. Погнали!

Читать далее
Total votes 12: ↑10 and ↓2+11
Comments7

Архитектура front-end приложений — react, react native, angular. Обзор

Level of difficultyEasy
Reading time8 min
Views36K

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

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

Читать далее
Total votes 11: ↑10 and ↓1+12
Comments15

Подборка материалов для погружения в Angular: выбор сотрудников Selectel

Reading time3 min
Views10K

При построении веб-сервисов наши фронтенд-разработчики используют Angular — один из топ-фреймворков с высокой скоростью разработки и низким порогом вхождения. Но несмотря на последнее, во время изучения могут возникнуть трудности с потоками, отписками и другими абстракциями. Поэтому мы попросили коллег порекомендовать полезные ресурсы, которые помогут в освоении этих тем. Подробности под катом.
Читать дальше →
Total votes 44: ↑44 and ↓0+44
Comments8

Information

Rating
Does not participate
Location
Новосибирск, Новосибирская обл., Россия
Registered
Activity

Specialization

Frontend Developer, Web Developer
Senior
JavaScript
TypeScript
Angular
HTML
CSS