Всем привет! Меня зовут Даша и на этой неделе я пишу от лица разработки Red Collar. Сейчас я фронт и пишу на ванильном JS. Сегодня мы с вами будем говорить о веб-компонентах.
Веб-компоненты — это набор технологий, позволяющих создавать собственные компоненты. Эти элементы не повлияют на остальной код вашего приложения, переиспользуются и настраиваются так, как нужно вам. По сути, мы будем создавать свои теги или расширять свойства существующих.
Как они могут вам помочь? Вы научитесь разбивать свой код на компоненты и переиспользовать их. Вместо того, чтобы описывать каждый блок отдельно, вы пишете один обработчик и меняете какие-то детали, что упрощает код и ускоряет разработку.
#rdclr_frontend #Vanilla_JS
Веб-компоненты — это набор технологий, позволяющих создавать собственные компоненты. Эти элементы не повлияют на остальной код вашего приложения, переиспользуются и настраиваются так, как нужно вам. По сути, мы будем создавать свои теги или расширять свойства существующих.
Как они могут вам помочь? Вы научитесь разбивать свой код на компоненты и переиспользовать их. Вместо того, чтобы описывать каждый блок отдельно, вы пишете один обработчик и меняете какие-то детали, что упрощает код и ускоряет разработку.
#rdclr_frontend #Vanilla_JS
Создание веб-компонента.
К примеру, вам нужно сделать, чтобы при нажатии на кнопку вам открывалось одно и тоже модальное окно, но каждое со своей информацией и стилями.
Вместо какого-либо тега вы используете название вашего компонента. К примеру, это «modal-button».
Это название вы используете как название класса в camelCase и связываете в customElements.define.
#rdclr_frontend #Vanilla_JS #code
К примеру, вам нужно сделать, чтобы при нажатии на кнопку вам открывалось одно и тоже модальное окно, но каждое со своей информацией и стилями.
Вместо какого-либо тега вы используете название вашего компонента. К примеру, это «modal-button».
Это название вы используете как название класса в camelCase и связываете в customElements.define.
#rdclr_frontend #Vanilla_JS #code
Что если вам нужно использовать стандартные теги для веб-компонента?
Тогда нужно добавить атрибут is="modal-button" в компоненте. В JS вам нужно наследовать свойства от HTMLButtonElement, а не HTMLElement, в блоке define вы уточняете, что расширяете свойства элемента <button>.
#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
В конструкторе объявляются переменные для работы с компонентом и вешаются обработчики. В 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
В компонентах 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
#rdclr_backend #python
Доброе утро. Сегодня твой день. Начнем с рекомендации библиотеки для разворачивания PostgreSQL одной строчкой. Это будет полезно для тестов или пет-проектов, где используется множество серверов с базой данных.
После запуска в виртуальном окружении python у вас будет полноценный PostgreSQL: изолированный, скомпилированный и не требующий sudo.
Теперь через код можно создавать и удалять сервера. Данный пакет будет работать только под Linux.
https://github.com/michelp/postgresql-wheel
#rdclr_backend #python #read
pip install postgresql-wheel
После запуска в виртуальном окружении python у вас будет полноценный PostgreSQL: изолированный, скомпилированный и не требующий sudo.
Теперь через код можно создавать и удалять сервера. Данный пакет будет работать только под Linux.
https://github.com/michelp/postgresql-wheel
#rdclr_backend #python #read
GitHub
GitHub - michelp/postgresql-wheel: A Python wheel containing PostgreSQL
A Python wheel containing PostgreSQL. Contribute to michelp/postgresql-wheel development by creating an account on GitHub.
Насколько трудно объединять крайне полезные библиотеки с другими библиотеками? У Sebastián Ramírez это выходит отлично.
Сегодня посмотрим на SQLModel. Без SQLModel нужно было провалидировать входные данные pydantic, а потом написать код для модели данных, используя SQLAlchemy. Благодаря SQLModel решается проблема дублирования кода модели.
https://github.com/tiangolo/sqlmodel
#rdclr_backend #python #read
Сегодня посмотрим на SQLModel. Без SQLModel нужно было провалидировать входные данные pydantic, а потом написать код для модели данных, используя SQLAlchemy. Благодаря SQLModel решается проблема дублирования кода модели.
https://github.com/tiangolo/sqlmodel
#rdclr_backend #python #read
GitHub
GitHub - fastapi/sqlmodel: SQL databases in Python, designed for simplicity, compatibility, and robustness.
SQL databases in Python, designed for simplicity, compatibility, and robustness. - fastapi/sqlmodel
Мы уже познакомились с Себастьяном Рамирез по библиотеке SQLModel, но это не самая популярная библиотека у Себастьяна. Фреймворк FastAPI — это быстро набирающий популярность инструмент для разработки HTTP сервисов на Python. FastAPI из коробки дает тайпинг для валидации данных вкупе с библиотекой pydantic, автогенерацией openapi спецификации и много приятных мелочей. Была затронута и тема популярности: для примера, у фреймворка Django сейчас — 60к звезд на GitHub, а у FastAPI — 37к.
https://github.com/tiangolo/fastapi
#rdclr_backend #python #read
https://github.com/tiangolo/fastapi
#rdclr_backend #python #read
GitHub
GitHub - fastapi/fastapi: FastAPI framework, high performance, easy to learn, fast to code, ready for production
FastAPI framework, high performance, easy to learn, fast to code, ready for production - fastapi/fastapi
Автоформаттер black принял «политику стабильности». В 2022 ожидайте стабильный релиз. После принятия «политики стабильности» фреймворк Django собираются начать форматировать свой код при помощи black.
Стоит заметить, что автоформаттер black постепенно становится де-факто стандартом оформления кода.
https://twitter.com/llanga/status/1455496802812239876
#rdclr_backend #python #news
Стоит заметить, что автоформаттер black постепенно становится де-факто стандартом оформления кода.
https://twitter.com/llanga/status/1455496802812239876
#rdclr_backend #python #news
Twitter
Łukasz Langa
Version 21.10b0 of Black, your friendly #Python auto-formatter, is out now! 🖤 The biggest news is that thanks to @pradyunsg and @jelleszijlstra we adopted a stability policy that will go into effect starting with the first stable release in Jan 2022. 🤯 b…
Всем привет! Меня зовут Андрей и в компании Red Collar я занимаю позицию Backend Java-разработчика. На этой неделе у меня будет много ревью-кода от стажеров до middle разработчиков, поэтому вначале рассмотрим решения и инструменты, с помощью которых можно повысить качество проекта.
#rdclr_backend #java
#rdclr_backend #java
MapStruct
Сегодня утром я проводил код-ревью нашего java-стажера и заметил участок кода, который можно автоматизировать.
В разработке Spring-based приложений зарекомендовал себя подход разделения приложения на «слои» — Controller -> Service -> Repository (в базовом представлении). При его использовании важно следить, чтобы нижний слой не имел доступа к слою выше. Наших данных это тоже касается и, если в слое контроллеров у нас участвуют сущности БД, то это считается плохим тоном и требуется проводить рефакторинг. Тут нам на помощь приходят DTO (Data Transfer Object), в которые мы заносим данные из наших сущностей и оперируем уже ими.
И, чтобы не делать это вручную, можно использовать библиотеку MapStruct. В лучших традициях спринга она помогает с помощью «магических» аннотаций конвертировать один объект в другой, снимая с нас большой пласт работы.
Попробовав однажды, писать вручную уже не захочется!
Ссылка на библиотеку — https://mapstruct.org/
#rdclr_backend #java #library
Сегодня утром я проводил код-ревью нашего 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
Не раз мы сталкивались с задачами на фильтрацию какой-либо выборки данных по определенным параметрам, которые могут либо присутствовать, либо нет. Как же лучше всего реализовать данный фильтр?
Если делать прямо в лоб, то мы пишем большой SQL запрос, где будет перебор параметров фильтра в блоке where. Минусы тут очевидны: при увеличении размеров фильтра будет раздуваться и SQL запрос, из чего следует повышение сложности запроса, ухудшение его читаемости, сложность дебага и рост ошибок.
Тут на помощь приходит CriteriaApi. Данный пакет инструментов позволяет динамически строить запрос в БД, оперируя объектами, а не самим SQL. Вдобавок к этому, Spring фреймворк предоставляет нам интерфейс Specification<T>, который упрощает взаимодействие с CriteriaApi. Пример работы приведен на картинке ниже.
#rdclr_backend #java
Глобальная обработка ошибок
Непройденная валидация данных, отсутствие доступа, проблемы в бизнес-логике, внутренние ошибки сервера — типичные ситуации, возникающие в процессе работы большинства приложений. Наша задача, как бэкенд-разработчиков, обработать все эти исключения и передать клиенту в удобно читаемом и понятном виде, так как никто не любит полотно стек-трейса в респонсе сервера.
Задача состоит в следующем: отловить ошибку и превратить стек-трейс в понятое всем сообщение. В этом нам поможет «магия» от спринга в виде аннотации @RestControllerAdvise, которую мы повесим над классом-обработчиком. И так же аннотация @ExceptionHandler, с помощью который мы обозначаем, какие именно ошибки перехватывать.
Если Вам требуется возвращать не объект в респонсе, а какое-то представление (например, html), то можете воспользоваться @ControllerAdvise. Разница между ними такая же, как и между @Controller и @RestController. В итоге получаем единую точку обработки всех исключений, и если в приложении что-то случится, весь поток выполнения программы перейдет в RestControllerAdvise.
Также, глобальная обработка ошибок хороша тем, что мы можем задействовать i18n в единственном месте (с помощью MessageSource), а не размазывать логику по проекту.
#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
В бине имеется 2 метода: a() и b(), помеченных аннотацией @Transactional. Если мы из метода а() вызовем метод b() — как поведет себя транзакция метода b()?
Правильный ответ — транзакция метода b() не выполнится.
Один из самых популярных вопросов на собеседовании для java-разработчиков вплоть до middle позиций включительно. В реальной жизни тоже встречается довольно часто, поэтому стоит следить за аннотациями над методами и понимать, как они работают.
Почему же транзакция не выполнится? Дело в том, что когда мы делаем someService.callMethod() — вызывается метод Бина, а когда внутри a() дергаем b() — вызывается метод Класса, т.е. без каких-либо прокси-оберток Спринга и прочего. Именно из-за этого транзакция метода b() и не выполнится, потому что сам класс про неё ничего не знает.
Одним из вариантов решения этой проблемы, дабы сохранить транзакционность, является использование self-инжектов. Суть в том, что мы должны взаимодействовать не с методом b() напрямую, а через бин самого себя. Ниже приведен пример такой реализации.
#rdclr_backend #java