Wyniki przemyśleń nt. procesu realizacji projektów po 11 latach programowania oraz kilku latach zarządzania projektami. Próba odpowiedzi na pytania m.in. jak optymalnie podejść do tworzenia dedykowanych motywów WP i jak rozwiązać problemy związane z pracą w wieloosobowych zespołach programistycznych (dostęp do bazy danych, konflikty w repozytorium).

1. PSD do WP:
Kodowanie dedykowanych
motywów dla WordPressa
w modelu komponentowym
K r z y s z t o f Ł ę c k i

2. W S T Ę P

3. Co w prezentacji?Co w prezentacji?
1. Spojrzenie procesowe na realizację projektów.
2. Wybrane koncepcje i techniki.
3. Standard PSD do WP?
Wstęp

4. PROCESK O D O W A N I A P R O J E K TU

5. Proces kodowania projektu
PSD2HTML + HTML2WP = WWW

6. Jak to zrobić optymalnie?Jak to zrobić optymalnie?
Proces kodowania projektu
I pomysł
/html/ /wp-content/themes/theme/
statyczny HTML
- brak include, pętli itd.
kopia do plików motywu,
ładowanie danych z WP

7. Jak to zrobić optymalnie?Jak to zrobić optymalnie?
Proces kodowania projektu
II pomysł
/html/ /wp-content/themes/theme/
udogodnienia PHP
- ale musimy kopiować
fragmenty kodu

8. Jak to zrobić optymalnie?Jak to zrobić optymalnie?
Proces kodowania projektu
III pomysł
/wp-content/themes/theme/
jednoczesne kodowanie wyglądu
i ładowanie danych z WP
bezpośrednio w motywie
- problem z edycją bazy przez
kilka osób równolegle

9. Jak to zrobić optymalnie?Jak to zrobić optymalnie?
Proces kodowania projektu
IV pomysł
Podstrony WP, custom post types /wp-content/themes/theme/
kodowanie wyglądu
bezpośrednio w motywie,
najpierw dane statyczne
Edytowalność
1) Podłączenie menu itd.
2) Stworzenie pól meta
na zapleczu
3) Pobieranie zawartości
pól zamiast statycznych
danych
najpierw routing
podłączenie danych
ładowanych dynamicznie
- najlepiej jedna osoba

10. ZaletyZalety
● kilka osób może pracować równolegle
● rozwiązany problem dostępu do bazy
● ograniczamy zbędną robotę
● osoby kodujące wygląd nie muszą znać WP
● można testować osobno wygląd i zaplecze
Komponenty
WadyWady
● …?
- od razu docelowe
struktury WP
- ważne z punktu widzenia
harmonogramu prac

11. Proces kodowania projektu
dane statyczne
dane dynamiczne z WP
widok pozostaje
praktycznie niezmieniony!

12. K O M P O N E N T Y

13. Kto bawił się
klockami LEGO?
Kto bawił się
klockami LEGO?
Komponenty

14. Każdy widok jako suma komponentówKażdy widok jako suma komponentów
Komponenty

15. Każdy widok jako suma komponentówKażdy widok jako suma komponentów
Komponenty

16. Ładowanie komponentów w PHPŁadowanie komponentów w PHP
Komponenty

17. Funkcja ładująca komponentFunkcja ładująca komponent
Komponenty

18. Komponenty
z parametrem
Komponenty
z parametrem
Komponenty
array( 'product_post' => $product_post )

19. Komponenty zagnieżdżoneKomponenty zagnieżdżone
Komponenty

20. Komponenty zagnieżdżoneKomponenty zagnieżdżone
Komponenty
na jak drobne kawałki rozbijać?
- każdy komponent powinien robić jedną rzecz (!)

21. Każdy komponent
jako “mini MVC”
Każdy komponent
jako “mini MVC”
Komponenty
- LEGO
/wp-content/themes/theme/_style.scss

22. ZaletyZalety
● wygodna praca kilku osób na jednym repo
● oddzielenie kodu odpowiadającego za wygląd
od logiki
● podział na małe i czytelne porcje kodu
●
porządek w kodzie
Komponenty
WadyWady
● dodatkowa warstwa abstrakcji
● narzut pracy na utrzymanie porządku
● …?
- wada czy zaleta?- łatwiej zamieniać dane statyczne
na dynamiczne
- ograniczenie konfliktów

23. P O D S U M O W A N I E

24. Podsumowanie
1) Analiza zakresu i planowanie.
2) Przygotowanie środowiska.
3) Przygotowanie struktury komponentów.
4) Kodowanie statycznych komponentów
w ramach architektury WP.
5) Testy frontu i poprawki.
6) Edytowalność treści.
7) Testy całościowe i poprawki.
8) Wdrożenie wersji produkcyjnej.
9) Obsługa posprzedażowa.
10)Kolejny zadowolny Klient!
FAZA WSTĘPNA
KODOWANIE WYGLĄDU
WDROŻENIE
FAZA ROZWOJU
- rozpisanie architektury!
- routing, kontrolery
KODOWANIE CMS
- rozproszony zespół
- jedna osoba: spójność

25. Platforma PSD2WPPlatforma PSD2WP
Podsumowanie
AGENCJEAGENCJE KODERZYKODERZY
przydzielają
dowolną ilość koderów do projektu
zgodnie z aktualnym zapotrzebowaniem
przyjmują
dowolną ilość drobnych zadań
zgodnie z aktualnie dostępnym czasem
●
generuje szkielet aplikacji
●
integruje się z systemami do zarządzania projektami
●
wylicza szacunkowe koszty produkcji i czas realizacji
●
zabezpiecza przepływ płatności
●
umożliwia sprawdzenie reputacji partnera
- coś jak UpWork
- w zależności od liczby koderów!
- coś jak Allegro
- na podstawie listy komponentów
- Asana, Podio, BaseCamp, Toggl itp.
wolny rynek!

26. DZIĘKI!DZIĘKI!
wpmagik.pl
goodeveningorchestra.pl
k r z y s z t o f . l e c k i @ v i s i b e e . p l