26 / 04 / 2017 Developers

Symfony 3 + Vue.js

Podczas 3 edycji GeekWeek we Wrocławiu, w ramach połączonego spotkania PHPers i Wrocław Symfony Group,  miałem okazję opowiedzieć o naszym projekcie, w którym połączyliśmy Symfony 3 z frontendowym frameworkiem Vue.js. Po prezentacji spotkałem się ze sporym zainteresowaniem tym tematem dlatego postanowiłem wrócić do tematu w formie wpisu na bloga dla tych, którzy nie mieli okazji uczestniczyć w GeekWeeku.

Prezentacja

Rozwinięcie slajdów

Slajd 3

Co wiedzieliśmy przed startem projektu?

  • Obecne obciążenie ok. 300 użytkowników na raz na stronie (w bliższej perspektywie 500)
  • Będziemy korzystać z kilku źródeł danych
  • Kierować tam będziemy głównie ruch mobilny
  • Zależało nam głównie na User Experience

Slajd 5

Nasz wybór padł na połączenie Symfony3 jako backend oraz Vue.js jako frontend , dlaczego taki wybór?

Slajd 6

Dlaczego Symfony3?

  • Doświadczenie w pracy z Sf2 (także z Sf1)
  • Support długoterminowy (patrz tabelka na slajdzie)
  • Nie rozważaliśmy głębiej innych dostępnych frameworków

Slajd 9

PHPLOC to narzędzie badające kod w sposób statyczny. Oprócz prostego podsumowania, które może pokazać jakiej wielkości mamy projekt znajdziemy także nieco bardziej zaawansowane metryki jak złożoność cyklomatyczna.
Przytaczane są poniższe wartości złożoności cyklomatycznej:

  • od 1 do 10 – kod dość prosty stwarzający nieznaczne ryzyko
  • od 11 do 20 – kod złożony powodujący ryzyko na średnim poziomie
  • od 21 do 50 – kod bardzo złożony związany z wysokim ryzykiem
  • powyżej 50 – kod niestabilny grożący bardzo wysokim poziomem ryzyka.

Slajd 10

PHP LINT – linter jest popularnym narzędziem (w różnych językach programowania, nie tylko w PHP) badającym poprawność kodu pod kątem składni

Slajd 11 

PHPDepend jest narzędziem, które pomaga ocenić stan nowego projektu gdy przejmuje się opiekę nad kodem istniejącego systemu. Przedstawiona piramida jest generowana na podstawie statycznej analizy kodu.
Poszczególne skróty oznaczają:

  • NOP – The Number Of Packages – liczba pakietów
  • NOC – The Number Of Classes – liczba klas
  • NOM – The Number Of Methods – liczba metod (lub ew. funkcji)
  • LOC – The Lines Of Code – liczba linii kodu (pomija linie z samymi komentarzami lub białymi znakami)
  • CYCLO – The Cyclomatic Complexity – złożoność cyklomatyczna
  • CALLS – metryka przedstawia liczbę wywołać metod/funkcji, podwójne wywołanie tej samej metody w obrębie innej metody nie jest liczone podwónie
  • FANOUT – metryka podobnie jak poprzednia liczy zależności, ale pomiędzy typami a nie konkretnymi metodami/funkcjami (pomija typy z tego samego pakietu)
  • ANDC – The Average Number of Derived Classes – metryka mówi o tym jaki procent klas dziedziczy po innych klasach (rozszerza inne klasy)
  • AHH – The Average Hierarchy Height – średnia wysokość drzewa zależności pomiędzy klasami

Slajd 12

Wykres przedstawia umiejscowienie klas w projekcie na siatce mówiącej o tym czy właściwie zaprojektowane są klasy w naszym projekcie.

Znaczenie osi:

  • A=1 – klasa ma tylko metody abstrakcyjne i interfejsy
  • A=0 – brak klas abstrakcyjnych
  • I=0 – klasa nie zależy od innych pakietów (może być dużo zależności z tą klasą)
  • I=1 – klasa ma bardzo dużo zależności od innych pakietów w porównaniu do pakietów, które od niej zależą

Prawidłowo zaprojektowane klasy powinny znajdować się blisko niebieskiej linii.

Slajd 13

PHP_MessDetector – sprawdza kod pod kątem zadanych parametrów – narzędzie podobne do PHP LINT ale umożliwia odfiltrowanie kodu poprawnego pod kątem składni, ale nie pod kątem czytelności lub podatności na błędy.

Slajd 14

PHP_CodeSniffer – narzędzie podobne do PHP_MessDetector. Używane razem pozwalają w prostszy sposób dostosowywać sprawdzane elementy składni do naszych wymagań. Niektóre elementy (np. sprawdzanie pod kątem PSR-2) są prostsze do osiągnięcia w CodeSniffer, niektóre elementy można łatwiej osiągnąć w MessDetector.

Slajd 15

PHP CPD (Copy/Paste Detector) – wyszukuje powtórzone fragmentu kodu, które świadczą o miejscach wymagających refaktoryzacji

Slajd 16 

PHP_Unit – najpopularniejszy moduł do wykonywania testów jednostkowych do PHP

Slajd 17

Behat – framework do przeprowadzania testów funkcjonalnych. Potrafi na podstawie stworzonych scenariuszy testowych w formacie Given When Then wygenerować szkielet testów funkcjonalnych, które wystarczy oprogramować.

Slajd 18

Dlaczego Vue.js?

  • mieliśmy doświadczenie z Angular
  • Vue.js zbudował sobie w momencie startu naszego projektu wystarczające grono zwolenników żeby uznać go za wiarygodny framework
  • Vue.js wypadał lepiej pod kątem szybkości działania w porównaniu do Angulara
  • Angular 2 był dla nas zbyt świeżym narzędziem w momencie startu projektu
  • Vue.js ma dużo prostszą i przyjemniejszą w pracy składnie niż React

Slajd 21

Jak ostatecznie rozrósł się projekt na moment prezentacji?

Podsumowanie

Dzięki połączeniu Symfony 3 oraz Vue.js mamy możliwość napisania aplikacji wpisującej się w najnowsze trendy web developmentu. W mojej ocenie jest to bardzo dobry tandem do wdrożenia aplikacji spełniającej wymagania Progressive Web App. Mnogość wtyczek/dodatków zarówno do Symfony jak i Vue.js zapewnia optymalny czas wdrażania funkcjonalności. Popularność obu frameworków (szczególnie Symfony) powinna, w dłuższej perspektywie, skutkować w ciągle nowe funkcjonalności jak i poprawę błędów, które zostaną jeszcze wykryte przez użytkowników.

FacebookTwitterGoogle+LinkedIn