Twórcy i projektanci stron internetowych ASP.NET Webforms: jak wchodzić w interakcje?

Jestem programistą ASP.NET Webforms i mam problemy z projektantami.

Projektanci zawsze narzekają na asp.net server controls. Wolą po prostu mieć plik HTML i tworzyć csspliki wraz z wymaganymi obrazami. Czasami, jeśli faza projektowania jest wykonywana z wyprzedzeniem, otrzymuję pliki HTML z powiązanymi plikami css, ale wtedy napotykamy wiele problemów z integracją projektu z aspxplikami (Sever kontroluje telerik kontroluje ... itd.).

Chcę zapytać o:

• Jak pokonać te problemy? Projektanci wolą programistów php- i mvc ze względu na problemy z kontrolkami serwera .net. Muszę wiedzieć, jak prawidłowo komunikować się z projektantami.
• Czy są jakieś narzędzia lub aplikacje zapewniające projektantom renderowaną (stronę HTML) stronę .aspx? Rozumiem przez to stronę w środowisku wykonawczym, a nie aspx w Visual Studio. Korzystają z Web Expression, ale chcą także renderowanej strony w formacie HTML.

Były projektant tutaj, zmieniłem Deva, a ja też sikałem i narzekałem na Kontrolki Sieci. Szczerze mówiąc, jest O DUŻO tańsze dla projektanta, aby dostosować swoje praktyki, niż dla .NET Developer, aby zagłębić się w niestandardową implementację GridView, ponieważ projektant POWIĄZAŁ, że każdy TD ma znacznik „rel” (lub cokolwiek innego).

Jak bardzo mądrze zauważył Arseni Mourzenko, decyzja o użyciu formularzy internetowych jest decyzją firmy, która ogranicza część kontroli nad HTML, jednocześnie zapewniając pewną efektywność kodowania. O ile firma nie jest skłonna ponownie rozważyć (czego NIE powinny robić, aby zadowolić projektantów), projektanci muszą zaakceptować tę rzeczywistość. Oto kilka rzeczy, które mogą zrobić:

1) Przestań, zależnie od identyfikatora . Mimo że na początku wydawało się to nie tak, odkryłem, że życie było o wiele łatwiejsze, kiedy stylizowałem wszystko za pomocą zajęć (i dziedziczenia, oczywiście). Przede wszystkim wyrównał wszystkie moje wagi wyboru. W dziedziczeniu CSS ID przebija klasę. Miło było mieć wszystko jako selektor podrzędny i / lub klasy, a nieco łatwiej było ustalić kolejność specyficzności. To samo w warstwie JS, sprawiło mi ZERO ból w zamianie moich selektorów opartych na ID na selektory klasowe.

2) Naucz je, w co przekształcają się RadioButtonLists i CheckboxLists , a także Label = span, Panel = div i inne nieoczywiste elementy sterujące HTML. Sposób, w jaki .NET renderuje je do HTML, był trochę dziwniejszy niż się spodziewałem, i znacznie łatwiej było mi tworzyć ekrany, kiedy wiedziałem, jak HTML wyjdzie z tych kontrolek.

3) Niech wykonają projektantów BEZPOŚREDNIO w ASPX , a nie w surowym HTML ( ! Ważne ). Naucz projektantów podstaw GridViews, ListViews itp. Daj im kilka fragmentów kodu, aby wypchnąć anonimową kolekcję obiektów do kontrolki Grid / ListView. Jeśli potrafią nauczyć się CSS, mogą nauczyć się kopiować i wklejać ten kod. Mogą korzystać z darmowej wersji VS Web Express, która jest całkiem dobra w CSS i JS. Te fałszywe projekty internetowe dadzą projektantom możliwość wprowadzenia pewnych elementów sterujących, a następnie Wyświetl źródło, aby zobaczyć, jak są renderowane.

4) Wyjaśnij, w jaki sposób znacznik FORM jest używany w .NET . Zapomniałem o tym wcześniej, ale inną rzeczą, do której projektant musi się przyzwyczaić, jest to, że zwykle pojedynczy znacznik FORM otacza całą stronę. Zmienia to sposób działania formantów i nie można zagnieżdżać znaczników FORM bez naprawdę dziwnych efektów ubocznych. Upewnij się, że projektanci to zrozumieli, w przeciwnym razie ich forma HTML będzie koszmarem do przekształcenia w formularze internetowe.

5) Trzymaj się z dala od motywów i skórki . Chociaż platforma .NET ma te narzędzia, które pomagają stylizować elementy sterujące w aplikacji, są one niezgrabne i dziwne dla zwykłych projektantów stron internetowych, i nigdy nie uważałem ich za wartych mojego czasu. Wydają się być dobrym narzędziem dla programistów, którzy nie są dobrze zaznajomieni z CSS, ale tylko spowalniają projektantów. Pozwól projektantom pracować w ich naturalnym środowisku (pliki HTML i CSS), a oni będą szczęśliwsi i bardziej produktywni.

6) Zachowaj „prototypowe” projekty w swoich rozwiązaniach witryny . Aby upewnić się, że programiści zawsze mają cel do zakodowania, poproś projektantów o stworzenie fałszywego projektu internetowego w twoim prawdziwym rozwiązaniu, aby zachować tylko strony ASPX i pozostawić je nietkniętym przez prawdziwych programistów. Oznacza to, że projektanci mogą spojrzeć na prototypy w tym samym rozwiązaniu, co prawdziwy projekt, aby sprawdzić, jak zrobili to programiści, a deweloperzy mogą uruchomić prototyp w dowolnym momencie, aby upewnić się, że ich praca jest zgodna z intencjami projektantów.

Na koniec oprzyj się wszelkim skargom na konwersję do MVC, chyba że jesteś gotowy ponownie przeszkolić swoich programistów. Uwielbiam MVC osobiście, ale jeśli masz zespół z ogromną wiedzą na temat WebForms, nie wyrzucaj tego bez powodu. Jeśli Twoje aplikacje mają problemy z ViewState, problemy z SEO lub problemy z dostępnością, absolutnie rzuć okiem na MVC. Szkolenie programistów WebForms na MVC zajmie O wiele więcej czasu niż szkolenie projektantów w zakresie korzystania z kontrolek internetowych.

Pod koniec dnia NIE BYŁO ŻADNEGO PROJEKTU, że nie mogłem osobiście pracować w WebForms, nawet jeśli skończyłem przeklinanie w tej cholernej GridView przez godzinę, zanim się zorientowałem.

Czy są jakieś narzędzia lub aplikacje zapewniające projektantom renderowaną (stronę HTML) stronę .aspx?

Zapomnij o wyrażeniu (nigdy mi się nie podobało). Pobierz bezpłatną wersję programu Visual Studio (Web Developer Express). Może podłączyć się do dowolnego posiadanego rozwiązania do kontroli źródła i pozwoli projektantom uruchomić strony ASPX i zobaczyć renderowany HTML w przeglądarce. Oprzyrządowanie CSS i JS jest znacznie lepsze niż kiedyś, a istnieje kilka niesamowitych narzędzi upiększonych na różne sposoby, takich jak Web Essentials. 1-kliknięcie transformacji reguł CSS we wszystkie odchylenia specyficzne dla dostawcy, selektory kolorów i palety bezpośrednio w interfejsie VS, 1-kliknięcie osadzanie obrazów w plikach css, „MNIEJ” transformacji CSS (można „kodować” w CSS), F12 „Nawiguj do” w JavaScript, a także prawdziwa inteligencja i wiele więcej. To teraz skarbnica dla projektantów, FYI,

Istnieje rozwiązanie twoich problemów, ale wymaga zmiany wzorca projektowego na MVP . Jest to inwestycja czasu z góry, która wymaga poważnego rozważenia przed rozpoczęciem.

Zasadniczo występujące problemy nie są nowe. Krótko mówiąc, musisz wprowadzić abstrakcję widoku za pomocą interfejsu, który identyfikuje model danych obsługiwany przez widok.

Jest to bardzo obszerny temat, który ma sens postrzegać wzór jako przykład życia. Ten przykład byłby bardzo pouczający dla twojej sprawy - lepsze formularze internetowe ze wzorem MVP .

Edycja: Jeśli powyższa sugestia jest zbyt droga (pod względem czasu i zasobów), zdecydowanie zalecam bliższą współpracę z projektantem . Uważam, że informowanie o swoich problemach w zespole powinno znacznie pomóc w przezwyciężeniu przeszkód w pracy (projektanta i programisty). Jest to praca zespołowa, a dobra współpraca problemów w celu usunięcia wszystkich przeszkód w wykonywaniu pracy jest sposobem na sukces w projekcie jako zespół ! To jest coś, co robimy w naszym projekcie.

ASP.NET to środowisko, które abstraktuje wygenerowany kod HTML. Oznacza to, że nie możesz zostać poproszony o odtworzenie dokładnie danego kodu HTML w aplikacji ASP.NET, chyba że masz wystarczający budżet, aby przepisać wszystko, co jest generowane przez formanty ASP.NET .

Interesariusze powinni podjąć decyzję: albo użyjesz kontrolek ASP.NET z ich mocnymi i słabymi stronami, albo przełączysz się na ręczny HTML (lub ASP.NET MVC), zwiększając koszt bieżącego projektu o tysiące dolarów .

Niemożność dostosowania HTML w tym kontekście jest ograniczeniem, jak każde inne. Projektanci powinni wziąć pod uwagę to ograniczenie techniczne w swojej pracy. Sprawa jest bardzo podobna do sytuacji, gdy projektant powiedziałby ci, że tekst powinien być wyświetlany dokładnie czcionką o dokładnym rozmiarze: jest to wsparcie internetowe, a nie drukowane, co oznacza, że ​​rozmiar tekstu będzie się różnić.

Jeśli chodzi o narzędzia, nie wiem o narzędziach, które przekonwertują zwykły HTML na szablon ASP.NET. Jak można by się domyślać, że konkretna tabela musi zostać przekonwertowana na określony formant ASP.NET?

Podczas mojej ostatniej pracy deweloperzy budowali aplikację, a następnie przekazywali ją projektantom, aby mogli sprawić, że wyglądałoby to na to, że grupa programistów tego nie zrobiła. :)

Kiedy zaczęliśmy ten proces, pomiędzy deweloperami i projektantami było dużo do przodu. Nie rozumieli podanych stron. Niebo zabrania, jeśli dynamicznie budujemy stronę! Było bardzo podobnie do opisywanej tutaj sytuacji.

Usiadłem z każdym projektantem i nauczyłem go, jak zainstalować aplikację internetową na lokalnym urządzeniu. Pokazałem im, jak to uruchomić i wszystko. Wyjaśniłem, w jaki sposób kontrolki boleni są renderowane na ekranie. A potem otworzyliśmy go w przeglądarce i użyliśmy firebuga, aby zobaczyć link między kontrolkami asp i tym, co zostało zrenderowane.

To bardzo im pomogło. Gdy zobaczyli go i uruchomili na swoich pudełkach, a także za pomocą narzędzi do projektowania poprawiali style i bawili się, ułatwiło im to życie.

Po tym, miałem spotkanie z programistami i poinformowałem ich, że powinni używać tagu CssClass i upewnić się, że style są definiowane. I wszystko, co było dynamicznie wyświetlane na ekranie, musi mieć dołączoną klasę css, ponieważ projektanci nie byliby w stanie go dodać.

To był proces. Przyzwyczajenie się obu stron zajęło trochę czasu. Ale to otworzyło linie komunikacyjne. Zamiast narzekać na zastosowane elementy sterujące, projektanci mogli poprosić o dodanie stylów do różnych elementów.

Tak więc moją sugestią byłoby usiąść z projektantami i pokazać im, w jaki sposób strona się renderuje. Użyj Firebuga, aby rozdzielić stronę i przejrzeć, jak strona została utworzona.

Oto kilka użytecznych podejść, które w przeszłości podjąłem z projektantami, którzy muszą pracować nad opracowywanym projektem ASP.NET WebForms.

1. Wdróż lokalnie: programiści udostępniają wersję pośrednią projektu wdrażanego lokalnie. To oszczędza czas obu. Projektant żąda .aspx, ale współdziała z renderowanym HTML zamiast z kodem serwera. Takie podejście oddziela kod serwera od projektanta. Nie musi wiedzieć, w jaki sposób generowany jest HTML ani w jaki sposób pliki javscript i csssą dostarczane do klienta. Zakłada to oczywiście, że projektanci posiadają umiejętności debugowania przeglądarki / inspektora DOM. Projektant może zastosować wszystkie swoje csszmiany w przeglądarce, a następnie zastosować je do cssplików.
2. Dostarcz modele: aby projektanci mogli rozsądniej pracować z HTML, dostarcz im model HTML renderowany przez kontrolkę serwera. Mogą dostosować ten HTML do tego stopnia, w którym mu się podoba, i zaproponować zmiany, które zostaną zastosowane w implementacji po stronie serwera. Należy to robić wcześnie i często , ponieważ nie chcesz skończyć ze strukturą HTML, na której opiera się implementacja po stronie klienta, a następnie, aby projektant zaproponował zmiany w tej strukturze.

Projektanci powinni generalnie mieć jak najmniej punktów kontaktowych z kodem po stronie serwera, więc odsuń go od nich tak bardzo, jak to możliwe.

Jako hybrydowy programista sam (po wielu pracach zarówno w roli back-end, jak i front-end, często razem), od dawna nie lubię modelu ASP.NET WebForms ... podczas jego początkowej impulsem projektowym było dostarczenie łatwych narzędzi do przeciągania i upuszczania w celu zdemokratyzowania tworzenia stron internetowych (w taki sam sposób, w jaki Visual Basic udostępnił programowanie aplikacji innym niż CS-major), metodom, których użył, aby wymusić stan na środowisko bezstanowe (sieć) są trzymane w szyku i zmuszane (oh ViewState, jak cię nienawidzę!).

Naruszają także niektóre z głównych zasad projektowania i stylowania znaczników, po prostu dlatego, że domyślnie ASP.NET przejmuje atrybut ID, zmuszając projektantów CSS do używania klas w taki sam sposób, w jaki miały być używane identyfikatory, układanie warstw w głębokie stosy div i zagnieżdżone znaczniki, które mogą sprawić, że stylizacja elementów sterujących będzie koszmarem we wszystkich, z wyjątkiem najbardziej uproszczonych systemów.

Biorąc pod uwagę te rzeczy, twoja ścieżka nie jest łatwa, ponieważ zakładam, że przepisanie MVC byłoby kosztowne lub czasochłonne.

Czy jest jakiś sposób, aby zapewnić projektantowi środowisko do uruchamiania aplikacji internetowej, aby mogli zobaczyć zmiany CSS w czasie rzeczywistym? Kiedy robię prace projektowe w ASP.NET WebForms, uważam, że nieocenione jest, aby móc uruchomić aplikację internetową na moim własnym komputerze, wprowadzić poprawki w CSS i uruchomić ją lokalnie, aby zobaczyć, jak to wpływa na aplikację.

Jedną z opcji może być skonfigurowanie maszyny wirtualnej dostosowanej specjalnie do programowania ASP.NET, którą projektant może uruchamiać ze swojej stacji roboczej, aby nie musieli mieszać swoich dwóch zestawów narzędzi, a jeśli zdarzy się, że coś zepsują przestrzeń, zawsze można ją ponownie załadować z działającego obrazu.

Tak, oznacza to, że projektant będzie musiał nauczyć się, jak nacisnąć F5, aby uruchomić aplikację. (Lub po prostu daj im dostęp do FTP do katalogów, w których CSS, JS i obrazy są nawet w środowisku testowym!) Oznacza to również, że zobaczą dużo kodu zaplecza, chociaż jeśli im to powiesz po prostu zignoruj ​​swoje pliki .cs lub .vb, co znacznie przyczyni się do powstrzymania ich przed panikowaniem ... Oczywiście oznacza to, że musisz być pewien, że nie robisz rzeczy takich jak ustawianie stylów z plików codebehind ... (ale nie zrobiłbyś tego, czyż nie, ponieważ wiąże to dane i oglądasz je zbyt blisko, prawda?).

Jeśli twoja witryna jest dobrze zbudowana, z wyraźnymi plikami CSS i JS, a na znacznikach nie jest wymuszonych wiele stylów wbudowanych, możliwe jest, że większość pracy wykonają, unikając obszarów <%%>. Z drugiej strony może również dać projektantowi nieco większe uznanie dla tego, przez co musisz przejść, próbując przetłumaczyć ich statyczny HTML / CSS na coś, co działa dla aplikacji dynamicznej.

Musisz zmusić ich do wspólnej rozmowy, zrozumienia wzajemnych potrzeb i preferencji. Jest to „problem”, którego nie można rozwiązać za pomocą oprogramowania i narzędzi. Nie próbuj zadowolić obu stron, to nigdy nie zadziała. Muszą iść na kompromis - to jest jak małżeństwo.

Jednym ze sposobów jest zorganizowanie np. warsztaty, na których każda ze stron ma okazję wyjaśnić, dlaczego tak jest, aby wolały to, co wolą. Dobra komunikacja jest zawsze kluczem w takich sytuacjach. Takie spotkania mogą być postrzegane jako inwestycje.

Innymi słowy, problem jest zorientowany na organizację, a nie kwestię techniczną i właśnie tam trzeba znaleźć rozwiązanie.

Inną opcją jest podniesienie wynagrodzenia i nakazanie im zamknięcia się (zazwyczaj rozwiązanie krótkoterminowe ...).