Что такое атомный дизайн?
Думаю, вы слышали об этой методологии, которая делает программистов фронт-энда (мобильного и веб-программирования) почти супермощными. Atomic Design Брэда Фроста — это действительно очень хорошая архитектура и модель для создания сложных систем и устранения «боилрплейта», который мы часто видим, когда речь идет о том, чтобы привнести простоту в переднюю часть.
Цель — сделать нас более эффективными, чтобы мы могли сосредоточиться на главном. Мы должны стандартизировать то, что должно быть стандартизировано.
Примеры
Я работаю в среде с такой методологией и очень рекомендую ее. Компоненциализация, помимо полезности, при серьезном подходе может быть приятной и высокоэффективной, наличие человека, который активно заботится о компонентах проекта, может изменить производительность. В этой статье я не только расскажу, но и покажу примеры применения этой методологии. Чтобы узнать больше, всегда обращайтесь к первоисточнику, Брэд Фрост написал книгу в 2016 году, и она чрезвычайно современна. Давайте перейдем к коду, для начала я расскажу о коде на swift, который чрезвычайно прост, но в то же время содержит суть методологии.
Следующий код вдохновлен твитом, который я видел, где я обнаружил, что Ui создан очень красивым с таким небольшим количеством кода. Удивительный iOS-разработчик по имени @tgrapperon сделал вот это
Оригинал твита таков:
— Томас Грапперон (@tgrapperon)
Томас Грапперон@tgrapperonPSA: Если вы хотите получить «автоматическую» вибрацию при установке `.foregroundStyle` в `.secondary` над `Material` в SwiftUI, вам *необходимо* использовать новые модификаторы `.background` из iOS 15 для рисования фона.
В противном случае вы получите только ровный цвет.
#SwiftUI01:28 AM — 17 Feb 2022
func glassText(text: String) -> some View {
Text(text)
.foregroundStyle(.secondary)
.padding()
.background(
.regularMaterial,
in: RoundedRectangle(
cornerRadius: 11,
style: .continuous
)
)
.shadow(radius: 11)
.padding()
}
// Função que faz tela generica
struct ContentView: View {
var body: some View {
ZStack {
HStack {
glassText(text: "Manda") // uso do texto
glassText(text: "Bala") // uso do texto
}
.font(.largeTitle.weight(.black))
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(
LinearGradient(colors: [.pink, .yellow],
startPoint: .topLeading,
endPoint: .bottomTrailing
),
ignoresSafeAreaEdges: .all
)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Простой пример атомной конструкции
Результат в виде пользовательского интерфейса
Вместо того чтобы каждый раз настраивать, как должен выглядеть текст в моей кодовой базе, я должен иметь его как компонент по умолчанию и использовать его как можно проще, как функцию. Единственная работа, которую необходимо выполнить, — это настроить и создать его в первый раз.
Сложность ?
Все можно компоновать, даже целые модули, есть поток, который повторяется в системе? Сделайте его компонентом/классом/функцией и просто вызовите его, и пусть он делает свою работу. Ваша обязанность — создавать машины, которые работают сами по себе или с минимальными усилиями, вычислительными или человеческими.
class _WelcomePageState extends State<WelcomePage> {
List<Page> pageContent = [
Page("welcome-one.png", "Viaje", "Para as Montanhas",
"Conhecer a natureza além de te dar a sensação de liberdade te fará muito mais feliz como pessoa."),
Page("welcome-two.png", "Viva", "Os seus sonhos",
"Essa experiencia mudará sua vida de formas que nunca antes você sentiu."),
Page("welcome-three.png", "Aprenda", "Sobre as culturas",
"Isso é único e apenas conhecendo outros lugares te darão isso."),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView.builder(
scrollDirection: Axis.vertical,
itemCount: pageContent.length,
itemBuilder: (_, index) {
return AppCarrossel(
bg: pageContent[index].bg,
title: pageContent[index].title,
subtitle: pageContent[index].subtitle,
text: pageContent[index].text,
currentIndex: index,
pagesNumber: pageContent.length,
);
}),
);
}
}
Код со страницы регистрации вымышленного проекта
class AppCarrossel extends StatelessWidget {
String bg;
String title;
String subtitle;
String text;
int pagesNumber;
int currentIndex;
AppCarrossel(
{Key? key,
required this.bg,
required this.title,
required this.subtitle,
required this.text,
required this.pagesNumber,
required this.currentIndex})
: super(key: key);
@override
Widget build(BuildContext context) {
return Container(
width: double.maxFinite,
height: double.maxFinite,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover, image: AssetImage("img/" + bg))),
child: Container(
margin: const EdgeInsets.only(top: 120, left: 20, right: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AppLargeText(text: title),
AppText(text: subtitle, size: 30),
Container(
margin: EdgeInsets.only(top: 20, bottom: 40),
width: 250,
child: AppText(
text: text,
color: AppColors.textColor2,
size: 14,
),
),
ResponsiveButton(
width: 120,
)
],
),
Column(
children: List.generate(pagesNumber, (indexDots) {
return Container(
margin: EdgeInsets.only(bottom: 2),
width: 8,
height: currentIndex == indexDots ? 25 : 8,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: currentIndex == indexDots
? AppColors.mainColor
: AppColors.mainColor.withOpacity(0.8)),
);
}),
)
],
),
),
);
}
}
Компонент страницы «Карусель
Результат
Обратите внимание, что этот компонент, каким бы большим он ни был, получает данные только от «умного» компонента, а затем строит экран. Результат можно увидеть ниже:
— Габриэль Грубба λ (@que_cara_legal)
Габриэль Грубба λ@que_cara_legalучебник + активы от парня на YT, помощь от @wilcorrea , 45 минут и немного гугла было сделано оттуда.
Я так горжусь тобой.11:04 PM — 13 Feb 2022
На кого это направлено?
Это должно помочь нам как программистам, в фокусе этой методологии мы стремимся сделать повседневную работу наших коллег проще и эффективнее, независимо от задачи у него будет что-то почти готовое к использованию, в крайнем случае придется подправить что-то, что уже существует и работает,
Хорошим примером является этот код во flutter, где я компоную страницы, которые будут использоваться в карусели. Когда программист будет использовать этот компонент, ему просто нужно будет следовать уже определенной модели, и все будет работать нормально.
Заключение
Эта методология может стать стандартом, даже не будучи согласованной, использование готовых компонентов в качестве фокуса — отличная практика на переднем крае. Поднятие этого на профессиональный уровень, дисциплина и преданность делу превращают проекты в произведения искусства, при этом кастата стиля влияет на все места, как и положено, и если необходимо применить дополнительный стиль или функциональность, все места этого компонента разделяют эту силу.