Обновить
16.46

Angular *

JavaScript-фреймворк

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

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

Время на прочтение11 мин
Охват и читатели9.9K
Разнообразные формы в наших веб-приложениях нередко строятся из одинаковых кирпичиков-элементов. Компонентные фреймворки помогают нам избавиться от повторяемого кода, и сейчас я хочу рассмотреть один из таких подходов. Так, как это принято в Angular.
Читать дальше →

Когда JavaScript-фреймворк не нужен

Время на прочтение3 мин
Охват и читатели6.1K

Фото — Maria Teneva, площадка Unsplash

Иногда React, Angular, Vue.js и т. д. — это лишнее

Правда ли, что JavaScript-фреймворков слишком много и выбор становится чересчур сложным? Или, может, мы просто забыли о соображениях производительности и о том, что за лишний трафик в итоге должны платить пользователи?

Вернемся в эпоху jQuery


Помните, было время, когда JQuery использовали для всего! JQuery то, jQuery сё — повсюду легкий аромат jQuery. На любом веб-сайте и в каждом веб-приложении — jQuery.

В чем причина популярности этой библиотеки?

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

Но пришло спасение — библиотека jQuery избавила сообщество JavaScript от этой головной боли. Правда, большинство из нас в результате стали лениться, поскольку перестали понимать, что происходит «под капотом».

Я прозрел, когда появился этот сайт.

Читать дальше →

Изучаем мультикаст операторы RxJS

Время на прочтение11 мин
Охват и читатели30K
Привет, Хабр! Представляю вашему вниманию перевод статьи «Understanding RxJS Multicast Operators» автора Netanel Basal.

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

Мы рассмотрим внутреннее устройство мультикаст операторов и решаемые ими задачи.
Читать дальше →

Redux против MobX без путаницы

Время на прочтение10 мин
Охват и читатели51K
image

В последние годы я часто использовал Redux, но в последнее время использую MobX в качестве альтернативы управления состоянием. Кажется, что альтернативы Redux естественно превращаются в беспорядок. Люди не уверены, какое решение выбрать. Проблема не обязательно «Redux vs MobX». Всякий раз, когда существует альтернатива, людям любопытно, как лучше всего решить их проблему. Я пишу эти строки, чтобы устранить путаницу вокруг решений по управлению состояниями Redux и MobX.

О чем будет эта статья? Во-первых, я хочу вкратце вернуться к проблеме, которую решает библиотека управления состоянием. В конце концов, все будет хорошо, если вы просто используете this.setState() и this.state в React или его вариацию в другой библиотеке уровня представления или в среде SPA. Во-вторых, я буду продолжать давать вам обзор обоих решений, показывая последовательность и различия. И последнее, но не менее важное: если у вас уже есть приложение, работающее с MobX или Redux, я хочу рассказать вам о рефакторинге из одной в другую библиотеку управления состояниями.
Читать дальше →

Angular: пример использования NGRX

Время на прочтение7 мин
Охват и читатели33K
image
Эта статья является продолжением поста «Angular: понятное введение в NGRX»

Пример NGRX


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

План действий:

  1. Установка библиотеки
  2. Создание структуры папок для хранилища
  3. Создание хранилища и начальных значений
  4. Создание действий (Actions)
  5. Создание редукторов (Reducers)
  6. Создание эффектов (Effects)
  7. Создание селекторов (Selectors)
  8. Конечная настройка
  9. Использование хранилища в компонентах

Итак, давайте сделаем это…
Читать дальше →

Angular: понятное введение в NGRX

Время на прочтение7 мин
Охват и читатели69K
image Цель этой статьи — дать чистое и ясное представление о ngrx. Для этого я объясню, что нужно знать и понимать о ngrx, а затем мы увидим это в действии с простыми и понятными примерами кода.

Вот список тем, которые мы будем обсуждать в этой статье:

  • Что такое ngrx
  • Преимущества использования ngrx
  • Недостатки использования ngrx
  • Когда использовать ngrx
  • Действия, Редукторы, Селекторы, Хранилище и Эффекты

Продолжение статьи с примером использования: «Angular: пример использования NGRX».
Читать дальше →

Добавляем статические файлы вне проекта ангуляр

Время на прочтение2 мин
Охват и читатели9.1K

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



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

Читать дальше →

Интерактивная выгрузка файлов на сервер с помощью RxJS

Время на прочтение9 мин
Охват и читатели6.5K


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

Angular 9 теперь доступен — Ivy прибыл

Время на прочтение7 мин
Охват и читатели16K
Вышла 9 версия Angular, это основной релиз, охватывающий всю платформу, включая сам фреймворк, angular material и CLI. В этом релизе приложения по умолчанию переключаются на компилятор и рантайм Ivy и, а также представляются улучшенные способы тестирования компонентов.

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

10 полезных функций Angular, которые вы упускали

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

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

Прежде чем мы перейдем к функциям Angular, стоит упомянуть один очень полезный инструмент. Bit (Github) позволяет с легкостью работать над Angular-компонентами вместе и делиться ими. От души рекомендую его для поддержания консистентного интерфейса, ускорения разработки и минимизации количества ошибок в коде.


Пример: Круговые загрузчики для Angular с bit.dev
Читать дальше →

Как сделать пошаговый гайд вашего приложения (если ваш проект на Angular)

Время на прочтение5 мин
Охват и читатели5.3K
Всем привет.

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

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

Angular: Интеграционное тестирование (Shallow testing)

Время на прочтение6 мин
Охват и читатели7.7K


Когда приложение разрастается или нам очень важно, чтобы оно работало верно при любом рефакторинге, мы начинаем задумываться о unit или e2e тестировании.

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

Далее попробуем разобраться с тестированием базового приложения на Angular и затронем немного теории.
Читать дальше →

Главные причины медленной работы Angular-приложений

Время на прочтение9 мин
Охват и читатели19K
Angular — это быстрый фреймворк. Он даёт разработчикам обширные возможности по улучшению производительности за счёт тонких настроек. Правда, программистам практически никогда не требуется делать что-то особенное для того, чтобы создавать чрезвычайно производительный код, работая над обычными приложениями.

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



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

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

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

Реализация автодополнения кода в Ace Editor

Время на прочтение6 мин
Охват и читатели6.3K

Ace (Ajax.org Cloud9 Editor) — популярный редактор кода для веб-приложений. У него есть как плюсы, так и минусы. Одно из больших преимуществ библиотеки — возможность использования пользовательских сниппетов и подсказок. Однако, это не самая тривиальная задача, к тому же не очень хорошо документированная. Мы активно используем редактор в своих продуктах и решили поделиться рецептом с сообществом.


Читать дальше →

Создание микро-фронтендов с использованием Angular Elements: руководство для начинающих

Время на прочтение4 мин
Охват и читатели9.2K

За последние десять лет фронтенд-разработка значительно усложнилась: от чистого HTML/CSS до таких тем, как высокая интерактивность, доступность, тестируемость и безопасность. Чтобы удовлетворить эти потребности, большинство команд разработчиков делятся на бекенд и фронтенд команды.



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


Здесь я остановлюсь и без дальнейших прелюдий, давайте создадим пример микро-фронтенда с использованием Angular elements.

Читать дальше →

Prettier в крупных проектах: тратим 20 минут на настройку, забываем о форматировании навсегда

Время на прочтение3 мин
Охват и читатели47K
Разработчики часто не могут договориться о форматировании кода, и типичный рабочий день для многих начинает выглядеть так: кофе, кодинг, всё мирно и хорошо, — а потом, бац, и наступает код-ревью, на котором выясняется, что ты где-то поставил скобочки не так или не перенес что-то на новую строчку.



Год назад одна из команд в Skyeng сталкивалась с такими холиварами почти на каждом ревью. Но затем человек, у которого больше всех болело, сказал: «Теперь живем на Prettier'e, согласны?» За следующие месяцы ребята ни разу не поднимали вопрос о форматировании, а теперь эта штука стоит на всем монорепозитории фронтенда — и его использует каждая команда, которая туда заезжает.
Читать дальше →

NgRx Ducks | Динамические фасады

Время на прочтение5 мин
Охват и читатели2.3K

Усовершенствование опыта разработки



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


«Как было бы хорошо меньше сопровождать код, а больше следовать гайдам написания, чтобы облегчить последующее масштабирование».


Это побудило меня начать изучение различных методик рефакторинга Redux. Я смотрел видео, читал статьи и документы Redux. В конце-концов, я написал плагин для NgRx под названием NgRx Ducks

Читать дальше →

Миграция с AngularJS на Angular7 через гибридное приложение

Время на прочтение2 мин
Охват и читатели3.9K

Переход с AngularJS на Angular7 через гибридное приложение



Задача не самая простая, но выполнимая.

С ней я столкнулась при переходе в новую компанию.
Читать дальше →

6 способов отписаться от Observables в Angular

Время на прочтение9 мин
Охват и читатели32K


Обратная сторона подписки на Observable


У Observables есть метод subscribe, который вызывается с помощью callback-функции, чтобы получить значения, отправляемые (emit) в Observable. В Angular он используется в компонентах/директивах, а особенно в router-модуле, NgRx и HTTP.


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


@Component({...})
export class AppComponent implements OnInit {
    subscription: Subscription
    ngOnInit () {
        const observable = Rx.Observable.interval(1000);
        this.subscription = observable.subscribe(x => console.log(x));
    }
} 
Читать дальше →

Angular 9 и Ivy: ленивая загрузка компонентов

Время на прочтение10 мин
Охват и читатели17K
Ленивая загрузка компонентов в Angular? Может, речь идёт о ленивой загрузке модулей с помощью маршрутизатора Angular? Нет, мы говорим именно о компонентах. Текущая версия Angular поддерживает лишь ленивую загрузку модулей. Но Ivy даёт разработчику новые возможности в работе с компонентами.


Читать дальше →