React: Wstęp do atomic design

16.8.x

0:00Cześć, skoro już poradziliśmy sobie z naszym storybook'iem, udało nam się go skonfigurować,

0:04udało nam się stworzyć nasze pierwsze story, a nawet dodać do niego

0:08pewne właściwości, które powodują, że możemy wpływać na to jak testery wyglądają,

0:12jak się zachowują. To teraz pora, żeby wyjaśnić po co nam to wszystko właściwie

0:16będzie i tutaj chciałbym zrobić ci takie małe intro, mały

0:20wstęp do atomic design i jest to taki rodzaj podejścia

0:24do projektowania aplikacji, który polega na tym, że rozbijamy

0:29komponenty na takie mniejsze elementy tworzymy pewien rodzaj abstrakcji,

0:33który później pozwoli nam na konstruowanie tych wszystkich interfejsów

0:38w taki sposób, że będzie to dla nas po prostu łatwiejsze, bardziej intuicyjne, a przede

0:42wszystkim ten kod będzie dużo łatwiejszy do utrzymania i teraz w dużym

0:46skrócie na czym polega atomic design, w naszej aplikacji nie będzie to aż tak skomplikowane,

0:50ponieważ tych komponentów nie ma zbyt wiele, ale to jest taki dobry

0:54moment, żeby to wszystko pokazać, żeby po prostu sobie zacząć z tym tematem pracować,

0:58więc atomic design polega na tym, że wszystkie elementy na

1:03naszej stronie rozbijamy na tak zwane atomy, molekuły organizmy

1:07template'y i pages, czyli w naszym przypadku będzie to view,

1:11views będą zawierać template'y, które z kolei zawierają organizmy, właśnie

1:15molekuły ja tam w drugą stronę to tłumacząc, więc czym tak naprawdę jest

1:19atom, o co tutaj chodzi i tutaj autor, czyli Brad Frost, możesz

1:23przeczytać sobie cały ten artykuł na jego blogu, sugeruje że atomami

1:27są najmniejsze najbardziej takie elementarne części naszego interfejsu,

1:33więc tutaj na przykład może być to label od input'u, może być to sam input

1:37albo sam button, więc takie naprawdę pojedyncze części, które

1:42właśnie tworzą te atomy i to co w przyrodzie dzieje się

1:46z atomammi i to samo dzieje się w Atomic Design'ie, to że te atomy się ze

1:50sobą łączą tworząc molekuły i tak jest na przykład w tym przypadku gdzie

1:543 pojedyncze atomy tworzą nam molekułę w postaci takiego search

1:59form'a i to już jest taki element interfejsu, który spokojnie

2:03mógłby być takim indywidualnym elementem tego

2:07interfejsu, samodzielnym gdzieś zawieszonym w przestrzeni naszej strony, więc

2:11jest to już taka bardziej samodzielna część, natomiast molekuły

2:15mogą się też łączyć dużo większe rzeczy, czyli w organizmy i takim

2:20organizmem może być na przykład nawigacja, która zawiera molekuły

2:25menu, atom logo i molekuły

2:29naszego search form'a, więc jak widzisz organizmy mogą

2:33składać się z wielu molekuł i wielu atomów później mam jeszcze template'y,

2:37które składają się z wielu organizmów z wielu molekuł i tak

2:42dalej, tworząc właśnie już takie kompletne interfejsy i

2:46te template'y, które później są propagowane przez dane, wyświetlają

2:50nam się w taki sposób, że te dane po prostu prezentują w ładny sposób, więc

2:55Atomic Design to nic innego, jak taka metodyka pracy trochę jak

2:59na nasz Bem, który ma ten Block element modifier,

3:03czyli też takie rozgraniczenie na 3 takie elementy, tak tutaj

3:08mamy właśnie atomy molekuły organizmy, template'y i views, więc

3:12będziemy tego używać w naszym projekcie. Zaraz ci pokażę na design'ach

3:16jak możemy się do tego zastosować. Ptrząc sobie na razie tutaj na tą

3:20taką legendę powiedzmy, możemy zauważyć, że mamy tutaj kilka atomów, między

3:24innymi logo, mamy ikony

3:29mamy input'y, mamy button'y, które już mamy stworzone, mamy button

3:33trochę inny z ikoną, mamy header'y w dwóch

3:37rozmiarach, mamy paragrafy, mamy dodatkowe informacje w postaci

3:41takich napisów wyszarzonych, więc to co mamy tutaj,

3:45to są powiedz mi nasze atomy. To

3:49natomiast będzie już organizm składający się z molekuł, ponieważ

3:54na przykład to może być molekuła, te

3:59dwa napisy, to może być molekułą, oczywiście

4:04to wszystko nam wyjdzie w praniu i teraz nie ma co tego aż tak bardzo planować. Natomiast chce

4:08ci pokazać jak w praktycznym przykładzie możemy sobie zastosować

4:12te podejścia Atomic Design. To oczywiście będą atomy, natomiast

4:17sidebar będzie już organizmem, który będzie po prostu takim

4:21indywidualnym pojedynczym samodzielnym elementem naszego interfejsu

4:26poza tym sidebar sam w sumie będzie składał się z atomu logo z molekuły

4:31tych ikon tutaj menu i z atomu logout

4:35czy też login tego, tego button'a na dole. Oczywiście

4:39tych organizmów i template'ów i molekuł i atom'ów będzie jeszcze

4:43trochę więcej w naszym interfejsie, ale to wszystko sobie

4:47przepracujemy lekcja po lekcji tworząc nasz interfejs,

4:51tworząc wszystkiego elementy, także to tyle na razie jeśli chodzi o taki krótki wstęp

4:55do Atomic Design. Mam nadzieję, że ci się to podoba, a my widzimy się już w następnej

4:59lekcji.