Всем привет! Меня зовут Даша и на этой неделе я пишу от лица разработки Red Collar. Сейчас я фронт и пишу на ванильном JS. Сегодня мы с вами будем говорить о веб-компонентах.

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

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

#rdclr_frontend #Vanilla_JS

Создание веб-компонента.

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

Вместо какого-либо тега вы используете название вашего компонента. К примеру, это «modal-button».
Это название вы используете как название класса в camelCase и связываете в customElements.define.

#rdclr_frontend #Vanilla_JS #code

Что если вам нужно использовать стандартные теги для веб-компонента?

Тогда нужно добавить атрибут is="modal-button" в компоненте. В JS вам нужно наследовать свойства от HTMLButtonElement, а не HTMLElement, в блоке define вы уточняете, что расширяете свойства элемента <button>.

#rdclr_frontend #Vanilla_JS #code

При создании веб-компонента, браузер создает его в DOM и первым делом вызывает constructor(), после него connectedCallback().

В конструкторе объявляются переменные для работы с компонентом и вешаются обработчики. В connectedCallback добавляются обработчики дочерних элементов, внешние обработчики или события.

Когда компонент удаляется из DOM, вызывается disconectedCallback(). Здесь происходит освобождение памяти — отключаются внешние обработчики, таймеры и т.д.

#rdclr_frontend #Vanilla_JS #code

Немного про контекст в веб-компонентах.

В компонентах this — это и сам элемент из разметки, и экземпляр класса в js. Через this мы получаем нужные нам свойства из дата-атрибутов (this.dataset.color, this.dataset.text) и объявляем новые свойства в нашем классе (this._color, this._text).

Веб-компоненты на примере можно посмотреть по ссылке: https://jsfiddle.net/drLt21yn/

#rdclr_frontend #Vanilla_JS #code

Всем привет! Меня зовут Иван, и на этой неделе я пишу от лица разработки Red Collar. Сейчас я бэк и пишу на python. На этой неделе посмотрим на интересные библиотеки и соединим полученные знания в проект.

#rdclr_backend #python

Доброе утро. Сегодня твой день. Начнем с рекомендации библиотеки для разворачивания PostgreSQL одной строчкой. Это будет полезно для тестов или пет-проектов, где используется множество серверов с базой данных.

pip install postgresql-wheel

После запуска в виртуальном окружении python у вас будет полноценный PostgreSQL: изолированный, скомпилированный и не требующий sudo.
Теперь через код можно создавать и удалять сервера. Данный пакет будет работать только под Linux.
https://github.com/michelp/postgresql-wheel

#rdclr_backend #python #read

Насколько трудно объединять крайне полезные библиотеки с другими библиотеками? У Sebastián Ramírez это выходит отлично.

Сегодня посмотрим на SQLModel. Без SQLModel нужно было провалидировать входные данные pydantic, а потом написать код для модели данных, используя SQLAlchemy. Благодаря SQLModel решается проблема дублирования кода модели.

https://github.com/tiangolo/sqlmodel

#rdclr_backend #python #read

Мы уже познакомились с Себастьяном Рамирез по библиотеке SQLModel, но это не самая популярная библиотека у Себастьяна. Фреймворк FastAPI — это быстро набирающий популярность инструмент для разработки HTTP сервисов на Python. FastAPI из коробки дает тайпинг для валидации данных вкупе с библиотекой pydantic, автогенерацией openapi спецификации и много приятных мелочей. Была затронута и тема популярности: для примера, у фреймворка Django сейчас — 60к звезд на GitHub, а у FastAPI — 37к.

https://github.com/tiangolo/fastapi

#rdclr_backend #python #read

Автоформаттер black принял «политику стабильности». В 2022 ожидайте стабильный релиз. После принятия «политики стабильности» фреймворк Django собираются начать форматировать свой код при помощи black.

Стоит заметить, что автоформаттер black постепенно становится де-факто стандартом оформления кода.

https://twitter.com/llanga/status/1455496802812239876

#rdclr_backend #python #news

Всем привет! Меня зовут Андрей и в компании Red Collar я занимаю позицию Backend Java-разработчика. На этой неделе у меня будет много ревью-кода от стажеров до middle разработчиков, поэтому вначале рассмотрим решения и инструменты, с помощью которых можно повысить качество проекта.

#rdclr_backend #java

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

В разработке Spring-based приложений зарекомендовал себя подход разделения приложения на «слои» — Controller -> Service -> Repository (в базовом представлении). При его использовании важно следить, чтобы нижний слой не имел доступа к слою выше. Наших данных это тоже касается и, если в слое контроллеров у нас участвуют сущности БД, то это считается плохим тоном и требуется проводить рефакторинг. Тут нам на помощь приходят DTO (Data Transfer Object), в которые мы заносим данные из наших сущностей и оперируем уже ими.

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

Ссылка на библиотеку — https://mapstruct.org/

#rdclr_backend #java #library

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

Если делать прямо в лоб, то мы пишем большой SQL запрос, где будет перебор параметров фильтра в блоке where. Минусы тут очевидны: при увеличении размеров фильтра будет раздуваться и SQL запрос, из чего следует повышение сложности запроса, ухудшение его читаемости, сложность дебага и рост ошибок.

Тут на помощь приходит CriteriaApi. Данный пакет инструментов позволяет динамически строить запрос в БД, оперируя объектами, а не самим SQL. Вдобавок к этому, Spring фреймворк предоставляет нам интерфейс Specification<T>, который упрощает взаимодействие с CriteriaApi. Пример работы приведен на картинке ниже.

#rdclr_backend #java

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

Задача состоит в следующем: отловить ошибку и превратить стек-трейс в понятое всем сообщение. В этом нам поможет «магия» от спринга в виде аннотации @RestControllerAdvise, которую мы повесим над классом-обработчиком. И так же аннотация @ExceptionHandler, с помощью который мы обозначаем, какие именно ошибки перехватывать.

Если Вам требуется возвращать не объект в респонсе, а какое-то представление (например, html), то можете воспользоваться @ControllerAdvise. Разница между ними такая же, как и между @Controller и @RestController. В итоге получаем единую точку обработки всех исключений, и если в приложении что-то случится, весь поток выполнения программы перейдет в RestControllerAdvise.

Также, глобальная обработка ошибок хороша тем, что мы можем задействовать i18n в единственном месте (с помощью MessageSource), а не размазывать логику по проекту.

#rdclr_backend #java

Пример реализации

Ловушка @Transactional или использование Self-inject’ов
В бине имеется 2 метода: a() и b(), помеченных аннотацией @Transactional. Если мы из метода а() вызовем метод b() — как поведет себя транзакция метода b()?
Правильный ответ — транзакция метода b() не выполнится.

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

Почему же транзакция не выполнится? Дело в том, что когда мы делаем someService.callMethod() — вызывается метод Бина, а когда внутри a() дергаем b() — вызывается метод Класса, т.е. без каких-либо прокси-оберток Спринга и прочего. Именно из-за этого транзакция метода b() и не выполнится, потому что сам класс про неё ничего не знает.

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

#rdclr_backend #java