AWS Amplify Studio jest nowością od AWS’a, która pozwala połączyć komponenty Figma z bazą danych i wygenerować gotowy kod React. Czy to oznacza, że frontend deweloperzy przestaną być potrzebni? A może te narzędzie to tylko chwyt reklamowy? I czemu AWS zainteresował się narzędziami low-code/no-code. Na to wszystko Aleksander odpowie w swojej prezentacji. I pokaże na żywo jak przejść od Figmy do gotowej aplikacji.

1. Od Figmy do gotowej
aplikacji React
AWS Amplify Studio
Aleksander Patschek

2. Aleksander Patschek
🧑‍💻 Senior Frontend Developer w TSH
✒️Bloguję na fsgeek.pl
📰 Tworzę newsletter webdevnews.pl

3. Agenda
Lowcode/nocode
AWS Amplify
Live Demo
Od Figmy do aplikacji
Podsumowanie i Q&A

4. Lowcode/nocode

5. Narzędzia nocode/lowcode
pozwalają tworzyć systemy przy
braku/małej ilości wiedzy
programistycznej

7. Zalety lowcode/nocode
Szybkość
Oszczędność
Time to market

8. Czy lowcode/nocode
zagraża programistom?

10. Co zyskamy na lowcode/nocode?
Ciekawsze projekty
Mniej projektów na wczoraj
Bardziej zaawansowane narzędzia
Wypłacalni klienci

11. AWS Amplify

12. Co to jest AWS Amplify?

13. AWS Amplify is a set of purpose-built
tools and features that lets frontend
web and mobile developers quickly and
easily build full-stack applications on
AWS

14. Co się składa na AWS Amplify?
Authentication
DataStore
API
Functions
Storage

15. Co się składa na AWS Amplify? c.d
Amplify Hosting
Amplify CLI
Amplify Studio
Amplify UI components

16. AWS Amplify Studio

18. Etap 1. Figma

19. Na co zawracać uwagę?
AWS Amplify UI Kit
Poprawne budowanie
komponentów
Nazewnictwo

20. Amplify UI Kit

21. Na co zawracać uwagę?
AWS Amplify UI Kit
Poprawne budowanie
komponentów
Nazewnictwo

22. Komponent

23. Etap 2. AWS

24. Proces dodawania komponentów
Importowanie komponentów
Konfigurowanie komponentów
Tworzenie kolekcji

25. Podpinanie danych do komponentu

26. Etap 3. React

27. Na co zawracać uwagę?
Komponenty JSX
Nie usuwa starych
komponentów
Poprawny setup całego
projektu

28. Instalacja zależności
npm install -g @aws-amplify/cli
npm install aws-amplify
@aws-amplify/ui-react

29. Pobranie komponentów amplify
amplify pull --appId <appId> --envName <envName>
(Potrzebujesz także Access Key do AWS'a)

30. Struktura katalogów

31. Poprawna konfiguracja

32. Przykładowy komponent

33. Czas na demo🔥

35. Wnioski

36. w przypadku gotowych designów
można bardzo szybko złożyć aplikację
edytowanie komponentów w figmie
nie usuwa starych połączeń z danymi
tworzy pliki z typami
Co jest fajne w AWS Amplify Studio?

37. Co jest fajne w AWS Amplify Studio?
da się dodać do istniejącego projektu
możliwości nadpisywania styli i
ustawień wygenerowanych
komponentów
możliwość korzystania z własnego API

38. trzeba ogarniać trochę figmę
konieczność korzystania z Amplify UI
generuje komponenty *.jsx
nie usuwa starych komponentów z
kodu
Minusy AWS Amplify Studio?

39. Czy warto wypróbować?

41. Pytania?