Static SPAs: Exploration of Leptos, Dioxus, and Next.js

Christian Kjær in a casual setting :)
Christian Kjær
28 min read

·

5. July 2024

·

, , , , ,

One of my absolute favorite methods of deploying Frontends is to pre-generate all routes statically, and then let each route load the dependencies they need for interactivity.

  • Load times are fast
  • The user only downloads what they need (great for slower or mobile networks)
  • SEO is great in many cases, and okay in others
  • It can all still be deployed in the most optimal way which is CDN + Static Assets

I particularly care a lot about infrastructure scalability, maintainability, robustness, and cost. SSR typically makes each of these significantly worse compared to simply serving static files. I also don’t believe mixing your API into your Frontend code (i.e. Server Actions) will do you any favors when you start scaling up your teams, but that’s a topic for another day.

In this post we'll explore how this can be setup and compare a couple of different frameworks. Let's start with the overall results before we dive into the details:

FrameworkSSG SupportHydration SupportAssets Chunking
Next.js✅ Chunk per page
Leptos❌ One single WASM bundle*
Dioxus✅**❌ One single WASM bundle*

How I structure work as a Solo Founder

Christian Kjær in a casual setting :)
Christian Kjær
9 min read

·

26. June 2024

·

, ,

This is for sure something that will keep evolving over time, but I got inspired by this Hacker News post to share in more detail how I organize myself and my work (you can see my short answer here).

The question posed is great, so let’s start from there:

When working with a team, I've found that Scrum-like short-term goals and organized task backlogs really help keep me focused and on track with the work I have to do. For solo development, however, I've never really found any approach that sticks and often end up getting sidetracked and losing track of my objectives.

So my question to all of you is, what tools and techniques have you used to ensure you stick to your objectives?

You could rephrase this slightly to: How do I run my own project management?

For most Engineers, this is not actually something they’ve needed to do often, especially if working in larger corporations. The people that have worked at Startups are a mixed bag, where some learn the value of structure, and others managed to get by without since the fast-paced environment changes things around all the time anyways.

I’ve personally landed in the camp of: Structure is valuable, even crucial, but it should never get in my way. Best of both worlds sorta.

Mobile: A different way using Rust?

Christian Kjær in a casual setting :)
Christian Kjær
11 min read

·

25. June 2024

·

, , , , , ,

After having spent the better part of two months deep in the trenches of iOS development with Swift, I can comfortably say: Web Development simply is more mature.

Let’s just run over a few things I ran into that’s bad, broken, or made for a poor experience:

  • A lot of issues with data handling in general
    • Turning iCloud on when using SwiftData will restrict core functionality such as the ability to have unique IDs on your data, meaning everyone now has to handle duplicates
    • iCloud (CloudKit) and data migrations don't work really work, it just won’t run it making data changes in your models quite the chore
    • SwiftData generally has very bad performance, both in reads, writes, and inserts
    • It’s quite hard to control memorization and rendering performance (e.g. @Query in your View)
  • Swift itself is a bit of an eh language - it has many good parts and ergonomics, but also some weird design choices that make scaling codebases messy such as everything by default living in the global namespace and file names can’t clash
  • SwiftUI is generally great, except when you want to do anything non-standard, in which case you’ll quickly feel the pain
  • The feedback loop is slow: If you can run things in the Preview that’s the fastest, otherwise it’s a full Compile→Run→Simulator loop
  • UI performance issues are very easy to sneak in, and very hard to track down
  • Apple’s frameworks sure do have a lot of bugs and you’ll commonly see stuff being broken almost permanently

Admittedly, these might be trivial gripes for someone that has spent years in the Mobile ecosystem, but they certainly didn’t make me fall in love with it. More importantly, it wasn’t really providing a great user experience either.

….so what’s the alternative?

Setting up UniFFI for iOS, Simulators, and watchOS

Christian Kjær in a casual setting :)
Christian Kjær
6 min read

·

24. June 2024

·

, , ,

This is a part of the post Mobile: A different way using Rust?.

There are some great resources out there on UniFFI already such as this post, but it doesn’t cover watchOS, so let’s take a quick tour through what I’ve set up in the example repository https://github.com/Tehnix/template-mobile-wasm.

We've set up four crates:

  • appy: Our Leptos App, Capacitor, and the XCode project
  • capacitor-rs: Bridging code between the Capacitor JS library and our Rust code
  • shared: Our shared code that we might use in appy, and also want to expose in Swift to use in our Widgets or watchOS App
  • mobile: Where we will generate the Swift bindings from via UniFFI, reexporting everything from shared that’s made available to UniFFI via the macros

I won’t go over the details to get these to play nicely with Cargo and Workspaces, check out the repository for that. Let’s instead focus on a simplified version of what mobile does (the rest assumes you’re in the mobile/ directory).

Using Capacitor Plugins from Rust/WASM

Christian Kjær in a casual setting :)
Christian Kjær
7 min read

·

24. June 2024

·

, , ,

This is a part of the post Mobile: A different way using Rust?.

Capacitor is normally used in combination with JavaScript projects, so there is little help available if you want to use it in a Rust/WASM project. Worry not! That's exactly what we'll take a look at in this post.

Since Capacitor is a JS framework there will be a little extra work involved in interacting with any plugins, but it’s honestly not a lot we need to do. Let’s take a quick tour through what I’ve set up in the example repository https://github.com/Tehnix/template-mobile-wasm.

The Stack Part 3: Building a Frontend

Christian Kjær in a casual setting :)
Christian Kjær
39 min read

·

16. October 2023

·

, , , , , , , , ,

In the last post we set up our deployment, fully automated on merge to our main branch. In this post we will be building our UI (Frontend) applications. See the full overview of posts here.

At the end of this post we will have:

  • A Next.js Frontend app with support for localization, using Tailwind CSS.
  • A Leptos Rust/WASM Frontend app with support for localization, using Tailwind CSS.
  • Automatic deployment of our Apps AWS using CDK, statically hosted using S3 + CloudFront.

We are essentially hedging our bets by building both a JavaScript-based Frontend, which is the safe bet, and a Rust/WASM-based Frontend, which is the future bet. We will be using the same GraphQL API for both, so we can easily switch between them.

There is quite a lot to cover. My recommendation is to clone down the Part 3 branch in the GitHub repository and use this post as an explanation of what is set up.

The Stack Part 2: Automating Deployments via CI

Christian Kjær in a casual setting :)
Christian Kjær
21 min read

·

8. October 2023

·

, , , ,

In the last post we created our Control Tower structure with all of our AWS Accounts in it. In this post we will be automating our deployment process for each of these environments. See the full overview of posts here.

At the end of this post we will have:

  • A workflow for bootstrapping our AWS Accounts for CDK (see here).
  • A workflow for deploying our CDK stacks, including synthesizing and testing before (see here).
  • Set up automatic staggered deployments when changes are merged to our main branch.
  • And fallback to manual deployments if we need to.

If you want to jump straight to the code, you can find it in the GitHub repository which links directly to the Part 2 branch.

Otherwise, let's jump in!

The Stack Part 1: Setting up your AWS Account Structure

Christian Kjær in a casual setting :)
Christian Kjær
9 min read

·

7. October 2023

·

, ,

In the last post we went over the overall goals of "The Stack" and what we will be building. In this post we'll be setting up our AWS Account structure. See the full overview of posts here.

As a reminder, here is the structure we are aiming for:

  • Control Tower: This is your central place to control access and policies for all accounts in your organization
  • Production Multi-tenant: Your primary production account for multi-tenant setup, and most likely were the majority of users will be
  • Production Single-tenant: While desirable to avoid the operation overhead for single-tenant setups, its good to think in this from the get-go
  • Integration Test: This will be the account that IaC deployments get tested on to ensure rollout works
  • Preview: This will be used to spin up Preview Environments later on
  • Individual Developer: Individual developer accounts to allow easy testing of IaC testing and exploration
  • Monitoring: Centralize monitoring and observability into one account, allowing access to insights without access to sensitive logs or infrastructure from the other accounts
  • Logs: Centralized storage of logs, which may require different access considerations than metrics and traces

"The Stack": Everything you'll need

Christian Kjær in a casual setting :)
Christian Kjær
9 min read

·

29. January 2023

·

, , , ,

This will be a series of blog posts where we will build up the perfect infrastructure setup for the majority of usecase, aka "The Stack". We'll be building everything on top of AWS.

Before diving in, let's first establish some goals:

  • Performant: Latency and performance is important as this will serve end-users.
  • Low cost: We want our base cost to be low, and our costs to scale well with high traffic. Ideally, it should cost nothing if no users are using it.
  • Low operational overhead: It's >=2023, nobody wants to nurse servers or services anymore, things should scale up and down without intervention or oversight.
  • High flexibility: Everything should be built with the foresight of future scalability, both organizationally, code-wise, and in the way things fit together.
  • Modular: Pieces of the infrastructure should be opt-out, e.g. if you don't need Pub/Sub, it can be skipped.

Obviously, this is my personal opinion on it, but I'll be sharing the thinking behind each of the choices as we go along.

Some technology choices upfront:

  • Everything will be infrastructure as code using AWS CDK.
  • We'll be using Rust throughout for each service, as it allows us to squeeze out the most performance while still giving us a nice developer experience.
  • Federated GraphQL will be our way of facilitating microservices.

Common JSON patterns in Haskell, Rust, and TypeScript

Christian Kjær in a casual setting :)
Christian Kjær
15 min read

·

5. April 2020

·

, , , , , , ,

A lot of web development is transforming JSON one way or another. In TypeScript/JavaScript, this is straightforward, since JSON is built into the language. But can we also achieve good ergonomics in Haskell and Rust?

Dear reader, I am glad you asked! 🙌

The comparisons we will see are not meant to show if one approach is better than another. Instead, it is intended to be a reference to become familiar with common patterns across multiple languages. Throughout this post, we will utilize several tools and libraries.

The core of working with JSON in Haskell and Rust is covered by:

  • Aeson: a Haskell JSON serialization/deserialization library.
  • Serde: a Rust JSON serialization/deserialization library.

The ergonomics is then improved in Haskell by grabbing one of the following options:

We'll go through typical use-cases seen in TypeScript/JavaScript codebases, and see how we can achieve the same in Haskell and Rust.

Visual Studio Code on iPad

Christian Kjær in a casual setting :)
Christian Kjær
6 min read

·

20. March 2020

·

, ,

With Apple increasing their focus on making the iPad a viable device for work, it is time to revisit using my iPad as a workstation for programming.

I rely heavily on command-line tools and language-specific tools (rust-analyser, node, ghcide, etc.) for my day-to-day programming, and my current setup features:

  • Blink with mosh to a remote server.
  • Neovim and wemux on the remote server.
  • iSH to play around with very simple CLI needs locally on the iPad.

On my computer, I use Visual Studio Code, and it's long been a wish to get that running somehow on my iPad. This is an attempt to make VS Code available on the iPad under the restrictions that we have to deal with.

Live Migration of DynamoDB Tables

Christian Kjær in a casual setting :)
Christian Kjær
6 min read

·

19. March 2020

·

, , ,

Recently I was faced with the challenge of having to migrate a set of AWS DynamoDB tables to completely new tables. We wanted to achieve this without affecting any of our users, and without having a maintenance window while migrating data from the old table to the new ones.

The following will be a very high-level overview of how you:

  • Get all your DynamoDB events onto a queue
  • Replicate your DynamoDB tables to the new tables (or even a different region)
  • Continuously synchronize your original tables to your new tables
    • Restart the migration if you made an error
  • Complete the switchover after validating everything looks OK

Mobile Haskell (iOS)

Christian Kjær in a casual setting :)
Christian Kjær
13 min read

·

7. February 2018

·

, ,

A lot of progress has been going on to make Haskell work on mobile natively, instead of e.g. generating JavaScript via GHCJS and using that. Unfortunately, not much documentation exists yet on how to build a project using these tools all together.

This post will be an attempt to piece together the tools and various attempts into a coherent step-by-step guide. We will start by setting up the tools needed, and then build an iOS app that runs in both the simulator and on the device itself (i.e. a x86 build and an arm build).

Using Electron with Haskell

Christian Kjær in a casual setting :)
Christian Kjær
8 min read

·

11. May 2016

·

,

If you want to grab the whole code from this post, it can be found at codetalkio/Haskell-Electron-app.

Not much literature exist on using Electron as a GUI tool for Haskell development, so I thought I'd explore the space a little. Being initially a bit clueless on how Electron would launch the Haskell web server, I was watching the Electron meetup talk by Mike Craig from Wagon HG (they use Electron with Haskell) and noticed they actually mention it on the slides:

Compiling SCSS and JavaScript in Hakyll

Christian Kjær in a casual setting :)
Christian Kjær
4 min read

·

10. May 2016

·

,

This seems to be an often asked question, so I thought I'd try and share the approach that I've arrived at after having explored a couple of solutions to the problem. If you want to see the full code in action, check out the repo for the codetalk.io site (linking to v1.0.0 is intended, in case the code changes later on).

Briefly on the purpose of Functors, Applicatives and Monads

Christian Kjær in a casual setting :)
Christian Kjær
7 min read

·

28. November 2015

·

In a recent thread on /r/haskell about how to motivate the AMP proposal in teaching, I read a comment that finally helped me understand the purpose of Functors, Applicatives and Monads.

S3 bucket specific policy

Christian Kjær in a casual setting :)
Christian Kjær
2 min read

·

18. November 2015

·

I have recently started caring a bit more about security on my AWS applications, and to this end Identity & Access Management (IAM) users are a great way to limit access to a need-to-use-only basis.

Recently I set up my IRC server to download its configuration and install files from an S3 bucket. This meant that it needed to have read access to a specific bucket, and for this an IAM role was created.

There are two ways to generate policies:

I will generally advise to either use the generator completely or at least use it for the basis of the policy you want to create.

Setting up UnrealIRCd and Anope IRC Services on EC2

Christian Kjær in a casual setting :)
Christian Kjær
10 min read

·

18. November 2015

·

, , ,

Having recently discovered sameroom.io I wanted to update the codetalk IRC server to be compliant with their authentication method. This basically just meant enabling SASL support, but while I was tinkering with stuff anyways, I thought I might as well streamline the setup process for the IRC server. In short, everything is fully automated and set up on AWS using EC2 and S3.

This will go through the process of doing exactly that, by talking about:

Irssi notifications on iOS and Android

Christian Kjær in a casual setting :)
Christian Kjær
2 min read

·

25. September 2014

·

Or really anywhere that https://pushover.net supports.

In light of the earlier article, I thought I'd might as well supercharge my IRC setup. So, now we're gonna get some notifications for our mobile devices via pushover.

Local notifications from irssi on a remote server

Christian Kjær in a casual setting :)
Christian Kjær
5 min read

·

24. September 2014

·

So, if you're like me and like to have your IRC client (in this instance irssi) running on a server in a tmux or screen session to never miss out on the conversation, you might feel like you're missing some of the benefits of running a local IRC client.

In particular, I was missing local notifications when someone would highlight my nickname. I could of course use a bouncer, but hey! it's no fun running irssi locally and having to close it for a reboot just as you've gotten it precisely the way you like it 🙂...

So, how does one solve this problem?

Deploying with Vagrant

Christian Kjær in a casual setting :)
Christian Kjær
10 min read

·

13. February 2014

·

UPDATE: I wouldn't really recommend this approach anymore! Instead you should look into Docker for containerization and Stack for the Haskell side

I recently started looking into ways that I could improve my current deployment workflow. Since my server doesn't have much RAM, I currently build the binaries locally in a Virtual Machine (VM from here on out) and then send them to the server using scp.

Although I can't do much about the server part (except buying a bigger server), I can do something about what I do locally. I set out to check what possibilities I had, and ended up looking at Vagrant.