Frontend
Wprowadzenie
Laravel to framework backendowy, który zapewnia wszystkie funkcje potrzebne do tworzenia nowoczesnych aplikacji internetowych, takie jak routing, walidacja, buforowanie, kolejki, przechowywanie plików i wiele innych. Uważamy jednak, że ważne jest, aby oferować programistom piękne, kompleksowe doświadczenie, w tym potężne podejścia do budowania frontendu aplikacji.
Istnieją dwa podstawowe sposoby radzenia sobie z tworzeniem frontendu podczas budowania aplikacji za pomocą Laravel, a to, które podejście wybierzesz, zależy od tego, czy chcesz zbudować swój frontend za pomocą PHP, czy za pomocą frameworków JavaScript, takich jak Vue i React. Poniżej omówimy obie te opcje, abyś mógł podjąć świadomą decyzję dotyczącą najlepszego podejścia do rozwoju frontendu dla swojej aplikacji.
Korzystanie z PHP
PHP & Blade
W przeszłości większość aplikacji PHP renderowała HTML do przeglądarki przy użyciu prostych szablonów HTML przeplatanych instrukcjami PHP echo
, które renderowały dane pobrane z bazy danych podczas żądania:
W Laravel takie podejście do renderowania HTML można nadal osiągnąć za pomocą widoków i Blade. Blade to niezwykle lekki język szablonów, który zapewnia wygodną, krótką składnię do wyświetlania danych, iteracji po danych i nie tylko:
Podczas tworzenia aplikacji w ten sposób, przesyłanie formularzy i inne interakcje na stronie zazwyczaj otrzymują całkowicie nowy dokument HTML z serwera, a cała strona jest ponownie renderowana przez przeglądarkę. Nawet dzisiaj, wiele aplikacji może doskonale nadawać się do tworzenia frontendów w ten sposób przy użyciu prostych szablonów Blade.
Rosnące oczekiwania
Jednak wraz z dojrzewaniem oczekiwań użytkowników dotyczących aplikacji internetowych, wielu programistów odkryło potrzebę budowania bardziej dynamicznych frontendów z interakcjami, które wydają się bardziej dopracowane. W związku z tym niektórzy deweloperzy decydują się na rozpoczęcie tworzenia frontendu aplikacji przy użyciu frameworków JavaScript, takich jak Vue i React.
Inni, woląc pozostać przy języku backendowym, z którym czują się komfortowo, opracowali rozwiązania, które pozwalają na tworzenie nowoczesnych interfejsów użytkownika aplikacji internetowych, przy jednoczesnym wykorzystaniu wybranego języka backendowego. Przykładowo, w ekosystemie Rails, przyczyniło się to do powstania bibliotek takich jak Turbo Hotwire i Stimulus.
W ekosystemie Laravel potrzeba tworzenia nowoczesnych, dynamicznych frontendów przy użyciu głównie PHP doprowadziła do powstania Laravel Livewire i Alpine.js.
Livewire
Laravel Livewire to framework do tworzenia frontendów opartych na Laravel, które są dynamiczne, nowoczesne i żywe, podobnie jak frontendy zbudowane z nowoczesnych frameworków JavaScript, takich jak Vue i React.
Podczas korzystania z Livewire tworzysz „komponenty” Livewire, które renderują dyskretną część interfejsu użytkownika i udostępniają metody i dane, które można wywoływać i wchodzić w interakcje z frontendem aplikacji. Na przykład prosty komponent „Counter” może wyglądać następująco:
Odpowiedni szablon dla licznika byłby napisany w następujący sposób:
Jak widać, Livewire umożliwia pisanie nowych atrybutów HTML, takich jak wire:click
, które łączą frontend i backend aplikacji Laravel. Ponadto można renderować bieżący stan komponentu za pomocą prostych wyrażeń Blade.
Dla wielu osób Livewire zrewolucjonizował rozwój front-endu z Laravelem, pozwalając im pozostać w wygodnym środowisku Laravel podczas tworzenia nowoczesnych, dynamicznych aplikacji internetowych. Zazwyczaj programiści korzystający z Livewire wykorzystują również Alpine.js do „posypywania” JavaScriptem frontendu tylko tam, gdzie jest to potrzebne, na przykład w celu renderowania okna dialogowego.
Jeśli jesteś nowym użytkownikiem Laravel, zalecamy zapoznanie się z podstawowymi zastosowaniami widoków i Blade. Następnie zapoznaj się z oficjalną dokumentacją Laravel Livewire, aby dowiedzieć się, jak przenieść swoją aplikację na wyższy poziom dzięki interaktywnym komponentom Livewire.
Zestawy startowe
Jeśli chcesz zbudować swój frontend przy użyciu PHP i Livewire, możesz skorzystać z naszych zestawów startowych Breeze lub Jetstream, aby szybko rozpocząć tworzenie aplikacji. Oba te zestawy startowe stanowią rusztowanie dla przepływu uwierzytelniania backendu i frontendu aplikacji przy użyciu Blade i Tailwind, dzięki czemu można po prostu rozpocząć tworzenie kolejnego dużego pomysłu.
Korzystanie z Vue / React
Chociaż możliwe jest tworzenie nowoczesnych frontendów przy użyciu Laravel i Livewire, wielu programistów nadal woli wykorzystywać moc frameworków JavaScript, takich jak Vue lub React. Pozwala to deweloperom korzystać z bogatego ekosystemu pakietów JavaScript i narzędzi dostępnych za pośrednictwem NPM.
Jednak bez dodatkowych narzędzi, parowanie Laravel z Vue lub React pozostawiłoby nas z koniecznością rozwiązania wielu skomplikowanych problemów, takich jak routing po stronie klienta, uwodnienie danych i uwierzytelnianie. Routing po stronie klienta jest często upraszczany przy użyciu opiniotwórczych frameworków Vue / React, takich jak Nuxt i Next; jednak nawodnienie danych i uwierzytelnianie pozostają skomplikowanymi i uciążliwymi problemami do rozwiązania podczas parowania frameworka backendowego, takiego jak Laravel, z tymi frameworkami frontendowymi.
Co więcej, deweloperzy są zmuszeni do utrzymywania dwóch oddzielnych repozytoriów kodu i często muszą koordynować konserwację, wydania i wdrożenia w obu repozytoriach. Choć problemy te nie są nie do pokonania, nie uważamy, by był to produktywny lub przyjemny sposób tworzenia aplikacji.
Bezwładność
Na szczęście Laravel oferuje to, co najlepsze z obu światów. Inertia wypełnia lukę między aplikacją Laravel a nowoczesnym frontendem Vue lub React, umożliwiając tworzenie pełnoprawnych, nowoczesnych frontendów przy użyciu Vue lub React, jednocześnie wykorzystując trasy i kontrolery Laravel do routingu, nawadniania danych i uwierzytelniania – wszystko w ramach jednego repozytorium kodu. Dzięki takiemu podejściu można cieszyć się pełną mocą zarówno Laravel, jak i Vue / React bez ograniczania możliwości któregokolwiek z tych narzędzi.
Po zainstalowaniu Inertii w aplikacji Laravel, będziesz pisał trasy i kontrolery jak zwykle. Jednak zamiast zwracać szablon Blade z kontrolera, zwrócisz stronę Inertia:
Strona Inertia odpowiada komponentowi Vue lub React, zazwyczaj przechowywanemu w katalogu resources/js/Pages
aplikacji. Dane przekazane do strony za pośrednictwem metody Inertia::render
zostaną wykorzystane do uwodnienia „rekwizytów” komponentu strony:
Jak widać, Inertia pozwala wykorzystać pełną moc Vue lub React podczas tworzenia frontendu, zapewniając jednocześnie lekki pomost między backendem opartym na Laravel a frontendem opartym na JavaScript.
Renderowanie po stronie serwera
Jeśli obawiasz się zagłębić w Inertia, ponieważ Twoja aplikacja wymaga renderowania po stronie serwera, nie martw się. Inertia oferuje obsługę renderowania po stronie serwera. A podczas wdrażania aplikacji za pośrednictwem Laravel Forge można łatwo upewnić się, że proces renderowania po stronie serwera Inertii jest zawsze uruchomiony.
Zestawy startowe
Jeśli chcesz zbudować swój frontend przy użyciu Inertia i Vue / React, możesz skorzystać z naszych zestawów startowych Breeze lub Jetstream, aby szybko rozpocząć tworzenie aplikacji. Oba te zestawy startowe stanowią rusztowanie dla przepływu uwierzytelniania backendu i frontendu aplikacji przy użyciu Inertia, Vue / React, Tailwind i Vite, dzięki czemu można rozpocząć tworzenie kolejnego dużego pomysłu.
Łączenie aktywów
Niezależnie od tego, czy zdecydujesz się opracować swój frontend przy użyciu Blade i Livewire, czy Vue / React i Inertia, prawdopodobnie będziesz musiał połączyć CSS swojej aplikacji w zasoby gotowe do produkcji. Oczywiście, jeśli zdecydujesz się zbudować frontend aplikacji za pomocą Vue lub React, będziesz musiał również połączyć swoje komponenty w zasoby JavaScript gotowe do użycia w przeglądarce.
Domyślnie Laravel wykorzystuje Vite do łączenia zasobów. Vite zapewnia błyskawiczne czasy kompilacji i niemal natychmiastową wymianę modułów Hot Module Replacement (HMR) podczas lokalnego rozwoju. We wszystkich nowych aplikacjach Laravel, w tym tych korzystających z naszych zestawów startowych, znajdziesz plik vite.config.js
, który ładuje naszą lekką wtyczkę Laravel Vite, która sprawia, że Vite jest przyjemny w użyciu z aplikacjami Laravel.
Najszybszym sposobem na rozpoczęcie pracy z Laravel i Vite jest rozpoczęcie tworzenia aplikacji przy użyciu Laravel Breeze, naszego najprostszego zestawu startowego, który uruchamia aplikację, zapewniając rusztowanie uwierzytelniania frontend i backend.
Aby uzyskać bardziej szczegółową dokumentację dotyczącą korzystania z Vite z Laravel, zapoznaj się z naszą dedykowaną dokumentacją dotyczącą łączenia i kompilowania zasobów.