Learnings and Anecdotes from transitioning to a Headless CMS Content Structure and its implications for the underlying Frontend and Backend Architecture.

1. 👋👋
Hi, I'm Sibylle
Frontend Developer
Twitter: @s_ibylle

2. GOING HEADLESSGOING HEADLESS
WITHOUT LOSING YOURWITHOUT LOSING YOUR
HEADHEAD

3. DISCLAIMERDISCLAIMER
This is not a "pure" JAM Stack talk
We're still guring things out and adopting rst
principles

4. AGENCY LIFEAGENCY LIFE
Lots of clients from different backgrounds
(hospitals, football clubs, tness etc)
Multiple projects on the go at the same time
Usually working with one or two favoured systems
(CMS, E-commerce space)

5. FAVOURING ONE BACKEND TOOLFAVOURING ONE BACKEND TOOL
All system architecture implemented in said
system
System dictates structure (even for the frontend)

6. WHY IS THIS PROBLEMATIC?WHY IS THIS PROBLEMATIC?
Frontend doesn't own the markup
Separation of concerns not given
Limitations in trying new tools
Duplication of effort

7. BUILDING BRIDGES 🛠BUILDING BRIDGES 🛠
Use expertise in-house but push things further
Find solutions that work for everyone
Accept that you make mistakes along the way

8. WHAT CAN WE AS FRONTEND DEVELOPERSWHAT CAN WE AS FRONTEND DEVELOPERS
DO? ⚛DO? ⚛

9. TRIALLING DIFFERENT TECHNOLOGIESTRIALLING DIFFERENT TECHNOLOGIES
Evaluate new technologies
Don't be afraid to think outside-the-box
Go for tried and tested solutions
Work within the constraints we're given

10. WHAT DO OUR CUSTOMERS NEED?WHAT DO OUR CUSTOMERS NEED?
Fully edged CMS?
A way to edit and update content?
Plenty of user interaction?

11. CONCEPTUAL PHASE ✍CONCEPTUAL PHASE ✍
Let customers' needs drive decisions
Evaluate constraints
Decide on technologies based on t and expertise

12. WHAT IS OUR IN-HOUSE EXPERTISE? 🤝WHAT IS OUR IN-HOUSE EXPERTISE? 🤝
Frontend has experience in modern Javascript and
frameworks
Especially React
Backend consists of TYPO3 (CMS) and Shopware
Developers

13. HOW COULD REACT AND TYPO3 WORKHOW COULD REACT AND TYPO3 WORK
TOGETHER? 🤝TOGETHER? 🤝
Rendering of content based on JSON Endpoints
No more handlebar templates and Fluid templates

14. LEVERAGE THE GOOD PARTSLEVERAGE THE GOOD PARTS
Continue to use the tool that the customers are
used to
Use frameworks and tools to improve DX and UX
Create your own modules that are reusable
anywhere

15. SOLUTION 💡SOLUTION 💡
Headless TYPO3 + React

16. HEADLESS TYPO3 +HEADLESS TYPO3 +
REACTREACT

17. DEFINITION 📣DEFINITION 📣
Customer can still freely choose from wide range
of modules
TYPO3 only acting as data supply for the frontend
Frontend Layer is independent of underlying
system
Frontend calls REST / JSON Endpoints for the
data, supplied by the CMS

18. FIRST ITERATIONFIRST ITERATION

19. SECOND ITERATIONSECOND ITERATION

20. HOSTING AND DEPLOYMENT (IN OUR CASE)HOSTING AND DEPLOYMENT (IN OUR CASE)
⛴⛴
Frontend has own server or docroot on
multiserver with Node.js installation
Frontend and backend can be deployed
independently

21. MODULAR AND COMPONENT BASEDMODULAR AND COMPONENT BASED
FRONTEND 💭FRONTEND 💭
CMS returns info on the module(s) to be displayed
Frontend uses this information to map
components to the data
Frontend handles context, state and routing

22. ADVANTAGES ✅ADVANTAGES ✅
Separation of backend and frontend (data & view)
Clear division of responsibility
Faster work ow for the frontend & room to grow

23. DISADVANTAGES ❌DISADVANTAGES ❌
Customers might not be able to use "core"
features of their CMS
TYPO3 doesn't implement a REST API out-of-the-
box
Potentially higher initial setup costs

24. WHERE TO GO NEXTWHERE TO GO NEXT
Try out static site generators
Spend time and resources to create great APIs
Offer a greater variety of products to customers
Trial serverless approaches
BaaS
FaaS

25. THE FUTURE?THE FUTURE?

26. LEARNING FROM MISTAKES 📖LEARNING FROM MISTAKES 📖
Customer has to know about advantages and
disadvantages
Availablitity of features
Explain work ow and speed of working
Communicate bene ts
Be brave and try out new ideas

27. THANK YOU FORTHANK YOU FOR
LISTENING!LISTENING!

28. QUESTIONS ?QUESTIONS ?

29. 📚 / 💻 / 📖📚 / 💻 / 📖
React:
Next.js:
Learn React in 2019:
SSR vs CSR:
https://reactjs.org/docs/getting-
started.html
https://github.com/zeit/next.js/
https://www.robinwieruch.de/learn-react-js/
https://medium.com/walmartlabs/the-bene ts-of-
server-side-rendering-over-client-side-rendering-
5d07ff2cefe8