Component based design. Czym jest? Jak działa? Jakie niesie korzyści?

W ostatnich latach panuje silny trend do budowy stron internetowych w oparciu o gotowe komponenty (component based design). Takie rozwiązanie staje się coraz popularniejsze, ponieważ niesie ze sobą szereg zalet i korzyści. W tym wpisie przedstawię, na czym polega idea komponentów i omówię zalety z ich stosowania.

Co to jest component-based design?

Component based design zakłada budowę strony z gotowych elementów (components). Komponenty są zaprojektowanymi i zaprogramowanymi segmentami, z których składa się witryna internetowa. Dzięki swojemu modułowemu charakterowi można je swobodnie wykorzystywać na wszystkich podstronach. 

Komponenty są jak klocki, z których mogą być budowane poszczególne podstrony. Można je komponować i ustawiać do woli uzyskując zakładany cel. Komponent jest jak gotowy element, który możemy wypełnić dowolną treścią lub dodać grafikę. Komponenty nie są przypisane do konkretnych podstron - można je wykorzystywać w obrębie całej strony. Przykładem takiego komponentu może być blok tekstu, baner ze zdjęciem, formularz kontaktowy, blok call-to-action. Jeżeli zachodzi potrzeba zbudowania nowego landing page, można w prosty i szybki sposób zbudować taką podstronę z gotowej biblioteki komponentów. Nie trzeba zlecać programistom tworzenia podstrony od zera, bo gotowe elementy zostały stworzone wcześniej.

Zalety stron wykorzystujących gotowe elementy

Jakie zalety niesie ze sobą struktura strony oparta o gotowe komponenty? Przede wszystkim wszechstronność w używaniu elementów. Gotowe komponenty pozwalają swobodnie kształtować stronę bez ingerencji programistów. Strona dzięki palecie gotowych elementów jest uniwersalnym narzędziem do prezentowania treści. Komponenty są elementami intuicyjnymi w obsłudze i niewymagającymi specjalistycznej programistycznej wiedzy do korzystania z nich. Projektuje się je w taki sposób, aby osoba administrująca stroną mogła w intuicyjny sposób modyfikować i dodawać potrzebne sekcje oraz budować nowe podstrony. Mówiąc kolokwialnie: nowe podstrony można po prostu “wyklikać”. 

Dzięki powielaniu komponentów na różnych podstronach zmiany w designie lub przeróbki programistyczne takiego elementu są uproszczone. Można zmodyfikować design wzorca komponentu, a wszystkie podstrony zawierające ten komponent zostaną dostosowane do zmian. Jest to oszczędność czasu, ponieważ zmiany wykonywane są tylko raz, a efekt jest widoczny od razu na wszystkich podstronach wykorzystujących dany komponent.

Budując stronę opartą o komponenty, budujemy tak naprawdę system obsługi strony. Tworzymy narzędzie, które ma być efektywne i wygodne w używaniu oraz zapewniać duże możliwości modyfikacji administratorom strony. Opracowywanie takiej witryny polega na stworzeniu szkieletu umożliwiającego dowolne kształtowanie podstron oraz projektowanie i programowanie elementów, które na tym szkielecie będą mogły być ustawiane.

Inne zalety wykorzystania stron zbudowanych o gotowe komponenty:

• minimalizacja kosztów administrowania stroną i wprowadzania zmian w treści oraz  strukturze podstron,
• prostota i intuicyjność w wykorzystywaniu komponentów,
• architektura strony zbudowanej na podstawie struktury gotowych komponentów pozwala dodawać kolejne bloki, dzięki czemu można rozbudowywać stronę zgodnie z rozwojem i zapotrzebowaniem,
• strony zbudowane w oparciu o CBD bardzo dobrze sprawdzają się w firmach, gdzie administracja stroną odbywa się przez wiele osób. 

Jakie wyzwania stoją przed zespołem designerów i deweloperów?

Designerzy muszą myśleć o takim projekcie bardzo wszechstronnie. Projektowanie polega na kreowaniu poszczególnych, samodzielnych modułów. Wyzwaniem jest stworzenie wyglądu i funkcjonowania elementów w taki sposób, aby działały dobrze w różnych sytuacjach i w różnych zestawieniach. Projektant w takim podejściu nie projektuje wyłącznie docelowych podstron, ale tworzy bibliotekę elementów, która powinna dobrze funkcjonować bez konieczności jego późniejszej ingerencji. Projekt polega na poznaniu dokładnych oczekiwań klienta i zaproponowaniu konkretnych komponentów, które zrealizują jego potrzeby.

Od strony programistycznej należy przemyśleć działanie poszczególnych komponentów i wykonać je w taki sposób, aby ze sobą nie kolidowały. Programiści muszą zbudować architekturę systemu, który pozwala w wygodny sposób wykorzystywać gotowe komponenty oraz jest otwarty na rozbudowę i zmiany.

Droopler jako przykład strony opartej o komponenty

Przykładem strony opartej o component based design jest Droopler. Droopler to system zbudowany na Drupalu, który pozwala tworzyć rozbudowane strony w oparciu o kolekcję gotowych elementów. Tworzenie strony oraz jej obsługa jest prosta i intuicyjna nawet dla osób nie związanych z nowymi technologiami. Jeżeli jesteście zainteresowani tym jak w praktyce działa taki system, zapraszam do zapoznania się ze stroną Droopler demo oraz stroną informacyjną, gdzie możecie znaleźć więcej informacji, pobrać Drooplera i poeksperymentować z budowaniem stron.