psd2wp: kodowanie dedykowanych motywów dla wordpressa w modelu komponentowym

PSD do WP:K o d o w a n i e d e d y k o w a n y c h m o t y w ó w d l a W o r d P r e s s aw m o d e l u k o m p o n e n t o w y m

K r z y s z t o f Ł ę c k i

W S T Ę P

Co w prezentacji?Co w prezentacji?

1. Spojrzenie procesowe na realizację projektów.

2. Wybrane koncepcje i techniki.

3. Standard PSD do WP?

W s t ę p

P R O C E SK O D O W A N I A P R O J E K T U

P r o c e s k o d o w a n i a p r o j e k t u

PSD2HTML + HTML2WP = WWW

Jak to zrobić optymalnie?Jak to zrobić optymalnie?

P r o c e s k o d o w a n i a p r o j e k t u

I pomysł

/html/ /wp-content/themes/theme/

statyczny HTML

- brak include, pętli itd.

kopia do plików motywu, ładowanie danych z WP

Jak to zrobić optymalnie?Jak to zrobić optymalnie?

P r o c e s k o d o w a n i a p r o j e k t u

II pomysł

/html/ /wp-content/themes/theme/

udogodnienia PHP

- ale musimy kopiowaćfragmenty kodu

Jak to zrobić optymalnie?Jak to zrobić optymalnie?

P r o c e s k o d o w a n i a p r o j e k t u

III pomysł

/wp-content/themes/theme/

jednoczesne kodowanie wyglądui ładowanie danych z WPbezpośrednio w motywie

- problem z edycją bazy przezkilka osób równolegle

Jak to zrobić optymalnie?Jak to zrobić optymalnie?

P r o c e s k o d o w a n i a p r o j e k t u

IV pomysł

Podstrony WP, custom post types /wp-content/themes/theme/

kodowanie wyglądubezpośrednio w motywie,najpierw dane statyczne

Edytowalność

1) Podłączenie menu itd.

2) Stworzenie pól metana zapleczu

3) Pobieranie zawartości pól zamiast statycznych danych

najpierw routing

podłączenie danychładowanych dynamicznie- najlepiej jedna osoba

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

K o m p o n e n t y

WadyWady

● …?

- od razu docelowe struktury WP

- ważne z punktu widzeniaharmonogramu prac

P r o c e s k o d o w a n i a p r o j e k t u

dane statyczne

dane dynamiczne z WP

widok pozostajepraktycznie niezmieniony!

K O M P O N E N T Y

K t o b a w i ł s i ęk l o c k a m i LEGO?

K t o b a w i ł s i ęk l o c k a m i LEGO?

K o m p o n e n t y

Każdy widok jako suma komponentówKażdy widok jako suma komponentów

K o m p o n e n t y

Każdy widok jako suma komponentówKażdy widok jako suma komponentów

K o m p o n e n t y

Ładowanie komponentów w PHPŁadowanie komponentów w PHP

K o m p o n e n t y

Funkcja ładująca komponentFunkcja ładująca komponent

K o m p o n e n t y

Komponentyz parametremKomponentyz parametrem

K o m p o n e n t y

array( 'product_post' => $product_post )

Komponenty zagnieżdżoneKomponenty zagnieżdżone

K o m p o n e n t y

Komponenty zagnieżdżoneKomponenty zagnieżdżone

K o m p o n e n t y

na jak drobne kawałki rozbijać?

- każdy komponent powinien robić jedną rzecz (!)

Każdy komponentjako “mini MVC”

Każdy komponentjako “mini MVC”

K o m p o n e n t y

- LEGO

/wp-content/themes/theme/_style.scss

ZaletyZalety● wygodna praca kilku osób na jednym repo

● oddzielenie kodu odpowiadającego za wyglądod logiki

● podział na małe i czytelne porcje kodu

● porządek w kodzie

K o m p o n e n t y

WadyWady● dodatkowa warstwa abstrakcji

● narzut pracy na utrzymanie porządku

● …?

- wada czy zaleta?- łatwiej zamieniać dane statycznena dynamiczne

- ograniczenie konfliktów

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

P o d s u m o w a n i e

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ść

Platforma PSD2WPPlatforma PSD2WP

P o d s u m o w a n i e

AGENCJEAGENCJE KODERZYKODERZYprzydzielają

dowolną ilość koderów do projektuzgodnie 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!

DZIĘKI!DZIĘKI!

wpmagik.plgoodeveningorchestra.pl

k r z y s z t o f . l e c k i @ v i s i b e e . p l