#LaravelPolandMeetup #17 online Temat: Wszystko o Laravel Livewire Autor: Mateusz Lencki

1. Laravel Livewire

2. Mateusz Lencki
Programista PHP w Blumilk
mateusz.lencki@blumilk.pl

3. Laravel Livewire - co to jest?
Według dokumentacji:
“Livewire is a full-stack framework for Laravel that
makes building dynamic interfaces simple, without
leaving the comfort of Laravel.”

4. Livewire - dynamiczny frontend bez JS

5. Jak to działa?

6. Livewire API

7. Dziwne? Głupie? Ale inni też tak robią!

8. Instalacja Composerem

9. Dodawanie JS i CSS do layoutu głównego

10. Komponenty

11. Komponenty - na co się składają?
Dane i zachowania
Klasy PHP
Wygląd
Szablony Blade

12. Tworzenie komponentu

13. Tworzenie komponentu

14. Tworzenie komponentu

15. Routing

16. Renderowanie komponentu
Znaczniki:
Dyrektywy Blade:

17. Properties
czyli
dane komponentu

18. Properties

19. Properties

20. Uwaga!

21. Uwaga!
Nazwy zdefiniowanych pól komponentu nie mogą
kolidować z nazwami zastrzeżonymi dla Livewire
($rules, $messages…)

22. Uwaga!
Dane przechowywane w polach o modyfikatorze dostępu
public są widoczne w podglądzie źródła strony.
Nie powinno się w nich przechowywać danych
wrażliwych.

23. Uwaga!
Pola o modyfikatorze public muszą być Javascript-
Friendly.
Mogą mieć tylko i wyłącznie następujące typy:
Stringable
Collection
DateTime
Model
EloquentCollection

24. Uwaga!
Pola z modyfikatorami dostępu protected i private nie
utrzymują swego stanu pomiędzy aktualizacjami stanu
komponentu.
Nie powinny być one wykorzystywane do
przechowywania stanu komponentu.

25. Data binding

26. Data binding
Debouncing input

27. Data binding
Lazy updating

28. Data binding
Deferred updating

29. Computed properties

30. Actions
czyli
zachowanie komponentu

31. Actions

32. Actions

33. Events
czyli
komunikacja komponentów

34. Events
Komponenty Livewire mogą komunikować się ze sobą za
pomocą globalnego systemu zdarzeń.
Tak długo jak komponenty znajdują się na tej samej
stronie, tak długo będą one w stanie się ze sobą
komunikować za pomocą eventów i listenerów.

35. Wyzwalanie zdarzeń
Z poziomu szablonu:
Z poziomu obiektu komponentu:

36. Nasłuchiwanie zdarzeń

37. Scoping events
Do komponentu “rodzica”:
Do konkretnego komponentu:

38. Scoping events
Do samego siebie:

39. Cykl życia komponentu

40. Lifecycle Hooks

42. Zagnieżdżanie komponentów

43. Walidacja formularzy

44. Usprawnienia UI
Loading states

45. Usprawnienia UI
Polling

46. Usprawnienia UI
Offline state

47. Usprawnienia UI
Dirty states

48. Integracja z Javascript

49. Alpine.js

50. Alpine.js

51. Alpine.js

52. Alpine.js - instalacja
CDN:
NPM:

53. Inline scripts

54. Inline scripts

55. Testowanie

57. Przemyślenia na koniec

58. Przemyślenia
● Pomocne, gdy nie mamy chęci, czasu, pieniędzy na korzystanie z
bardziej zaawansowanego frontendu w JS

59. Przemyślenia
● Pomocne, gdy nie mamy chęci, czasu, pieniędzy na korzystanie z
bardziej zaawansowanego frontendu w JS
● Trzeba uważać na “stanowe”/bezstanowe komponenty

60. Przemyślenia
● Pomocne, gdy nie mamy chęci, czasu, pieniędzy na korzystanie z
bardziej zaawansowanego frontendu w JS
● Trzeba uważać na “stanowe”/bezstanowe komponenty
● Nieumiejętnie wykorzystany może powodować problemy z
wydajnością

61. Przemyślenia
● Pomocne, gdy nie mamy chęci, czasu, pieniędzy na korzystanie z
bardziej zaawansowanego frontendu w JS
● Trzeba uważać na “stanowe”/bezstanowe komponenty
● Nieumiejętnie wykorzystany może powodować problemy z
wydajnością
● Może powodować nadmiarowe sprzężenia logiki biznesowej z
warstwą prezentacji

62. Przemyślenia
● Pomocne, gdy nie mamy chęci, czasu, pieniędzy na korzystanie z
bardziej zaawansowanego frontendu w JS
● Trzeba uważać na “stanowe”/bezstanowe komponenty
● Nieumiejętnie wykorzystany może powodować problemy z
wydajnością
● Może powodować nadmiarowe sprzężenia logiki biznesowej z
warstwą prezentacji
● A może Inertia.js?

63. Pytania?
mateusz.lencki@blumilk.pl
Mateusz Lencki