Tradycyjnym zadaniem system\u00f3w CMS by\u0142o zarz\u0105dzanie tre\u015bci\u0105 wy\u015bwietlan\u0105 na stronie internetowej. Obecnie tre\u015bci u\u017cywane s\u0105 w r\u00f3\u017cnych kana\u0142ach: w internecie, w natywnych aplikacjach opartych o r\u00f3\u017cne systemy operacyjne czy w urz\u0105dzeniach z internet of things. <\/p>\n\n\n\n
Architektura headless pozwala tym kana\u0142om obs\u0142u\u017cy\u0107 si\u0119 zgodnie z ich wymaganiami w izolacji od aplikacji zarz\u0105dzaj\u0105cej tre\u015bci\u0105 przy pomocy REST API udost\u0119pnionego przez headless CMS.<\/p>\n\n\n\n
Zalety architektury headless<\/h2>\n\n\n\n
Brak frontendu sprawia, \u017ce deweloper musi zbudowa\u0107 t\u0119 cz\u0119\u015b\u0107 samodzielnie. Jest to dodatkowa praca. Jakie wi\u0119c s\u0105 korzy\u015bci z takiej architektury? <\/p>\n\n\n\n
- \n
- Tre\u015b\u0107 mo\u017ce zosta\u0107 u\u017cyta (poprzez REST API) w wielu r\u00f3\u017cnych kana\u0142ach, aplikacjach (niekoniecznie webowych) lub urz\u0105dzeniach Internet of Things. Ka\u017cda z tych aplikacji mo\u017ce korzysta\u0107 z innych technologii i mie\u0107 odmienn\u0105 architektur\u0119, na przyk\u0142ad strona www, aplikacja iOS i zaawansowany sportowy zegarek. <\/li>\n\n\n\n
- Mo\u017cesz wybra\u0107 dowoln\u0105 technologi\u0119 do budowy frontendu. Nie jeste\u015b ograniczony wymaganiami CMSa do u\u017cywania np. Twig, PHP czy Ruby. Mo\u017cemy zastosowa\u0107 to, co b\u0119dzie najbardziej odpowiednie dla naszych frontendowych aplikacji. Nie jeste\u015bmy te\u017c zmuszeni do uczenia si\u0119 technologii narzucanej przez CMS. <\/li>\n\n\n\n
- \u0141atwiejszy podzia\u0142 zada\u0144 w projekcie. Frontend developer pracuje niezale\u017cnie od systemu administracyjnego. Dba tylko o wy\u015bwietlenie komponent\u00f3w i dostarczonych dla nich informacji z API. <\/li>\n\n\n\n
- Niezale\u017cno\u015b\u0107 frontendu i backendu: mo\u017cesz umie\u015bci\u0107 obie cz\u0119\u015bci aplikacji na r\u00f3\u017cnych serwerach i \u0142atwiej uniezale\u017cnia\u0107 obci\u0105\u017cenie frontendu i backendu. <\/li>\n\n\n\n
- Mo\u017cesz zwi\u0119kszy\u0107 bezpiecze\u0144stwo ca\u0142ej architektury utrzymuj\u0105c niezale\u017cny frontend i backend. <\/li>\n\n\n\n
- Pracuj\u0105c (instalacja, fix, upgrade, release) nad cz\u0119\u015bci\u0105 frontendow\u0105 aplikacji nie ingerujesz w system zarz\u0105dzaj\u0105cy danymi.<\/li>\n\n\n\n
- Headless CMS cz\u0119sto (ale nie zawsze) udost\u0119pniany jest w modelu SaaS wi\u0119c je\u015bli zdecydujesz si\u0119 na takie rozwi\u0105zanie, skorzystasz te\u017c z korzy\u015bci tego modelu: brak konieczno\u015bci zarz\u0105dzania infrastruktur\u0105, obci\u0105\u017ceniem, aktualizacjami, etc.<\/li>\n<\/ol>\n\n\n\n\n\t\n\t\t\n\t\t\tSzukasz do\u015bwiadczonego zespo\u0142u programistycznego? Porozmawiajmy o konkretach.\t\t<\/div>\n\t\t\n\t\t\t\n\n\t\n\t\t\t\t\t
![](\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\")
\n\t\t\t<\/div>\n\t\n\t\t\n\t\t\t\n\t\t\t\thello@smultron.pl\t\t\t<\/a>\n\t\t<\/div>\n\t\t\n\t\t\t\n\t\t\t\t+48 791 991 797\t\t\t<\/a>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n\nKiedy rozwa\u017cy\u0107 zastosowanie headless CMS?<\/h2>\n\n\n\n
Oto przypadki, w kt\u00f3rych nale\u017cy rozwa\u017cy\u0107 zastosowanie architektury headless: <\/p>\n\n\n\n
- \n
- Aplikacja b\u0119dzie wy\u015bwietla\u0107 dane na kilku niezale\u017cnych platformach (np. na wielu landing page), kt\u00f3re mog\u0105 r\u00f3\u017cni\u0107\u00a0si\u0119 od siebie.\u00a0<\/li>\n\n\n\n
- Potrzebujesz ca\u0142kowitej wolno\u015bci w doborze technologii frontendowych.<\/li>\n\n\n\n
- Nie masz zasob\u00f3w do pracy nad cz\u0119\u015bci\u0105 backendow\u0105.<\/li>\n\n\n\n
- Frontend strony lub aplikacji b\u0119dzie korzysta\u0142 z framework\u00f3w Javascript takich jak Angular, Vue.js lub React.<\/li>\n\n\n\n
- Zamierzasz tworzy\u0107 aplikacje natywne dla iOS \/ Android \/ Windows Phone.<\/li>\n\n\n\n
- Zamierzasz u\u017cy\u0107 statycznych generator\u00f3w (Gatsby, Jekyll, NextJS, etc)<\/li>\n\n\n\n
- Chcesz wykona\u0107 szybki proof of concept<\/li>\n<\/ul>\n\n\n\n
Kiedy nie stosowa\u0107 headless CMS?<\/h2>\n\n\n\n
- \n
- Gdy nie masz zasob\u00f3w na obs\u0142ug\u0119 kilku system\u00f3w i nie b\u0119dziesz w stanie skonfigurowa\u0107 architektury informacji w headless CMS oraz cz\u0119\u015bci frontendowej korzystaj\u0105cej z API.<\/li>\n\n\n\n
- Gdy edytorzy wymagaj\u0105 u\u0142atwie\u0144 ze strony CMSa, kt\u00f3re s\u0105 obecne w podej\u015bciu tradycyjnym, na przyk\u0142ad wsparcie dla nawigacji lub szablon\u00f3w oraz edycji zorientowanej na prac\u0119\u00a0z podstronami.\u00a0<\/li>\n\n\n\n
- Gdy potrzebujesz udost\u0119pni\u0107 edytorom out-of-the-box funkcjonalno\u015b\u0107 podgl\u0105du tre\u015bci.\u00a0<\/li>\n\n\n\n
- Je\u015bli potrzebujesz prostej strony opartej o szablon.<\/li>\n\n\n\n
- Gdy potrzebujesz postawi\u0107 prost\u0105\u00a0stron\u0119 bardzo szybko, z customowymi funkcjonalno\u015bciami backendowymi.<\/li>\n\n\n\n
- Je\u015bli nie mo\u017cesz zastosowa\u0107 modelu SaaS. Je\u017celi to jedyny problem to znajdziesz te\u017c systemy headless w modelu on-premises.<\/li>\n\n\n\n
- Je\u015bli potrzebujesz jednego rozbudowanego serwisu zapewniaj\u0105cego wiele funkcjonalno\u015bci zwi\u0105zanych z e-commerce, marketingiem, itp.<\/li>\n<\/ul>\n\n\n\n
Jamstack<\/h2>\n\n\n\n
Architektura JAMstack (JAM = Javasript + API + Markup) wykorzystuje statyczne generatory kodu oraz podej\u015bcie headless CMS w celu tworzenia szybkich i skalowalnych aplikacji. <\/p>\n\n\n\n
Je\u015bli chcia\u0142by\u015b spr\u00f3bowa\u0107 tego podej\u015bcia w praktyce, \u015bwietnym \u017ar\u00f3d\u0142em informacji b\u0119dzie ta lista statycznych generator\u00f3w kodu<\/a> oraz lista CMS\u00f3w headless<\/a> z serwisu jamstack.org.<\/p>\n\n\n\n
lista CMS\u00f3w headless z serwisu jamstack.org<\/figcaption><\/figure>\n\n\n\n Headless CMS a Decoupled CMS<\/h2>\n\n\n\n
R\u00f3\u017cnica mi\u0119dzy headless a decoupled polega na tym, \u017ce CMS headless jest pasywny (czeka na requesty do swojego API), a decoupled CMS jest aktywny (przygotowuje tre\u015b\u0107 i aktywnie przekazuje j\u0105 do warstwy prezentacyjnej). <\/p>\n\n\n\n
Wiele tradycyjnych (coupled) CMS\u00f3w umo\u017cliwi\u0142o dodanie funkcjonalno\u015bci API do swojej architektury. W ten spos\u00f3b \u0142\u0105cz\u0105 oba podej\u015bcia, ale nie staj\u0105 si\u0119 przez to klasycznymi headless CMS, kt\u00f3re maj\u0105 architektur\u0119 API-first.<\/p>\n\n\n\n
Decoupled WordPress: https:\/\/developer.wordpress.org\/rest-api\/<\/a><\/p>\n\n\n\n
Decoupled Drupal https:\/\/www.drupal.org\/project\/jsonapi<\/a><\/p>\n
\n\t\n\t\tSkontaktuj si\u0119 z nami\t<\/div>\n\t\n\t\t\n\n\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\tMarcin Stawowiak<\/div>\n\t\t\t\t\n\t\t\t\t\tCo-founder, Executive Manager\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\t\n\t\t\n\t\t\tSzukasz do\u015bwiadczonego zespo\u0142u programistycznego?
Porozmawiajmy o konkretach.\t\t<\/div>\n\t\t\n\t\t\thello@smultron.pl<\/a>\n\t\t\t+48 791 991 797<\/a>\n\t\t<\/div>\n\t<\/div>\n\t\n\t\t\n\t\t\tSmultron Web Development\t\t<\/div>\n\t\t\n\t\t\tul. S\u0142awkowska 12\t\t\t\n\t\t\tNIP: 6762482785\t\t<\/div>\n\t<\/div>\n<\/div>\n\t\t\n\n\t\n\n<\/p>
- <\/ul><\/div>\n
![](\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/marcin-stawowiak-56x56.jpeg\"\n\t\t\t\tclass=\"size-[56px])
\n\t\t\t<\/div>\n\t![\"Jamstack](\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/jamstack.png\")
![](\"https:\/\/smultron.software\/content\/uploads\/2024\/01\/681c046dafbd67a84a6a2820a207caa9-e1706629988730-768x515.jpeg\"\n\t\t\t\twidth=\"327\"\n\t\t\t\theight=\"204\"\n\t\t\t\tclass=\"w-full)
\n\t\t\t