Как стать автором
Поиск
Написать публикацию
Обновить
7.1

Angular *

JavaScript-фреймворк

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

Основы реактивного программирования с использованием RxJS. Часть 2. Операторы и пайпы

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


В предыдущей статье мы рассмотрели, что такое потоки и с чем их едят. В новой части мы познакомимся с тем, какие методы RxJS предоставляет для создания потоков, что такое операторы, пайпы(pipes) и как с ними работать.

Серия статей «Основы реактивного программирования с использованием RxJS»:



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

Отладка Angular CLI приложения в VSCode с помощью Browser Preview

Время на прочтение2 мин
Количество просмотров12K
Привет, Хабр! В Iponweb мы не только творим магию с помощью Kubernetes, но и создаем сложные пользовательские интерфейсы. Основной фреймворк, который мы используем, — Angular (а также AngularJs для legacy частей), поэтому удобство разработки для нас — не пустой звук. Мы решили перевести статью Марка Пиесзака, которая призвана повысить удобство отладки JS-кода.

Кеннет Аучнберг, программный менеджер команды VSCode, недавно зарелизил расширение, которое позволяет запускать и отлаживать любое JS-приложение прямо в VSCode IDE!


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

Лучшее из мира Angular за неделю — Дайджест №2 (26 января — 7 марта)

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


Свежая подборка со ссылками на новости и материалы.


Приятного чтения!

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

Оверинжинирг 80 уровня или редьсюеры: путь от switch-case до классов

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

image


О чем пойдет речь?


Посмотрим на метаморфозы редьюсеров в моих Redux/NGRX приложениях за последние пару лет. Начиная с дубового switch-case, продолжая выбором из объекта по ключу и заканчивая классами с декораторами, блекджеком и TypeScript. Постараемся обозреть не только историю этого пути, но и найти какую-нибудь причинно-следственную связь.

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

Когда исчезнут JavaScript-фреймворки?

Время на прочтение11 мин
Количество просмотров45K
Автор материала, перевод которого мы сегодня публикуем, веб-разработчик, говорит, что он старается регулярно пересматривать набор инструментов, которыми пользуется. Делает он это для того, чтобы понять, может ли он без некоторых из них обойтись, решая свои обычные задачи. Недавно он решил провести эксперимент и создать сложное фронтенд-приложение без использования JavaScript-фреймворков.
Читать дальше →

NestJS - тот самый, настоящий бэкенд на nodejs

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

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

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

Как дебажить фронтенд и бекенд: пошаговая инструкция

Время на прочтение6 мин
Количество просмотров63K
Привет, Хабр! Представляю вам перевод статьи "How to debug javascript in Chrome quick and easy ".

В этом посте мы научимся дебажить JavaScript на фронт- и бекенде с помощью Chrome DevTools и VS Code.
Читать дальше →

Как адаптировать UX/UI под permissions

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

Во многих проектах существует процессы аутентификации (в той или иной степени). Написано много “бест практис” во всех известных технологиях и т.д. и т.п.


Но вот пользователь сделал логин и? Ведь он далеко не всё может сделать. Как определить что он может видеть, а что нет. На какие кнопки имеет право нажимать, что может менять, что создавать или удалять.


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


image

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

Основы реактивного программирования с использованием RxJS

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

Часть 1. Реактивность и потоки


Данная серия статей посвящена реактивности и ее применению в JS с использованием такой замечательной библиотеки как RxJS.

Серия статей «Основы реактивного программирования с использованием RxJS»:



Для кого эта статья: в основном, здесь я буду объяснять основы, поэтому в первую очередь статья рассчитана на новичков в данной технологии. Вместе с тем надеюсь, что и опытные разработчики смогут почерпнуть для себя что-то новое. Для понимания потребуются знания js(es5/es6).

Мотивация: впервые я столкнулся с RxJS, когда начал работать с angular. Именно тогда у меня возникли сложности с пониманием механизма реактивности. Сложности прибавлял еще тот факт, что на момент начала моей работы большинство статей было посвящено старой версии библиотеки. Пришлось читать много документации, различных мануалов, чтобы хоть что-то понять. И только спустя некоторое время я начал осознавать, как “все устроено”. Чтобы упростить жизнь другим, я решил разложить все по полочкам.
Читать дальше →

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

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

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



Картинка отсюда


Первыми приходят в голову три способа решить эту задачу:


  1. Обойтись средствами браузеров, или написать плагины к ним
  2. Организовать обмен данными через backend, выступающий в роли посредника
  3. Добавить в программу HTTP-сервис, и обращаться к ней напрямую из браузера

Третий пункт выглядит хорошо, позволяет убрать авторизацию в программе, не требует вообще никакого пользовательского интерфейса. Попробуем его реализовать, написав программу на C# под .NET Framework 4. Так как речь пойдет о .NET, решение будет только для Windows (XP и новее). Веб-приложение сделаем на angular.

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

Лучшее из мира Angular за неделю — Дайджест №1 (18 января - 25 января)

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

image


Свежая подборка со ссылками на новости и материалы.


Приятного чтения!

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

Как мы тестировали drag&drop в HTML5

Время на прочтение6 мин
Количество просмотров7.7K
Так или иначе, все сталкивались с ситуациями, когда в банальной обстановке вдруг происходило что-то необычное. Примерно такой случай произошел с нами при тестировании нового приложения на проверенном сто раз окружении. Сюрпризом для нас стало использование некоторых возможностей HTML5 в работе front-end’а, а точнее невозможность стандартными средствами Selenium WebDriver автоматизировать тестирование drag&drop операций. Об этом опыте мы хотим рассказать.


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

Прокачиваем Angular NGSW с помощью кастомной логики в Service Worker

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

Использование Angular для создания прогрессивных веб-приложений (PWA)



Angular — отличный выбор для разработки PWA. Поддержка Service Worker'ов включена в Angular CLI начиная с версии 1.7.0, для быстрого старта разработки PWA приложения. Service Worker может быть настроен в приложении Angular с помощью файла конфигурации json, предоставляющего множество опций и функций. Несмотря на то, что это звучит замечательно, есть один большой недостаток использования Angular Service Worker — его логику нельзя расширить стандартным способом.
Читать дальше →

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

JS итоги 2018 и прогнозы на будущее

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

В конце года я решил подумать, что ждет JS разработчика в Новом 2019 году и подвести итоги этого года.

Добро пожаловать под кат!
Читать дальше →

Преимущества следования styleguide’ам при разработке Angular-приложений

Время на прочтение7 мин
Количество просмотров4K
В конце 2018-го года в Самаре состоялся Panda-Meetup #9 Frontend. На этом мероприятии я попробовал себя в новой роли и выступил с докладом. Меня зовут Евгений Холмов. В программирование я пришёл более 10 лет назад, будучи студентом. Последние 5 лет я занимаюсь разработкой систем дистанционного обслуживания в крупнейших российских банках, из них два года на позиции руководителя. За это время я поучаствовал в создании нескольких ведущих российских enterprise-приложений, пройдя через тернии тяжелых архитектурных, интеграционных и процессных решений. Опираясь на свой опыт разработки нескольких крупных интернет-банков, я рассказал гостям митапа, какую выгоду даёт следование правилам хорошего стиля в разработке. Озвученные цифры впечатлили слушателей. Участники встречи меня буквально завалили вопросами. Не исключено, что и среди читателей Хабра эта тема найдёт живой отклик.


Фронтенд-2018: итоги года

Время на прочтение11 мин
Количество просмотров28K
Мир веб-разработки развивается невероятно быстро. То, что вчера было новостью, сегодня уже может устареть, а то, о чём сегодня почти никто не знает, завтра способно стать двигателем прогресса. В материале, перевод которого мы сегодня публикуем, будет рассмотрено всё самое интересное, произошедшее в сфере фронтенда в 2018 году. Речь пойдёт о развитии фреймворков и вспомогательных инструментов, о JavaScript-трендах, а также о том, в каком направлении фронтенд может пойти в 2019-м.


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

Иерархическое внедрение зависимостей в React и MobX State Tree в качестве доменной модели

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

Довелось мне как-то после нескольких проектов на React поработать над приложением под Angular 2. Прямо скажем, не впечатлило. Но один момент запомнился — управление логикой и состоянием приложения с помощью Dependency Injection. И я задался вопросом, удобно ли управлять состоянием в React используя DDD, многослойную архитектуру, и внедрение зависимостей?


Если интересно, как это сделать, а главное, зачем — добро пожаловать под кат!

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

Внедряем Angular компоненты в React, Vue и даже JQuery если хотите

Время на прочтение4 мин
Количество просмотров5.8K
Если вы нашли крутой компонент в npm, но она с приставкой ng, ngx, angular и так далее, то не стоит расстраиваться по этому поводу. Есть много решений, чтобы этот компонент оказался у вас. В данной статье рассмотрим решение, которое официально поддерживается Angular Team, а именно  -  Angular Elements.

Для практики выберем любой компонент из Awesome Angular.
Читать дальше →

Оптимизация Angular-приложений

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



В материале, перевод которого мы публикуем сегодня, будут раскрыты шесть направлений оптимизации Angular-приложений.
Читать дальше →

Еще одна реализация Обработки Данных

Время на прочтение2 мин
Количество просмотров3.6K
Представьте себе инструмент, с помощью которого вы можете трансформировать любые данные в… любые данные.

Самый доступный пример — Изображения. Что если я хочу получить картинку определенного размера и поставить где-нибудь водяную марку (тоже определенного размера).

И вот один из примеров как это может выглядеть:

image

P.S.: Это обзорная статья, если будет интересно, дальше опишу подходы детальнее.
Читать дальше →