Slide 1
Slide 1 text
Andrey “Andy” Baranov
Go for TUI on the web
Backend is the new frontend
Story of a totally over-engineered
personal website
Slide 2
Slide 2 text
GUI TUI
Slide 3
Slide 3 text
Disclaimer: I’m not a true gopher
(but a rubyist impostor)
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
• 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?
Slide 8
Slide 8 text
Can I have it…
in a browser?
Slide 9
Slide 9 text
Challenge
• No CSS/HTML/JS for UI
components
• TTY in browser
• Web app == terminal app
Retro-futurism
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
What about
the backend?
Slide 13
Slide 13 text
WebSocketing and PTYing
• gorilla/websocket (no-brainer
choice)
• creack/pty (a Go package for
using unix pseudo-terminals)
Enter Golang
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Run it!
Slide 16
Slide 16 text
entrypoint.sh
inside user container
Slide 17
Slide 17 text
Implementing TUI
“frontend”
Slide 18
Slide 18 text
Gophers love devtools, right?
And developers love terminals!
Slide 19
Slide 19 text
Go TUI libs
Slide 20
Slide 20 text
Inspiration: derailed/k9s
Slide 21
Slide 21 text
And the winners are…
• German engineering!
• Amazing API
• Lots of widgets
• Oliver, if you see this — I’ll buy you a !
Slide 22
Slide 22 text
https://bit.ly/38vVnZk
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
Thank you!
https://github.com/progapandist/progapanda.org/