Learning to ❤️ HATEOAS

Slides van Sander ten Brinke tijdens devCampNoord.
https://docs.google.com/presentation/d/1-LRaxffN5ZucRo9GpcylYecsKMnYOgfw/edit?usp=drivesdk&ouid=103992126924398628923&rtpof=true&sd=true

1. DevNetNoord Learning to ♥ HATEOAS Sander ten Brinke Lees mijn blogpost over HATEOAS https://stenbrinke.nl
2. “Heet o wattes?” Hypermedia as the engine of application state
3. Sander ten Brinke • Lead Software Engineer @ Arcady • Backend, App, Cloud, DevOps, Frontend.. sander1095 s.tenbrinke2@gmail.com stenbrinke.nl Let’s connect! @sandertenbrinke Sander ten Brinke
4. How to fall in love with HATEOAS.. Begin met de basis Waar is HATEOAS goed in? Elkaar nog beter leren kennen ♥
5. De basis van HATEOAS
6. De basis van HATEOAS
7. De basis van HATEOAS FAQ: • Wie gebruikt dit🤔? • Is dit niet erg complex?
8. Probleem: Client side business logica
9. Probleem: Client side business logica Case study: Het verwijderen van een tweet (met minder dan <= 1000 retweets)
10. Probleem: Client side business logica Case study: Het verwijderen van een tweet (met minder dan <= 1000 retweets)
11. We zullen dit voorbeeld blijven gebruiken..
12. Show me the problematic code! Pseudo Angular (HTML + TS)
13. Show me the problematic code! Server (C#)
14. “Een tweet moet nu verwijderd kunnen worden totdat er 5000 retweets zijn” Hoe doen we dit zonder al onze front-ends aan te passen?
15. Met HATEOAS! Hypermedia as the Engine of Application State Dankzij links (Hypermedia) Laat het antwoord van de API (engine) de huidige “state” en de mogelijke “state changes” zien (application state)
16. Meer info over HATEOAS Willekeurige lezer: Eigenaar van tweet: Dit is echt gebeurd..🤨 Werkt ook voor lijsten!
17. Terugblik: Zonder HATEOAS Pseudo Angular (HTML + TS) Dit moet 5000 worden!
18. Met HATEOAS: Geen business logic meer! Pseudo Angular (HTML + TS)
19. Hoe ziet de server er uit? ASP.NET Core Minimal API (C#)
20. Nu met een library.. ASP.NET Core Custom Middleware (C#) (Munisio -> HATEOAS library waar ik aan werk)
21. Alternatieven • Gewoon een lijst met actienamen in je response zetten.. • Wees flexibel! • Server side rendering Lijst met actienamen
22. Conclusie Voorkom client side business logica door de API data én mogelijke acties te laten sturen HATEOAS (HEET-OOH-ES) is hier een uitstekende keuze voor! ♥
23. Tijd om het te implementeren! Useful Resources
24. Resources • Arcady’s HATEOAS library voor ASP.NET Core (WIP) • https://github.com/arcadyit/munisio • Contributions and stars (⭐) are welcome! • Nog een .NET voorbeeld: https://github.com/riskfirst/riskfirst.hateoas • HATEOAS libraries bestaan ook voor andere talen en frameworks! • Leer meer over HATEOAS: • https://hypermedia.systems • https://restfulapi.net/hateoas/ • https://htmx.org/essays/hateoas/ • https://stenbrinke.nl/blog/reducing-duplicate-code-in-our-applications-using-hateoas/ Lees de blog post!
25. Sander ten Brinke Thanks for attending! Questions? sander1095 s.tenbrinke2@gmail.com stenbrinke.nl Let’s connect! @sandertenbrinke Lees de blog post!