Давайте сначала познакомимся с обоеми библиотеками, чтобы сравнить их и убедиться, что лучше. react-query и SWR — это две популярные библиотеки для управления состоянием данных в React-приложениях. Они обе предназначены для облегчения работы с данными, получаемыми с сервера, но имеют некоторые различия в функциональности и подходах.
Content Security Policy (CSP) - это механизм безопасности веб-приложений, который используется для сокращения рисков, связанных с атаками, такими как внедрение скриптов (XSS) и выполнение нежелательного кода (инъекция). CSP позволяет веб-разработчикам указывать браузерам, из каких источников разрешено загружать ресурсы, такие как скрипты, стили, изображения, шрифты и другие элементы.
Если вы работали с Angular, то наверняка встречались с RxJS. Потоки, развесистые конструкции, много аргументов у метода pipe, а каждый аргумент возвращают разные функции с разным количеством аргументов. Есть интуитивно понятные функции типа filter или map. Первый явно фильтрует значения в потоке, а второй эти значения меняет. Такие функции называют операторами. И чем глубже вы проваливаетесь в RxJS, тем больше самых разных операторов вы узнаете. И со временем добираетесь до потоков потоков. То есть вместо обычных значений такой поток эмитит другие потоки. Такие потоки называют Higher Order Observables. И для работы с такими потоками существуют специальные операторы. Возможно, вы слышали, что такие операторы называют Higher Order Operators (HOO). Они могут выравнивать потоки или, другими словами, делать их обычным.
В этой статье я покажу, что в HOO нет ничего мифического, и расскажу в каких случаях вам нужно использовать операторы высшего порядка. Сейчас вы подумаете, что это скучный лонгрид, но не торопитесь. Мы рассмотрим всего 4 оператора: switchMap, exhaustMap, concatMap и mergeMap.
Я давно слежу за развитием веб-технологий и каждый раз, натыкаясь на очередной холивар в интернете про злой и страшный JavaScript, залезающий на чужую территорию, инстинктивно хочу побыть его адвокатом. Обычно все мои доводы сводятся к банальному “не мы такие, жизнь такая” или “ничего личного, просто бизнес”, но в этот раз захотелось развернуто обосновать причины популярности веб-технологий.
Пробежимся галопом по истории интернета, перемоем косточки фронтендерам и придем к неутешительному заключению. Буду ругать и хвалить, но выводы делать лишь вам. Хотя и не надеюсь кого-то в чем-то убедить. Добро пожаловать под кат!
Чтобы стать продуктивным разработчиком на Angular, потребуется понимание различных деревьев, из которых состоит приложение. На первый взгляд легко можно спутать дерево инжекторов DI и DOM-дерево непосредственных HTML-элементов и вьюх Angular. Они похожи и иногда имеют прямое соответствие, но далеко не всегда. В статье рассмотрим различия, научимся держать их в уме и освоим, как можно обойти возможные трудности, связанные с ними.
Не так давно, мы уменьшили на 20% объем итогового скомпилированного JavaScript-кода в Visual Studio Code. В абсолютных числах это около 3.9 МБ. Хоть это и меньше типичной гифки из блога, цифра все равно значительная! Это положительно влияет не только на объем скачиваемых данных для очередного обновления, но и на время запуска: меньше кода значит меньше работы для парсера и интерпретатора. И ко всему прочему, мы добились этого без удаления кода или каких-либо рефакторингов. Вместо этого, мы работали над новым шагом сборки: name mangling, сокращение имен сущностей.
В этой статье рассказывается, как мы обнаружили возможность такой оптимизации, какие подходы рассматривали, и как в конце концов добились уменьшения размера на 20%.
Сегодня речь пойдет про тесты… Про юнит-тесты. Думаю, что почти все слышали про юнит-тесты, пробовали их писать, и, возможно бросали это «гиблое дело» как только сталкивались с непониманием того, что тестировать на фронтенде.
Дизайн превью: Марина Четвертакова
В предыдущей части - Как я переносил блог из CakePHP в Angular, я делился своей историей миграции блога из CakePHP в Angular. В этой статье, я хочу продемонстрировать связку Angular и Contentful. Я по шагам создам новое приложение, добавлю необходимые вендоры, а также реализую требуемые скрипты для загрузки и генерации контента.
В 2018 году я устроился на новую работу в стартап, связанный с высокорискованным кредитованием. На собеседовании мне говорили, что это мечта любого программиста. Необходимо переписать проект на современный стек.
На предыдущей работе, я создавал небольшие приложения для нескольких брендинговых агентств. В основном это были сайты разной сложности, но с полным отсутствием “легаси”. В то время, я не знал такого слова.
Что же мне предстояло переносить - архитектурное чудо, написанное аутсорсерами на CakePHP в 2012 году. Интерфейс был построен на Twitter Bootstrap и jQuery. Из-за усложнения бизнес логики, в проект добавили AngularJS и десяток библиотек для фингерпринтинга.
Хочу поделиться своим видением сборки для быстрого старта разработки на React.
Помогает быстро запуститься, когда нужно «на скорую» войти в разработку.
Что‑то я подглядел здесь же, на Хабре, к чему‑то пришёл сам, ну и «ангажировал» немного на просторах «необъятного».
Что «под капотом»
Webpack 5
React v.18
Redux (Redux Toolkit)
Typescript
Css modules
Jest
VS Code
В этой статье разберем еще одну малоизвестную, но не менее полезную возможность @reduxjs/toolkit - createAsyncThunk.withTypes()
Привет! Меня зовут Сергей, я работаю фронтенд-разработчиком в Тинькофф на одном из внутренних приложений в направлении Compliance. Последние полгода я активно занимался повышением стабильности и качества продукта, в том числе увеличивал покрытие приложения юнит-тестами. За это время я написал более 500 юнит-тестов, а тестовое покрытие удалось увеличить примерно на 30% с учетом того, что бизнес-задачи продолжали выполняться. В ходе работы над тестами я получил новый опыт и пришел к интересным выводам, которыми хочу поделиться с вами.
Всем привет :)
Я Никита, уже больше 4 лет занимаюсь фронтендом, погружаюсь в инфраструктуру и кайфую от IT мира и комьюнити около веба, частенько читаю Хабр и решил попробовать написать сам.
Цикл статей про опыт добавления динамических элементов на страницу с помощью Drag and Drop и получения данных с BFF. Предварительно разбив на три части.
1. Описание решения, технологий и мотивация
2. Техническая часть с кодом про структуру компонентов и Drag and Drop решение
3. Техническая часть с кодом про BFF( backend for frontend ) решение
Хотите узнать, как ускорить выполнение JavaScript в веб-приложениях? В этой статье я подробно расскажу о веб-воркерах, шине данных между основным потоком и веб-воркерами, и как это можно применить в Angular, React и Vue, используя мой npm пакет web-worker-bus. Вы узнаете, как вынести тяжелые вычисления в отдельные потоки, организовать обмен данными, и как это все собрать в единую архитектуру. Примеры кода, инструкции и советы внутри помогут вам сделать ваши проекты быстрее и эффективнее с помощью этого инструмента. Освоение этого подхода и использование web-worker-bus может стать значимым улучшением в ваших проектах. Загляните, если интересуетесь оптимизацией JavaScript и хотите узнать, как мой пакет может вам в этом помочь!
Всем привет!
Решил начать писать короткие статьи с маленькими фичами, которые могут помочь посмотреть на решение проблем немного под другим углом.
Дано:
Мы используем Fluent UI в нашем проекте. После перехода на React 18 мы начали получать ошибки такого рода:
Приветствую, друзья технологии!
Сегодня в мире постоянно меняющихся технологий и уникальных разработок смартфонов, планшетов и других устройств, оказаться "в тренде" - это как настоящее искусство. Каждый из нас хочет использовать устройства, которые позволяют нам легко и интуитивно взаимодействовать с миром цифровых возможностей. Одной из фантастических новинок, которая взрывает сознание пользователей и разработчиков, является свайп-сайдбар – это гениальное решение для эффективной навигации и управления контентом!
Вам, наверняка, приходилось сталкиваться с ситуацией, когда приложение или веб-сайт предлагают свернутый сайдбар, который появляется с одного края экрана после легкого свайпа пальцем. Это действительно захватывающий опыт, который добавляет удобство и стиль в нашу повседневную жизнь.
В этой увлекательной статье мы окунемся в мир свайп-сайдбаров, расскажу, как они работают, как создать свой собственный сервис для свайпов, прикрутим все это дело к Vue + Typescript. Не волнуйтесь, если вы новичок в программировании или разработке, я проведу вас через каждый шаг, чтобы вы могли освоить это волшебство свайпов!
В этой статье я бы хотел показать, как можно создавать NPM пакеты так, чтобы пользователь вашей библиотеки мог конфигурировать типизацию вашего пакета. А так же я опишу, зачем и кому это может быть интересно.
На связи снова Архитектурный комитет компании SimbirSoft, и мы продолжаем наш цикл статей, посвященных Design API First. Ранее мы уже писали о том, что представляет собой этот подход, приводили пример спецификации для сервиса аутентификации и рассказывали, как мы интегрируем этот паттерн в наш конвейер разработки.
Сегодня мы немного отвлечемся от бэкенда и разберем автоматизацию одной из рутинных задач на стороне frontend-разработки. А именно описание моделей интерфейсов для взаимодействия фронта с беком, а также написание API-сервисов, в которых фиксируются endpoints, методы запросов и формат передачи данных (query-параметры, заголовки, тело).
