Přednáška zaměřená na důvody k opuštění monolitu podložené výzvami a očekáváním jednotlivých rolí, které pracují s CMS. Instance Strapi CMS na jedno kliknutí https://fastandcomfy.io/strapi?for=frontendisti-brno Plná animace včetně skrytých snímků https://youtu.be/QuBJf_tLbBo

1. we create it
Nové »bezhlavé« CMS
Přechod od monolitů ke službám
19. února 2020
Jaroslav Vrána

2. we create it
Obsah 1. Důvody ke změně
2. Přínosy pro uživatele
3. Přínosy pro editora
4. Přínosy pro vývojáře
5. Technické okénko
6. Závěr
7. Překvapení

3. we create it
Důvody ke změně
1

4. Výzva
Zvýšit uživatelský zážitek
 Zrychlit načítání stránek
 Stabilizovat běh systému
 Posílit SEO
Zefektivnit práci
 tvorba obsahu
 oddělení šablon
 jednodušší integrace
Řešení
Stávající monolit rozdělit na samostatné
služby a aplikace, které budou obsluhovat
specializovanou činnost.
• CMS — správa obsahu,
• CDN — distribuce a editace assetů,
• generování stránek,
• generování landing pages,
• generování AMP atd.

5. we create it
Přínosy pro uživatele
2

6. Přínosy pro uživatele
• Rychlé načítání stránek.
• Plynulost při práci se stránkami.
• Možnost chování stránek jako aplikace (PWA).
• Možnost distribuce jako AMP.
• Lepší nalezitelnost ve vyhledávačích.
• Možnost práce s RSS zdroji.
2

7. we create it
Přínosy pro editora
3

8. Přínosy pro editora
• Rychlejší odezvy CMS.
• Jednotné ovládání CMS.
• Oddělení obsahových typů a nastavení jejich specifit.
• Živé náhledy celého webu ještě před publikací.
• Možnost nastavení procesu publikace (draft, role).
• Možnost spolupráce se specialisty SEO, kopík atp.
3

9. Co potřebuje editor a kopík…
• Jednoduchý WYSIWYG.
• Jednoduchá správa assetů
• Přiřazení do kategorií, tagů, autorství.
• Nastavení pro sdílení na sociálních sítích (Facebook, apod.).
• Možnost náhledu před publikací.
• Historie úprav, porovnání nebo vrácení zvolené verze.
• Vkládání předdefinovaných animací reagujících na scroll stránky.
3

10. Co potřebuje SEO expert…
• Správa meta tagů: title, description, keywords.
• Správa dat pro sdílení na Facebooku, Twitteru,…
• Správa dat pro označování událostí, článků atp.
• Správa přesměrování a kanonické adresy.
• Správa řízení crawlerů: robots.txt, sitemap.xml.
• Definice SEO vzorců a výchozího chování.
• Napojení na analytické nástroje a sledování provozu.
3

11. we create it
Přínosy pro vývojáře
4

12. Přínosy pro vývojáře
• Bezpečnost.
• Škálovatelnost.
• Moderní technologie.
• Dedikované části systému.
• Zjednodušení stagingu.
• Napřímení procesu vývoje a údržby.
• Rychlejší reakce na požadavky zákazníka.
4

13. Co potřebuje vývojář
Nové technologie umožní zvýšení efektivity rozdělením
prací na jednotlivé specializace:
— front-end, back-end, DevOps, testeři,…
— kodéři, SEO, PPC, kopíci, překladatelé,…
4
1. Ucelené zadání.
2. Naplánovanou práci.
3. Klid a kafe…

14. Technické okénko
5

15. AMP
AMP = Accelerated Mobile Pages —
speciální stránky pro rychlé načítání
statického obsahu v mobilních zařízeních.
• Primárně určeno pro statický obsah.
• Malá velikost a rychlost + Google cache.
• Na mobilních zařízeních na předních
pozicích ve vyhledávání.
• Rostoucí výběr komponent.
• Omezené možnosti formátování
a skriptování.

16. PWA
PWA = Progresivní Webová Aplikace —
hybrid mezi běžnou webovou stránkou
a nativní aplikací.
• Progresivní a responzivní
• Nezávislá na konektivitě
• App-like a instalovatelná
• Fresh a znovuzapojení uživatele
• Zabezpečená
• Naleznutelná a odkazovatelná

17. SSG
SSG = Static Site Generator — produkuje
statické soubory a assety.
• Vstupní data přes API nebo fyzické
soubory (Markdown).
• Široký výběr jazyků SSG a šablonovacích
systémů.
• Provoz lokálně nebo na specializované
platformě.
www.staticgen.com

18. Statické stránky
• Jsou generovány plnohodnotné
optimalizované HTML soubory.
• Dynamický obsah a interaktivita je
zajišťována Javascriptem.
• Distribuce obsahu extrémně rychlá díky
napojení na CDN.
• Google a další crawlery najdou obsah
v minimálním čase.
• Lze rychle generovat více typů obsahů
pro různá média a technologie.

19. Monolitní CMS
CMS = Content Management System —
systém sloužící pro správu obsahu.
• Správa obsahu i generování a servírování
front-endu. Publikační flow.
• Široká škála jazyků od PHP po Javu.
• Ideální pro správu obsahu a publikační
řízení ve velkých organizacích.
• Složitější personalizace zákazníkovi.
• Nepružné při velkém objemu obsahu.
• Vendor lock-in.

20. Headless CMS
CMS = Content Management System —
systém sloužící pro správu obsahu.
• Spravuje pouze data.
• Neomezuje v organizaci obsahu.
• Data poskytuje pomocí API.
• API lze napojit na jakýkoli stroj generující
výsledný obsah.
• Díky API umožní změnu CMS.

21. Headless CMS
CMS = Content Management System —
systém sloužící pro správu obsahu.
• Spravuje pouze data.
• Neomezuje v organizaci obsahu.
• Data poskytuje pomocí API.
• API lze napojit na jakýkoli stroj generující
výsledný obsah.
• Díky API umožní změnu CMS.
www.headlesscms.org

22. Git-based CMS
 Plná kontrola nad veškerým obsahem.
 Veškerý obsah jako soubory v repositáři.
Vývojáři mohou používat své obvyklé nástroje.
 Snadné vrácení změn.
 Žádný vendor lock-in.
 Jednoduché nastavení.
× Složitější implementace více výstupů z jednoho CMS.
× Velké množství obsahu se hůře spravuje.
× Nevhodné pro rychlé změny obsahu nebo nové příspěvky každou minutu.
minutu.
× Omezené možnosti. Méně kontroly nad modelem obsahu a formováním.
formováním.

23. API-driven CMS
 Nejlepší řešení pro více výstupů z jednoho CMS.
 Dokáže zpracovat obrovské množství dat.
 Mnoho možností přizpůsobení struktury dat v CMS.
 Často možnost volby databáze.
 Jednoduchá instalace a používání.
× SaaS řešení mají často limity na množství požadavků na API a další.
× Závislost na DevOps při větších změnách.
× Nutnost řešit virtualizaci pro přístup editorů z internetu (Heroku, AWS).

24. we create it
Závěr
6

26. fastandcomfy.io/strapi?for=frontendisti-brno
Run Strapi on one click
Monday 24. 2. 2020 at
12:00

27. Jaroslav Vrána
jaroslav.vrana@cleverlance.com
www.cleverlance.com

28. www.cleverlance.com
Cleverlance Enterprise Solutions a. s.
Tuřanka 115a, 627 00 Brno