Angular *

landing page для наглядности

Нет часов. Нет минут. Нет часовых поясов. До свидания.

Данный счёт времени достался нам по наследию от наших предков. Если говорить грубо, то вероятнее всего какой-то один человек решил, что это будет удобно, если каждая более крупная единица будет равняться 60 мелким. Но нет. Так как мы используем десятичную систему счисления, удобнее, чтобы более крупная единица равнялась числу кратному десяти. Например, как это сделано во всех остальных единицах - по 1000. И даже приставки каждой единицы уже придуманы кило-, мега-, гига-, тера и т.д. Каждая более крупная единица содержит 1000 мелких. Как вариант, это очень удобно и уже давно стандартизировано.

https://vue-faq.org - попытка охватить наиболее часто задаваемые в профильных чатах и конференциях вопросы о фронтенде в целом и Vue.js фреймворке в частности.

Taiga UI — огромная библиотека UI-компонентов для Angular, на которую стоит взглянуть. Но она только вершина айсберга. Мы разрабатывали ее более пяти лет, начав еще на Angular 4. И, будучи любителями декомпозиции, мы создали несколько отдельных независимых проектов, которые помогают нам писать крутые Angular-приложения. 

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

Всем привет! В июне 2022 года наша фронтенд команда наконец-то дождалась строго типизированных форм от разработчиков Angular! Через какое-то время мы заметили что не все работает так, как интуитивно ожидаешь. Позже я создал небольшой внутренний документ с “фишками”, которые явно не описаны в официальных доках. И подумал: “А почему бы мне не выложить наш небольшой гайд на Хабр?”. И вот, выкладываю.

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

Уточню, что данная статья описывает процессы для Angular v.9 и выше. Надеюсь информация будет вам полезна.

Уже сложно представить наши приложения без такой оптимизации, как tree shaking.
Tree-shaking — «встряхивание дерева», удаление неиспользуемого кода из бандла приложения.

А причем тут standalone компоненты в названии статьи?

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

Если вы работали с Angular, то наверняка встречались с RxJS. Потоки, развесистые конструкции, много аргументов у метода pipe, а каждый аргумент возвращают разные функции с разным количеством аргументов. Есть интуитивно понятные функции типа filter или map. Первый явно фильтрует значения в потоке, а второй эти значения меняет. Такие функции называют операторами. И чем глубже вы проваливаетесь в RxJS, тем больше самых разных операторов вы узнаете. И со временем добираетесь до потоков потоков. То есть вместо обычных значений такой поток эмитит другие потоки. Такие потоки называют Higher Order Observables. И для работы с такими потоками существуют специальные операторы. Возможно, вы слышали, что такие операторы называют Higher Order Operators (HOO). Они могут выравнивать потоки или, другими словами, делать их обычным.

В этой статье я покажу, что в HOO нет ничего мифического, и расскажу в каких случаях вам нужно использовать операторы высшего порядка. Сейчас вы подумаете, что это скучный лонгрид, но не торопитесь. Мы рассмотрим всего 4 оператора: switchMap, exhaustMap, concatMap и mergeMap.

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

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

Рисовал я все это в PowerPoint.

Я давно слежу за развитием веб-технологий и каждый раз, натыкаясь на очередной холивар в интернете про злой и страшный JavaScript, залезающий на чужую территорию, инстинктивно хочу побыть его адвокатом. Обычно все мои доводы сводятся к банальному “не мы такие, жизнь такая” или “ничего личного, просто бизнес”, но в этот раз захотелось развернуто обосновать причины популярности веб-технологий.

Пробежимся галопом по истории интернета, перемоем косточки фронтендерам и придем к неутешительному заключению. Буду ругать и хвалить, но выводы делать лишь вам. Хотя и не надеюсь кого-то в чем-то убедить. Добро пожаловать под кат!

Чтобы стать продуктивным разработчиком на Angular, потребуется понимание различных деревьев, из которых состоит приложение. На первый взгляд легко можно спутать дерево инжекторов DI и DOM-дерево непосредственных HTML-элементов и вьюх Angular. Они похожи и иногда имеют прямое соответствие, но далеко не всегда. В статье рассмотрим различия, научимся держать их в уме и освоим, как можно обойти возможные трудности, связанные с ними.

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

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

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

Что же мне предстояло переносить - архитектурное чудо, написанное аутсорсерами на CakePHP в 2012 году. Интерфейс был построен на Twitter Bootstrap и jQuery. Из-за усложнения бизнес логики, в проект добавили AngularJS и десяток библиотек для фингерпринтинга.

Привет! Меня зовут Сергей, я работаю фронтенд-разработчиком в Тинькофф на одном из внутренних приложений в направлении Compliance. Последние полгода я активно занимался повышением стабильности и качества продукта, в том числе увеличивал покрытие приложения юнит-тестами. За это время я написал более 500 юнит-тестов, а тестовое покрытие удалось увеличить примерно на 30% с учетом того, что бизнес-задачи продолжали выполняться. В ходе работы над тестами я получил новый опыт и пришел к интересным выводам, которыми хочу поделиться с вами.

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

Хотите узнать, как ускорить выполнение JavaScript в веб-приложениях? В этой статье я подробно расскажу о веб-воркерах, шине данных между основным потоком и веб-воркерами, и как это можно применить в Angular, React и Vue, используя мой npm пакет web-worker-bus. Вы узнаете, как вынести тяжелые вычисления в отдельные потоки, организовать обмен данными, и как это все собрать в единую архитектуру. Примеры кода, инструкции и советы внутри помогут вам сделать ваши проекты быстрее и эффективнее с помощью этого инструмента. Освоение этого подхода и использование web-worker-bus может стать значимым улучшением в ваших проектах. Загляните, если интересуетесь оптимизацией JavaScript и хотите узнать, как мой пакет может вам в этом помочь!

Около 5 лет назад я пересел с Реакта на второй Ангуляр и первое, чего мне там не хватило был модуль angular-resource из первого Ангуляра. Вменяемых аналогов я не нашел, поэтому за неделю написал свою библиотеку. Решение оказалось настолько удачным, что практически без изменений дошло до сегодняшнего дня. Используется в куче проектов, работает стабильно (не смотря на то, что до сих пор там нет ни одного теста), в общем, есть о чем рассказать.

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

Всем привет? Я Данила, фронтенд разработчик в ПСБ. Angular я начал изучать не так давно, а поэтому часто встречаются сложные темы, которые непонятны и их нужно разобрать. Одной из таких тем и стало внедрение зависимостей (DI). Что ж, давайте разбираться :)

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

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