Как стать автором
Обновить
5
0

Пользователь

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

Как использовать менеджер состояний NgRx для Angular-проектов

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

Всем привет! Меня зовут Ильмир, я frontend-разработчик SimbirSoft. Это моя первая статья, в которой я хотел бы разобрать тему менеджера состояний в Angular.

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

Динамический рендеринг Angular-компонентов

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

Привет Хабр. На связи Даня, Angular-разработчик из команды Т-Бизнеса.

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

Добро пожаловать под кат!

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

Open-Closed Principle в Angular

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

Всем привет! Меня зовут Вова, я фронтендер в Тинькофф. Сейчас перед нашей командой стоит задача редизайна функциональности на пересечении нескольких продуктов. Данная ситуация заставила нас задуматься во-первых о DDD, а во-вторых о гибкости наших решений, применяемых при разработке, и достичь этого нам помогли принципы SOLID, а точнее OCP и Dependency Inversion (не путать с Dependency Injection), о чем и хочется дальше поговорить.

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

Все, что вы хотели знать про иерархию инжекторов в Angular

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

Привет. Меня зовут Дмитрий, я фронтенд-разработчик в компании «Цифровая индустриальная платформа». В своей работе мне часто приходится использовать Dependency Injection (DI) в Angular. Это мощный и популярный инструмент, который упрощает работу с зависимостями в наших приложениях. Он позволяет легко интегрировать необходимые сущности в компоненты, упрощает процесс тестирования и поддерживает принцип инверсии зависимостей. Однако часто мы не используем все возможности DI, потому что не знаем, как он работает под капотом. Давайте разберемся, как функционирует DI, что такое иерархия инжекторов и какие изменения принесла версия Angular 14.

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

Архитектура боевого корпоративного frontend-приложения

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

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

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

Парсинг открытых данных на сайтах МedSwiss и МЕДСИ ч.1

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

Всем привет! Сегодня поговорим о парсинг данных с сайтов медицинских клиник. Мы выбрали это направление по двум причинам: 1. это высокодоходный бизнес; 2. все катаклизмы, которые происходят в мире не сильно «качают» эту сферу к знаку минус. Т.к. отказать себе в походе в ресторан, покупке новго айфона, даже осознать невозможность взять ипотеку. Но, если появились проблемы со здоровьем — то тут не до экономии. Особенно это качается жителей больших городов. Именно поэтому мы начали парсить данные клиник г. Москвы. Также надо отметить, что разделение труда в медицинской сфере продолжаеит расти. Появляются новые узкоспециализированные специалисты. И на них есть спрос. Я сам обладаю двумя полисами (ОМС и ДМС), но за последние два года пару раз столкнулся с ситуацией, когда нужного мне специалиста ни один полис не покрывал. И пришлось рассматривать варианты получения услуги либо в государственной больнице через направление (долго и бесплатно), либо за дополнительную плату в специализированной коммерческой клинике.

Читать далее
Всего голосов 10: ↑4 и ↓6+2
Комментарии2

Observable сервисы в Angular

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

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


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


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


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


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

Гайд: проектируем систему цветов. Всё про styles, tokens, variables

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

В этой статье я расскажу как упорядочить цвета в макетах и в уже готовом продукте; как перейти от стилей к токенам (variables), а также поделюсь рекомендациями для тех, кто только собирается внедрять стили и переменные для цветов.

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

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

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

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

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

Как DDD работает для меня

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

Привет! Меня зовут Станислав, я фронтенд-разработчик компании Тинькофф. Занимаюсь разработкой веб-приложений и написал десятки тысяч строк кода, массу велосипедов и костылей, пока не познакомился с разработкой, основанной на модели предметной области, или Domain-Driven Design.

DDD — это система знаний, приемов и методов, предназначенная для создания приложений высокой сложности. DDD обобщает лучшие практики коммерческой разработки программного обеспечения и постоянно совершенствуется, предоставляя разработчику надежную опору для принятия решений. Лучший способ узнать больше — это книга Эрика Эванса Domain-Driven Design: Tackling Complexity in the Heart of Software.

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

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

Переносим Angular проект на ESLint, с Prettier, Husky и lint-staged

Время на прочтение8 мин
Количество просмотров32K
Привет, Хабр! Меня зовут Богдан, я работаю в ПИК Digital Front-End тимлидом. Большую часть проектов мы разрабатываем на Angular и недавно я решил пересмотреть наши стайл гайды, а также добавить новые инструменты для более удобной работы.

В качестве линтера я решил использовать ESLint, так как в скором времени на него планируют перевести Angular. И в этой статье я хочу поделиться инструкцией по переходу с TSLint на ESLint, а заодно рассказать, как запускать Prettier из ESLint, как добавить правила стайл гайда AirBnB, и как сделать линтинг удобным и незаметным с помощью настройки VS Code и Git хуков.
Читать дальше →
Всего голосов 10: ↑10 и ↓0+10
Комментарии5

Способы создания авторизации на сайте. Руководство с примерами. Безопасность в браузере

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

В данной статье мы разберем 4 способа как зарегистрировать нового пользователя:

1.Сторонние сервисы авторизации (такие как Google)

2.Авторизация с использованием токенов

3.Авторизация с помощью номера телефона

4.Логин + Пароль

Статья даст вам конкретный алгоритм реализации каждого способа. Необходимые библиотеки, а также примеры кода. Я постараюсь приводить в пример реализацию на чистейшем JavaScript, для того чтобы вы смогли внедрить функционал в свое проект, не зависимо от используемого фреймворка, однако также будут примеры для тандема Angular + Asp .Net Core. Мы обсудим как защитить ваш сайт от взлома. На сколько это сложно и возможно ли в принципе гарантировать 100% защиту. Итак, давайте приступим.

Читать далее
Всего голосов 6: ↑1 и ↓5-4
Комментарии23

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

Время на прочтение4 мин
Количество просмотров12K
В течение июня Саша Инкин и я, Рома Седов, запилили в Твиттере челлендж.

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

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

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


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

Искусство типизации: TypeScript Utility Types

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

Что вы чувствуете от познания нового? За себя скажу, что в такие моменты просветления меня переполняет неподдельная детская радость от свершившегося открытия. Жаль, что этих моментов становится всё меньше. К чему я это? Когда мне в голову мне пришла мысль о написании статьи на эту тему, я сразу вспомнил то ощущение прозрения, которое испытал в момент открытия Utility Types. Всё сразу встало на свои места, и я понял какого кусочка пазла мне всё это время не хватало. Именно о нём я расскажу далее.

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

Принципы SOLID в картинках

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


Если вы знакомы с объектно-ориентированным программированием, то наверняка слышали и о принципах SOLID. Эти пять правил разработки ПО задают траекторию, по которой нужно следовать, когда пишешь программы, чтобы их проще было масштабировать и поддерживать. Они получили известность благодаря программисту Роберту Мартину.

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

Основная цель этой статьи – лучше усвоить принципы SOLID через отрисовку иллюстраций, а также определить назначение каждого принципа. Дело в том, что некоторые из принципов кажутся похожими, но функции выполняют разные. Может получиться так, что одному принципу следуешь, а другой при этом нарушаешь, хотя с виду особой разницы между ними нет.

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

Ну, приступим.
Читать дальше →
Всего голосов 57: ↑52 и ↓5+54
Комментарии26

Управление версиями Node.js и NPM с помощью NVM

Время на прочтение5 мин
Количество просмотров275K
Наш прошлый перевод про новые функции 15-й версии Node.js был очень хорошо принят читателями «Хабра», поэтому сегодня мы решили продолжить тему и рассказать, как настроить NVM с версией Node.js 15 и NPM 7.

Версия Node.js 15 была выпущена 20 октября 2020 года. Она поставляется с npm 7 и множеством новых функций. Вы уже успели опробовать новую версию?

Но подождите минутку! Node.js 15 и npm 7 содержат критические изменения. Не повредит ли тогда обновление существующим проектам?

Теоретически может повредить!
Читать дальше →
Всего голосов 6: ↑3 и ↓3+2
Комментарии3

Разработка Angular-приложений и построение их архитектуры

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

Привет! Меня зовут Самат, я frontend-специалист компании SimbirSoft.

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

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

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

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

Гексагональная архитектура и Domain Driven Design на примере Front-end приложения

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

Преимущества данного метода:

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

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

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

Читать далее
Всего голосов 6: ↑5 и ↓1+6
Комментарии10

GitLab для Continuous Delivery проекта на технологиях InterSystems

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

В данной статье хотелось бы рассказать про организацию процессов Continuous Integration / Continuous Delivery, автоматизирующих сборку, тестирование и доставку приложений на платформах InterSystems.


Рассмотрим такие темы как:


  • Git 101
  • Методологии разработки (Git flow)
    • GitHub flow
    • GitLab flow
  • GitLab
  • GitLab CI
Читать дальше →
Всего голосов 18: ↑18 и ↓0+18
Комментарии3

Angular: создание кастомного элемента формы и передача в него состояния формы

Время на прочтение11 мин
Количество просмотров8.6K
Разнообразные формы в наших веб-приложениях нередко строятся из одинаковых кирпичиков-элементов. Компонентные фреймворки помогают нам избавиться от повторяемого кода, и сейчас я хочу рассмотреть один из таких подходов. Так, как это принято в Angular.
Читать дальше →
Всего голосов 8: ↑8 и ↓0+8
Комментарии2
1
23 ...

Информация

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

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

Backend Developer, Frontend Developer
JavaScript
Angular
PHP
MySQL
Laravel