∞

Going super fast with TURBO

I’ll be presenting at the first BELGRADE.js sessions about my favorite frontend stack. These are my notes for the talk.

I am a full-stack web developer and a passionate indie builder. Keep that in mind as I talk about my favorite frontend stack, to better understand why it works well for me but not necessarily for others.

First started building server-side rendered apps with PHP and Django. Around the time I was about to graduate, React was all the hype, and I followed. React and other SPA libraries quickly took over the job market as a default frontend choice for new projects. That was for a reason.

Single page applications significantly improved user experience over traditional server-side rendering.

Client requests only the data that is needed to update the page segment in the same process without rebuilding the DOM. A positive impact on server response time (reduced server load), client gets data faster and updates the page in-place. No white page, scroll position maintained. Great!

Unfortunately, all the good stuff came at the expense of complexity and developer experience. As a full-stack developer now I have to maintain a separate codebase and think about state management, routing, SEO, async data fetching…

React didn’t help with any of these issues. I found its ecosystem rather dynamic and complex. Following up with all the state management options (Context, Redux, MobX…) was consuming. Migration from lifecycle methods to hooks on a large codebase painful. JSX and create-react-app didn’t feel right.

So I started looking for a simpler alternative for my personal projects. Ideally, I wanted the dev experience of server-side rendering with the look and feel of SPA. That’s where HTMX and Hotwire fit in. Hotwire 1.0 was fresh release - perfect time to try it out.

hotwire-intro

Hotwire is created at 37signals to power Hey.com email service. I had already followed and admired what they do with Basecamp and Ruby on Rails. Hotwire works well with Rails, but is backend agnostic - use your favorite backend stack. Both Basecamp and Hey are globally popular apps, so I was confident their tech stack is production-ready.

hotwire-landing

Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire.

The idea is you can have a static page enhanced on the client without writing JavaScript.

No JS Land - Hotwire Turbo

Turbo is the main component of HOTWIRE stack. Turbo uses multiple techniques to enhance static pages with SPA-like user experience.

Turbo Drive 🧙

This is the auto-magic part of using Turbo. When you click on a link, Turbo Drive intercepts the visit, makes fetch request to the link URL and uses response HTML to replaces <body> without re-building the DOM. There is no refresh and white page between page loads, scroll position maintained, so by default we get fluidity of SPA on server-side rendered pages.

Turbo Frames 🖼️

It allows predefined parts of a page to be updated on request. If you have an independent segment of a page, you can make it a frame by wrapping with <turbo-frame> which will capture requests made from inside the frame and update frame contents with the response.

Turbo Streams

You can stream HTML elements (not the whole page) as events to the frontend and react to these events. If one-way connection (server → client) is enough, you can use server-sent events to stream HTML for page updates. Think notifications, messages, etc…

Hello JavaScript - Hotwire Stimulus

Now we have responsive and dynamic site, but you want to make elements interactive without necessarily (you can) reaching the server. Think tooltips, form validations, etc… That’s where Stimulus comes in - a JavaScript framework designed to enhance server-rendered HTML.

Stimulus Controller is a JavaScript object attaches to and interacts with DOM elements. To attach controller to an element, add data-controller attribute with a value equal to the controller’s name.

∞

Online communities and decentralised technologies

Online communities are a bastion of meaningful communication in a growing unidirectional networking. Groups I’ve joined over time are all hosted on Slack, Discord and Telegram - all proprietary software handling well public and invite-only groups.

What about paid memberships?

Paid membership is a great filter for spam.

Paid membership amplifies my motivation to immerse into an activity, like a gym or a language course.

A useful feature rarely available. Discord offers community subscriptions only to US based server owners, with high fees and strict terms. Other platforms outsource to third-party integrations - bots and automations - another layer of complexity and risk.

With technology at disposal, we can do better.

  • Nostr is a social protocol which facilitates identity, direct and group messages.

  • Lightning network is a payment protocol for fast and cheap transactions.

Here is an idea: open-source app tailored for online communities, built on top of Nostr and Lightning.

How would the flow look like?

  • Group landing page has an input field for your Nostr public key.

  • Enter and get Lightning invoice generated.

  • Pay invoice and your Nostr account can connect to the group private relay through a custom client with familiar experience.

Unique features

As paid community grows, valuable content needs to scale. Owner can allocate funds to stimulate other members' contributions.

Community members usually want to connect on public media. Besides internal view, the app would offer public feed (visible only to group members) of all member activity over public relays.

Sounds interesting?

∞

Fediverse, Mastodon and social networking protocols

A month ago I gave a talk at TX Conference 2023 about the Fediverse. The video is here.

Social networks are tools to keep us up to date with what others are doing. But they come with flaws. I will focus on centralization.

Instagram (Meta), Facebook (Meta), LinkedIn (Microsoft)… You see the pattern here?

Major social media is owned by tech giants.

The business of attention and data is a lucrative one, and there’s abundance to keep them running. Revenue is maximized by advertisements and algorithms amplifying content to keep your attention… these features make user a product and communication unidirectional - parasocial media.

But businesses often fail.

When a social network is gone, there is no way to migrate your connections.

Remember MySpace?

The above-mentioned platforms were created 10, 15+ years ago, when hardware was expensive and developer resources limited. To build such a system was a massive technical and financial challenge. Cheaper hardware and developer resources enabled a number of smaller platforms, often powered by open source software.

In 2018 ActivityPub is presented, a social networking protocol authored by W3C.

Protocol is a set of rules for communicating data. You are probably familiar with HTTP protocol - rules web browsers and servers follow to show you requested web page. Or email protocols - rules email clients and servers use to exchange email messages. ActivityPub is a protocol created for social media.

Let’s imagine X (ex Twitter) and Instagram have integrated ActivityPub protocol - Instagram is actually rolling it out for Threads. I could see, like, comment my friends' Instagram posts all inside the X app. They could see, like, comment my X content without leaving Instagram. While this is still an imagination, there are similar platforms which allow this kind of communication. They implement ActivityPub and form a decentralized network known as the Fediverse.

Mastodon is an ActivityPub-supported social network and the most popular one in the Fediverse, with many instances open for registration. It is open source - you can self-host or use a hosting provider. It is used at Medium, Vivaldi (the web browser), and Swiss authorities - to name a few interesting entities.

Other notable ActivityPub-supported platforms include:

  • Pixelfed, a decentralized photo sharing platform
  • PeerTube, a decentralized video sharing platform
  • Lemmy, a social link aggregation and discussion platform

But also WordPress (via official plugin), and soon Threads (docs), Tumblr, GitLab (experimental)… All setting the stage for widespread adoption.

There are drawbacks to this system.

In Fediverse, your identity is tied to an instance where you registered an account. The concept of instance and having to select one is an obstacle for newcomers. Like centralized platforms, you cannot rely on an instance run by communities and individuals to always be available, and when it disappears you have to migrate to a new one. Self-hosting is a choice, but that’s another issue.

Nostr is a social networking protocol with a different approach over ActivityPub.

We’ve covered centralized media, then partially decentralized (Fediverse) - if your instance disappears, so does your identity. Nostr is fully decentralized.

In Nostr you own your identity.
It does not link your identity to a specific server.

How? By using public-key cryptography.
Your public key is your identifier. Everything you publish to the network includes a signature only your key combination can create, in such a way that client can verify it’s you by just knowing your public key. Servers are called relays and serve as a database. They are not federated, do not talk to each other. Clients connect to multiple relays to publish and fetch data. As long as two users have mutual relay, they can exchange content. Moderation, filtering, and blocking are all client-side.

It’s a very interesting protocol I plan to cover in another article.

∞

Today is a sports holiday in 🇷🇸: World Cup Finals 🏀 and Djokovic US Open Final 🎾

I enjoy watching our basketball team. They were ruled out early as some of the best players didn’t join the team. Yet, they play like a family, giving 100% on the court. The best of the sports.