component based design

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.

component based design

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.

component based design


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.