Pierwsze kroki z modułami i modułowym rozwojem front-end

Każdy zna i kocha klocki Lego. Byłem uzależniony od klocków Lego, kiedy byłem dzieckiem i nadal je kocham. Możesz złożyć swoją zabawkę ze wszystkich rodzajów klocków Lego na różne sposoby, po jednym kawałku na raz. Następnie możesz zacząć od nowa i zbudować inną zabawkę z tych samych elementów. Możliwości są nieskończone.

Moduły na stronie są bardzo podobne do klocków Lego. Pomyśl o modułach jak o elementach Lego, dzięki którym zbudujesz swoją stronę internetową. Kiedy połączysz je we właściwy sposób, tworzą strony internetowe. Aby tworzyć strony internetowe takie jak Legos, musisz myśleć o stronach internetowych jako o zbiorze niezależnych modułów. Ten artykuł pomoże ci to zrobić z rozwojem i projektowaniem front-endu.

Kolaże modułów

Wchodząc w fazę projektowania projektu, zwykle zaczynam od złożenia kolaży inspiracji projektowych i kolaży modułowych. Jest to proces podobny do procesu Dana Malla, który nazywa te projekty kolaży rezultatami w erze post-komputerowej. Kolaże inspiracji to kolekcje zrzutów ekranu, które przedstawiam klientowi, aby zorientować się, w jakim kierunku wizualnym zmierzamy. To po prostu zrzuty ekranu stron internetowych, które lubię ja i klient.

Gdy otrzymamy potwierdzenie, że jesteśmy na tej samej stronie pod względem stylu, mogę wskoczyć do mojego edytora graficznego (wolę Sketch) i tworzyć kolaże modułowe. Kolaże te są zbiorami najczęściej używanych modułów - przycisków, formularzy, nagłówków, akapitów, list, obrazków i tak dalej. Kolaże modułowe pozwalają mi na szybkie tworzenie kawałków tego, jak będzie wyglądała i działała strona internetowa.

Oto część mojego niedawnego kolażu modułów, przykład przycisku, który zaprojektowałem w programie Sketch na początku projektu:

Być może zastanawiasz się, kiedy w grę wchodzą statyczne kompozycje i prezentowanie klientowi pixel perfect design. Nie robią — pomijam je prawie całkowicie w moim procesie. Pominięcie tej części procesu umożliwia mi bardzo wczesne zajęcie się kodem i tworzeniem prototypów kodu (dojdę do nich wkrótce), czyli innymi słowy projektowanie w przeglądarce. Oto niektóre z zalet projektowania w przeglądarce:

• Przeglądarka jest naturalnym środowiskiem dla strony internetowej, a trzymanie się pomysłów w edytorze graficznym może przynieść odwrotny skutek. Testowanie i podejmowanie decyzji projektowych w przeglądarkach jest rzeczą naturalną. Słyszałeś to już wcześniej, usłyszysz to ponownie — nie chodzi o to, jak wygląda, ale o to, jak działa.

• Zawsze będą istniały niespójności projektowe między statycznymi makietami a tym, co w końcu otrzymasz w przeglądarce po przetłumaczeniu ich na kod. Aby uniknąć tych niespójności, przejdź do edytora kodu i przeglądarki, aby rozwiązać rzeczywiste problemy projektowe.

• Kompozycje statyczne mogą nie przekazywać odpowiedniego komunikatu. Wygląd i styl będą się znacznie różnić po zintegrowaniu interaktywności — takich jak stany najechania kursorem, przejścia i animacje.

• Zamiast spędzać wiele godzin na projektowaniu kilku statycznych makiet dla kilku rozdzielczości, mogę zaoszczędzić dużo czasu, wchodząc wcześnie w kod. Modyfikowanie CSS pozwala mi szybko zademonstrować zmiany i aspekt responsywny klientowi na różnych urządzeniach – smartfonach, tabletach itp.

Oszczędź więc czas i otwórz edytor kodu oraz przeglądarkę, aby jak najszybciej rozpocząć tworzenie UX. Z mojego doświadczenia wynika, że ​​większość klientów poprosi o pełną makietę strony lub dwóch, zanim będziemy mogli przystąpić do kodowania, i to jest całkowicie w porządku. Dla klienta ważne jest wyczucie przyszłego projektu. Zwykle używam InVision, które jest świetnym narzędziem do śledzenia wczesnych makiet, zmian, komentarzy i nie tylko. Jednak bardzo ważne jest, aby klienci zrozumieli, że Sketch i InVision nie zaprowadzą ich zbyt daleko.

Budowanie modułów do programowania front-end

Gdy klient jest zadowolony z kolażu modułów i zaprojektowanych przeze mnie makiet, mogę rozpocząć kodowanie i zdefiniować rzeczywisty wygląd tych elementów.

Projektowanie modułowe przeplata się z rozwojem modułowym w procesie iteracyjnym. Koduję moduł, a następnie wypróbowuję go w przeglądarce, aby zobaczyć, jak działa, a następnie w razie potrzeby przeprowadzam iterację. Ponownie, ten proces przypomina budowanie Lego – zasadniczo projektujesz i rozwijasz w tym samym czasie i wypróbowujesz różne wariacje, aż poczujesz się z tym dobrze.

Często rozwój modułów zaczynam od zbudowania czegoś prostego, na przykład przycisku. Wyobraź sobie, że sam je tworzysz i musisz zakodować pomarańczowy przycisk, zwykle używany w formularzu kontaktowym. Oto, co możesz wymyślić:

 .submit-button { background: orange; color: #fff; padding: 10px 20px; font-size: 16px; }

 <a href=“#” class=“submit-button”>A link</a>

Wystarczająco proste, prawda? Zastosujesz klasę .submit-button do kodu HTML i to rozwiąże Twój obecny problem. Co by się stało, gdybyś musiał utworzyć nowy przycisk, taki jak ten, ale z niebieskim tłem? Prawdopodobnie skopiujesz dokładnie tę klasę, a następnie zmienisz nazwę klasy i kolor tła. Szybko i brudno. Teraz wyobraź sobie, że musisz użyć tego samego przycisku, ale z pomarańczowym tłem. Możesz zobaczyć, dokąd to zmierza — możesz skończyć z powtórzeniem wielu CSS. W przypadku bardzo małych projektów może to nie stać się prawdziwym problemem, ale w przypadku większych prawdopodobnie tak się stanie. Zanim się zorientujesz, Twój CSS staje się nadęty i trudny do utrzymania.

Jeśli kiedykolwiek tworzyłeś projekt na średnią lub dużą skalę, bez wątpienia doświadczyłeś wielu bólów głowy. Mogły one być spowodowane jednym z następujących powodów:

• Kod, który jest niechlujny, niespójny, trudny do zeskanowania i zrozumienia.
• Nadęty kod i pliki CSS XXL z dużą ilością duplikatów.
• Kod, który jest trudny do utrzymania.
• Brak oddzielenia struktury i skóry.

Nie martw się, nie jesteś sam. Założę się, że wszyscy programiści front-end od czasu do czasu doświadczają tych bolesnych problemów, a prawdopodobnie wielu innych. Mogę śmiało powiedzieć, że miałem w przeszłości mnóstwo projektów, w których napotkałem te wszystkie typowe problemy.

Jednym ze sposobów uniknięcia lub zminimalizowania tych problemów jest budowanie w sposób modułowy.

Przycisk modułowy

Jak zakodować ten przycisk w sposób modułowy? Modułowe podejście polegałoby na napisaniu kodu, którego można ponownie użyć. Zapamiętaj te klocki, których możesz używać i używać ponownie.

 .button { padding: 10px 20px; font-size: 16px; } .button-orange { background: orange; color: #fff; }

 <a href=“#” class=“button button-orange”>A link</a>

To, co zrobiliśmy, to sprytne oddzielenie stylów. Klasa .button zawiera style, których używa każdy przycisk w Twoim projekcie, więc nie musisz tego powtarzać. Klasa .button-orange używa tylko stylów właściwych dla pomarańczowego przycisku. Zrobiłbyś to samo dla wszystkich innych przycisków i określił ich kolory tła i tekstu.

Twój moduł przycisków może składać się z kilku niezależnych przycisków, gotowych do użycia zawsze, gdy ich potrzebujesz.

A co z bardziej złożonymi rzeczami?

Kierujesz się tymi samymi zasadami dla każdego innego komponentu, którego możesz potrzebować. Celem jest tworzenie modułów, które są samodzielnymi elementami, niezależnymi od innych modułów. Po połączeniu te moduły utworzą szablony, w których po prostu ponownie użyjesz modułów w razie potrzeby i będziesz pracować nad ukończeniem projektu.

Do dalszej lektury na temat modularnego rozwoju front-end, gorąco polecam SMACSS, który jest architekturą, której zwykle używam we wszystkich moich projektach, dużych i małych.

Pamiętaj, że proces modułowy polega na budowaniu, testowaniu i iteracji. Moduł najpierw jest tworzony w twoim edytorze, następnie testowany w przeglądarce, a następnie w razie potrzeby iterowany. W razie potrzeby powtórz ten cykl.

Angażowanie Klienta

Nie zapominaj o potrzebach klienta — chcą być na bieżąco i otrzymywać potwierdzenie, że dostają wartość swoich pieniędzy. Piękno tego procesu rozwoju polega na tym, że klienci mogą być aktywnymi członkami Twojego zespołu. Możesz bezpiecznie pokazać im moduły, a oni mogą przeoczyć proces rozwoju i za każdym razem wtrącać się, aby ulepszyć produkt. Nie muszą czekać na zakończenie statycznego konkursu lub osiągnięcie kamienia milowego, aby zobaczyć prawdziwy postęp. Jeśli poświęcisz trochę czasu na wyjaśnienie, jak działają moduły swoim klientom, lepiej zrozumieją i docenią proces projektowania oraz czas poświęcony na ich budowanie.

Sposób, w jaki zwykle prezentuję moduły klientowi, jest podobny do tego, który robi Bootstrap — skonfigurowanie izolowanego modułu wraz z jego kodem to świetny sposób na zaangażowanie wszystkich projektantów, programistów i klientów w proces.

Wykorzystaj moduły, które zbudowałeś jako cegiełki do tworzenia stron. W przypadku swojej strony indeksowej możesz umieścić moduł nawigacyjny na górze, moduł bohatera obok, niektóre moduły treści dalej, a na dole stopkę. Zanim się zorientujesz, masz już stronę na prototyp HTML. Ale czym właściwie jest prototyp? Zawsze podobała mi się definicja prototypu autorstwa Leah Buley z jej świetnej książki The User Experience Team of One:

Funkcjonujące lub częściowo działające przykłady tego, jak projekt powinien zachowywać się i działać po wdrożeniu.

Budując prototyp, dokładnie to otrzymasz we wczesnej fazie projektu — częściowo działającą stronę internetową. Tam, gdzie statyczne makiety i InVision zawodzą, prototypy HTML są doskonałe. Prototyp służy jako doskonały, responsywny produkt dla Twoich klientów. A kiedy klient będzie w porządku z wyglądem i działaniem twojego prototypu, wszystko, co musisz zrobić, to dopracować go, aż będzie działał tak, jak powinien. Buduj, testuj, iteruj.

Ponowne wykorzystanie bloków konstrukcyjnych

Moduły i prototypy umożliwią ponowne wykorzystanie kodu w bieżącym projekcie, ale także w przyszłych projektach. Poprawienie modułu z ostatniego projektu może zaoszczędzić dużo czasu — moduły, których potrzebujesz w każdym projekcie, są często podobne. Mam dużą bibliotekę modułów, których często używam ponownie: zakładki, menu nawigacyjne, przyciski, bułka tarta, formularze, tabele, paginacja, listy itp. Chociaż kod tych modułów nie jest dokładnie taki sam we wszystkich projektach, to dobre jego kawałki można ponownie wykorzystać, oszczędzając mi dużo czasu na rozwój. Moja rada dla Ciebie to tworzenie modułów wielokrotnego użytku również dla siebie. Sprawdź BASSCSS, Pure i Refills, aby zainspirować się.

Nie zniechęcaj się, jeśli przejście na projektowanie modułowe i rozwój wymaga czasu. Oczywiście, jeśli zasady modułowe są dla Ciebie nowe, będą wymagały dostosowania procesu projektowania i rozwoju, ale zmiana może okazać się opłacalna.

Modularne metody i techniki, które omówiłem w tym artykule, to tylko zarysowanie powierzchni. Niemniej jednak mam szczerą nadzieję, że ten artykuł był przydatny i zaintrygował Cię do zagłębienia się w projektowanie i rozwój modułowy.