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

Angular *

JavaScript-фреймворк

Сначала показывать
Порог рейтинга
Уровень сложности

Функция Reactive во Vue: как это работает

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

После jQuery я попробовал AngularJS и был очарован его возможностями. Несколько строк в AngularJS заменяли кучу спегетти-кода в jQuery. Это было похоже на магию. Сейчас все современные Frontend-фреймворки так или иначе обеспечивают реактивность, и это уже никого не удивляет. Тем не менее далеко не все разработчики понимают, как это работает.

Сейчас я работаю с Vue, поэтому и разбираться с тем, как устроены реактивные функции, будем на его примере. Я расскажу, как сделать из простого объекта реактивный, а также немного о том, какие современные возможности JS для этого используются.

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

Тестирование с помощью Vitest

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

Vitest — это новая среда тестирования на базе Vite. Он все еще находится в разработке, и некоторые функции могут быть еще не готовы, но это хорошая альтернатива, которую можно попробовать и изучить.

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

Angular Universal: работа в крупном e-commerce

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

Привет, меня зовут Дмитрий Дружков, я тимлид фронтенд команды в Утконос Онлайн. В этой статье я расскажу, чем полезен Angular Universal в e-commerce проектах, как выбрать вид рендеринга, как выглядит первоначальная настройка технологии на примере нашего сайта и шаги по ускорению, а также раскрою плюсы и минусы Universal. Статья будет интересна тем, кто:

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

CSS :has() селектор

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

Вы когда-нибудь задумывались о селекторе CSS, где вы проверяете, существует ли конкретный элемент внутри родителя? Например, если у компонента карты есть миниатюра, нам нужно добавить к нему display: flex. Это было невозможно в CSS, но теперь у нас будет новый селектор CSS :has, который поможет нам выбрать родителя определенного элемента и многое другое.

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

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

Истории

Зачем использовать materialize и dematerialize операторы и что такое Notification в RxJS?

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

Вы когда-нибудь встречали такие операторы, как materialize и dematerialize в RxJS? А что насчет класса Notification? Вероятно, многие слышали, но не до конца представляли, где их можно применить на практике.

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

Materialize

Для начала вспомним, какие типы значений может эмитить объект типа Observable: это next, error и complete. Если вы не помните, что это значит, здесь можно почитать.
Соответственно и про observer, набор коллбэков (onNext, onError, onComplete), тоже советую вспомнить.

Вот что говорится в документации о materialize операторе: «A function that returns an Observable that emits Notification objects that wrap the original emissions from the source Observable with metadata».

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

Zustand — руководство по простому управлению состоянием

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

За последние несколько лет управление состоянием в React претерпело значительные изменения. Многие перешли с Flux на Redux и ищут еще более простые решения. Кроме того, появление React Hooks открыло новые возможности для управления состоянием.

Некоторые из новых библиотек управления состоянием, которые появились на горизонте, — это Recoil, Jotai, Radio Active state и Zustand.

В этой статье я расскажу о Zustand, который предоставляет легкий и простой способ управления состоянием в React.

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

О маленькой полезной фиче angular

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

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

Продолжить
Всего голосов 11: ↑10 и ↓1 +9
Комментарии 5

CSS-in-JS в Angular или все-таки CSS?

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

Всем привет! Меня зовут Всеволод Золотов, я Senior Frontend в компании Bimeister.

CSS-in-JS очень быстро набрал популярность в React-комьюнити, но насколько актуален этот подход в Angular? В данной статье сравним удобство разработки и производительность двух визуально идентичных приложений (time-tracker), написанных с использованием SASS и @emotion/css.

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

Micro Frontend Архитектура на примере Angular

Время на прочтение 13 мин
Количество просмотров 16K
В наше цифровое время веб-приложения становятся все более масштабней и сложней. Такие веб-приложения могут быть разделены на несколько модулей, разработанных отдельными командами, которые удобно запускать в производство по отдельности.

По мере того, как приложения со временем усложняются, требуя масштабируемости «на лету» и высокой скорости реагирования, архитектура микро-фронтенд, основанная на компонентах Angular, становится все более эффективным решением для сложных веб-приложений.

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

Плюсы микро-фронтенд архитектуры


  • Автоматизация CI /CD. Поскольку каждое приложение интегрируется и развертывается независимо, это упрощает CI/CD. Так как все модули разделены, то не нужно беспокоиться обо всем приложении при внедрении нового модуля. Если в коде модуля есть ошибка, CI/CD прервет весь процесс сборки.
    Гибкость команд разработчиков. Многочисленные команды могут разрабатывать и развивать информационные системы, работая по отдельности.
  • Единая ответственность. Каждая команда микро-фронтеда на 100% фокусируется на функциональности своего микро-фронтенд приложения.
  • Возможность повторного использования. Микро-фронтенд приложение может быть повторно использовано несколькими командами в разных системах.
  • Технологический агностицизм. Архитектура микро-фронтенд не зависит от технологии. Возможно использовать компоненты, разработанные на разных фреймворков веб-разработки (React, Vue, Angular и т.д.).
  • Простой порог входа в систему. Небольшие модули легче изучать и понимать новым разработчикам, входящим в команды, чем монолитную архитектуру с огромной структурой кода.

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

Как я делал сайт визитку на Angular

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

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

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

Angular без CLI Туториал

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

Фреймворк Angular используется при создании SPA и предлагает большое количество инструментов как для создания, непосредственно, элементов интерфейса, так и CLI для создания и управления структурой файлов, относящихся к приложению.

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

Я задался таким вопросом, и, после изучения этого вопроса я собрал это в туториал.

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

Как устроен фреймворк Tramvai Tinkoff?

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

Тинькофф представил новое opensource-решение  для построения SSR приложений на React. На KOTELOV podcast поговорили с Tech-Lead Core команды tinkoff.ru Андреем Марченко о том, зачем был необходим свой фреймворк,  что планируется добавить в него в ближайшее время и почему opensource – хороший способ рекламы компании.

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

Создать динамический компонент теперь проще: изменения в Angular 13

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

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

Но с 13 версией фреймворка API этого метода немного изменился. В этой статье поделюсь тем, как теперь выглядит процесс динамического добавления компонента.

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

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн

Создаем приложение Art-pixel на Angular и Nest.js. Часть 3 (Docker)

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

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

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

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

Почему же всё-таки React, а не Angular

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

Привет, меня зовут Феликс Пискунов. Разрабатываю веб-приложения уже 16 лет. Решил поделиться своими размышлениями по поводу выбора фреймворка и что меня подвигло оставить Angular и уйти без оглядки в React

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

Taiga UI: год в Open Source

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

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

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

Делаем видеозвонки с помощью Angular, WebRTC и Openvidu

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

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

В этой статье я расскажу про удобный способ создания такого функционала. Расскажу про готовые инструменты, опишу основные моменты, мысли, ссылки. Будет интересно!

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

Создаем приложение Art-pixel на Angular и Nest.js. Часть 2.1 (ESLint)

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

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

По умолчанию версия Angular 12 не включает линтеры, потому что стандартный линтер TypeScript называется TSLint (он считается устаревшим и вместо него рекомендуется использовать ESLint).

Читать далее
Рейтинг 0
Комментарии 0

Создаем приложение Art-pixel на Angular и Nest.js. Часть 2

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

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

Читать далее
Рейтинг 0
Комментарии 5

Создаем приложение Art-pixel на Angular и Nest.js. Часть 1

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

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

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

А может кому то просто понравится рисовать, ссылка на демо ниже.

В этой части я буду использовать Angular, CSS фреймворк от  w3schools

Итак, в первой части будет описан процесс создания вот такой мастерской.

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

Вклад авторов

Работа