Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Full Stream Ahead: Breaking the protocol barrie...

Avatar for David Denton David Denton
April 11, 2025
Technology
1
5

Full Stream Ahead: Breaking the protocol barrier with http4k

HTTP's request-response pattern has served us well, but modern web applications demand more. Real-time communication demands different protocols, yet maintaining testability and simplicity remains crucial to developer experience.

In this talk, we'll explore how http4k extends HTTP's capabilities through WebSocket and Server-Sent Events support and how these protocols can be modelled as simple functions, making them as testable as plain HTTP endpoints. We'll then show how these streaming capabilities open up new possibilities for server-side rendering, bringing us full circle from the days of JSP to modern reactive interfaces - all while keeping the complexity on the server where it belongs.

Join us to discover how http4k's streaming capabilities can enhance your web applications, enabling everything from chat applications to live dashboards and reactive server-rendered interfaces.
Avatar for David Denton

David Denton

April 11, 2025
Tweet

More Decks by David Denton

See All by David Denton
Functional Intelligence: Agents, MCP and maybe the end of the Web?
Avatar for David Denton daviddenton
1
4
Server as a Function. In Kotlin. _____________
Avatar for David Denton daviddenton
0
3
Kotlin's Elegant Deceptions: Simple APIs, Unusual Tactics
Avatar for David Denton daviddenton
0
67
Exploring the Testing Hyperpyramid with Kotlin & http4k
Avatar for David Denton daviddenton
2
500
http4k - the Swiss Army Knife for Kotlin HTTP apps
Avatar for David Denton daviddenton
0
35
Smash your adapter monolith with the Connect pattern
Avatar for David Denton daviddenton
0
57
Productivity by a thousand cuts: The Kotlin Way
Avatar for David Denton daviddenton
0
40
Writing Test Driven Apps with http4k
Avatar for David Denton daviddenton
0
140
Server as a Function. In Kotlin. _______________
Avatar for David Denton daviddenton
0
260

Other Decks in Technology

See All in Technology
AndroidアプリエンジニアもMCPを触ろう
Avatar for Shinnosuke Kugimiya kgmyshin
2
640
ビジネスとデザインとエンジニアリングを繋ぐために 一人のエンジニアは何ができるか / What can a single engineer do to connect business, design, and engineering?
Avatar for 株式会社カミナシ kaminashi
2
890
genspark_presentation.pdf
Avatar for h.uriu haruki_uiru
1
240
Simplify! 10 ways to reduce complexity in software development
Avatar for Uwe Friedrichsen ufried
2
240
AIによるコードレビューで開発体験を向上させよう！
Avatar for Atsushi Nakatsugawa moongift
PRO
0
420
kernelvm-brain-net
Avatar for らすぴー raspython3
0
460
CARTA HOLDINGS エンジニア向け 採用ピッチ資料 / CARTA-GUIDE-for-Engineers
Avatar for CARTA Engineering carta_engineering
0
27k
LLMの開発と社会実装の今と未来 / AI Builders' Community (ABC) vol.2
Avatar for Preferred Networks pfn
PRO
1
120
テストって楽しい！開発を加速させるテストの魅力 / Testing is Fun! The Fascinating of Testing to Accelerate Development
Avatar for END aiandrox
0
170
Part2　GitHub Copilotってなんだろう
Avatar for tomokusaba tomokusaba
2
730
正式リリースされた Semantic Kernel の Agent Framework 全部紹介！
Avatar for Kazuki okazuki
1
1k
AIとSREで「今」できること
Avatar for HonMarkHunt honmarkhunt
3
720

Featured

See All Featured
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.5k
Designing for Performance
Avatar for Lara Hogan lara
608
69k
Navigating Team Friction
Avatar for Lara Hogan lara
185
15k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
5
600
Visualization
Avatar for Eitan Lees eitanlees
146
16k
It's Worth the Effort
Avatar for 3n 3n
184
28k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
523
40k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.6k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
46
14k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k

Transcript

  1. Full Stream Ahead: Breaking the Protocol Barrier with David Denton

  2. Hello, it’s David! https://clockwork.ing/ GoogleDevExpert https://monopolis.cloud

  3. What’s the plan? •The history of dynamic UIs •Di!erent types

    of web technology •How http4k models protocols as functions •Why the future could be simpler than you think

  4. But first… Some audience participation….

  5. Raise your hand if you have ever used… or (2008)

    (2015)

  6. Keep it raised if you have ever used… or (2004)

    (2003)

  7. or (1996) (1995) Keep it raised if you have ever

    used…

  8. or (1994) (1993) Keep it raised if you have ever

    used…

  9. or (1992) (1990) And finally, keep it raised if you

    ever used…

  10. Here’s a complex UI!

  11. CGI / Server Templates (mid 1990s) Browser Backend

  12. CGI / Server Templates (mid 1990s) Browser Backend <html><li>user1!"li>!"html> Connection

    GET /

  13. CGI / Server Templates (mid 1990s) Browser Backend <html><li>user1!"li>!"html> Connection

    GET / <html><li>user1!"li><li>user2!"li>!"html> Connection GET / Manual Refresh

  14. Modelling HTTP as a function

  15. Testing HTTP by calling a function

  16. JavaScript Power! (late 1990s) Browser Backend

  17. JavaScript Power! (late 1990s) Browser Backend <html><li>user1!"li>!"html> Connection GET /

  18. JavaScript Power! (late 1990s) Browser Backend <html><li>user1!"li>!"html> Connection GET /

    <html><li>user1!"li><li>user2!"li>!"html> Connection GET / JS Refresh

  19. AJAX & SPA (Client Rendering) (2005+) Browser Backend

  20. AJAX & SPA (Client Rendering) (2005+) Browser Backend GET /

    HTML + JS Bundle Connection

  21. AJAX & SPA (Client Rendering) (2005+) Browser Backend GET /

    HTML + JS Bundle Connection GET /users [ { user1 } ] Connection XmlHttpRequest

  22. AJAX & SPA (Client Rendering) (2005+) Browser Backend GET /

    HTML + JS Bundle Connection GET /users [ { user1 } ] Connection XmlHttpRequest GET /users [ { user1 }, { user2 } ] Connection XmlHttpRequest

  23. HTML == static, data == dynamic

  24. Browser Backend Websockets (2011)

  25. Browser Backend 101 Switching Protocols Connection HTTP GET /ws [Connection:

    upgrade, Upgrade: Websocket] Websockets (2011)

  26. Browser Backend 101 Switching Protocols Connection HTTP GET /ws [Connection:

    upgrade, Upgrade: Websocket] Websockets (2011) Frame [Text] [ { user1 } ] Connection Frame [Text] users (Push) Web Socket

  27. Browser Backend 101 Switching Protocols Connection HTTP GET /ws [Connection:

    upgrade, Upgrade: Websocket] Websockets (2011) Frame [Text] [ { user1 }, { user2 } ] (Push) Frame [Text] [ { user1 } ] Connection Frame [Text] users (Push) Web Socket

  28. http4k models WS as functions

  29. Mix and match routing

  30. Test Websockets as a function!

  31. Websockets: realtime pain Can’t use HTTP features (caching, compression) Don’t

    play nicely with Load Balancers, proxies Complexity, Observability, DevEx No reconnection

  32. Server Sent Events (2015) Browser Backend

  33. Server Sent Events (2015) Browser Backend Connection GET / <html><ul

    id=“users”!#!"html>

  34. Server Sent Events (2015) Browser Backend Event Source event: data

    data: [ { user1 } ] Connection GET /users, [accept=text/event-stream] Connection GET / <html><ul id=“users”!#!"html>

  35. Server Sent Events (2015) Browser Backend Event Source event: data

    data: [ { user1 } ] Connection GET /users, [accept=text/event-stream] event: data data: [ { user1 }, { user 2 } ] (Push) Connection GET / <html><ul id=“users”!#!"html>

  36. http4k models SSE as functions

  37. Mix and match routing (again!)

  38. Test SSE as a function!

  39. Browser Backend SPA + Server Rendering (2016+)

  40. Browser Backend JS Bundle + <html!# Connection GET / SPA

    + Server Rendering (2016+)

  41. Browser Backend JS Bundle + <html!# Connection GET / SPA

    + Server Rendering (2016+) <ul><li>user1!"li>!"ul> Connection GET /users XmlHttpRequest

  42. Browser Backend JS Bundle + <html!# Connection GET / SPA

    + Server Rendering (2016+) <ul><li>user1!"li>!"ul> Connection GET /users XmlHttpRequest <ul><li>user1!"li><li>user2!"li>!"ul> Connection GET /users XmlHttpRequest

  43. SPA: a pain in the App UX performance, SEO APIs

    expose security attack service Heavyweight JS bundles Complexity, state management

  44. Back to the Future: Rise of the Hypermedia (2020+) https://data-star.dev

    https://htmx.org

  45. SSE events are merged into the DOM

  46. event: merge-fragments data: <ul id=“users”><li>user1!"li>!"ul> GET /users on-load SSE events

    are merged into the DOM

  47. event: merge-fragments data: <ul id=“users”><li>user1!"li>!"ul> GET /users on-load SSE events

    are merged into the DOM GET /data event: merge-signals data: [{ user1 }] on-click

  48. Datastar pushes data to the Client Browser Backend

  49. Datastar pushes data to the Client Browser Backend <html><ul id=“users”

    data-on-load=“@get(‘/users’)”!"ul>!"html> Connection GET /

  50. Datastar pushes data to the Client Browser Backend <html><ul id=“users”

    data-on-load=“@get(‘/users’)”!"ul>!"html> Connection GET / Connection event: datastar-merge-fragments data: <ul id=“users”><li>user1!"li>!"ul> GET /users, accept=“text/event-stream“ XmlHttpRequest

  51. Datastar pushes data to the Client Browser Backend <html><ul id=“users”

    data-on-load=“@get(‘/users’)”!"ul>!"html> Connection GET / Connection event: datastar-merge-fragments data: <ul id=“users”><li>user1!"li>!"ul> GET /users, accept=“text/event-stream“ XmlHttpRequest event: datastar-merge-fragments data: <ul id=“users”><li>user1!"li><li>user2!"li>!"ul> (Push)

  52. Datastar pushes data to the Client Browser Backend <html><ul id=“users”

    data-on-load=“@get(‘/users’)”!"ul>!"html> Connection GET / Connection event: datastar-merge-fragments data: <ul id=“users”><li>user1!"li>!"ul> GET /users, accept=“text/event-stream“ XmlHttpRequest event: datastar-merge-fragments data: <ul id=“users”><li>user1!"li><li>user2!"li>!"ul> (Push) GET /data, accept=“text/event-stream“ event: datastar-merge-signals data: [ { user1 }, { user 2 } ] XmlHttpRequest Connection

  53. Serving Datastar events

  54. Datastar: a beacon of sanity in FE Full server-controlled reactivity

    Lightweight - ~12kb total (!) Simple to understand, operate, test State stays on backend

  55. Datastar support available now in Maven Central…

  56. What have we learned? •The internet has been around for

    a long time •Everything old is new again! •You can do quite a lot with 12kb of JS!

  57. • Feb 2025: v6 released • Now 180 modules •

    Technology Migration packs • Pro tier integrations an entire HTTP ecosystem Latest integrations

  58. Thank you! _____________? David Denton Architect | Head of Engineering

    | Advisory | Training https://clockwork.ing/ https://http4k.org