The exploration of Stream-Oriented Programming continues.
Now that we have a good UI library for that, a decent Collections Library, and the brand-new Observable Plugin System for streams, it’s time to build a blueprint for some really cutting-edge, futuristic webapps.
Principles
Three core principles drive this project
- Advanced simplicity (approach)
- Everything is a stream (code)
- Everything is a plugin (architecture)
„General-Purpose“ Simplicity
Too many people start their projects keeping them „simple“. If you pay some attention, that means a lot of things, depending on who you talk to. More often than not you see disastrous approaches like cars that can only drive forward and only turn right because that’s „what the client asked for“, or because turning right is considered „simpler“ than turning both ways.
So, whenever we have the chance to make a car turn both right and left, we’ll just do that, to give the idea.
Everything is a Stream
This is the core mantra of stream-oriented programming which wants all code made of monadic components split in two parts: reactive streams and binding templates.
Reactive streams, either functional (E.G.: RxJS) or imperative (E.G.: Callforwards) or something in between (E.G.: Signals).
We’ll stick with functional, as the whole paradigm is known to be far superior and we don’t want to bulid 💩.
Everything is a Plugin
We’ll break every piece of functionality of our app down into modules/plugins.
All modules use the messagebus pattern, so they are loosely coupled, have no knowledge of each-other and only communicate via messages by listening, emitting and replying to them.
The entry point of our application loads the modules, kicks off the plugin system and emits a single message „INIT“. Modules subscribe to it and the whole ecosystem starts up.
The Architecture
One module listens to INIT and that’s the router. It mathes the current route from the URL and emits a ROUTE message.
Then we have pages. They listen to ROUTE events, render a page (to a plain HTML string) and emit a RENDER event.
Lastly, there is a ui module that listens and render these somewhere in the HTML.
This is what every module exports, a function that takes topics and connects them.
export default ({ ROUTE, RENDER }: Protocol, config) => {
ROUTE.pipe(
match('/'),
map(template),
).subscribe(RENDER);
};
Go and see it
Enough talk for now. Go check out the project
on Stackblitz and roast it, all comments and insults are welcome!
Learn More
