Привет, на связи Сергей!
Я тут у нас рулю всей тех. частью. Клим, попросил меня написать мои соображения по теме микросервисов)
Его душность конечно ничего не переплюнет, но я попробую😁 Поехали)
Не реализуйте микросервисы без понимания, какую задачу они призваны решить в вашем приложении
Микросервисная архитектура выглядит очень логично, понятно и соблазнительно. Она может показаться чем-то сродни конструктору лего, где каждая деталь (микросервис) легковесная, независимая, взаимозаменяемая.
Почему так кажется:
🟣 Каждый отдельный микросервис может быть написан на своём языке или использовать свой фреймворк
🟣 Под каждый отдельный микросервис или группу микросервисов можно определить свою полуавтономную команду разработки
🟣 Каждый микросервис может быть отмасштабирован и висеть в любой точке мира
На бумаге это всё выглядит гладко, а на деле скорее всего получится, что усилия по реализации и поддержанию микросервисов совершенно не будут равноценны полученному результату и могут быть даже причиной гибели проекта из-за чрезмерно раздутых издержек.
Так что же может пойти не так?🔽 🔽 🔽
5АМ | #разработка
Я тут у нас рулю всей тех. частью. Клим, попросил меня написать мои соображения по теме микросервисов)
Его душность конечно ничего не переплюнет, но я попробую😁 Поехали)
Не реализуйте микросервисы без понимания, какую задачу они призваны решить в вашем приложении
Микросервисная архитектура выглядит очень логично, понятно и соблазнительно. Она может показаться чем-то сродни конструктору лего, где каждая деталь (микросервис) легковесная, независимая, взаимозаменяемая.
Почему так кажется:
На бумаге это всё выглядит гладко, а на деле скорее всего получится, что усилия по реализации и поддержанию микросервисов совершенно не будут равноценны полученному результату и могут быть даже причиной гибели проекта из-за чрезмерно раздутых издержек.
Так что же может пойти не так?
5АМ | #разработка
Please open Telegram to view this post
VIEW IN TELEGRAM
1️⃣ Дерево непрямых зависимостей
Вместо набора независимых микросервисов вы, скорее всего, получите дерево непрямых зависимостей между микросервисами. С высокой долей вероятности потребуется, чтобы микросервисы коммуницировали между собой. Для такой коммуникации придётся определять контракты и периодически их поддерживать, если что-то изменилось в одном из микросервисов.
2️⃣ Можно забыть об ACID
Атомарность и подлинная целостность данных не дружат с микросервисами. Условно, если у вас идёт распределенная транзакция на заказ товара, которая должна пробежаться по микросервисам заказов, оплаты, отгрузки и т.д., то при возникновении ошибки на каком-то этапе транзакция будет частично выполненной и нужен будет программно реализуемый откат. С ACID - у вас либо транзакция выполняется, либо нет;
3️⃣ Прочесть дорого
Многочастотные операции чтения для иерархических данных, которые должны собираться со многих микросервисов, могут сделать вам очень больно, особенно если микросервисы реализованы канонично с отдельными приватными БД;
4️⃣ Очень высокие требования к экспертизе предметной области
Особенно в плане разделения приложения на ограниченные контексты (bounded contexts). Если продукт сложный, то у вас по сути не будет права на ошибку, поскольку её стоимость будет чрезвычайно высокой. Соответственно, новый сложный продукт + недостаточная степень экспертизы в предметной области или размытость этой области = практически 100% вероятность возникновения такой ошибки;
5️⃣ Команды - клубы
Команды разработки над отдельным микросервисом или группой микросервисов имеют тенденцию превращаться в полузакрытые клубы, но при этом эти клубы должны в идеале коммуницировать между собой так, чтобы постоянно двигать вперёд продукт в целом.
Зачастую много времени будет уходить на организационные и технические задачи, которые не имеют прямого отношения к продукту.
Вместо предполагаемого ускорения разработки ("у нас же параллельные команды!") - получаем замедление и удорожание;
6️⃣ Тестирование
Интеграционное тестирование микросервисов, т.е. такое тестирование, которое затрагивает функциональность приложения в целом, чрезвычайно сложно реализуемо.
Вместо запуска такого тестирования по одной кнопке, вам придётся собирать космический корабль😁;
7️⃣Деплой
Затем вы переходите к деплою и тут вы поймете, почему при микросервисном подходе зачастую существуют отдельные и дорогие devops-команды.
К абсолютно каждому пункту можно привести разумные и логичные контраргументы, но они будут сводиться к тому, что нужно приложить дополнительные усилия и дополнительное время, чтобы вся эта система работала.
Это очень даже возможно разрешить все вышеперечисленные проблемы в достаточной мере, но скорее всего вы не Netflix, не Amazon и не Instagram, чтобы а) иметь достаточные ресурсы для этого; б) иметь в целом высокую потребность в микросервисной архитектуре.😎
Тогда что вместо этого?
Если начинаете с нуля, то разрабатывайте хорошо скроенный монолит для проверки гипотезы.
И только потом полноценную модульную архитектуру (модулит), которую со временем можно отмасштабировать.
Например, если у вас SaaS-ориентированное приложение, то можно создать нескольких инстанций приложения на каждого тенанта или группу тенантов, возможно с распределенной физически и логически БД на каждую инстанцию.
В 90% случаев плохая отзывчивость приложения и его медленная работа будет сводиться к тому, как приложение взаимодействует с БД, насколько оптимизированы как сама БД, так и запросы к ней.
Могут быть нередки случаи, когда банальная оптимизация SQL-запроса может повысить его производительность в сотни-тысячи раз.
Если ваше узкое место БД - то микросервисы вам не помогут, только навредят. Не убивайте себя сложностью, которую вы сами придумываете. Не переносите бездумно опыт крупных корпоративных продуктов с микросервисной архитектурой на свой продукт.
Хуже и сложнее плохого монолита может быть только плохая распределенная архитектура. 🎩
5АМ | #разработка
Вместо набора независимых микросервисов вы, скорее всего, получите дерево непрямых зависимостей между микросервисами. С высокой долей вероятности потребуется, чтобы микросервисы коммуницировали между собой. Для такой коммуникации придётся определять контракты и периодически их поддерживать, если что-то изменилось в одном из микросервисов.
2️⃣ Можно забыть об ACID
Атомарность и подлинная целостность данных не дружат с микросервисами. Условно, если у вас идёт распределенная транзакция на заказ товара, которая должна пробежаться по микросервисам заказов, оплаты, отгрузки и т.д., то при возникновении ошибки на каком-то этапе транзакция будет частично выполненной и нужен будет программно реализуемый откат. С ACID - у вас либо транзакция выполняется, либо нет;
3️⃣ Прочесть дорого
Многочастотные операции чтения для иерархических данных, которые должны собираться со многих микросервисов, могут сделать вам очень больно, особенно если микросервисы реализованы канонично с отдельными приватными БД;
4️⃣ Очень высокие требования к экспертизе предметной области
Особенно в плане разделения приложения на ограниченные контексты (bounded contexts). Если продукт сложный, то у вас по сути не будет права на ошибку, поскольку её стоимость будет чрезвычайно высокой. Соответственно, новый сложный продукт + недостаточная степень экспертизы в предметной области или размытость этой области = практически 100% вероятность возникновения такой ошибки;
5️⃣ Команды - клубы
Команды разработки над отдельным микросервисом или группой микросервисов имеют тенденцию превращаться в полузакрытые клубы, но при этом эти клубы должны в идеале коммуницировать между собой так, чтобы постоянно двигать вперёд продукт в целом.
Зачастую много времени будет уходить на организационные и технические задачи, которые не имеют прямого отношения к продукту.
Вместо предполагаемого ускорения разработки ("у нас же параллельные команды!") - получаем замедление и удорожание;
6️⃣ Тестирование
Интеграционное тестирование микросервисов, т.е. такое тестирование, которое затрагивает функциональность приложения в целом, чрезвычайно сложно реализуемо.
Вместо запуска такого тестирования по одной кнопке, вам придётся собирать космический корабль😁;
7️⃣Деплой
Затем вы переходите к деплою и тут вы поймете, почему при микросервисном подходе зачастую существуют отдельные и дорогие devops-команды.
К абсолютно каждому пункту можно привести разумные и логичные контраргументы, но они будут сводиться к тому, что нужно приложить дополнительные усилия и дополнительное время, чтобы вся эта система работала.
Это очень даже возможно разрешить все вышеперечисленные проблемы в достаточной мере, но скорее всего вы не Netflix, не Amazon и не Instagram, чтобы а) иметь достаточные ресурсы для этого; б) иметь в целом высокую потребность в микросервисной архитектуре.😎
Тогда что вместо этого?
Если начинаете с нуля, то разрабатывайте хорошо скроенный монолит для проверки гипотезы.
И только потом полноценную модульную архитектуру (модулит), которую со временем можно отмасштабировать.
Например, если у вас SaaS-ориентированное приложение, то можно создать нескольких инстанций приложения на каждого тенанта или группу тенантов, возможно с распределенной физически и логически БД на каждую инстанцию.
В 90% случаев плохая отзывчивость приложения и его медленная работа будет сводиться к тому, как приложение взаимодействует с БД, насколько оптимизированы как сама БД, так и запросы к ней.
Могут быть нередки случаи, когда банальная оптимизация SQL-запроса может повысить его производительность в сотни-тысячи раз.
Если ваше узкое место БД - то микросервисы вам не помогут, только навредят. Не убивайте себя сложностью, которую вы сами придумываете. Не переносите бездумно опыт крупных корпоративных продуктов с микросервисной архитектурой на свой продукт.
Хуже и сложнее плохого монолита может быть только плохая распределенная архитектура. 🎩
5АМ | #разработка
Мой топ книг
Понедельник хочется начать с простого 😎. Хочу поделиться любимыми книгами, которые так или иначе повлияли на мое восприятие.
1️⃣«Трилогия желания» - Теодор Драйзер
Драйзер много времени следил за повадками одного предпринимателя, считывал архетип, после чего написал свою знаменитую трилогию. Этот роман показал мне проблему баланса и компенсации достижений и личной жизни. Заложил образ хищник-жертвы в работе. Вы проживаете героя от рождения до смерти, весь путь)
2️⃣«Моральное животное» - Роберт Райт
Вачовски использовали её при создании Матрицы и давали почитать всем ключевым актерам. Это эволюционная психология, рассказанная на примере жизни Дарвина, уморительная идея) Понял, что все наши чувства - это просто стратегия выживания. Знание причины - дает власть)
3️⃣«Люди как боги» - Герберт Уэльс
Просто невероятный фантастический роман. Англичанин попадает в утопию с красивыми людьми, которые уже искренне не понимают наших проблем. Около политически-философский-комедийный роман. Очень крутая мысль - "природа на самом деле столь же уродлива насколько и красива". И человек должен ухаживать за неё, довести её до идеала. В этом была идея сравнения миров в советском кинофильме "Кин-дза-дза".
4️⃣ «Осознанность» - Ошо
Я его слушал в озвучке Nik Osho раз 100. Дает структуру работы мышления.
5️⃣ «Странник по звездам» - Джек Лондон
Люблю Джека Лондона, много его читал, но эту выделю отдельно. История о заключенным, которого связывали в смирительную рубашку и держали так неделями, а он смог в этом состоянии переноситься в свои прошлые жизни. История об одном человеке и десятках его жизней.
6️⃣ «Вглядываясь в солнце» - Ирвин Ялом
Как-то мне была интересна тема смерти. Психолог, рассказывает о случаях и жизнях на грани. Интересно посмотреть на жизнь с этой точки зрения.
7️⃣«Граф Монте-Кристо» - Александр Дюма
Эта книга научила меня продумывать мелочи наперед. Так изысканно годами мстить, ух. Я всегда удивлялся, как это можно было придумать. Наверняка это Пушкин))
8️⃣«История на миллион долларов» - Роберт Манн
Это книга о сценариях для фильмов. Дало понимание структуры истории и конфликтов. Ведь мы все так или иначе живем в истории, а значит зная логику построения сценария можно писать свою жизнь.
9️⃣«Слишком темно и невыносимо тихо» - Ольга Скороходова
Просто закройте глаза и наденьте шумоподавляющие наушники. Что останется? Я купил себе наушники, надел маску для сна и так сидел смотрел в себя и подумал, а ведь есть люди, которые так живут жизнь. Так я наткнулся на книгу Ольги. Научился опираться не только на зрительную информацию, но подключать все каналы.
5АМ | #life
Понедельник хочется начать с простого 😎. Хочу поделиться любимыми книгами, которые так или иначе повлияли на мое восприятие.
1️⃣«Трилогия желания» - Теодор Драйзер
Драйзер много времени следил за повадками одного предпринимателя, считывал архетип, после чего написал свою знаменитую трилогию. Этот роман показал мне проблему баланса и компенсации достижений и личной жизни. Заложил образ хищник-жертвы в работе. Вы проживаете героя от рождения до смерти, весь путь)
2️⃣«Моральное животное» - Роберт Райт
Вачовски использовали её при создании Матрицы и давали почитать всем ключевым актерам. Это эволюционная психология, рассказанная на примере жизни Дарвина, уморительная идея) Понял, что все наши чувства - это просто стратегия выживания. Знание причины - дает власть)
3️⃣«Люди как боги» - Герберт Уэльс
Просто невероятный фантастический роман. Англичанин попадает в утопию с красивыми людьми, которые уже искренне не понимают наших проблем. Около политически-философский-комедийный роман. Очень крутая мысль - "природа на самом деле столь же уродлива насколько и красива". И человек должен ухаживать за неё, довести её до идеала. В этом была идея сравнения миров в советском кинофильме "Кин-дза-дза".
4️⃣ «Осознанность» - Ошо
Я его слушал в озвучке Nik Osho раз 100. Дает структуру работы мышления.
5️⃣ «Странник по звездам» - Джек Лондон
Люблю Джека Лондона, много его читал, но эту выделю отдельно. История о заключенным, которого связывали в смирительную рубашку и держали так неделями, а он смог в этом состоянии переноситься в свои прошлые жизни. История об одном человеке и десятках его жизней.
6️⃣ «Вглядываясь в солнце» - Ирвин Ялом
Как-то мне была интересна тема смерти. Психолог, рассказывает о случаях и жизнях на грани. Интересно посмотреть на жизнь с этой точки зрения.
7️⃣«Граф Монте-Кристо» - Александр Дюма
Эта книга научила меня продумывать мелочи наперед. Так изысканно годами мстить, ух. Я всегда удивлялся, как это можно было придумать. Наверняка это Пушкин))
8️⃣«История на миллион долларов» - Роберт Манн
Это книга о сценариях для фильмов. Дало понимание структуры истории и конфликтов. Ведь мы все так или иначе живем в истории, а значит зная логику построения сценария можно писать свою жизнь.
9️⃣«Слишком темно и невыносимо тихо» - Ольга Скороходова
Просто закройте глаза и наденьте шумоподавляющие наушники. Что останется? Я купил себе наушники, надел маску для сна и так сидел смотрел в себя и подумал, а ведь есть люди, которые так живут жизнь. Так я наткнулся на книгу Ольги. Научился опираться не только на зрительную информацию, но подключать все каналы.
5АМ | #life
Что такое "Нашваш" или как руководителю понять, что теряет члена команды
Есть очень хороший маркер в общении с любым человеком, о котором я узнал со своей прошлой службы в гос. органах.
Он помогает определить как настроен человек к общему делу, проекту, работе, отношениям. Как правило, этот маркер можно услышать, когда человек начинает выпускать эмоции. Сколько у меня было расставаний с людьми - столько раз я встречал этот маркер, так что безотказно.
Так вот - это местоимения "Наш-Ваш".
Как только вы слышите что-то типа такого: "Да в ВАШЕМ проекте все через жопу" или "ВАША система управления фигня" то, если ничего не сделать - человек уйдет в ближайшее время либо будет отсиживаться, выполняя работу на минимальном уровне.
Если говорить о том, что происходит в голове: в этот момент произошло разотождествление своего Я и вашего общего дела. Психика так делает, чтобы проще принять решение. Если услышали, то у вас осталось совсем мало времени, чтобы расположить человека.
Пользуйтесь))
🟣 Руководителю, чтобы попробовать понять сотрудника, решить его вопрос или хотя бы договориться о мягком уходе
🟣 Сотруднику, чтобы не палиться и отсиживаться грамотно 😄😄, ну или попробовать договориться, может вас все таки поймут, если дело вам дорого. Вы же когда-то говорили "Мы" и "Наш", зачем рубить, так ведь?))
5АМ | #управление
Есть очень хороший маркер в общении с любым человеком, о котором я узнал со своей прошлой службы в гос. органах.
Он помогает определить как настроен человек к общему делу, проекту, работе, отношениям. Как правило, этот маркер можно услышать, когда человек начинает выпускать эмоции. Сколько у меня было расставаний с людьми - столько раз я встречал этот маркер, так что безотказно.
Так вот - это местоимения "Наш-Ваш".
Как только вы слышите что-то типа такого: "Да в ВАШЕМ проекте все через жопу" или "ВАША система управления фигня" то, если ничего не сделать - человек уйдет в ближайшее время либо будет отсиживаться, выполняя работу на минимальном уровне.
Если говорить о том, что происходит в голове: в этот момент произошло разотождествление своего Я и вашего общего дела. Психика так делает, чтобы проще принять решение. Если услышали, то у вас осталось совсем мало времени, чтобы расположить человека.
Пользуйтесь))
🟣 Руководителю, чтобы попробовать понять сотрудника, решить его вопрос или хотя бы договориться о мягком уходе
🟣 Сотруднику, чтобы не палиться и отсиживаться грамотно 😄😄, ну или попробовать договориться, может вас все таки поймут, если дело вам дорого. Вы же когда-то говорили "Мы" и "Наш", зачем рубить, так ведь?))
5АМ | #управление
Анонсец: Тут Стас наш мега-диз дебютирует в авторстве) Ждите крутую статью в пятницу, поддержите, переживает)) 😝💪🔥
Привет, на связи Стас!
Сегодня поговорим о UI ките.
Вроде все просто, но если посмотреть глубже - это огромная боль дизайнеров и разработчиков.
Для начала предлагаю разобраться что это за зверь такой 🐳 и с чем его едят? (веганы, вегетарианцы, пескетарианцы и т.д., прошу не волноваться - ни одно живое существо не пострадало, наверное.. 🤔).
UI кит часто путают с дизайн-системой.
Дизайн система - это комплексный подход, содержащий всю информацию о проекте: набор стандартов, компоненты, анимация и даже редполитика.
UI кит - набор компонентов, цветов, шрифтов, сеток. Одним словом - то, из чего собирается интерфейс и только интерфейс. Если говорить о крупных проектах со своей дизайн системой, то UI кит есть неотъемлемая часть этой системы.
Так зачем он нужен? Рассмотрим ниже)
5АМ | #разработка
Сегодня поговорим о UI ките.
Вроде все просто, но если посмотреть глубже - это огромная боль дизайнеров и разработчиков.
Для начала предлагаю разобраться что это за зверь такой 🐳 и с чем его едят? (веганы, вегетарианцы, пескетарианцы и т.д., прошу не волноваться - ни одно живое существо не пострадало, наверное.. 🤔).
UI кит часто путают с дизайн-системой.
Дизайн система - это комплексный подход, содержащий всю информацию о проекте: набор стандартов, компоненты, анимация и даже редполитика.
UI кит - набор компонентов, цветов, шрифтов, сеток. Одним словом - то, из чего собирается интерфейс и только интерфейс. Если говорить о крупных проектах со своей дизайн системой, то UI кит есть неотъемлемая часть этой системы.
Так зачем он нужен? Рассмотрим ниже)
5АМ | #разработка
UI кит - это то, что гарантирует согласованность в интерфейсе.
🟣 Экономия времени
Повторяющиеся компоненты: кнопки или большие блоки, стоит отрисовать один раз, и далее использовать в интерфейсе, меняя лишь контент. А в случае правок - достаточно произвести изменения лишь в мастер-компоненте и не придется вручную вносить изменения на каждой странице.
🟣 Согласованность и системность
Хороший совет, который мне дала моя бабушка 🥰: «Не полагайся на свою память - фиксируй на бумаге». Переношу смысл - прописав (отрисовав) все отступы, размеры, цвета и т.д., вам не придется держать все эти значения в голове. В качестве бонуса вы получите чистый и системный дизайн.
🟣 Разработка
Разработчики скажут вам спасибо, что им не пришлось ломать голову над «почему здесь так? а там по другому?» И главное - они смогут увидеть все состояния и поведение элементов и не будут выдумывать что-то свое, о чем дизайнер не подумал.
Ходит слушок, что UI кит нужен только крупным проектам. Он может быть небольшим, но на каждом проекте должен быть хотя-бы базовый набор элементов и состояний. Исключением может быть небольшой лендинг, так сказать, на скорую руку и без планов на расширение.
Какие есть этапы создания кита:
1️⃣Сначала стоит определиться с концептом, накидав главную и пару второстепенных страниц. Покажите максимум деталей, чтобы понять каким будет проект.
2️⃣ Затем цвета, типографика, иконки, сетка и система отступов.
3️⃣ Все слышали про атомарный подход? Если нет - ставьте пальцы вверх, раскроем эту тему в следующей статье. Коротко - дизайн состоит из атомов, молекул, организмов, блоков, страниц. Сейчас затронем первые три.
4️⃣Атомы))
Это кнопки (основные, второстепенные, текстовые, кнопка-иконка) и контролы (чекбоксы, ради баттоны, переключатели, табы, ссылки), а также инпуты и дропдауны.
5️⃣ Далее молекулы - совокупность атомов, например карточка, состоящая из текста, инпутов и кнопок. При работе с ними важно учитывать принцип универсальности и гибкости. Например, если карточка растягивается, то текст должен растягиваться вместе с ней, а кнопки должны передвигаться к левому краю, как это было изначально, а не оставаться где-то в центре. Автолейауты в Figma вам в помощь (еще одна интересная тема и повод поставить палец вверх 😉).
6️⃣ Организмы - совокупность молекул, кэп. Например, таблица, состоящая из молекул - колонок и хедера, а те в свою очередь состоят из атомов - текста, кнопок, тегов, иконок и т.д. Правило гибкости и универсальности здесь также применимо. Это касается ни только расширения, но и замены атомов внутри компонента. Для этого в Figma есть сеты компонентов (даю слово - я не хотел, но это еще одна статейка 🙈).
7️⃣ UI кит - это череда бесконечных итераций. Его всегда нужно дополнять или чистить до тех пор, пока проект в процессе разработки. Это нормально и боятся этого не стоит. Но чем больше вы предусмотрите на начальном этапе, тем меньше времени у вас будет уходить в итоге.
8️⃣ Передача в разработку. Необходимо правильно называть компоненты и стили. У каждого компонента есть свое название, которое используется дизайнерами и разработчикам.
Если вам повезло работать в продуктовой команде, то всегда можно договориться на берегу и определиться с терминологией - «дропдаун» это или «выпадашка» 🤷. Но всё же рекомендую называть элементы по-английски. Разработчики используют в коде англоязычные названия, поэтому так будет проще всем вам.
Не забывайте про комментарии с описанием того или иного компонента. Экономьте время и нервы друг друга 🙌.
🎯 Резюмируем:
✅ Любому, даже небольшому проекту нужен UI кит и чем раньше об этом позаботиться, тем лучше будет в конечном итоге.
✅ Всё, что повторяется больше одного раза - это компонент. Чем больше компонентов - тем меньше затраченного времени, сил и нервов.
✅ Гибкость и универсальность - главные составляющие правильного компонента.
P.S. Если интересен разбор самых распространенных компонентов UI кита, их состояния, а также настройка стилей ставьте реакцию 🔥, а я накидаю статью или даже цикл статей на эту тему.
5АМ | #разработка
🟣 Экономия времени
Повторяющиеся компоненты: кнопки или большие блоки, стоит отрисовать один раз, и далее использовать в интерфейсе, меняя лишь контент. А в случае правок - достаточно произвести изменения лишь в мастер-компоненте и не придется вручную вносить изменения на каждой странице.
🟣 Согласованность и системность
Хороший совет, который мне дала моя бабушка 🥰: «Не полагайся на свою память - фиксируй на бумаге». Переношу смысл - прописав (отрисовав) все отступы, размеры, цвета и т.д., вам не придется держать все эти значения в голове. В качестве бонуса вы получите чистый и системный дизайн.
🟣 Разработка
Разработчики скажут вам спасибо, что им не пришлось ломать голову над «почему здесь так? а там по другому?» И главное - они смогут увидеть все состояния и поведение элементов и не будут выдумывать что-то свое, о чем дизайнер не подумал.
Ходит слушок, что UI кит нужен только крупным проектам. Он может быть небольшим, но на каждом проекте должен быть хотя-бы базовый набор элементов и состояний. Исключением может быть небольшой лендинг, так сказать, на скорую руку и без планов на расширение.
Какие есть этапы создания кита:
1️⃣Сначала стоит определиться с концептом, накидав главную и пару второстепенных страниц. Покажите максимум деталей, чтобы понять каким будет проект.
2️⃣ Затем цвета, типографика, иконки, сетка и система отступов.
3️⃣ Все слышали про атомарный подход? Если нет - ставьте пальцы вверх, раскроем эту тему в следующей статье. Коротко - дизайн состоит из атомов, молекул, организмов, блоков, страниц. Сейчас затронем первые три.
4️⃣Атомы))
Это кнопки (основные, второстепенные, текстовые, кнопка-иконка) и контролы (чекбоксы, ради баттоны, переключатели, табы, ссылки), а также инпуты и дропдауны.
5️⃣ Далее молекулы - совокупность атомов, например карточка, состоящая из текста, инпутов и кнопок. При работе с ними важно учитывать принцип универсальности и гибкости. Например, если карточка растягивается, то текст должен растягиваться вместе с ней, а кнопки должны передвигаться к левому краю, как это было изначально, а не оставаться где-то в центре. Автолейауты в Figma вам в помощь (еще одна интересная тема и повод поставить палец вверх 😉).
6️⃣ Организмы - совокупность молекул, кэп. Например, таблица, состоящая из молекул - колонок и хедера, а те в свою очередь состоят из атомов - текста, кнопок, тегов, иконок и т.д. Правило гибкости и универсальности здесь также применимо. Это касается ни только расширения, но и замены атомов внутри компонента. Для этого в Figma есть сеты компонентов (даю слово - я не хотел, но это еще одна статейка 🙈).
7️⃣ UI кит - это череда бесконечных итераций. Его всегда нужно дополнять или чистить до тех пор, пока проект в процессе разработки. Это нормально и боятся этого не стоит. Но чем больше вы предусмотрите на начальном этапе, тем меньше времени у вас будет уходить в итоге.
8️⃣ Передача в разработку. Необходимо правильно называть компоненты и стили. У каждого компонента есть свое название, которое используется дизайнерами и разработчикам.
Если вам повезло работать в продуктовой команде, то всегда можно договориться на берегу и определиться с терминологией - «дропдаун» это или «выпадашка» 🤷. Но всё же рекомендую называть элементы по-английски. Разработчики используют в коде англоязычные названия, поэтому так будет проще всем вам.
Не забывайте про комментарии с описанием того или иного компонента. Экономьте время и нервы друг друга 🙌.
🎯 Резюмируем:
✅ Любому, даже небольшому проекту нужен UI кит и чем раньше об этом позаботиться, тем лучше будет в конечном итоге.
✅ Всё, что повторяется больше одного раза - это компонент. Чем больше компонентов - тем меньше затраченного времени, сил и нервов.
✅ Гибкость и универсальность - главные составляющие правильного компонента.
P.S. Если интересен разбор самых распространенных компонентов UI кита, их состояния, а также настройка стилей ставьте реакцию 🔥, а я накидаю статью или даже цикл статей на эту тему.
5АМ | #разработка
Выхода нет
Вот возникла тяжелая проблема. Проблема - мраморная плита. Бах, придавила. Вот ты под ней. Возишься, пытаешься встать по удобнее, переносишь вес с ноги на ногу, как поднять, как скинуть, на корячках, взять на жим, попытки-попытки.
Самое простое и не верное - это забить. Ведь, мраморная плита может быть не одна. Мы же говорим про ментальным мир, а в голове много я, много ролей и у каждой роли может быть своя мраморная плита.
🟣На самом деле решение есть всегда - мы просто не согласны с его ценой
Что тогда делать. Ментальный трюк - успокоиться. Так как проблема в голове, то и делать там можно все что угодно. Как в матрице: "Помни, ложки не существует, Нео")) В голове веса нет, можно просто вылезти из под плиты и посмотреть на неё. Походить с разных сторон с деловитым, надменным видом, поправляя моноколь на глазу))
Нужна смелость успокоится и выскочить, чтобы изучить со стороны эту плиту. Нужно знать врага в лицо. Найти слабые точки, но найти их можно только со стороны.
Слабая точка - что это? Это цена. Какая цена? В разных точках этой плиты есть разные трещины. Можно долбить в плоскости до опупения, а можно найти большую трещину и одним ударом расколоть.
Цена. Сколько стоит решение в максимальном значении. Сотни тысяч рублей. Десятки людей. Сотни часов рабочего времени. Отлично. А как можно снизить, а важно ли это сейчас? И вот плита начала трескаться. Расщепляй и распараллеливай
Примеры в кружке ниже 🔽
5АМ | #предпринимательство
Вот возникла тяжелая проблема. Проблема - мраморная плита. Бах, придавила. Вот ты под ней. Возишься, пытаешься встать по удобнее, переносишь вес с ноги на ногу, как поднять, как скинуть, на корячках, взять на жим, попытки-попытки.
Самое простое и не верное - это забить. Ведь, мраморная плита может быть не одна. Мы же говорим про ментальным мир, а в голове много я, много ролей и у каждой роли может быть своя мраморная плита.
🟣На самом деле решение есть всегда - мы просто не согласны с его ценой
Что тогда делать. Ментальный трюк - успокоиться. Так как проблема в голове, то и делать там можно все что угодно. Как в матрице: "Помни, ложки не существует, Нео")) В голове веса нет, можно просто вылезти из под плиты и посмотреть на неё. Походить с разных сторон с деловитым, надменным видом, поправляя моноколь на глазу))
Нужна смелость успокоится и выскочить, чтобы изучить со стороны эту плиту. Нужно знать врага в лицо. Найти слабые точки, но найти их можно только со стороны.
Слабая точка - что это? Это цена. Какая цена? В разных точках этой плиты есть разные трещины. Можно долбить в плоскости до опупения, а можно найти большую трещину и одним ударом расколоть.
Цена. Сколько стоит решение в максимальном значении. Сотни тысяч рублей. Десятки людей. Сотни часов рабочего времени. Отлично. А как можно снизить, а важно ли это сейчас? И вот плита начала трескаться. Расщепляй и распараллеливай
Примеры в кружке ниже 🔽
5АМ | #предпринимательство
Читать гениальность
Хочу поделиться одним навыком, который дает дополнительные спектры радости от жизни.
Раньше люди чаще ходили на балет, на концерты классической музыки, в театр, на выставки. Сейчас это менее популярно. Суть в том, чтобы получить кайф от балета или хора нужно всечь в сложность навыков, которые нужны, чтобы достигнуть таких высот. В прямом смысле нужно научиться читать гениальность.
И когда вы понимаете почему ход гроссмейстера - это искусство, почему именно эта неберущаяся нота - гениальность, то вы жаждите искать это во всем)
Можно читать гениальность в композиции UI дизайнера, можно увидеть изящность модели базы данных, можно увидеть гениальность управленческого решения, можно увидеть гениальность в переговорах, можно видеть гениальность в умении любить. Это тонкие ощущения.
Если вы это видите, наблюдаете - это красота и это невероятный кайф) Кайф работать с гениями!
5АМ | #философия
Хочу поделиться одним навыком, который дает дополнительные спектры радости от жизни.
Раньше люди чаще ходили на балет, на концерты классической музыки, в театр, на выставки. Сейчас это менее популярно. Суть в том, чтобы получить кайф от балета или хора нужно всечь в сложность навыков, которые нужны, чтобы достигнуть таких высот. В прямом смысле нужно научиться читать гениальность.
И когда вы понимаете почему ход гроссмейстера - это искусство, почему именно эта неберущаяся нота - гениальность, то вы жаждите искать это во всем)
Можно читать гениальность в композиции UI дизайнера, можно увидеть изящность модели базы данных, можно увидеть гениальность управленческого решения, можно увидеть гениальность в переговорах, можно видеть гениальность в умении любить. Это тонкие ощущения.
Если вы это видите, наблюдаете - это красота и это невероятный кайф) Кайф работать с гениями!
5АМ | #философия
Клим в 5 утра
Video message
С заботой о вас ❤️❤️ И всех с праздником))
Ребят, новость - со следующей недели ввожу три рубрики.
Я пролистывал канал на выходных и понял, что у меня перекос постов с глубокими размышлениями, с темами, которые лично проходят глубоко через меня. По сути, если вы читаете, то вы видите меня насквозь.
Я поспрашивал у читателей канала и понимаю, что не многим это интересно и важно.
Поэтому ввожу три раздела: light, medium, deep)) Почти как прожарка мяса😄
🟣 Light - это темы-рекомендации в ИТ области: разработка, управление, бизнес, маркетинг и просто легкие размышления. Подойдут как для новичков, так и почитать вечерком без напряга, все понятия разжевываются. Их в канале теперь будет 50%.
🟣 Medium - это темы с погружением в конкретные темы, понятия нужно знать и понимать. В этой категории будем чуть уходить от книжных понятий, но опираться на них. Таких будет 30% постов.
🟣 Deep - это мои размышления, мое видение, сок и опыт, сугубо личное представление. 10% от всех постов.
Add - я сделал этот канал, чтобы продвигать Lokeo, находить ребят в команду и единомышленников (кстати у нас на март аж 4 позиции). Буду делать это максимально интересно. 10%
Поставлю эти теги на старые посты, чтобы можно было искать, и обновлю закреп)
5АМ х Lokeo
Я пролистывал канал на выходных и понял, что у меня перекос постов с глубокими размышлениями, с темами, которые лично проходят глубоко через меня. По сути, если вы читаете, то вы видите меня насквозь.
Я поспрашивал у читателей канала и понимаю, что не многим это интересно и важно.
Поэтому ввожу три раздела: light, medium, deep)) Почти как прожарка мяса😄
Add - я сделал этот канал, чтобы продвигать Lokeo, находить ребят в команду и единомышленников (кстати у нас на март аж 4 позиции). Буду делать это максимально интересно. 10%
Поставлю эти теги на старые посты, чтобы можно было искать, и обновлю закреп)
5АМ х Lokeo
Please open Telegram to view this post
VIEW IN TELEGRAM
Вопрос к посту выше: какую рубрику интересно читать?
Anonymous Poll
27%
Light
40%
Medium
42%
Deep
33%
Про Lokeo и загородку
Клим в 5 утра
Вопрос к посту выше: какую рубрику интересно читать?
Демонстрирую вам "ошибку выжившего"😄
Как раз те, кто читают меня на 3-4 день не читают глубоко, поэтому и такие результаты)) Спасибо за голоса🙌
Сегодня вечером пост light))
Как раз те, кто читают меня на 3-4 день не читают глубоко, поэтому и такие результаты)) Спасибо за голоса🙌
Сегодня вечером пост light))
Продуктовая команда разработки
Наш первый пост из категории #light.
Мы уже состоявшаяся команда, но так было не всегда. Мы с Серегой прошли все: от "нас двоих хватит" до "давай чтобы было многа-многа людей".
Так кто нужен?
🟣 Owner - собственник стартапа, выполняет функции визионера, распределителя приоритетов, отвечает за связь с клиентом. Он тянет первые продажи и маркетинг, взаимодействует с инвесторами. Главный архитектор с точки зрения бизнеса и пользователей. Он и product manager и product owner и seller и product marketing manager и просто хороший человек, который на всех орёт))
🟣 CTO - архитектор backend-а и баз данных, главный за программную логику приложения, обработку данных. Как правило сособственник компании. Без него никуда)
🟣 BA/SA - бизнес аналитик / системный аналитик. Та, роль, которая структурировано переводит мешанину видения и архитектуры этих двух человек на понятный остальным язык требований.
🟣 Product designer - свяжет предыдущих трех в единую архитектуру продукта с точки зрения сценариев пользователей. Заложит карту точек входа, глобальный и локальный UX приложения.
🟣 Project manager - руководитель проектов, следит за исполнением задачек, ставит таски, организует и коннектит, чтобы все было во время.
🟣 UX/UI Designer - рисует дизайн: UI-kit, макеты, прототипы для фронтов.
🟣 Middle Backend developer - разрабатывает возможности серверной логики, помогает CTO.
🟣 Senior Frontend (web) developer - разрабатывает архитектуру сайта, создает самые тяжелые возможности приложения.
🟣 Middle Frontend (web) developer - создает возможности сайта, разгружает сеньора.
🟣 Senior Frontend (mobile) developer - разрабатывает архитектуру мобильного приложения, создает самые тяжелые возможности приложения.
🟣 Middle Frontend (mobile) developer - создает возможности приложения, разгружает сеньора.
🟣 QA-инженер - тестирует всё это безобразие, отвечает за то, чтобы все поставлялось без багов и чётенько.
Было бы неплохо баристу и массажиста еще, но это жирно😄
5АМ | #разработка
Наш первый пост из категории #light.
Мы уже состоявшаяся команда, но так было не всегда. Мы с Серегой прошли все: от "нас двоих хватит" до "давай чтобы было многа-многа людей".
Так кто нужен?
Было бы неплохо баристу и массажиста еще, но это жирно😄
5АМ | #разработка
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM