Recommended
Recommended
More Related Content
Similar to DUUG Meetup Umbraco Headless Jeroen Breuer & SemSnel
Similar to DUUG Meetup Umbraco Headless Jeroen Breuer & SemSnel (9)
DUUG Meetup Umbraco Headless Jeroen Breuer & SemSnel
- 1. Umbraco Headless Jeroen Breuer & Sem Snel DUUG Meetup 3 November, 2022
- 2. Who are we? Umbraco headless 2 Senior Software Developer at iO Werkt al 14 jaar met Umbraco 3 x Umbraco MVP Jeroen Breuer Parttime .NET Developer bij iO Student bij Hogeschool Avans University Headless Community Team Sem Snel
- 3. Waarom is dit interessant voor mij? Umbraco headless 3
- 4. Hoe deden wij het eerst? • Frontend los. Backend pas als frontend af was. • Soms 2 versies. • Waar komt conditionele logica? • Azure hosting. • Load balance is extra Umbraco server Umbraco headless 4
- 5. Multichannel - Website - Nieuwe frontend - App - Email Umbraco headless 5
- 6. Kan dit niet anders? Umbraco headless 6
- 7. Umbraco Heartcore – Headless SaaS • Onderhoudbaarheid • Schaalbaarheid • CI/CD Umbraco headless 7
- 8. Wat is Headless? Umbraco headless 8
- 12. Hoe hebben wij dit toegepast? Umbraco headless 12
- 13. Stage • Geen Umbraco ervaring • Geen headless ervaring • Weinig Blazor ervaring Umbraco headless 13
- 14. Blazor & Umbraco Heartcore • Snel opzetbaar • Schaalbaar en onderhoudbaar • Gemis uitbreidbaarheid Umbraco headless 14
- 15. Blazor & Umbraco RestApi - Boilerplate • Snel opzetbaar • No code / Low code • Umbraco functionaliteit beschikbaar Umbraco headless 15
- 16. React & Umbraco RestApi - Boilerplate • Twee afstudeerders • Headless Preview • Blazor vervangen door React • Server-side rendering voor SEO Umbraco headless 16
- 17. Demo • Website • Backoffice • Preview • OpenApi
- 19. Punten om rekening mee te houden • Packages met MVC frontend kunnen maar deels gebruikt worden. • Razor wordt niet meer gebruikt. • SPA bottlenecks – Prerendering – CORS • Umbraco developers zullen nieuwe zaken moeten leren. – Is niet de eerste keer. Zijn ook van XSLT / Webforms naar Razor gegaan. Umbraco headless 19
- 20. Kunnen andere teams dit ook? Umbraco headless 20
- 21. MijnOasen - Team Amsterdam • Verouderde API • Tussenpartij • Headstart frontend • Boilerplate Umbraco headless 21
- 22. Wat maakte het zo makkelijk voor het team? Umbraco headless 22
- 23. Laat duidelijk scheiding zien tussen disciplines Umbraco headless 23
- 27. Welke websites zijn headless? Umbraco headless 27
- 28. Wat hebben we geleerd? • Simpel in gebruik • SPA Bottlenecks • Hosting Umbraco headless 28
- 29. Toekomst • Umbraco headless community team • Umbraco Heartcore • Umbraco v12 • Boilerplate overbodig Umbraco headless 29
- 30. DUUG Headless website • Boilerplate + SvelteKit • Geef je feedback! • Snel opgezet Umbraco headless 30
- 31. Get in touch! Umbraco headless 31 @j_breuer jeroenbreuer.nl Jeroen Breuer Connect on LinkedIn! Sem Snel
- 32. Thank you! Until next time!
Editor's Notes
- Sem
- Sem
- Sem - Waarom is dit interessant voor mij? - Als Umbraco developer wil je zoveel mogelijk tijd steken in het leveren van toegevoegde waarde aan je klanten, - Eerst had je maar een optie dat was MVC, - maar er zijn meerder opties om waarde televeren aan je klant tegenwoordig namelijk headless
- Jeroen: Hoe pakte wij het eerst aan bij MVC? Frontend Frontend deed zaken los ontwikkelen. Lang geleden als html files. Daarna atomic design in patternlab. Tegenwoordig soms direct in Razor. Umbraco draait nu ook op de mac. Vaak kon backend pas beginnen als frontend af was. Ook waren er soms 2 versies van de frontend. De html of patternlab files en de Razor versie. Door die 2 versies was het foutgevoelig en soms incompleet. Bijvoorbeeld als conditionele logica er niet in zat. Moest dan in html/patternlab variant of Razor? Wie was verantwoordelijk? Ook niet altijd duidelijk waar javascript bij hoorde en wat gebruikt moest worden. Paar jaar geleden toch nog veel jquery. Zelf hosten in Azure. Load balance is meteen extra Umbraco server.
- Jeroen Bij MVC. Content vaak gebonden aan de Website. Niet standaard beschikbaar als je een app nodig hebt. Dan moet je zelf een losse REST API schrijven (dus eigenlijk al headless gaan). Nieuwe frontend vaak alleen mogelijk door Umbraco aan te passen. Het is mogelijk, maar je bent meer bezig zaken compatible te maken ipv waarde leveren.
- Jeroen - Zijn er ook andere manieren om dit te doen? - Zijn er alternatieve oplossingen die Umbraco aanbied?
- Jeroen - Punten van Rob Habraken opnoemen. Natuurlijk zijn die er! Umbraco Heartcore is een mooi voorbeeld. Het mooie van Heartcore is de decoupled en gedecentraliseerde architectuur, dat een CMS als rol puur die van content provider heeft en dat hij qua applicatie niet verweven is met onze eigen implementatie. Je wilt maximaal tijd steken in de toegevoegde waarde die je kunt leveren, en daarin is het fijn als je ontzorgd wordt op het gebied van hosting en content management vwb hosting. En de losstaande SaaS approach dwingt degene die het implementeert af om de applicatie-architectuur decoupled te houden, dat is uiteindelijk beter onderhoudbaar, beter schaalbaar en werkt sneller (betere workflow, cleanere CI/CD etc).
- Jeroen - Dat kan ik het beste uitleggen door een vergelijking.
- Jeroen Een traditioneel CMS. Dit is bij Umbraco nog steeds de standaard opzet. Frontend draait op dezelfde server als backend. Zelfs Umbraco draait op dezelfde server. Bij MVC zitten backend en frontend in elkaar verweven en staan niet los van elkaar.
- Jeroen CMS en frontend staan los van elkaar. Communiceren elkaar via APIs. Bijvoorbeeld REST of GraphQL. Kunt sneller van systeem wisselen. Een nieuwe frontend is eenvoudig, maar een nieuwe backend is ook mogelijk. Kunt kiezen om alleen frontend servers te load balancen en schalen. Static site generation tools vooral gemaakt voor headless implementaties. De nieuwste versie van een ander CMS genaamd Sitecore (XM Cloud) is zelfs helemaal alleen headless. Daar zit geen traditioneel MVC meer in. Focus op jamstack.
- Jeroen Technology agnostic Kunt zelf kiezen welke frontend wordt gebruikt. Veel javascript MVC koppelen is nog mogelijk, maar nu zijn je front en backend ontkoppeld Echter kun je razor headless gebruiken nog wel gebruiken, Sem verteld hier straks meer over
- Sem
- Sem - Wie kent blazor? Wie heeft er al mee gewerkt? - Blazor is een frontend framework ontwikkeld door microsoft en in tegenstelling tot alternatieve frameworks word Blazor ontwikkeld met C# ipv Javascript - Ik was nog een 2e jaars student die opzoek naar een derdejaarsstage en ik had toen een interesse in Blazor - Rob was op zoek naar een stagiair om Blazor in combinatie met Umbraco te onderzoeken Welke use case werkte niet?
- Sem Arnold Visser heeft geholpen voor het Onderzoek om een heartcore testversie mogelijk te maken Backoffice opzetten: Het opzetten van de backoffice was gemakkelijk Moest Umbraco nog leren en Blazor maar basis koppeling was binnen 3 weken opgezet No code: Geen code Package library was niet meer beschikbaar Dus ook geen belangrijke packages, zoals uMarketingsuite Uitbreidbaarheid ontbreekde: De uitbreidbaarheid waar andere Umbraco Developers bekend mee waren was er niet meer Nadruk leggen op dat het toen zo was, maar dat hier later verandering in kan komen
- Sem - de basis stond binnen 3 weken - UmbracoContentApi package als inspiratie - Snel opzetbaar - Geen code nodig om het project te starten - De backoffice kon zoals een MVC project opgezet worden - De oude Umbraco ervaring door functionaliteit toe te kunnen voegen
- Sem - Conclusie: zijn er achter gekomen dat een losse Umbraco Rest Api beter past bij onze use cases - We hebben besloten om de Umbraco boilerplate hiermee door te ontwikkelen - Stage afgelopen - er zijn twee nieuwe afstudeerders in het bedrijf gekomen, die de opdracht kregen om de boilerplate uit te breiden met preview functionaliteit - Ze hebben de Blazor ontvangen met react, omdat er intern meer React developers zijn in het bedrijf - Server side rendering is ook toegepast, zodat Search engines zoals Google de pagina kunnen vinden en ranken
- Sem – server side rendering en seo - Laat website zien - Backoffice eerst laten zien - Terug naar website doormiddel van de preview - OpenApi voorbeeld laten zien
- Sem - De basis stond in 3 weken dankje umbraco
- Sem - Packages, zoals uMarketingSuite ondersteunen niet out of the box - Soms kun je deze wel aan de hand van kleine aanpassing headless maken - Als je geen gebruik maakt van Blazor kun je geen razor meer gebruiken en moet er dus expertise komen voor een nieuw frontend framework - Prerendering voor seo is een must - Component en contract based werken
- Sem Bridge: Is het mogelijk voor een team zonder ervaring om headless?
- Sem - tussenpartij - ze moesten verbinden aan een verouderde api van de klant - Hierdoor hebben - Ze zijn opzoek gegaan naar een manier om Headless te werken - Ze hebben contracten opgestart, zodat frontenders al konden beginnen - De backenders hebben later de verbinding gelegd toen ze de eisen met de tussenpartij hadden gecommuniceerd - Het team van Amsterdam had nog geen ervaring met Umbraco of een headless CMS. - Hierdoor hebben contact opgenomen met onze campus of er al eerdere oplossingen waren gemaakt met Umbraco. - Toendertijd was ik nog bezig met mijn stage. Maar de 1e versie van de boilerplate stond toen al klaar en die hebben ze gebruikt. - Het team heeft aangegeven echt tevreden te zijn met deze oplossing terwijl ze geen ervaring hadden met Umbraco of een headless CMS.
- Jeroen - Doordat zaken duidelijk gescheiden zijn is de samenwerking tussen disciplines veel beter.
- Jeroen JSON in deze afbeelding gaat beide kanten op. De frontend rendered de UI op basis van JSON. Kan beginnen met statische JSON. De backend genereert de JSON op basis van Umbraco content. Frontend en backend kunnen tegelijk ontwikkelen. De JSON is het contract. Ook wel contract first development genoemd.
- Jeroen Met Storybook kunnen frontenders de statische JSON al tonen. Maakt gebruik van atomic design. Werkt met React, Vue, Webcomponents en nog veel meer. Umbraco gebruikt het ook voor nieuwe UI library.
- Jeroen Componenten die Sem liet zien tijdens boilerplate staan hier ook. Zijn exact dezelfde componenten. Geen 2 versies meer nodig. Zoals html en Razor. React met nieuwste versie van javascript werkt erg fijn. Als backend developer kan ik er ook goed in werken. Zolang het geen CSS is ;-).
- Jeroen Als je headless werkt kunt ook eenvoudig een single-page application (SPA) bouwen. Die zijn vaak sneller omdat niet de gehele pagina opnieuw gerenderd hoeft te worden en kunnen ook gebruikersvriendelijker zijn. Bij MVC merk je vaak dat designers zaken ontworpen hebben die niet mogelijk zijn. Dit is bij een SPA vaak wel het geval. Zie bijvoorbeeld de animatie in deze slide.
- Jeroen Enexis is volledig headless. Maakt ook gebruik van storybook. De website bevat veel grote en complexe formulieren. Dankzij React hebben we die formulieren snel en dynamisch kunnen opzetten. Dat was met Razor een stuk lastiger geweest. Omdat het ook een single-page application (SPA) is kun je altijd feedback geven aan de gebruiker. Je hoeft niet meer na te denken wanneer je iets SSR doet in Razor en wanneer iets met AJAX. Want alles is een API call dus alles is AJAX. Maar nog steeds met SSR.
- Sem Het is super simpel, mensen zonder umbraco en headless ervaring hebben dit werkelijkheid kunnen maken Wat Enige bottlenecks die we hebben voorzien, zijn de standaard SPA bottlenecks Ook moesten we het devops process aanpassen omdat de frontend los draait van Umbraco.
- Sem Mezelf op kaart brengen Hoe ik het heb gelost Vergelijking Praktisch voorbeeld Business voordeel We geven feedback op basis van onze boilerplate en ze nemen het mee Juist door onze ervaring van de boilerplate worden sommige zaken in umbraco opgenomen Word de umbraco boilerplate overbodig, dat is goed want dan word het vrijgegeven aan heel de community!
- Sem + Jeroen Visschers Geen Umbraco ervaring Geen headless ervaring Onbekend framework Devops
- Sem
- Sem