Привет, Хабр! Представляю вашему вниманию перевод статьи "RxJS: Don’t Unsubscribe" автора Ben Lesh.

Ну… ладно, просто не отказывайся от подписок.

Я часто помогаю кому-нибудь в отладке проблем с их RxJS кодом, в том числе со структурированием приложений, которые несут в себе много асинхронного кода. При этом я всегда вижу одно и тоже, как люди держат обработчики на тоннах подписок. Разработчик делает 3 HTTP-запроса с Observable, сохраняя 3 объекта подписки, которые будут вызваны, когда произойдет какое-то событие.

Я знаю, почему так происходит. Люди привыкли использовать `addEventListener` N раз, а затем, когда они больше не нужны, вызывать `removeEventListener` N раз. Естественным будет делать то же самое и с объектами-подписками, и по большей части вы будете правы. Но есть и лучшие способы. Сохранение слишком большого количества объектов подписок — это знак того, что вы управляете своими подписками императивно и не пользуетесь преимуществами Rx.

Доброго времени суток.

Опишу процесс авторизации с использованием некоторого сервера авторизации и интерфейса HttpInterceptor, который стал доступен с версии Angular 4.3+. С помощью HttpInterceptor`a будем добавлять наш токен в Header запроса перед отправкой каждого запроса. Так же, по истечению срока действия токена, получая 401ую ошибку, будем восстанавливать токен и повторять запросы, которые не прошли авторизацию пока ждали рефреша.

Начнем с конфигурации Interceptor`ов:

Проводить конфигурацию предпочитаю с основного модуля приложения. Или если ваше приложение уже достаточно большое, советую вынести конфигурации в CoreModule.
В статье буду использовать CoreModule, но можно сделать это и в корневом (AppModule обычно) модуле приложения, отличия незначительны.

Не так давно React позиционировал себя как "V in MVC". После этого коммита маркетинговый текст изменился, но суть осталась той же: React отвечает за отображение, разработчик — за все остальное, то есть, говоря в терминах MVC, за Model и Controller.

Одним из решений для управления Model (состоянием) вашего приложения стал Redux. Его появление мотивировано возросшей сложностью frontend-приложений, с которой не способен справиться MVC.

Главный Технический Императив Разработки ПО — управление сложностью

— Совершенный код

Redux предлагает управлять сложностью с помощью предсказуемых изменений состояния. Предсказуемость достигается за счет трех фундаментальных принципов:

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

Смог ли Redux побороть возросшую сложность и было ли с чем бороться?

Когда я задумался о внедрении зависимостей в TypeScript, то первое, что мне посоветовали — inversify. Я посмотрел эту и другие библиотеки, реализующие паттерн Service Locator, и даже сделал свою собственную — typedin.

Но когда я работал над версией typedin 2.0, то в конце концов понял, что вообще никакой библиотеки не нужно. В TypeScript есть все необходимое.

Вступление

Доброго времени суток, меня зовут Владимир Миленко, я Frontend-разработчик в компании Lightspeed, и сегодня мы поговорим о проблеме отсутствия компонентов в том или ином фреймворке и попытках автоматически конвертировать их.

Предыстория

Исторически сложилось, что и в eCommerce, и в Retail продуктах для админ-панелей мы используем React.JS в качестве основного фреймворка, однако платформа для ресторанов использует Angular, что не позволяет им использовать нашу библиотеку компонентов. Перед моим отпуском эта проблема стала острее, ввиду необходимости приведения UI/UX к одному виду. Мною было принято решение провести небольшое исследование на тему миграции компонентов, сделать Proof of Concept и поделиться ощущениями. Об этом и будет данный пост.

Разрабатываем библиотеку для отображения больших интерактивных схем залов на canvas без фреймворков и заставляем хорошо работать в ie и мобильных устройствах. Попутно разбираемся с особенностями работы canvas.

Создаем на Visual Studio 2017 модульное приложение Vue.js + Asp.NETCore + TypeScript без использования Webpack или Broserify. Причем сначала делаем проект с использованием Webpack, а потом без него. Чтобы прочувствовать, от какого счастья мы отказываемся.

Материал рассчитан на способных управиться с VS2017 и знакомых с прогрессивным JavaScript фрэймворком Vue.js.

Цель замены системы сборки – снижение стартового барьера для освоения Vue.js за счет уменьшения количества применяемых инструментов при создании современных веб-приложений.

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

С помощью unit тестов мы можем удостовериться, что отдельные части приложения работают именно так, как мы от них ожидаем.

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

Даже существует мнение, что сложно тестируемый код — претендент на переписывание.

Цель данной статьи — помочь в написании unit тестов для Angular 5+ приложения. Пусть это будет увлекательный процесс, а не головная боль.

В нашем приложении передо мной встала задача о создании красивого тултипа, в Angular Material таблице. Дизайн нам нарисовали, и я начала поиск в интернете нужных материалов. Но натыкалась уже или на готовые решения(библиотеки) или на очень простые решения, которые мне не подходили. В итоге объединив кучу статей и каких то заметок, я сделала тултип который при наведении рассчитывает высоту строки таблицы, длину от места наведения до конца и показывает список из людей. Для чего такие сложности? Да просто потому что, количество человек может быть разным и всех надо отобразить без "наезда" друг на друга, ну и сама иконка с количеством человек(при наведении на которую показывается тултип) может находиться в разных метах
Итог выглядит так:

От переводчиков

Всем привет, с вами Максим Иванов и Дмитрий Сергиенков, и сегодня мы поговорим о новостях в мире Angular. Мы подготовили для вас наиболее интересные материалы и отобрали список вопросов, который вам должен понравиться. Отметим только, что если вы будете ждать от этой статьи ответа на вопрос "Чем Angular лучше других технологий?", то придется вас огорчить, у нас не будет ответа на него. Почему? Как правило, все мнения вида "Технология X лучше технологии Y" почти всегда не более, чем отражение точки зрения высказывающегося. Однако для тех, кто только начинает изучать этот фреймворк, мы постараемся объяснить, что дает вам эта технология и какую пользу она приносит. Также не проходите мимо и ответьте на опрос, самые популярные ответы будут отправлены Игорю Минару (ведущий разработчик команды Angular). Ну что же, приступим.

В заключительной части истории про миграцию на Angular мы поделимся избранными местами нашей внутренней документации, помогающими нашим разработчикам освоиться в новом фреймворке. Речь пойдет про особенности новых логики компиляции компонентов, Change Detection и концепции трансклуда. Это актуальные конвенции, использующиеся прямо сейчас при работе с Angular. Ну и в конце — несколько ссылок на англоязычные статьи и видео, которые мы рекомендуем коллегам.

Последние три года я занимаюсь разработкой серверов на Node.js и в процессе работы у меня накопилась некоторая кодовая база, которую я решил оформить в виде фреймворка и выложил в open-source.

Основными особенностями фреймворка можно назвать:

• простую архитектуру, без всякой JS – магии
• автоматическую сериализацию/десериализацию моделей (например, не нужно проверять пришло ли поле с клиента, все проверяется автоматически)
• возможность генерации схемы API
• генерацию документации на основе схемы
• генерацию полностью типизированного SDK для клиента (на данный момент речь про JS frontend)

В данной статье мы поговорим немного о Node.js и рассмотрим данный фреймворк

Всем кому интересно – прошу под кат

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

В январе мы в Skyeng закончили перевод нашей платформы Vimbox с AngularJS на Angular 4. За время подготовки и перехода у нас накопилось много записей, посвященных планированию, решению возникающих проблем и новым конвенциям работы, и мы решили поделиться ими в трех статьях на Хабре. Надеемся, что наши заметки окажутся полезными структурно похожим на наш Vimbox проектам, которые только начали переезжать или собираются сделать это.

Всем привет! Недавно у нас вышла новая книга, описывающая работу с непростыми и мощными инструментами веб-разработчика: Angular и TypeScript. Авторы: Яков Файн и Антон Моисеев объясняют особенности фреймворка, приводя простые примеры кода, и нескольких глав излагают, как создать одностраничное приложение для онлайн-аукционов. Ниже мы рассмотрим раздел из книги, посвященный внедрению зависимостей.

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

Недавно я создал простой чат, используя исключительно TypeScript. Главной целью этого проекта было написание приложения, демонстрирующего использование этого языка и на клиенте, и на сервере. Клиентская часть чата основана на свежей версии Angular. Сервер базируется на Node.js. Взаимодействие между ними организовано с помощью протокола WebSocket.

Из этого материала вы узнаете о том, как создать чат, о котором идёт речь, с нуля. Вот, кстати, как выглядит работа с ним.

Чат, написанный на TypeScript

Язык php часто ругают, обычно необоснованно. Особенно удивляет, что javascript ругают меньше. Зачастую это делают люди, которые писали на нем 10+ лет назад, когда язык был действительно чертовски плох, да и разработчики в те времена не задумывались над качеством кода. Посмотрите хотя бы на код wordpress, который до сих пор вызывает шок.

Ругают необоснованно, но проблемы у языка, конечно же, есть, и они серьёзные. Разуметеся, если сравнить последние релизы php7 (с нормальным ООП и строгим тайпхинтингом) и php4, то разница будет колоссальная. Однако и в последних версиях языка не всё гладко, и до java/c# пока что очень далеко. Более того, берусь утверждать, что будущее php тоже довольно сомнительно (с точки зрения типов).

Другими словами, давайте рассмотрим предметно, что хорошо и что плохо в php с точки зрения типизации.

В TypeScript версии 2.2 был введён новый тип object. Он описывает любой непримитивный тип.
Следующие типы принято считать примитивными в JavaScript:

• boolean
• number
• string
• symbol
• null
• undefined

Все остальные типы принято считать непримитивными.

Redux — это интересный шаблон, и, по своей сути, он очень прост. Но почему его сложно понять? В этом материале мы рассмотрим базовые концепции Redux и разберёмся с внутренними механизмами хранилищ. Поняв эти механизмы, вы сможете освоиться со всем тем, что происходит, что называется, «под капотом» Redux, а именно — с тем, как работают хранилища, редьюсеры и действия. Это поможет вам вывести на новый уровень отладку приложений, поможет писать более качественный код. Вы будете точно знать, какие именно функции выполняет та или иная строка вашей программы. Мы будем идти к пониманию Redux через практический пример, который заключается в создании собственного хранилища с использованием TypeScript.



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

Перевод. Оригинал по ссылке.

В версии Typescript 2.0 был добавлен модификатор readonly. Свойствам помеченным модификатором readonly значение может быть присвоено только в момент инициализации, или в конструкторе того же класса. Любые другие присваивания значении запрещены.