Go for TUI on the web

Or "Backend is the new frontend". A story of a totally over-engineered personal website that uses a Go binary running in Docker container on a lightweight Kubernetes installation as a "frontend".

Transcript

1. Andrey “Andy” Baranov
   Go for TUI on the web
   Backend is the new frontend
   Story of a totally over-engineered

   personal website
   

   View Slide

2. GUI TUI
   

   View Slide

3. Disclaimer: I’m not a true gopher
   (but a rubyist impostor)
   

   View Slide

4. Andrey “Andy”
   Baranov
   • From Soviet Russia
   • Non-STEM background (TV journalism)
   • Lived in 5 countries
   • In Berlin since 2019
   • SRE at Le Wagon 

   (Ruby, Rails, Kubernetes, code sandboxing)
   • Writer at Evil Martians https://evl.ms/blog
   github.com/progapandist
   twitter.com/progapandist
   

   View Slide

5. View Slide

6. is hard
   • Building complex interactions
   requires a whole stack, separate
   from backend
   
   • “Full-stack” is a
   
   • Standards galore
   
   • Browser wars
   
   • Have you tried to build a form
   recently?
   Modern frontend
   

   View Slide

7. • One programming language
   
   • Single binary
   
   • Reusable “widgets”
   
   • ANSI standard 

   (ECMA-48/ISO/IEC 6429) 

   haven’t changed since 1991
   
   • Ever heard of TTY wars?
   Remember this?
   

   View Slide

8. Can I have it…
   in a browser?
   

   View Slide

9. Challenge
   • No CSS/HTML/JS for UI
   components
   
   • TTY in browser
   
   • Web app == terminal app
   Retro-futurism
   

   View Slide

10. My frontend skills are rusty…
    So let’s just bring the full terminal to the frontend
    • Xterm.js — powers Terminal in VS Code, 

    Hyper, etc… Full support for ANSI
    
    • Svelte.js because I wanted to try out smth new
    
    • Parcel.js to bundle with zero config
    
    • 100 lines of full “frontend” code in one file,

    mostly to handle WebSocket connections
    
    • WebSocket messages are our STDIN/STDOUT
    
    • Send every keystroke as a binary message
    

    View Slide

11. View Slide

12. What about
    the backend?
    

    View Slide

13. WebSocketing and PTYing
    • gorilla/websocket (no-brainer
    choice)
    
    • creack/pty (a Go package for
    using unix pseudo-terminals)
    Enter Golang
    

    View Slide

14. as a secret sauce
    • Cool, so I can PTY and
    the hell out of a server. Or mine
    my crypto!
    
    • Not unless we can control the
    environment you PTY into
    
    • Alpine Linux!
    
    • No network
    
    • Limit resources
    Docker
    

    View Slide

15. Run it!
    

    View Slide

16. entrypoint.sh
    inside user container
    

    View Slide

17. Implementing TUI
    “frontend”
    

    View Slide

18. Gophers love devtools, right?
    And developers love terminals!
    

    View Slide

19. Go TUI libs
    

    View Slide

20. Inspiration: derailed/k9s
    

    View Slide

21. And the winners are…
    • German engineering!
    
    • Amazing API
    
    • Lots of widgets
    
    • Oliver, if you see this — I’ll buy you a !
    

    View Slide

22. https://bit.ly/38vVnZk
    

    View Slide

23. Deployment
    • DO $10 droplet
    
    • k3sup for a single-machine k8s

    with Traefik ingress
    
    • docker:stable-dind for sidecar

    (to run user sandbox)
    
    • 1 Go binary for HTTPS/WSS
    server
    
    • 1 Go binary for TUI app
    
    • 2 Docker images
    
    • Survived Reddit
    

    View Slide

24. Thank you!
    https://github.com/progapandist/progapanda.org/
    

    View Slide