Wszystko o Laravel Livewire

Wszystko o Laravel Livewire

• 1.
  Laravel Livewire
• 2.
  Mateusz Lencki Programista PHPw 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 - dynamicznyfrontend bez JS
• 5.
  Jak to działa?
• 6.
  Livewire API
• 7.
  Dziwne? Głupie? Aleinni też tak robią!
• 8.
  Instalacja Composerem
• 9.
  Dodawanie JS iCSS do layoutu głównego
• 10.
  Komponenty
• 11.
  Komponenty - naco 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ólkomponentu nie mogą kolidować z nazwami zastrzeżonymi dla Livewire ($rules, $messages…)
• 22.
  Uwaga! Dane przechowywane wpolach 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 modyfikatorzepublic muszą być Javascript- Friendly. Mogą mieć tylko i wyłącznie następujące typy: Stringable Collection DateTime Model EloquentCollection
• 24.
  Uwaga! Pola z modyfikatoramidostę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 poziomuszablonu: Z poziomu obiektu komponentu:
• 36.
  Nasłuchiwanie zdarzeń
• 37.
  Scoping events Do komponentu“rodzica”: Do konkretnego komponentu:
• 38.
  Scoping events Do samegosiebie:
• 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, gdynie mamy chęci, czasu, pieniędzy na korzystanie z bardziej zaawansowanego frontendu w JS
• 59.
  Przemyślenia ● Pomocne, gdynie 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, gdynie 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, gdynie 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, gdynie 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