Все потоки

Angular *

JavaScript-фреймворк

СтатьиПостыНовостиАвторыКомпании

ru_vds 18 мар 2020 в 09:30

3 способа рендеринга больших списков в Angular

6 мин

20K

Блог компании RUVDS.comВеб-разработка * JavaScript * Angular *

Перевод

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

Это — один из тех случаев, когда «фреймворк является быстрым, а код — медленным».

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

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

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

+26

Waterplea 17 мар 2020 в 13:12

Прокачиваем работу с событиями в Angular

5 мин

15K

Блог компании Т-БанкAngular * JavaScript * Open source * TypeScript *

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

Однако описанный мною метод громоздкий и сложный для восприятия. Пришло время переписать фильтрацию на декораторы.

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

+21

Xuxicheta 15 мар 2020 в 13:28

Angular: еще один способ отписываться

5 мин

3.9K

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

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

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

+3

n-srg 10 мар 2020 в 14:40

Чему меня научил мой коммит в Angular

7 мин

15K

Angular * JavaScript * Open source * TypeScript *

Из песочницы

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

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

+47

Xuxicheta 10 мар 2020 в 08:00

Отладка Angular Schematics с помощью Visual Studio Code

4 мин

1.5K

Туториал

Перевод

Посмотрим как работает Angular Schematic изнутри с помощью отладчика VS Code.

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

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

0

phil_b 6 мар 2020 в 19:14

Настало ли время покинуть виртуальный дом [React'a]?

4 мин

11K

Angular * JavaScript * ReactJS * Веб-разработка *

Перевод

Аудио версия на русском (яндекс.музыка) / iTunes

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

Картинка в посте, смысловой нагрузки не несёт

Картинка в посте, смысловой нагрузки не несёт

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

-3

ItNoN 5 мар 2020 в 07:37

Проекция контента в Angular или затерянная документация по ng-content

5 мин

47K

Angular * JavaScript * TypeScript * Веб-разработка *

Из песочницы

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

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

+11

Xuxicheta 4 мар 2020 в 14:17

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

11 мин

9.1K

Из песочницы

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

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

+5

amiku 4 мар 2020 в 11:58

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

3 мин

5.8K

Angular * JavaScript * ReactJS * VueJS * jQuery *

Перевод

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

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

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

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

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

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

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

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

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

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

0

Xuxicheta 4 мар 2020 в 09:06

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

11 мин

25K

Из песочницы

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

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

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

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

+4

Nikivay 26 фев 2020 в 13:39

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

10 мин

49K

Angular * Node.JS * ReactJS * TypeScript *

Перевод

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

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

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

-7

Nikivay 24 фев 2020 в 19:35

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

7 мин

31K

Angular * Node.JS * TypeScript *

Туториал

Эта статья является продолжением поста «Angular: понятное введение в NGRX»

Пример NGRX

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

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

Установка библиотеки
Создание структуры папок для хранилища
Создание хранилища и начальных значений
Создание действий (Actions)
Создание редукторов (Reducers)
Создание эффектов (Effects)
Создание селекторов (Selectors)
Конечная настройка
Использование хранилища в компонентах

Итак, давайте сделаем это…

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

+5

Nikivay 24 фев 2020 в 08:47

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

7 мин

64K

Angular * Node.JS * TypeScript *

Из песочницы

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

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

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

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

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

+7

Sergamers 19 фев 2020 в 15:05

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

2 мин

8.4K

Учебный процесс в ITКачество кода * Проектирование и рефакторинг * Angular *

Туториал

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

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

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

0

limitofzero 10 фев 2020 в 18:01

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

9 мин

6.2K

Angular * JavaScript *

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

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

+6

Vahman 7 фев 2020 в 10:54

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

7 мин

16K

Angular * TypeScript * Веб-разработка *

Перевод

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

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

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

+13

owlnagi 7 фев 2020 в 08:27

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

6 мин

9.4K

Блог компании VDSina.ruAngular * JavaScript * Программирование * Веб-разработка *

Перевод

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

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

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

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

+2

pacific_monkey 5 фев 2020 в 07:51

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

5 мин

5.1K

Angular * JavaScript * Программирование * Веб-разработка *

Туториал

Всем привет.

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

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

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

+1

yuriy-bezrukov 5 фев 2020 в 07:48

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

6 мин

7.1K

Блог компании Veeam SoftwareAngular * TypeScript * Веб-разработка * Тестирование веб-сервисов *

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

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

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

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

+4

ru_vds 3 фев 2020 в 09:30

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

9 мин

18K

Блог компании RUVDS.comВеб-разработка * JavaScript * Angular *

Перевод

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

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

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

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

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

+31

1 2 ...

22

23 24 ...