Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Регистрируясь, я даю согласие на обработку данных и условия почтовых рассылок.
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр Удивительный мир Волшебных островов нуждается в маге, который сможет наполнить бурной энергией увядающую красоту древних городов. Множество мифических существ ожидают вашей помощи на разбросанных в эфире островах.

Маджонг Волшебные Острова

Казуальные, Маджонг, Головоломки

Играть

Топ прошлой недели

  • solenakrivetka solenakrivetka 7 постов
  • Animalrescueed Animalrescueed 53 поста
  • ia.panorama ia.panorama 12 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая «Подписаться», я даю согласие на обработку данных и условия почтовых рассылок.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Маркет Промокоды Пятерочка Промокоды Aroma Butik Промокоды Яндекс Путешествия Промокоды Яндекс Еда Постила Футбол сегодня
0 просмотренных постов скрыто
4289
propovednikHulio

Фронтендщики, отзовитесь!⁠⁠

1 год назад
Фронтендщики, отзовитесь!
Javascript Frontend Web IT юмор Программирование Комиксы Theycantalk Гусь
409
7
dexsys
dexsys
Лига программистов

Ветка о двух концах. Как долететь на орлах вместо того, чтобы идти пешком⁠⁠

1 год назад

Что такое Trunk Based Development и фича-флаги, и как они могут значительно ускорить процесс разработки

Разработка программного обеспечения - не всегда простой процесс. Однако, существуют методы, способные сделать его более понятным и удобным.

В этой статье мы поговорим:
▹
О стратегиях ветвления в Git и методах использования Trunk Based Development при разработке программного обеспечения
▹ Рассмотрим, что такое фича-флаг, и как он может использоваться вместе с Trunk Based Development
▹ А в конце я поделюсь опытом нашей команды и отзывами счастливых пользователей, убедившихся в преимуществах использования этих методов

Кто я такой и почему вам тут вещаю? Меня зовут Иван, я frontend-разработчик DexSys. Делаю красивые интерфейсы в проекте UFO Pro, топлю за микрофронтенды и помогаю разработчикам развиваться.

Эта статья может быть полезна разработчикам, тестировщикам, менеджерам проектов и другим профессионалам, связанным с созданием программного обеспечения. Кроме того, она может быть полезна студентам и всем интересующимся современными методами и подходами к разработке. В частности, статья может быть интересна тем, кто хочет узнать о Trunk Based Development, фича-флагах, и их применении в процессе разработки.

В мире современной разработки выбор правильной стратегии ветвления является важной частью процесса. Так что же это такое, и какое влияние эти стратегии оказывают на процесс разработки?

Существует множество различных способов ветвления, которые можно использовать при работе с Git. В этой статье мы рассмотрим три наиболее распространенных способа ветвления: Git Flow, GitHub Flow и Trunk Based Development.

Git Flow и GitHub Flow являются наиболее популярными ветвящимися стратегиями в коммерческой разработке. Trunk Based Development является несколько более рискованным подходом, поскольку он не предусматривает постоянных веток. Рассмотрим их подробнее:

Git Flow

Git Flow - это методология ведения разработки с использованием системы контроля версий Git. Она была разработана Винсентом Дриессеном и опубликована в 2010 году.

Git Flow предлагает структуру ветвления репозитория Git, которая позволяет эффективно управлять процессом разработки, отделяя стабильные версии от версий, находящихся в разработке. Методология основана на использовании двух основных веток: master и develop.

Ветка master содержит только стабильные версии продукта, которые готовы к выпуску. Ветка develop используется для разработки новых функций и исправления ошибок. Кроме того, Git Flow предлагает использовать дополнительные ветки для различных типов задач, таких как feature - для разработки новых функций, release - для подготовки к выпуску новой версии, hotfix - для исправления критических ошибок в текущей версии, и т.д.

Git Flow также определяет процедуры работы с каждой из веток, например, процедуру слияния ветки feature в develop или процедуру создания новой версии из ветки release.

GitHub Flow

GitHub Flow - это методология ведения разработки с использованием системы контроля версий Git и платформы GitHub.

GitHub Flow предлагает использовать только одну основную ветку - master. Все изменения в коде вносятся через создание новых веток, которые называются feature-ветками. Каждая feature-ветка создается для решения конкретной задачи или добавления новой функции. После завершения работы над задачей в feature-ветке происходит запрос на слияние, pull request, в основную ветку master.

GitHub Flow также предлагает использовать дополнительные инструменты GitHub, такие как Issues и Projects, для управления задачами и проектами.

Эта стратегия ветвления ориентирована на непрерывную интеграцию и доставку (CI/CD), что позволяет быстрее и безопаснее выпускать новые версии продукта.

В целом, GitHub Flow является более простой и гибкой методологией, чем Git Flow, и может быть особенно полезной для небольших команд или проектов.

Trunk Based Development

Trunk Based Development (TBD) - это методология разработки программного обеспечения, которая предлагает использовать только одну основную ветку, trunk, для разработки и интеграции всех изменений в коде. Это означает, что все разработчики работают непосредственно в trunk и делают коммиты прямо в эту ветку.

Для крупных проектов предлагается использовать Scaled Trunk Based Development. Главным отличием является то, что коммиты делаются не напрямую в trunk, для этого используются короткоживущие feature-ветки.

Этот подход к разработке программного обеспечения стал популярен благодаря своей простоте и возможности быстро реагировать на изменения требований заказчика или рынка. TBD предлагает использовать автоматизированные тесты и непрерывную интеграцию (CI) для обеспечения высокого качества кода и быстрой проверки изменений.

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

TBD также предлагает использовать механизмы feature-флагов для поэтапного внедрения новых функций и возможности быстро откатывать изменения, если они приводят к проблемам. Это позволяет уменьшить риски и снизить влияние изменений на работу приложения.

Преимущества Trunk Based Development:

  1. Ускорение процесса разработки и интеграции изменений в коде.

  2. Быстрая реакция на изменения требований заказчика или рынка.

  3. Высокое качество кода благодаря использованию автоматизированных тестов и непрерывной интеграции.

  4. Возможность быстрого обнаружения и исправления ошибок.

  5. Использование механизмов feature-флагов для поэтапного внедрения новых функций и возможности быстро откатывать изменения, если они приводят к проблемам.

  6. Уменьшение рисков и снижение влияния изменений на работу приложения.

  7. Простота и легкость в использовании для малых и средних проектов.

Хотя Trunk Based Development может быть эффективным методом для управления процессом разработки, он также имеет свои недостатки:

  1. TBD может быть не очень удобен в использовании для больших и сложных проектов, где требуется более объемная система ветвления и управления изменениями.

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

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

  1. Кроме того, Trunk Based Development не позволяет экспериментировать с новой функциональностью в отдельных ветках, потому что это может оказать негативное влияние на основную ветку и другие компоненты. Для решения этой проблемы можно использовать фича-флаги, чтобы временно включить или отключить опасные или еще не полностью разработанные функции, и избежать возможных проблем в основной ветке.

Что такое фича-флаг и как с ним работать?

Если сложно, то фича-флаги (feature flags, feature toggles) — это инструмент разработки, который включает и выключает выбранные фичи в рантайме без развертывания нового кода.

Если просто, то это if в коде.

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

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

Инструменты для работы с фича-флагами

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

  • DevCycle

  • Flagsmith

  • Unleash

Если нужно что-то попроще, или хочется лишь протестировать подход, то подойдут следующие способы:

  • Старые добрые env-переменные

  • Простой, как палка, json-файл

  • Свой сервис с простой API

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

Но мы уже находимся в процессе перехода на Flagsmith, так что в скором времени работа с фича-флагами станет более удобной и быстрой.

Итак, теперь о нашем опыте

Что у нас было раньше?

Раньше на проекте у нас был Git Flow без релизной ветки, то есть ветка master использовалась в качестве релизной, а весь свежий код находился в ветке dev. Под каждую задачу заводилась своя фича-ветка, для тестирования она сливалась в ветку dev, затем ждала своего часа до попадания в master. Зачастую, дев сильно отличался от мастера своим набором фича-веток, и из-за этого возникало много конфликтов при сборке релиза.

Почему мы решили измениться?

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

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

Соответственно, все эти проблемы выливались в финансовые потери, ведь время - деньги.

Подготовка и переходный этап, инструкция:

  1. Мержим все что есть в одну ветку

  2. Делаем резервную копию, на случай, если что-то пойдет не так

  3. Настраиваем репозиторий: в нашем случае это squash вместо merge commit, сливаем только через pull-реквест, выставляем обязательных ревьюеров

  4. Проводим инструктаж для разработчиков

  5. Кодим

Отзывы пользователей:

1/3

Таким образом, можно заключить, что использование Trunk Based Development и фича-флагов может значительно улучшить процесс разработки и снизить количество ошибок. Однако, следует помнить, что каждый проект уникален и не все методы подойдут вам. Важно оценить потребности проекта и выбрать наиболее подходящие варианты.

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

Первое время приходилось напоминать разработчикам, что размер пулл-реквестов должен быть небольшим, а ревью нужно проводить гораздо чаще, чем раньше. Например, при подходе Git Flow, мы делали ревью целой задачи, разработка которой могла занимать от одного до нескольких дней, в зависимости от ее размера. Сейчас же ревью проводится постоянно в течение дня, среднее количество пулл-реквестов в день - 10-15 штук.

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

Автор статьи: Иван, frontend-разработчик DexSys.

Показать полностью 9
[моё] IT Программирование Frontend Длиннопост
1
9
StefStef
ИТ-проекты пикабушников

Калькулятор цен⁠⁠

2 года назад

Всем привет.
Я начинающий фронтэнд разработчик.
Мой друг подкинул мне идею для учебного проекта.
Я сделал калькулятор для расчета цены за 1 кг/1л и 1 штуку товара. Можно добавлять расчет в список товаров. Расчеты сохраняются. Должно работать оффлайн. Проект в первую очередь для мобилки (типа pwa). Можно установить на мобилке как приложение (через яндекс браузер не получилось) перейдите по ссылке, в меню браузера (например хром) кликните установить приложение (или в сафари поделится > добавить на рабочий стол) и должно работать. Спасибо за внимание.

https://easylitre.vercel.app/

Frontend Калькулятор Цены Продукты Магазин Текст
16
3
Аноним
Аноним
Web-технологии

Подключение версии для слабовидящих⁠⁠

2 года назад

Может кто сталкивался с такой проблемой.
Подключаю версию для слабовидящих от lidrekon.ru. И в результате при переходе между страницами, на каждой из страниц на сам html вешается opacity от 0 до 1, из-за чего создаётся ненужный эффект.

Может кто владеет решением? Как избавиться от этой ерунды?

Верстка Frontend Текст
6
3
perejog04
Web-технологии

Необходимый минимум для фронтендера⁠⁠

2 года назад

Скажите честно, что действительно необходимо для того чтобы стать джуном фронтендером. Нужно ли досканально изучать typescript и подобные темы или достаточно основ html/css/js? Расскажите по подробнее что конкретно вы знали, когда устраивались на своё первое рабочее место джуном

Frontend Обучение Javascript React HTML CSS Pikaweb Текст
8
6
Neurosonya
Neurosonya
Полезные нейросети
Серия Полезность

Бесплатно веб-дизайн по текстовому запросу и готовый код⁠⁠

2 года назад
Перейти к видео

Designpatterns – также известный как Magic Patterns, представляет собой нового помощника для разработки фронтенда, он создаст веб-дизайн по текстовому запросу и сгенерирует готовый код.  Достаточно описать словами, какой вид формы, страницы или компонента интерфейса вы хотите получить. Также можно легко изменять и дополнять полученный дизайн.

На сайте представлено более 10 000 шаблонов, включая различные элементы дизайна веб-интерфейсов, такие как списки клиентов, формы входа, таблицы для событий, финансовые панели управления и многое другое, часто интегрированные с популярными инструментами и фреймворками веб-разработки, такими как Radix Themes, Tailwind, Mantine, Inline, Shadcn и HTML

Что самое приятное, сервис бесплатный

Хотите узнавать первыми о полезных сервисах с искусственным интеллектом для работы, учебы и облегчения жизни? Подпишитесь на мой тг НейроProfit, там я рассказываю, как можно использовать нейросети для бизнеса

Показать полностью
[моё] Полезное Искусственный интеллект Технологии Нейронные сети Инновации Digital Web Дизайн Frontend Видео Без звука
0
DELETED

Deleted⁠⁠

2 года назад
Deleted
[моё] IT Стикеры Стикеры Telegram Программист Программирование Разработка Разработчики Веб-разработка Frontend Backend Develop Web-программирование Веб-приложение Проект Видео YouTube Длиннопост
2
2
raindrop13
raindrop13
Лига программистов
Серия WebDev

Выбор технологии для портала с идеальным SEO⁠⁠

2 года назад

Посмотрел недавно несколько видео с участием Деми Мурыча, разработчика, которого, при всей его эксцентричности и совсем небольшой известности, почему-то регулярно зовут на интервью/подкасты другие более популярные лидеры мнений в сфере IT. Зовут его, как я понял, из-за его глубоких познаний в Javascript, HTML5, SEO и других направлениях. В большинстве этих продолжительных видео-бесед, всё, что он делает - это разносит разработчиков и индустрию за то, что никто не читает спецификацию, и, собственно, рассказывает про эту самую спецификацию.

В одном из таких видео он рассказывал на примерах, как правильно пользоваться семантикой HTML5 и о том, как поисковики "читают" ваш сайт. Вот 2 его утверждения, которые показались интересными лично мне:

  1. В попытки Google научиться читать динамически генерируемую (с помощью JS) разметку не верит, и что его неверие опирается на реальные тесты, проводимые им самим и другими уважаемыми разработчиками.

  2. В семантическую вёрстку, соответствующую стандарту HTML5, не умеет сегодня практически никто.

КАК В РУНЕТЕ С СЕМАНТИКОЙ?

Мне стало интересно, действительно ли в вебе так плохо с семантикой, и я открыл в devtools браузера код страниц Мвидео, DNS и Эльдорадо. К моему удивлению, там действительно всё было очень далеко от идеала. Да, не div-hell, но ничего и близко похожего на адекватную семантическую вёрстку я там не увидел. Ни тегов section или article, ни атрибутов itemprop/itemtype и т.д. Если интересно - проверьте сами.

Помимо этих трёх китов, я пооткрывал разметку страниц интернет магазинов поменьше (не только с электроникой). Никаких качественных отличий.

В одном из видео, Мурыч показывал построенные им самим интернет-магазины, размещённые в вебе с целью тестирования различных SEO-гипотез, и хвастался тем, что, благодаря грамотному подбору тегов (и не только), товары из его "мёртвых" сайтов иногда попадают в секцию "товары" поисковой выдачи Google, хотя его интернет магазин даже не является витриной реального бизнеса.

ЗАПИСЫВАЮСЬ В SEO-ГОНЩИКИ

Я решил проверить, действительно ли так легко обогнать всех в SEО, просто подразобравшись в спецификации HTML5. Понятно, что в перегретых нишах и гео удачу я пытать не буду. Но какой-нибудь тематический региональный портал запилить - почему бы и нет.

В планах построить около 3-х тематических порталов со статьями определённой тематики. Тематики пока не подобрал. Скорее всего дам посетителям возможность создавать статьи, продвигать свои товары и услуги. Но последнее скорее для практики и относительной "полноценности" проектов, основная цель - увидеть воочию, что какая-нибудь из статей одного из порталов попала на 1-ю страницу Google по какому-нибудь не слишком специфичному запросу.

ВЫБОР ТЕХНОЛОГИИ

На данный момент я выбираю технологию, которую буду использовать. За плечами опыт с React, нативной вёрсткой и WordPress. Но ни один из 3х вариантов не подходит:

  • WordPress отпадает, потому что нет желания разбираться в PHP (до этого работал в нём только в визуальных редакторах + css). Я знаю, что для него есть куча SEO-плагинов, но не верю, что они справятся лучше человека, проверяющего каждый тег.

  • React не подходит из-за динамической генерации разметки, плохо сказывающейся на SEO.

  • HTML+JS. Писать в свободное от работы время проект даже средней сложности без какого-либо фреймворка/шаблонизатора у меня не хватит времени и сил.

ПОМОГИТЕ СОВЕТОМ

Какой фреймворк выбрать? Пока в претендентах Next.js и SvelteKit из-за SSR и привычной мне, как React-разработчику, реактивности и state-management-у. Но я новичок в SEO-ориентированной разработке и не знаю, на какие особенности технологии важнее всего обращать внимание. Имеют ли Next и Svelte какие-то явные и давно известные SEO-специалистам недостатки? Может всё-таки стоит присмотреться к WordPress или Laravel? Подойдут ли для моих целей html-шаблонизаторы?

Спасибо всем прочитавшим до конца и особенно тем, кто поделится советом/мнением. <3

Показать полностью
[моё] Разработка HTML React SEO Frontend Текст
13
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Маркет Промокоды Пятерочка Промокоды Aroma Butik Промокоды Яндекс Путешествия Промокоды Яндекс Еда Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии