symfony flex

Budowa nowoczesnych aplikacji i stron internetowych przy użyciu Symfony Flex i Webpack Encore

Najpopularniejszymi na świecie systemami do zarządzania treścią są: WordPress, Drupal, Joomla. Tego typu systemy CMS pozwalają zarządzać frontendem bez znajomości języków programowania (czasami wymagana jest minimalna wiedza techniczna). Jeśli potrzebujesz platformy sprzedażowej, wystarczy zainstalować e-commerce Magento. Oczywiście, może okazać się, że żaden “gotowiec” nie sprosta specyfikacji technicznej projektu, ze względu na jego uniwersalność. Czasami też łatwiej i szybciej jest zakodować coś od nowa, niż burzyć i przebudowywać stare. Do każdego konceptu należy podejść indywidualnie. Załóżmy, że masz za zadanie zbudować prostą stronę typu Landing Page. W tym przypadku instalacja WordPressa może nie mieć sensu, bo wystarczy zakodować ją w zwykłym HTMLu i CSS, dołączając odpowiednie biblioteki JavaScript do mechanizmów typu paralaksa, slider itp.

Standardem stają się aplikacje fontendowe typu SPA (ang. Single Page Application), które mogą działać niezależnie od backendu – dzięki udostępnianiu architektury REST API. Takie rozwiązania pozwalają budować aplikacje przenośne pomiędzy platformami i urządzeniami mobilnymi. W odpowiedzi na tego typu rozwiązania zaczęły powstawać jak grzyby po deszczu API CMSy, np: api-platform.com. Po co zamykać się w archaicznych monolitach, kiedy można tworzyć bez barier. Tak elastyczne podejście wymaga oczywiście więcej wkładu pracy i czasu, ale poziom satysfakcji jest dużo większy 🙂 .

Jeżeli tworzysz “od zera” (moduły, biblioteki lub całą aplikację), ważne jest aby trzymać się pewnych standardów programowania opartych o wzorce projektowe. Nie rób nic po swojemu, bo i tak to spierdolisz. Zapomnij. Stracisz cenny czas na łatanie błędów, albo przepisywanie kodu od nowa. W końcu i tak “skończysz jak każdy” – wybierzesz jakiś framework. To najlepsze wyjście!

Symfony i jego nowe dziecko Webpack Encore to idealny zestaw do budowy aplikacji i stron internetowych. Jeśli chcesz zrozumieć dlaczego, to podążaj za mną w głąb króliczej nory


I. SYMFONY FLEX

Symfony odrodził się niczym “Feniks z popiołów” jako Flex. Wersja “odchudzona” składa się z komponentów, które dobierasz do projektu wedle potrzeb. Nie ma sensu instalowanie modułów, z których nie będziesz korzystał, jak to było w poprzednich wersjach silnika.

CHARAKTERYSTYKA ŚRODOWISKA SYMFONY

Do budowy szablonów podpięty jest system Twig, który jest bezpieczny i rozszerzalny (można dodawać własne filtry i funkcje). Komunikacja z bazą danych opiera się o Doktrynę ORM, ale można wybrać też inne mapowanie np.: Propel ORM. Symfony nie zmusza do niczego, nawet jeśli chodzi o konfigurację, którą można trzymać w plikach phpxml lub yaml. Komponent Console pozwala pisać własne pomocne komendy. Z tego spektrum jest oczywiście możliwość generowania plików tłumaczeń, klas modelu Entity, Kontrolerów i CRUD. Pod ręką (w dolnym pasku przeglądarki) jest umieszczony rozbudowany Debugger. Na pokłon zasługuje również szybki Routing oraz moduł Security. Do tego jest pełna dokumentacja, społeczność i setki gotowych do użycia modułów. To wszystko czyni Symfony technologią, którą warto rozważyć przy budowie małych, średnich jak i rozbudowanych projektów korporacyjnych.

CMS + API

EasyAdmin i Sonata to systemy CMS, które można śmiało podpinać do projektów opartych o Symfony. Oba bazują na tym frameworku 🙂 . Podobnie jak inne wspaniałe narzędzie: API Platform Admin„framework PHP do budowy nowoczesnych webowych API”. Wspominałem o tym na wstępie.

WŁASNY FRAMEWORK Z KOMPONENTÓW SYMFONY

Wertując runy kodu zawarte w dokumentacji „Ojców Założycieli SensioLabs” natknąłem się niegdyś na ciekawy wątek dotyczący budowy własnego frameworka z komponentów Symfony. To właśnie dzięki temu odnalazłem drogę do Zionu. Heretycy kodu rzekną: „A po cóż na nowo wynajdować koło?”. Właśnie po to żeby zrozumieć czym jest MATRIX!

Jeśli nie wiesz o co mi chodzi to zażyj niebieską pigułkę i wróć do WordPressa.


Z dobrodziejstw Symfony korzysta wiele popularnych rozwiązań. To też o czymś świadczy. Poniżej lista niektórych z nich:

 

INSTALACJA FRAMEWORKA SYMFONY

Najlepiej użyć narzędzia composer. Do wyboru mamy dwa rodzaje instalacji:

  • tradycyjna aplikacja internetowa:
  • mikroserwis, aplikacja konsolowa lub API:

Nazwa my_project to katalog (nazwa projektu), w którym zostanie zainstalowany framework. Jeśli katalog nie istnieje to zostanie utworzony.

Skupmy się na tej pierwszej instalacji, bo o niej mowa w tym artykule. Jeśli wszystko poszło bezboleśnie to uruchom w przeglądarce adres strony: http://localhost/my_project/public/index.php/ lub bez my_project, w zależności od konfiguracji serwera i/lub wpisów w VirtualHost.

I wuala 🙂 . Pierwsze koty za płoty.

Symfony instalacja strona powitalna

II. WEBPACK ENCORE

Webpack Encore jest dzieckiem Symfony ale może być użyty również w innych aplikacjach PHP lub językach programowania działających po stronie serwera. Webpack zwiększa wydajność aplikacji internetowych, optymalizuje skrypty JavaScript, kaskadowe arkusze CSS, Sass, LESS oraz grafiki. W prosty sposób można dodawać do aplikacji kolejne składniki typu: jQuery, ReactJS, Bootstrap itd. Webpack Encore pozwala tworzyć zależności oraz zarządzać pakietami w sposób modułowy. Zasoby kompilowane są do jednego zminifikowanego pliku *.js.

Wyobraź sobie Webpack Encore jako “przybornik narzędziowy”, dzięki któremu wszystko masz pod ręką.

INSTALACJA WEBPACK ENCORE

Za pomocą wiersza poleceń przejdź do katalogu projektu, a następnie zainstaluj pakiet symfony/webpack-encore-bundle:

Dodatkowo zainstaluj yarnmenedżer pakietów dla JavaScript. Jest potrzebny do kompilowania zasobów, dodawania nowych pakietów itp.

Po poprawnej instalacji, Webpack Encore doda do projektu kilka “rzeczy”. Katalog node_modules oraz assets. W tym drugim przechowywane są zasoby, czyli pliki: css, js, grafika itp. Skompilowana zawartość zasobów kopiowana jest do katalogu public/build. Konfiguracja projektu mieści się w pliku webpack.config.js:


III. TECHNOLOGIE FRONTENDOWE

Symfony korzysta z systemu szablonów Twig, co nie znaczy, że musimy kurczowo trzymać się tylko tego rozwiązania. Moje propozycje:

1. REACT JS

React (reactjs.org) to biblioteka języka JavaScript stworzona przez pracowników Facebooka i przeznaczona do budowy dynamicznych interfejsów użytkownika (ang. User Interface, w skrócie UI). Projektowanie w React opiera się o tzw. komponenty wielokrotnego użytku. Wyobraź sobie komponent jako niezależny, odizolowany element, którym może być na przykład: menu, okienko popup, baner, stopka itd. Komponenty posiadają konkretne funkcjonalności, reagują na zdarzenia (np: onClick), mogą pobierać dane i utrzymywać ich wewnętrzny stan poza drzewem DOM. Interakcja z użytkownikiem odbywa się w czasie rzeczywistym, zmiany w obrębie interfejsu są aktualizowane natychmiast, bez przeładowania całej strony. Komponenty są elastyczne, skalowalne i przenośne, bez problemu komunikują się z innymi bibliotekami i frameworkami. Dzięki React Native, możemy również pisać aplikacje na urządzenia mobilne! Po co marnować czas i uczyć się kilku różnych technologii, jak wystarczy jedna uniwersalna 🙂

“Naucz się raz, pisz na wszystkie platformy!”

Ta maksyma świetnie oddaje możliwości Reacta 🙂 . Więcej na temat biblioteki React znajdziesz tutaj.


Aby dodać React do naszego projektu, wystarczy użyć prostej komendy – yarn add:

Następnie musimy włączyć go w pliku webpack.config.js, inaczej nie będzie widoczny w projekcie:


2. SASS

Sass (sass-lang.com) to kolejna technologia, którą warto ogarnąć. Sass to preprocesor CSS i rozszerza możliwości kaskadowych arkuszy stylów – CSS, które służą do formatowania wyglądu stron internetowych. CSSy (jak zapewne wiesz) posiadają pewne ograniczenia. Wyobraź sobie sytuację, w której musisz zmienić w całym dokumencie krój i kolor czcionki. Musisz przeszukać plik lub pliki .css “linia po linii” i aktualizować każdy wpis. Korzystając z dobrodziejstw Sass, wystarczy zrobić to w jednym miejscu, bo możesz użyć zmiennych (podobnie jak w językach programowania).

Oczywiście jest tego więcej 🙂 . Dzięki Sass można m.in.: zagnieżdżać selektory, tworzyć własne funkcje, instrukcje warunkowe, pętle, domieszki. To wszystko zresztą znajdziesz w dokumentacji.


Aby dodać Sass do projektu uruchom polecenie:

a następnie zaktualizuj plik webpack.config.js:


3. BOOTSTRAP

Bootstrap (getbootstrap.com) to biblioteka ułatwiająca tworzenie interfejsów graficznych aplikacji i stron internetowych. Korzysta z HTML, CSS, Sass, Less i JavaScript. Bootstrap zawiera szereg narzędzi i rozwiązań, których nie musisz kodować. Są to na przykład gotowe szablony stron, komponenty typu: akordeony, przyciski, menu, alerty, okienka popup, formularze itd. W dodatku wszystkie elementy są z góry responsywne 🙂 – czyli dostosowują się do różnych rozdzielczości ekranu.

REACT-BOOTSTRAP

Istnieje również wersja komponentów Bootstrapa przełożona na komponenty Reacta. Tak więc możemy upiec dwie pieczenie przy jednym ogniu! Mowa o React-Bootstrap (react-bootstrap.github.io). Nic dodać, nic ująć 🙂 .


Aby dodać Bootstrap do projektu uruchom polecenie:

Bootstrap JavaScript wymaga dwóch bibliotek: jQuery i popper.js dlatego musimy je także doinstalować:


IV. PRZYKŁAD

W poniższym przykładzie zrobimy pojedynczą stronę internetową ze standardowym powitaniem Hello World 🙂 . Przykład jest oczywiście błahy i ma jedynie na celu wprowadzenie Cię w rozwiązania, o których pisałem w tym artykule.

Zakładam, że omawiane w tym artykule technologie masz już zainstalowane. Jeśli nie, to wróć do poprzednich punktów i postępuj według wytycznych.

W pierwszej kolejności wygeneruj kontroler o nazwie HomeController:

Polecenie stworzy plik HomeController.php (w lokalizacji /src/Controller/HomeController.php) oraz dwa szablony: base.html.twig (templates/base.html.twig ) i index.html.twig (templates/home/index.html.twig).

Wygenerowana zawartość kontrolera:

Nową podstronkę możesz odpalić pod adresem: /public/index.php/home (zgodnie z routingiem). Kod kontrolera jest banalny. Funkcja index renderuje szablon strony ($this->render(‘home/index.html.twig’)) i przekazuje do niego nazwę kontrolera (‘controller_name’ => ‘HomeController’). Aczkolwiek parametr ten jest zbędny, bo zaraz nadpiszemy przykładową zawartość wygenerowaną przez Symfony w pliku index.html.twig:

Do bloku <div id=”root”></div> wczytany zostanie komponent Reacta 🙂 . Ale o tym za chwilę.

Do layoutu bazowego (templates/base.html.twig) musimy dodać funkcje inkludujące zasoby Encore’a: encore_entry_link_tags(‘app’) i encore_entry_script_tags(‘app’):

W związku z tym, że chcemy korzystać z SASS a nie standardowych stylów CSS, zmień rozszerzenie pliku app.css na app.scss (assets/css/app.scss). Zaktualizuj ten zamiar również w pliku: app.js (assets/js/app.js):

Plik app.js to główny plik przechowujący skrypty i biblioteki do strony. Plik ten jest zdefiniowany w konfiguracji webpack.config.js. Dla przypomnienia:

Zaktualizuj zawartość app.scss dodając własne style oraz polecenie importujące style Bootstrapa:

Ponownie wyedytuj plik app.js dołączając JavaScript Bootstrap:

Teraz dodamy komponent Reacta. Będzie to nagłówek <h1></h1>, którego treść będzie można modyfikować dynamicznie. W tym celu utwórz plik: Hello.js (assets/js/components/Hello.js):

Budowa komponentu nie jest skomplikowana. Na początku importujemy biblioteki Reacta. Jak widać komponent Hello to klasa obiektu, która dziedziczy (extends) po wbudowanej klasie Component. Wewnątrz klasy Hello znajduje się funkcja render(), która zwraca nagłówek H1 z argumentem (props) title. Wartość ta będzie mogła być modyfikowana. Więcej samouczków znajdziesz w artykule: “WPROWADZENIE DO REACT”.

Aby komponent był dostępny musisz dodać go w pliku app.js. Końcowa zawartość pliku będzie miała taką oto postać:

Jak widać, musimy zaimportować biblioteki Reacta oraz komponent Hello. ReactDOM zarządza wyświetlaniem elementów DOM. Metoda render odpowiada za wyrenderowanie komponentu na stronie i przyjmuje dwa parametry:

  • <Hello /> – nazwa klasy (komponentu) z atrybutem title, którego wartość możemy zmieniać,
  • document.getElementById(‚root’) – wskazuje id selektora na stronie, do którego wczytany zostanie komponent, czyli do root (<div id=”root”></div> – w szablonie: index.html.twig).

KOMPILACJA ZASOBÓW

Na koniec musimy skompilować zasoby, aby zmiany były widoczne na stronie po jej odświeżeniu. Spakowane w jedną całość pliki zasobów kopiowane są do katalogu /public/build. WebPack Encore udostępnia trzy metody budowania zasobów:

  • pojedyncza kompilacja:
  • automatyczna kompilacja, kiedy plik/i ulegną zmieniane (są modyfikowane):
  • kompilacja do wersji produkcyjnej:

Naturalnie, w trakcie prac nad projektem użyj pierwszej lub drugiej opcji.


V. PODSUMOWANIE

Dzięki Symfony Flex i Webpack Encore możesz budować szybkie, bezpieczne i skalowalne aplikacje internetowe na różne platformy i urządzenia mobilne. Składniki interfejsu typu: React, Sass i Bootstrap wspaniale uzupełniają ten zestaw. Pracując z frameworkami uczysz się dobrych praktyk i rozwijasz kunszt programowania. Nie zamykaj się w monolitycznych rozwiązaniach bo wypłaszczysz sobie mózg.

I to koniec moich wypocin. Teraz możemy przykucnąć i walnąć browara 🙂 .

$bye->


Leave a Comment

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *