Połączenie Symfony3 oraz Vue.js na przykładzie projektu.

1. Symfony3 w duecie z Vue.js
Maciej Harbuz
31/03/2017
GeekWeek

2. Co wiedzieliśmy
przed startem
projektu?

3. Kluczowy aspekt: user experience
(mnogość funkcjonalności
w głównym serwisie)
Ruch głównie mobilny
Wiele źródeł danych jednocześnie
(w tym pobieranie danych
live z zewnętznych usług)
Obciążenie witryny: 300
userów na raz w serwisie
(planowane 500 w bliskiej
perspektywie)
Co wiedzieliśmy przed startem projektu?

4. Technologia

5. Frontend: Backend:

6. Dlaczego Symfony 3 ?
Duże doświadczenie z Sf2
Sf3 nie stanowi dużej rewolucji
w stosunku do Sf2
Kluczowy support wersji (planowany
support dla przyszłej wersji 3.4 - 2021 rok)

7. Czego używamy podczas kododwania?
phploc - rozmiar projektu
lint - sprawdzanie składni
PHP_Depend - metryki kodu
PHP_MD - wykrywanie złych fragmentów kodu
PHP_CodeSniffer - trzymanie standardów kodowania
PHP_CPD - wykrywanie duplikatów w kodzie
PHP_Unit - odpalanie testów jednostkowych
Behat - odpalenie testów funkcjonalnych

8. PHPLOC
phploc 3.0.1 by Sebastian Bergmann.
Directories 16
Files 34
Size
Lines of Code (LOC) 1782
Comment Lines of Code (CLOC) 658 (36.92%)
Non-Comment Lines of Code (NCLOC) 1124 (63.08%)
Logical Lines of Code (LLOC) 349 (19.58%)
Classes 227 (65.04%)
Average Class Length 6
Minimum Class Length 0
Maximum Class Length 60
Average Method Length 1
Minimum Method Length 1
Maximum Method Length 6
Functions 0 (0.00%)
Average Function Length 0
Not in classes or functions 122 (34.96%)
Cyclomatic Complexity
Average Complexity per LLOC 0.04
Average Complexity per Class 1.44
Minimum Class Complexity 1.00
Maximum Class Complexity 3.00
Average Complexity per Method 1.16

9. Dependencies
Global Accesses 0
Global Constants 0 (0.00%)
Global Variables 0 (0.00%)
Super-Global Variables 0 (0.00%)
Attribute Accesses 98
Non-Static 93 (94.90%)
Static 5 (5.10%)
Method Calls 117
Non-Static 103 (88.03%)
Static 14 (11.97%)
Structure
Namespaces 17
Interfaces 4
Traits 0
Classes 30
Abstract Classes 1 (3.33%)
Concrete Classes 29 (96.67%)
Methods 98
Scope
Non-Static Methods 94 (95.92%)
Static Methods 4 (4.08%)
Visibility
Public Methods 82 (83.67%)
Non-Public Methods 16 (16.33%)
Functions 1
Named Functions 0 (0.00%)
Anonymous Functions 1 (100.00%)
Constants 6
Global Constants 0 (0.00%)
Class Constants 6 (100.00%)
PHPLOC

10. lint:
[apply] Errors parsing
/home/www/xcoding/stock/src/AppBundle/Command/PullPriceCommand.
php
[apply] PHP Parse error: syntax error, unexpected '$this'
(T_VARIABLE) in
/home/www/xcoding/stock/src/AppBundle/Command/PullPriceCommand.
php on line 14
BUILD FAILED
/home/www/xcoding/stock/build.xml:120: apply returned: 255
Total time: 0 seconds
PHP -l (LINT)

11. PHP_Depend
ANDC
AHH
NOP 22
38
139
1364 251
110187
NOC
NOM NOM
CALLS
FANOUT
LOC
CYCLO
0.109
0.621
1.727
1.806
0.438
3.658
9.813
0.137
Low Average High

12. 1.0
0.9
0.8
0.7
0.6
0.5
0.4
0.3
0.2
0.1
0.0
0.0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1.0
Reader
ReportParser
Bankier
UseCase
Form
Entity
Downloader
Filter
Loader
Company
Entity
Translator
Report
Abstraction
PHP_Depend

13. src/AppBundle/Command/PullPriceCommand.php:14 Avoid unused local
variables such as '$t'.
src/AppBundle/Command/PullPriceCommand.php:14 Avoid variables
with short names like $t. Configured minimum length is 2.
PHP_Mess
Detector

14. FILE: src/Application/UseCase/GetReport.php
-------------------------------------------------------------------
---
FOUND 5 ERRORS AFFECTING 5 LINES
-------------------------------------------------------------------
---
33 | ERROR | [x] Opening parenthesis of a multi-line function call
| | must be the last content on the line
38 | ERROR | [x] Closing parenthesis of a multi-line function call
| | must be on a line by itself
41 | ERROR | [x] Inline control structures are not allowed
44 | ERROR | [x] Opening parenthesis of a multi-line function call
| | must be the last content on the line
49 | ERROR | [x] Closing parenthesis of a multi-line function call
| | must be on a line by itself
-------------------------------------------------------------------
---
PHPCBF CAN FIX THE 5 MARKED SNIFF VIOLATIONS AUTOMATICALLY
-------------------------------------------------------------------
---
FILE: src/Application/UseCase/PullPrice.php
-------------------------------------------------------------------
---
FOUND 1 ERROR AFFECTING 1 LINE
-------------------------------------------------------------------
---
56 | ERROR | Empty CATCH statement detected
-------------------------------------------------------------------
PHP_CodeSniffer

15. phpcpd 3.0.0 by Sebastian Bergmann.
0.00% duplicated lines out of 1784 total lines of code.
Time: 17 ms, Memory: 3.25MB
PHP CPD
(Copy/Paste
Detector)

16. PHPUnit 5.5.4 by Sebastian Bergmann and contributors.
..................................
34 / 34 (100%)
Time: 1.1 seconds, Memory: 9.00MB
OK (34 tests, 39 assertions)
PHP_Unit

17. Feature: User can check company details and price
Background: # features/company.feature:3
Given I am a User # FeatureContext::iAmAUser()
Scenario: I want to see all companies as a User #
features/company.feature:6
When I list companies #
CompanyContext::iListCompanies()
Then I see all companies in the system #
CompanyContext::iSeeAllCompaniesInTheSystem()
Scenario: I want to see company details as a User #
features/company.feature:10
When I enter "PKO" company site #
CompanyContext::iEnterCompanySite()
Then I get "PKO" company details #
CompanyContext::iGetCompanyDetails()
12 scenarios (12 passed)
46 steps (46 passed)
0m5.25s (25.79Mb)
Behat

18. Dlaczego Vue.js ?
Bliska konkurencja
Vue.js
Angular
Angular 2
React.js
Wdrażaliśmy już sf2 + angular 2-krotnie
Chcieliśmy nauczyć się czegoś nowego
Vue.js wygrywał w raportach wydajności
Lepsza składnia niż React.js
Angular2 jest czymś “zbyt nowym” (2016r.)

19. Przewagi Vue.js #1
- automatyczne odświeżanie
przeglądarki
body {
background:
#e0b13a;
}

20. Przewagi Vue.js #2
- kompilacja w locie

21. Przewagi Vue.js #3
- wykrywanie błędów

22. Architektura
środowiska

23. Transmisja danych - architektura
External APIs
for ecommerce
ESTIMOTE
Firebase
Beacony
API
API
SPA
ESTIMOTE
SDK

24. Pytania

25. Marek Kich
CEO
Maciej Harbuz
CTO
Kamil Mikołajczyk
Sales Manager
Renata Mączyńska
Sales Manager
Konrad Kryłowicz
Marketing Manager
Areyouready?
There are many ways you can contact us, but let’s try the good old ones.
x-coding.eu
/x-coding-it-studio
m.harbuz@x-coding.pl
ul. Czysta 4
50-013 Wrocław
Poland
X-Coding IT Studio