Wypuszczanie Produktów i Startupów na Rynek: Kodowanie aplikacji i design system

0:00Teraz chciałbym pokazać Ci od strony technicznej, jak wygląda kodowanie takiego

0:04narzędzia, przynajmniej w naszym wydaniu.

0:06Powiedziałem Ci już jak tworzymy UI, przynajmniej oczywiście nie wchodziłem w

0:09super szczegóły, ale chciałem żebyś miał tą świadomość tego jak się to robi, jaki

0:13jest nowoczesny sposób, czego wymagać, kogo zatrudnić, w jakim narzędziu.

0:17Mam nadzieję, że masz taki bardzo ogólne, ale jednak pojęcie o tym jak to można

0:22zrobić i jak to nowocześnie powinniśmy robić.

0:24I jeśli chodzi o firmę, to w samej firmie znajduje się też tryb deweloperski.

0:29Możemy komentować sobie rzeczy tak, jak pokazałem i w pewnym momencie oznaczyć

0:33nasze ekrany, że są gotowe do developmentu.

0:36Tutaj mamy taką małą ikonkę.

0:38Natomiast developer, który korzysta z firmy możesz sobie przejść do trybu dev

0:42mode tutaj i ma tutaj wszystkie informacje o każdym z elementów.

0:47Zobacz, że bardzo łatwo po zaznaczeniu elementu widzi wszystkie odległości,

0:51odstępy, nawet ma gotowy kod, który możesz sobie tutaj zobaczyć i już niedługo będzie

0:57tutaj nawet kod powiązany z komponentami w Figmie.

1:00To znaczy, że cała nasza biblioteka Teka będzie mogła mieć komponenty.

1:04Tutaj jest ta biblioteka komponentów, które mają już jakiś kod.

1:09I za moment w firmie będziemy mogli, tak jak pokazywałem Ci przełączanie pomiędzy

1:13tymi różnymi wariantami, na przykład tego komponentu, gdzie mogliśmy go

1:16rozwinąć czy pokazać jakiś tooltip.

1:18Tak samo tutaj będziemy w kodzie mieli te wszystkie zmiany odzwierciedlone.

1:22W związku z tym można powiedzieć, że firma bardzo już teraz zbliżona jest do

1:27developmentu i wdrażanie tego typu aplikacji, layoutów czy czy UI po prostu

1:32jest dużo łatwiejsze dzięki temu, że deweloperzy właśnie

1:35korzystają z tego devMode.

1:36My tak dokładnie pracowaliśmy.

1:38W momencie gdy dany ekran był skończony, czyli najpierw był zaprojektowany, później

1:42sprawdzony przeze mnie, przetłumaczony, zrobione te tłumaczenia na kilka

1:45języków, poprawione z pomocą AI.

1:47Wtedy mogliśmy oznaczyć taki ekran, że jest gotowy do developmentu.

1:52Deweloper otrzymywał odpowiednie powiadomienie, link do takiego ekranu, a

1:55następnie wchodził sobie w ten dev mode i przechodził kolejno.

1:58Po każdym z elementów.

2:00Patrzył jaki komponent jest tu do wykorzystania.

2:02Jeśli już miał ten komponent zakodowany, to mógł go używać, a jeśli nie, to po

2:07prostu dodawał sobie nowy komponent zgodnie z tymi wytycznymi, które są tutaj.

2:10Jest tutaj jeszcze kilka przydatnych narzędzi.

2:12Są oczywiście komentarze, jest narzędzie linijki, którym można mierzyć

2:16różne rzeczy dosyć dokładnie.

2:17No i przede wszystkim są tutaj informacje o tym, że na przykład dany komponent

2:21korzysta z takiego takiego i takiego koloru, który jest już

2:23w naszej bibliotece.

2:25No i co ważne, cała ta biblioteka jest oczywiście odwzorowana w postaci

2:29komponentów i w postaci takiego design systemu, który służy już

2:34kodowaniu samego frontendu.

2:36My akurat po stronie frontendu pracujemy w View i korzystamy też z tej windy, aby

2:40instalować różne rzeczy, ale to nie jest aż tak istotne.

2:42Te frameworki oczywiście ewoluują, zmieniają się.

2:45Nie mogę Ci doradzić, że React czy View jest akurat lepsze.

2:49Jeśli znajdziesz dobrą osobę, która pracuje w danej technologii, to

2:51po prostu trzeba jej z tym zaufać.

2:54Natomiast oczywiście warto też, no nie korzystać z takich frameworków,

2:58które są totalnie egzotyczne i na przykład ich wsparcie będzie zależało

3:03od jednej osoby, która może odejść z naszego zespołu.

3:05Więc warto jest wybierać trochę bardziej popularne frameworki i z nich korzystać.

3:09My przygotowaliśmy sobie taką bibliotekę komponentów, która już jest.

3:15To już są zakodowane komponenty i w tych komponentach te komponenty już są.

3:21Tutaj po prostu w przeglądarce dostępne.

3:23Można sobie taki komponent zaznaczyć, skopiować i wkleić bezpośrednio do kodu,

3:29dzięki czemu mamy po prostu gotowe rzeczy, które już można

3:34używać wewnątrz naszej aplikacji.

3:36Są specjalne narzędzia, które służą do utrzymywania takiej bazy komponentów, do

3:42również tworzenia ich rewizji i tak dalej.

3:44Natomiast moim zdaniem, tak jak szanuję te rozwiązania, w

3:48przypadku tego typu projektów, po prostu nie rekomenduję ich używania,

3:52ponieważ jest to zbyt czasochłonne.

3:54Na ogół będzie pracować przy tym jedna czy dwie osoby na samym początku.

3:58Jeśli nie mamy dużego zespołu, nie musimy aż w taki sposób tego utrzymywać, więc my

4:02celowo nie korzystamy z takich narzędzi, a zamiast tego mamy po prostu bardzo proste

4:07w HTML u zakodowane komponenty, które działają, które można bardzo łatwo

4:11skopiować klikając tutaj na tą ikonkę i wkleić po prostu do kodu.

4:16I właśnie w ten sposób pracujemy.

4:19Jedyna rzecz, która jest, którą zrobiliśmy pod spodem, a której nie będę też

4:23szczegółowo tłumaczył, ale powiem Ci, że coś takiego jest możliwe to to, że w

4:27momencie, gdy dany komponent na przykład gdybyśmy zmienili sobie ten komponent z tą

4:33kartą, jeśli dany komponent zmieni się w naszej bibliotece, to mamy odpowiednie

4:38narzędzia, które pozwolą jednym kliknięciem zaktualizować go we wszystkich

4:42miejscach, gdzie używamy tego komponentu w aplikacji i we wszystkich aplikacjach,

4:47bo nasza aplikacja na przykład wisi.

4:48To są osobne, więc generalnie możemy jednym w jednym miejscu utrzymywać całe

4:54źródło prawdy frontendowe i w momencie, gdy to źródło prawdy się trochę zmieni,

4:58możemy delegować te zmiany na wszystkie instancje tego komponentu.

5:03Jeśli zmienilibyśmy wygląd podstawowego buttona, możemy jednym kliknięciem zmienić

5:09dziesiątki, setki czy tysiące buttonów, które są we wszystkich naszych

5:12aplikacjach, więc działa to bardzo podobnie i analogicznie do tego, co mamy w

5:16firmie, ponieważ tutaj też ta biblioteka działa dokładnie na tej samej zasadzie, że

5:21jeśli cokolwiek zmienimy, mamy tutaj informację o tym, że możemy zaktualizować

5:25ten komponent i on zaktualizuje się wszędzie, we wszystkich

5:28naszych projektach.

5:29Jednak można powiedzieć, że na razie ta biblioteka w Sigmie nie jest

5:33połączona z tą biblioteką frontendową.

5:35Czy to dobrze, czy źle?

5:36W zasadzie trudno powiedzieć.

5:38To duża dyskusja.

5:39Czasem jest to korzystne, czasem jest to niekorzystne.

5:42Lepiej by było oczywiście mieć jedno źródło prawdy, ale też w pewnym sensie

5:45ogranicza nas to, jeśli chodzi o projektowanie nowych rzeczy.

5:48Także my akurat jesteśmy z tym okej, że funkcjonuje to w taki sposób i mówię ci o

5:53tym tylko dlatego, że czasem przyjdzie ktoś, kto ma jakiś

5:57zupełnie inny pomysł na to.

5:59Natomiast moim zdaniem powinniśmy tutaj w tym przypadku akurat korzystać

6:02z tych branżowych standardów.

6:04Powinieneś mieć świadomość tego, że właśnie można to zrobić na tych

6:07komponentach, że one mogą mieć swoje warianty, że może to być połączone i

6:10powiązane, że ten design może być spójny z developmentem i że to wszystko może się

6:15razem łatwo aktualizować dzięki komponentom i dzięki bibliotekom.

6:19No i skoro już to wiesz, to chyba wszystkie ważne rzeczy związane z tym, jak

6:25technicznie podeszliśmy do odświeżania tego naszego produktu przed jego premierą.

6:30Uważam, że jest to bardzo ważna praca do odrobienia.

6:33Zajęło nam to dobre kilka miesięcy tak naprawdę, żeby przygotować się do tego,

6:37ale w tym akurat konkretnym przypadku, gdzie chcemy wydać narzędzie, które będzie

6:42na świecie konkurencyjne, uważam, że jest to warte tego, tego poświęcenia.

6:47No i oczywiście nie dotyczy to jakichś mniejszych

6:51produktów, mikroproduktów, frameworków, szablonów, kursów i innych rzeczy,

6:55które możesz w ten sposób tworzyć.

6:57Jest to bardziej skierowane w kierunku aplikacji czy Sasów, ale być może te

7:02poprzednie lekcje dały Ci też do zrozumienia pewien taki proces myślowy,

7:06który u mnie zachodzi, jak on działa i że staram się, żeby właśnie dopracować

7:12ten To narzędzie przed premierą.

7:14Jest to dla mnie bardzo fajny czas na to, żeby być zmotywowanym i żeby osoby w

7:19zespole też były zmotywowane do tego, żeby wypuścić nową wersję 1.0. Taka,

7:23która jest już z ulepszeniami.

7:25Przeszliśmy więc w związku z tym w tym dziale przez cały proces

7:28audytu i proces koncepcyjny.

7:30Oczywiście w skrócie, ale pokazałem Ci, jak to działa w kontekście projektowania

7:35czy przeprojektowywania wersji, którą obecnie mamy.

7:37Następnie pokazałem Ci, jak to wygląda technicznie.

7:40Narzędzia takie jak Sigma czy FiGM, z których tutaj korzystamy, narzędzia

7:45deweloperskie i to, jak planujemy sobie zadania po to, by wdrażać je w

7:49kolejnych cyklach z pomocą lidera.

7:51To wszystko, co chciałem powiedzieć w tej fazie koncepcyjnej.

7:54Można powiedzieć, że z grubsza wiesz, jak należy podejść do samego produktu

7:58i jego ulepszania przed premierą.

8:00No i będziemy mogli skoncentrować się na tych rzeczach, które już będziemy

8:04wykonywać po to, żeby nasz produkt mógł rosnąć.

8:07Czyli wejdziemy w tą bardziej marketingową,

8:10tą bardziej groove'ową część.

8:11W kolejnej, w kolejnych lekcjach. Także do usłyszenia.