mailwal

Hologram Newsletter #5

Bart from Hologram

Your monthly check-in with everything Hologram-related

Hologram Newsletter #5

Hey folks! It's been a while since the last issue, so this one covers three months instead of one. The summer was packed: two releases, a talk and a full-day workshop at ElixirConf US, a talk at Goatmire, and more work on the local-first data layer than I can describe in one email. Something had to give, and it was the newsletter. I'm back on schedule now. Here's what happened, with links if you want the long version of anything.

The short version

  • v0.12 compiles big apps about 100x faster and ships much smaller bundles
  • v0.11 brought Elixir regexes and real stacktraces to the browser
  • I showed the local-first data layer working at ElixirConf US and at Goatmire, and started a blog series about it
  • I started a Hologram Showcase, with a new project every Monday
  • Evo Store joined as Performance Sponsor

v0.12: faster compiles, smaller bundles

This one came out of a real problem. Evo Store's app has over 9,000 modules, and v0.11.1 couldn't build it at all, it just ran out of memory. On v0.12 that same app builds from scratch in 23 seconds, a mix compile with nothing changed takes about a second instead of 107, and the runtime bundle went from 5.6 MB to 660 KB, which is 133 KB gzipped in production. Getting the bundles down took me two tries, and the first one was 12,600 lines of code I ended up throwing away. I wrote up that story here.

There's some non-performance stuff in there too. Props are validated now, you can read props in actions, and a component's actions always run in the order they were dispatched. The latest patch is v0.12.5, so if you're on 0.12 already, grab that one.

v0.11: regexes and stacktraces in the browser

v0.11 came out in August. The big one is that Elixir regexes finally run in the browser and give you the same results as on the BEAM, even for the PCRE2 features JavaScript's own regexes don't have. Client errors now come with real Elixir stacktraces too, and templates got dynamic tags and attribute spread. One thing to know before you upgrade: it needs Elixir 1.19 and OTP 28.1.

Three weeks later I shipped v0.11.1 with 27 bug fixes, plus 4 performance improvements, 2 enhancements and 3 docs updates. The bugs weren't things v0.11 broke. Most of them were old ones that only showed up once more people started building real apps, and twelve of them came from your reports. Thank you for those.

Local-first, on stage and in writing

In the last issue I said the data layer would make its debut in Chicago, and it did. The talk starts with a trip planner open in two browser windows. I switch the wifi off in one of them, add a couple of stops, switch it back on, and the other window catches up. After that I go through how it all works under the hood. The demo app is on GitHub as hologram_offgrid if you want to read the code.

The day before the talk I also ran a full-day workshop on the same material. It was a little chaotic, honestly, and I learned a few things about how to run the next one. Thank you to everyone who came and rolled with it!

I also started writing about the data layer. The first post is Local-First Means Three Different Things, about why people keep talking past each other when they use that word. It has five interactive demos, and they're Hologram components, of course. I shared it well beyond the usual Elixir channels, and it got a great response there too. Local-first is something people in other ecosystems are looking for, and it's a real chance to bring some of them to Elixir.

Is Hologram trying to do too much?

That's the question I heard most after the Chicago talk, on the forum, under the video and again last week in the Ash Discord. Now that Hologram has its own data model, queries and permissions, isn't it trying to do too much? Won't it end up fighting with Ecto and Ash?

I don't think so. The data layer is opt-in, and it exists for one reason, which is local-first. It can't be built on Ecto because the same queries and permission rules have to run in two places, in Postgres on the server and in the browser against the local copy. An Ecto query can contain anything Postgres understands, so the browser has no way to run it. You need a smaller language that both sides can evaluate. Every sync engine I know of ended up in the same place, Zero has ZQL and InstantDB has InstaQL. My longer answer is on the forum.

Here's a first look at what it looks like. Permissions are roles plus allow lines, and the when: part is the query language, so the same condition works as a filter:

To be clear about what this means for you. Hologram on the frontend with Ecto or Ash behind it works today and will keep working, inside a Phoenix app like now and later in standalone mode. I'm planning Ecto and Ash interop so writes from outside still reach the sync. And if your app never defines a data model, none of the data layer code ends up in your bundle.

Chicago and Goatmire

Chicago was a great week. Outside the talk and the workshop, the best moments were the conversations. Brandon Swalve, the CEO of AppSignal, invited me to dinner with a few others, which he called "good, nerdy dinner conversation" in his recap. I also had long talks with Bruce about AI and history, and Henry showed me around the city. On the last day Trevor and I rode the train out to the airport together, I had my first Chili's, and right next to the security line there was an actual hologram. I couldn't not take a picture of that 😄

With Trevor at O'Hare

The hologram by security at O'Hare

Three weeks later I was in Varberg for Goatmire, giving a talk on a theatre stage built in 1895. I took a small packing-list app written the usual way, with a spinner on every save, and made it local-first step by step. My favourite slide is the one where a big chunk of the code just gets deleted. It was also great to finally meet some of you in person, James Harton among them, who's been sponsoring Hologram for a while. The hotel had 15,000 books and a spa named after Lenin, and with so many talks about Nerves and hardware, I came home wanting to finally play with it. Thank you, Lars, Stina and everyone who helped run it.

With Lars Wikman on stage at Varbergs Teater

Next up: ExMex, and it's not me on stage

Usually I'm the one talking about Hologram at conferences. This November it's John Mauro, and that feels great. He's speaking at ExMex in Austin on November 12-13, and the talk is called "The Future of Full-Stack Elixir: Building Local-First Apps with Hologram". He'll show Elixir running in the browser, the sync engine underneath it, and an app that keeps working when the network doesn't. If you're anywhere near Austin that week, go and say hi.

The Hologram Showcase

Most people I talk to want to see who else is using Hologram before they try it themselves, and until now I had nowhere to point them. So I've started a Showcase on the website, adding a new project every Monday. The first entry was the Hologram website itself, and the first community one is Combat Log by Dillon O'Connor, a goal tracking app for software teams that he moved over from LiveView one page at a time.

If you've built an app or a library with Hologram, send it in. You get a page on the site, a post on my socials and the forum, and a mention in this newsletter.

Built with Hologram

A few things people built this summer that I liked:

  • Mike Hostetler's Jido Assembly, a Slack clone where AI agents and people share the same rooms.
  • Yendris Cruz Mendoza's holo_map, 27 MapLibre map components for Hologram.
  • Junaid Farooq's Pipe Racer, a multiplayer typing race where you race on real Elixir code.
  • Zed has three community Hologram extensions now, by John Mauro (from the last issue), Luka Tchelidze and Mohammed Nagieeb. An official one is on the way too, eventually. And if you're on Neovim, John's tree-sitter-holo grammar works there.

What people are saying

Zach Daniel, creator of Ash: "I almost built Moatless with Hologram but there were a couple items that stopped me. Solvable things, so I'm definitely interested in trying a project on it still." The items were SEO gaps: raw HTML output, JSON-LD in <script> tags, and real 404s. All three ship in v0.13.

Mike Hostetler, creator of Jido: "Hologram is really growing on me. It's my go-to frontend toolkit now for anything Jido related due to the way it handles events and realtime."

Matthew Miller, after upgrading the site he moved from LiveView two years ago: "It has all of the tools I need in a comprehensible, comprehensive, and ergonomic package."

John Mauro, on the upcoming local-first data layer: "I've been playing around with it and the DX is unmatched imo."

Louis Pilfold, creator of Gleam, on regexes in v0.11: "Wow, that's impressive!"

Oliver Mulelid-Tynes, who ported a large production app: "I could never go back to LiveView from Hologram in an app I control after having used Hologram for a while. I just keep shooting my own foot with LiveView, even five years in."

Backing Hologram

Evo Store joined as Performance Sponsor. Theirs was the app that wouldn't compile, so they're funding the work on compile times and bundle sizes, and the fixes go into the compiler everyone uses. If your company is stuck on something specific in Hologram, sponsoring the fix is an option.

The Sruplex logo is new on the website too. That's Sheharyar Naseer's company, and he's been backing Hologram as Innovation Partner for almost a year. Thank you, Sheharyar!

Curiosum, the EEF, Evo Store, Sruplex and everyone on GitHub Sponsors are what let me work on Hologram today, and I'm grateful to every one of them. But there's a gap right now. The EEF's first milestone round ended with v0.11, and the second one can't start until companies earmark support for Hologram through the Foundation. Until then, Hologram's funding is short. If your company could help, this post explains how, or just send me the name of whoever handles that budget and I'll take it from there. Individual sponsorship starts at $14 a month on GitHub Sponsors.

Hologram is built thanks to Curiosum (Main Sponsor, recently named an Elixir Open Source Steward by the Elixir team), the Erlang Ecosystem Foundation (Milestone Sponsor), Evo Store (Performance Sponsor), Sruplex (Innovation Partner), and everyone backing the project on GitHub Sponsors: Framework Visionaries @absowoot, Robert Urbańczyk and Moss Piglet, Early Adopters Daniel Calancea, @pasila, Jonatan Männchen, James Harton, Ian Asaff and Max, and everyone else sponsoring on GitHub. Thank you! 💜

Coming in v0.13

The local-first data layer, plus:

  • Strict Content Security Policy support, thanks to Gilberto Garcia for the nudge
  • Declarative focus control with $focused
  • Drag and drop handling
  • Raw HTML output and JSON-LD in <script> tags
  • Real 404s and custom error pages
  • No more npm, Hologram will ship its own JavaScript dependencies
  • And a few more smaller things

Further out, see the roadmap.

Other things

  • Luka Tchelidze made a short video, What Is Hologram?, a good one to send to anyone who asks what this is about.
  • Roman Kotov asked in the comments under the two-tries post what happens to cached struct code after a deploy. Short answer: chunks are named by content hash, and an open tab picks up new ones without a refresh.
  • RottenFishbone's detailed feedback in Discord is why debounce and throttle in v0.11 know about forms and navigation now.
  • Revanth asked in Discord whether Hologram could build something like Twitter, because his AI said it wasn't recommended. That's pretty much the canonical Hologram use case.

New on the website

  • There's a blog now, with every post in one place.
  • Configuration has every setting on one page. Heads up, Hologram reads them at compile time, so config/runtime.exs won't work for them.
  • Bundling explains what goes into each bundle and when struct code gets loaded.
  • Reporting Vulnerabilities exists because Mike Buhot asked where to send one.

Two waitlists

Both are paid but affordable, and they help keep Hologram development going:

  • Hologram UI, the official component library.
  • Courses, video courses that build real apps in pure Elixir.

Before you go

If you want to help, star the repo, send your app to the Showcase, or forward this to an Elixir dev who'd enjoy it. And if your company runs on Elixir, putting Hologram on the radar of whoever decides on sponsorships helps more than you'd think. Got a question? The Discord is the fastest way to reach me. I also post as I build, on X, Bluesky and LinkedIn.

- Bart

You're getting this because you subscribed at hologram.page/newsletter.