Trzymasz „kod” z dala od projektantów?

Buduję sporo projektów z moim przyjacielem, ale zawsze dochodzimy do tego samego pułapki. Wiem, jak pisać PHP, JavaScript i inne rzeczy (znam również CSS i HTML), więc mogę wykonać większość pracy, jeśli chodzi o budowanie faktycznej funkcjonalności. Jednak nie może, ale może zrobić coś, czego ledwo potrafię: zaprojektować strony.

Ale za każdym razem natkniemy się na problem, ponieważ on nie wie, jak pisać kod, to zwykle spowalnia nasz rozwój. W tej chwili jest to nasz przepływ pracy:

1. Wymyślamy funkcję
2. Buduje projekt frontonu (gdzie powinien być umieszczony, jak będzie wyglądał itp.)
3. Wysyła do mnie kompletny szablon (eksport HTML z Pinegrow)
4. Poszukuję zmian, które wprowadził, a następnie implementuję je w rzeczywistej witrynie (od kilku tygodni używam do tego CakePHP).
5. gdy coś nie działa zgodnie z przeznaczeniem (na przykład nie zadziałało zgodnie z planem z jakiegoś powodu), naprawiam problem po mojej stronie, a następnie wysyłam mu szablon z powrotem
6. spłukać i powtórzyć

Proces ten, jak można sobie wyobrazić, jest niezwykle powolny i nieefektywny. Moje pytanie brzmi: w jaki sposób możemy usprawnić ten proces? Widziałem wiele rzeczy na ten temat, że powinniśmy używać React i RESTful, a co nie, ale chcemy do tego użyć CakePHP. Czy niektórzy ludzie mogą poprowadzić mnie do przydatnych zasobów na ten temat? Szukałem tego przez jakiś czas, ale nigdy nie znalazłem odpowiedniego rozwiązania.

Zasadniczo wszystko, co mój partner może zrobić, to zaprojektować witrynę. Nie może używać Dockera (cały czas używam Dockera), PHP, Javascript i praktycznie wszystkiego innego (zna trochę CSS, ale głównie współpracuje z WYSIWYGedytorem) Jestem gotów się go nauczyć, ale on jest nie zainteresowany (więc szanuję to). Mam nadzieję, że ktoś tutaj może mi pomóc (i prawdopodobnie inni, którzy odpowiedzą na to pytanie później), ponieważ uważam, że jest to bardzo ważna sprawa.

Chcesz uwolnić program Front End Designer od kodu? Chcesz przyspieszyć integrację? Chcesz skorzystać z profesjonalnych technik wykorzystywanych przez najsprytniejsze strony internetowe? Zdecydowanie najlepszym narzędziem do tego jest:

Farba.

Tak, maluj. W każdym razie jakiś program do rysowania. Pozwól mu robić zrzuty ekranu z Twojej witryny, przenosić rzeczy i dodawać rzeczy, które znajdzie gdzie indziej. To pozwoli mu pracować z szybkością swoich pomysłów i pozwoli ci zginać kod w dowolnym kształcie, który będzie dla ciebie najlepszy, jednocześnie dając mu to, czego potrzebuje.

Jeśli to nadal jest zbyt wolne, powiedzmy, ponieważ klient jest w pokoju z wami obojgami, polecam znacznie bardziej zaawansowany zestaw narzędzi:

Papier, nożyczki i taśma.

Może długopis, jeśli czujesz się ambitny.

Wykorzystałem tę technikę, aby skutecznie podejmować decyzje dotyczące tematu, stylu, treści i głównych funkcji witryny przy stole w Chlebie Panera z klientem, zanim ktokolwiek zdał sobie sprawę, że skończyliśmy jeść.

To sprawi, że będzie szybki, uwolni cię od jego „kodu” i jest to w rzeczywistości najskuteczniejszy sposób opracowania interfejsu użytkownika. Może rozpocząć testy użyteczności, zanim napiszesz wiersz kodu.

Być może myślisz „och, to dobrze, gdy zaczynasz, ale nie używasz tego, gdy strona jest rozwijana”. Nie prawda. Działa równie dobrze na stabilnych stronach. Ale teraz większość zrzutów ekranu pochodzi z Twojej witryny.

Co się stanie, jeśli projektant interfejsu użytkownika zechce skorzystać z narzędzi do generowania kodu, aby wykonać swoje makiety? Dobrze, ale nie zastanawiaj się przez chwilę, że musisz użyć jego „kodu”. Musisz szanować jego decyzje dotyczące wyglądu, przepływu i prezentacji. To, co dzieje się za kurtyną, aby tak się stało, nie należy do jego specjalizacji. To jest twoje. Weź za to odpowiedzialność.

Po prostu szanuj jego pracę na tyle, że kiedy skończysz, pokażesz mu, jak się okazało. Pozwól mu odszukać wszystko, czego doświadczy użytkownik. Przygotuj się na nowe pomysły.

To jest rozwój iteracyjny. Nie rób dużo, zanim zapytasz. Rób jak najmniej. Zapytaj tak często, jak to możliwe. Połóż zabawki na biurku, aby zapewnić mu rozrywkę podczas wdrażania jego najnowszego pomysłu, aby mógł go przejrzeć, gdy tylko się załaduje. Kontynuuj tak, aż nadejdzie czas spotkania z klientem.

Jeśli kod tworzony przez Front End Designer naprawdę jest wart problemów, musisz nauczyć się integrować swój kod z jego. W tym celu gorąco zachęcam do nauki kontroli źródła . Naucz się go tak dobrze, że nauczysz Front End Designer, jak go używać.

Tylko wtedy, gdy oboje możecie niezawodnie korzystać z narzędzia kontroli źródła, zalecam oparcie planu integracji na scalaniu kodu. W tym momencie twój przyjaciel zasługiwałby na zmianę tytułu z Front End Designer na Front End Developer.

Teraz, nawet jeśli to zrobisz, nie zaskoczyłoby mnie, gdyby technika rysowania na ekranie nadal nie była najszybszym sposobem współpracy.

Może po prostu nie możesz znieść chaosu tych wszystkich zmian. To tworzy zbyt dużo pracy. Nazywa się to oprogramowaniem, ponieważ akceptuje zmiany. W przeciwnym razie inżynier elektryk wykonałby to na specjalnym układzie. Może być konieczne osiągnięcie zasięgu, aby przenieść logikę zachowania poza interfejs użytkownika, aby zmiany interfejsu użytkownika nie wpłynęły na podstawowe reguły biznesowe. Jeśli przyspieszysz projektanta interfejsu, musisz być na bieżąco z nimi.

Jedynym dobrym powodem, aby zmusić projektanta interfejsu do tworzenia kodu, jest to, że jesteś zmęczony i chcesz go spowolnić. To chyba nie jest „dobry” powód.

Jeśli chodzi o narzędzia, optymalny przepływ pracy, jaki widzę, to Sketch i Zeplin. Szkic to proste narzędzie do projektowania. Odpowiednik Photoshopa lub InDesign, ale zoptymalizowany do projektowania aplikacji i stron internetowych. Zeplin to narzędzie do udostępniania i zatwierdzania projektów w Sketch (lub Photoshop). Może zapewniać precyzyjne pomiary pikseli, a nawet fragmenty kodu dla CSS lub innego kodu układu i eksportować zasoby graficzne. Po ustawieniu projekt jest przekazywany deweloperowi. W tym momencie programista podnosi go i tworzy interfejs użytkownika. Następnie może wrócić do projektanta w celu wizualnej kontroli jakości. Wszystko, co znajdzie w tym coś złego, powinno być po prostu zarejestrowane jako błąd, który należy traktować priorytetowo i rozwiązać.

gdy coś nie działa zgodnie z przeznaczeniem (na przykład nie zadziałało zgodnie z planem z jakiegoś powodu), naprawiam problem po mojej stronie, a następnie wysyłam mu szablon z powrotem

To jest przyczyna twoich problemów. Projekt powinien zawsze pochodzić Designer to Developeri nigdy nie być odwracany. Poprawki i zmiany powinny zostać wprowadzone przez projektanta, a następnie przekazane do wdrożenia w witrynie. Zawsze możesz sam dokonać szybkich poprawek, ale spróbuj zaakceptować, że te szybkie poprawki są tylko tymczasowe. Projektant musi wrócić do swoich projektów i znaleźć właściwe rozwiązanie. Następnie przekazuje ci zmianę, a jeśli zdarzy się, że jest taka sama jak Twoja szybka poprawka, to świetnie, w przeciwnym razie zaktualizujesz z jego projektów.

Wysyła do mnie kompletny szablon (eksport HTML z Pinegrow)

Nie uzależniaj się od otrzymywania HTML, z którym możesz pracować. Lepiej jest, jeśli zaimplementujesz technologię strony internetowej (Bootstrap, CSS, jQuery, React, PHP itp. Itd. Itd. Itd.) Tak, jak tego potrzebujesz. Następnie reprodukujesz jego projekty za pomocą tych narzędzi. Jeśli HTML, który ci daje, to szybki start, to świetnie, ale później, w miarę rozwoju projektu, nie przyda się on zbytnio. Musisz wprowadzić zmiany samodzielnie, ponieważ tylko Ty rozumiesz swój silnik szablonów (tj. Widoki CakePHP, szablony, wtyczki, komponenty itp. Itd.)

Proces ten, jak można sobie wyobrazić, jest niezwykle powolny i nieefektywny.

Zawsze tak było. Projektanci nie są programistami. Poświęcają czas, aby dowiedzieć się, co działa najlepiej dla użytkownika, a czasem popełniają błędy. Nie rozumieją takich pojęć, jak komponenty, ramy i tym podobne. Jako programista musisz porozmawiać z projektantem i podzielić się tym, jak wdrażam to, co projektujesz .

Projektant utknął na środku. Z jednej strony muszą zaspokajać potrzeby programisty, z drugiej strony muszą zaspokajać potrzeby użytkownika.

Moje pytanie brzmi: w jaki sposób możemy usprawnić ten proces?

Przekonałem się, że fizyczne siedzenie obok projektanta i programowanie tam naprawdę pomaga w komunikacji. Jeśli oboje pracujesz zdalnie, utrzymuj aspekt Faceime przez kilka dni. To naprawdę pomaga przyspieszyć.

Widziałem wiele rzeczy na ten temat, że powinniśmy używać React i RESTful, a co nie, ale chcemy do tego użyć CakePHP.

CakePHP to jedna z najlepszych platform na świecie (pełne ujawnienie, jestem w zespole podstawowym CakePHP).

Cake to platforma programistyczna dla królików, w której funkcje mają na celu szybkie tworzenie stron internetowych. Wiem, że to brzmi jak sprzedaż, ale właśnie to jest klasyfikowane. Istnieje wiele innych ram, które są klasyfikowane jako królik. Java byłaby przykładem frameworka, który jest bardziej przedsiębiorczy niż królik. Jeśli używasz tego języka, zaleciłbym zmianę. Ponieważ używasz CakePHP. Twierdziłbym, że powinieneś zostać z tym.

CakePHP stanowi dobry serwer back-end, jeśli potrzebujesz interfejsów API RESTful.

React / Angular / Vue to popularne i popularne frameworki, ale nie było ich od dawna. Z drugiej strony CakePHP istnieje od ponad 13 lat. Nie mam na myśli krytyki. Faktem jest, że te biblioteki JavaScript mają krótki okres trwałości. Za 5 lat wszyscy będziemy rozmawiać o czymś nowym, ale podejrzewam, że CakePHP nadal będzie w pobliżu.

Więc mówię. Używaj React / Angular / Vue teraz, gdy są gorące, ale nie angażuj się w nie. Niedługo będzie coś nowego i lepszego. Myślę, że żyjemy w świecie, w którym nie można bez nich budować dobrych stron internetowych.

Czy niektórzy ludzie mogą poprowadzić mnie do przydatnych zasobów na ten temat?

Prośby o listy są tutaj nie na temat. Przepraszam.

EDYCJA :

Brakowało mi części dotyczącej śledzenia zmian w projekcie.

Poproś projektanta o zapisanie danych wyjściowych HTML w BitBucket (mają bezpłatne prywatne repozytoria). Następnie możesz śledzić i dokonywać porównań za pomocą strony internetowej BitBucket. Za każdym razem, gdy projektant dokonuje poważnej zmiany, dodaje nowy oddział z numerem wersji.

Powinno to być stosunkowo łatwe, aby to zrobić, a to pozwoli ci mieć miejsce do komentowania wspomnianych zmian. Na przykład; może złożyć żądanie ściągnięcia w celu zaktualizowania repozytorium, w którym dokonujesz przeglądu zmian przed ich scaleniem.

Musisz oddzielić te dwie rzeczy:

1. Projektowanie UX i UI, działanie niekodujące
2. Wdrożenie, zdecydowanie działanie kodujące

Projektant powinien używać kreatywnych narzędzi, takich jak Marvel, które służą wyłącznie do projektowania. Projektant nie powinien zajmować się kodem, HTML, CSS itp. Kolory, wymiary, estetyka, interakcje, animacje to wszystko, na czym powinien się skupić.

Programista powinien otrzymać zasoby i makietę (z interakcjami i animacjami) i powinien to zrobić, programując oprogramowanie. Dotyczyło to również HTML i CSS. Programista może również korzystać z narzędzi generatora po swojej stronie.

Aby przyspieszyć wykonywanie zadań, zalecam używanie minimalnego narzędzia, takiego jak Trello, i łączenie / dokumentowanie wszystkiego dla każdej jednostki roboczej .

jak sprawić, by proces ten przebiegał płynniej?

Domagaj się kontroli wersji

Rozgałęzienie oprogramowania i równoległe wszechświaty

• Pracuj nad kodem, który nie jest w kontroli wersji. kropka. Mam na myśli strajk, dopóki projekt nie będzie w całości w VCS.
• Oddział formalnie, liberalnie, lokalnie
  • Formalnie: rozgałęzienia dla wydań i części wydania, formalna poprawka testowania itp. Opracuj formalny plan kontroli wersji, tj. Zapisz go.
  • Liberalnie: poza 4-częściową oficjalną numeracją wydania, rozgałęzić się, jeśli twój żołądek mówi ci, że to może być dobry pomysł.
  • Lokalnie: utrzymałem osobiste repozytorium z oddziałami, które nigdy nie były przeznaczone do konsumpcji zespołowej, ponieważ jako zespół początkowo nie rozgałęziliśmy się i często mam eksperymenty, eksplorację, na wszelki wypadek itp.

Skorzystaj z interfejsów API oprogramowania pośredniego

Korzyści:

• Stabilność - nawet podczas ewolucji podstawowego kodu.
• Testowalny kod
• Ponowne użycie
• Narzędzie komunikacji zespołowej
• To umowa. Obietnica świadczonych usług (planowana gra słów)
• Kodowanie w dziedzinie SOLID == zadowolony programista konserwacji

Jest to zasada „pytaj, nie mów”, stosowana w sposób obsesyjno-kompulsyjny. Jeśli interfejs użytkownika manipuluje właściwością pojedynczej warstwy biznesowej, to źle.

Wszystko i wszystko w obiektach biznesowych musi znajdować się w wymienionym BO. Nawet trywialne rzeczy, które mogą wydawać się najlepiej wykonane w interfejsie użytkownika - nawet pojedynczy LOC. Należy dodać 2 wartości dostarczone przez użytkownika - cała logika, w tym walidacja, musi znajdować się w interfejsie API warstwy biznesowej. Redundancja IMO jest czasami OK. Aby ograniczyć nadmiarowość, może mieć małe, skoncentrowane obiekty warstwy biznesowej, do których interfejs użytkownika ma pełny dostęp.

Wszystko i wszystko, czego interfejs użytkownika potrzebuje od obiektów biznesowych, powinno mieć interfejs API. Na przykład mają jawne metody, które łączą swoje argumenty z programami obsługi zdarzeń.

Uważaj na ramy jako kulę

W rękach niewykwalifikowanych frameworki i IDE nie stanowią barier dla tworzonych przez nich potworów z filmu B.

Z frameworkami takimi jak React można powiedzieć, że to wszystko po stronie klienta, nie ma warstwy logiki biznesowej zaplecza. Kluczową kwestią jest oddzielenie tego, co użytkownik widzi od tego, co robi program. To wykonalne. To nie jest tylko serwer fizyczny kontra przeglądarka użytkowników.

Myślę, że to dobry wskaźnik niedojrzałości zawodu i praktyki, którą akceptujemy, że ludzie, którzy projektują, nie mogą tego zrobić.

Byłoby to nie do przyjęcia w prawie żadnym innym zawodzie.

Rozsądne jest oczekiwanie od projektanta, który specjalizuje się w projektowaniu stron internetowych / aplikacji, znajomości CSS i HTML na tyle dobrze, aby zapewnić działające i użyteczne pliki tego typu.

Projektanci, którzy udostępniają edytory graficzne WYSIWYG, są projektantami wizualnymi lub graficznymi. Istnieje wiele różnych rodzajów projektantów.

Istnieje jednak wiele różnych rodzajów umiejętności, umiejętności i doświadczeń. Osoba, która projektuje meble, mogłaby to zrobić wyłącznie na komputerze z narzędziami do projektowania 3D, w którym to przypadku ich wiedza na temat toczenia tokarki lub obsługi routera CNC może być całkowicie teoretyczna. Robią swoje projekty, a następnie wysyłają je do wykonania przez innych.

I odwrotnie, niektórzy doświadczeni projektanci mogą mieć kontrolę nad całym procesem i mieć zdolność i wiedzę do budowania mebli z dbałością o każdy szczegół, być może nawet rzemiosło ręczne.

Nie będziesz w stanie przekonać przyjaciela do zmiany sposobu pracy. Jeśli wolisz mieć projektanta stron internetowych z umiejętnościami HTML i CSS do tworzenia własnych projektów, musisz go znaleźć.