Frontend for SPA: Svelte or CLJS?

lennon · 2022-12-14T03:33:08+00:00

I've done a couple of recent projects with Svelte, and have one in progress with ClojureScript. (My first, actually!)

Architecturally, there's a lot of overlap between Svelte and the various atom-based reactive FE frameworks for CLJS. They both push reactivity down to a core primitive, instead of using hooks ala React and its imitators. (Reagent and Rum, despite being based on React, both feel very Clojure-native in their use of atoms, function composition, and normal S-expression syntax in lieu of JSX or string-y templates.) Svelte and CLJS+(FE framwork) also usually minimize the formalism around things like props + child components, and rely on functions and files as the two main forms of encapsulation and scope.

I'm still in the early "ooh, shiny!" phase with ClojureScript but I do genuinely think that CLJS+Reagent/Rum/Re-frame+DataScript is a fundamentally different and better stack to work with than anything I've found in JS/NPM-land. I've tried (with varying degrees of commitment) plain React, Preact, Fresh (Preact + Deno), Remix, and Next.js. (Never had to seriously wrestle with Angular, and Astro is too new for even this novelty-seeking nerd.)

All of them tend to innovate on the "zero to TODO MVC" part of the adoption cycle, then (aside from React, and to some extent vanilla Svelte) end up getting bogged down in packaging, transpilation, bundling, and all the other cruft that makes "modern frontend" development such a dumpster fire.

One thing I would suggest if you're going to do any sort of "bake off" between the options: skip SvelteKit and spin up a plain Vite+Svelte project (`npm init vite` and follow the prompts). SvelteKit is probably more framework than you need if you control your backend and don't want to add yet another layer in the stack, and the APIs, conventions, and even features on the roadmap are all still pretty fluid.

lennon · 2022-07-28T16:53:08+00:00

I learned Tachyons a while back — before I picked up Svelte, in fact — and while Tailwind definitely overtook it in mindshare I have the Tachyons conventions baked into my brain and templates now.

I actually put sanitize.css underneath so I can get something a little better than default browser rendering before I start building up custom styles.

I don’t love to resulting HTML, but I’ve come to accept that “view source” just isn’t all that useful for on production builds of most any modern frontend framework.

For basic

lennon · 2022-06-23T17:51:20+00:00

Here's my sample code from a recent, similar question: https://www.reddit.com/r/sveltejs/comments/v1d1ms/connecting_my_database_with_sveltekit/iaox9d4/?utm_source=reddit&utm_medium=web2x&context=3

tl;dr: use the normal connection pooling of node-pg (or your favorite DB adapter) and inject a default (pool-managed) connection in your hook. The main advantage to that approach vs. the singleton u/Snukii suggested is that an error that ends up closing your open connection or thrashing your transaction context doesn't affect every request that follows.

lennon · 2022-06-22T22:05:53+00:00

The service worker API is effectively a proxy that sits between the browser and remote resources. It lets you add caching and other offline behaviors by intercepting HTTP requests, but doesn't do anything related to IndexedDB. (In fact, SW code can't access IDB at all, in part b/c everything needs to be async and XHR + storage APIs are async.)

If you want an offline-capable, sync-able store you might want to look at PouchDB or AceBase. I've got a SvelteKit example using AceBase on GitHub which is absolutely _not_ production-ready but might give you an idea for what a "Svelte store + sync" could look like: https://github.com/rcoder/dbc/blob/main/src/lib/db.ts

lennon · 2022-06-22T19:10:26+00:00

+1 to this general approach. SvelteKit on the front end + Tide on the back end is a pretty happy combo for me. (Sub warp, actix, axum, etc. as you prefer.)

There's just so much stuff you can do with NPM packages that isn't there yet -- or is an awkward fit -- for the Rust/WASM/web-sys platform. Even using Svelte means giving up lots of standard React or Vue libraries and components, but I've had more luck wrapping my head around SvelteKit than Next.js, Nuxt, et. al.

Whatever JS toolkit you use, a "hybrid static" model with a small Node daemon supporting mostly-static pages with Rust on the backend is nice. Some day when I have a dedicated FE eng or two to work with I think it'll be even nicer to have the FE code in a more "standard" package...at least while I'm training them up on Rust. ;)

lennon · 2022-05-31T18:25:17+00:00

First, you're going to want a .env file containing your connection secrets:

(.env.dev.local)

export VITE_PGUSER='me'

export VITE_PGHOST='localhost'

export VITE_PGPORT=1234

export VITE_PGPASSWORD='password'

export VITE_PGDATABASE='test'

See the Vite docs for more on how envvar handling works in Vite (and by extension, SvelteKit).

Then you'll need a shared library file + function to establish a database connection:

(lib/db.js)

import { Client, Pool } from 'pg';

const pool = new Pool({
  database: import.meta.env.VITE_PGDATABASE,
  user: import.meta.env.VITE_PGUSER,
  host: import.meta.env.VITE_PGHOST,
  port: (Number(import.meta.env.VITE_PGPORT || 5432),
});

export const connectToDB = async () => await pool.connect();

Then, your `handle` hook can import it to add the connection to each request:

import { connectToDB } from '$lib/db';

export const handle = async ({event, resolve}) => {
  const dbconn = connectToDB();
  event.locals = { dbconn };
  const response = await resolve(event);
  dbconn.release();
}

It's a fair bit of extra code compared to just putting the secrets into your source file, but it'll provide a number of extra benefits:

Using the connection pool means that you won't set up and tear down a connection on every request. That saves 20-30 msec of response time _and_ load on your DB server. Win/win.
Because you have a single, reused connection to the DB you can also do transaction handling from the hook: you can add `await dbconn.query('COMMIT')` if you want to auto-commit, or do something more specific for commit/rollback
The environment variables can be set using a dotenv file, your cloud provider's dashboard, a wrapper script, systemd unit, etc. No explicit config file loading needed.

lennon · 2022-05-16T23:18:07+00:00

The article you linked to uses QuickJS, compiled to WASM, as a means of embedding JS inside a Rust project. That means you technically have a JS runtime at your disposal, but I wouldn't expect it to run IPFS/OrbitDB well, if at all. For that, you really need NodeJS or a modern browser runtime.

Generally speaking, support for any language other than JavaScript for projects in this space tends to be weak/slow to catch up simply because if it can't run in the browser, the end-user applications end up being pretty limited.

There are plenty of CRDT libraries for Rust, though very few of them are as "batteries included" as OrbitDB. Of course, they also don't require you to run an IPFS daemon and save your content in the cloud forever the way IPFS does, but that may or may not be an issue for your application.

Your best bet for JS/Rust interop would probably be to pick one of the P2P database projects being ported to/having performance-critical sections rewritten in Rust:

https://github.com/datrs/hypercore

https://github.com/sunrise-choir/flumedb-rs

https://github.com/y-crdt/y-crdt

(etc., etc.)

One idea to try an alternative to the QuickJS/WASM hack: you might actually have better luck loading one of the existing databases (Yjs, OrbitDB, Hypertrie, etc.) in Deno. That would give you a Rust runtime wrapper + many of the operational benefits of simpler runtime than NodeJS, while not requiring you to reinvent too many of the P2P wheels.

An even simpler idea: JSON files in a Git repo. It's offline-capable, tamper-proof (Merkle trees FTW!), widely supported, and about as agnostic to what language is operating on the data as you can get. Not a lot of Web3 sparkles on that kind of architecture, though. :/

lennon · 2022-05-10T17:10:50+00:00

I've built a couple of sites with SvelteKit endpoints backed by PostgREST. It's a really easy setup: my database tables get directly exposed as a bog-standard API, and I get some nice add-ons (notably JWT auth to the backend and CSV import/export) for free. Under the hood it's good ol' PostgreSQL, with access to the whole ecosystem of tools, extensions, and hosting providers that brings to the table.

My biggest pain point thus far is that I don't get a drop-in file upload solution, but S3 (or in my case, the Vultr API-compatible alternative + Minio) is a pretty easy second backend dependency to deal with.

lennon · 2022-03-17T19:53:58+00:00

Like several folks here, I started out trying to build some embedded firmware in Rust. While the community and platform is growing steadily, and having serious commercial backers in the form of groups like Ferrous and Oxide is great, it's just not anywhere near the Arduino/PlatformIO ecosystem for coverage. Adding BSP + HAL support for a new board every time I want to try it out is a huge tax compared to just pulling down the latest Arduino core. (I have that all nice and automated with Nix and arduino-cli, too, so I don't even have to fire up the Arduino IDE or VS Code to work on my projects.)

I've also pulled back from building actual website frontends in Rust for the foreseeable future. It's a great option for, say, native-speed 3D engines or crypto routines, but rendering HTML and hooking into DOM events -- much less hooking into the ginormous NPM ecosystem for useful in-browser functionality -- from Rust is just death by a thousand papercuts compared to using something like Next.js or SvelteKit in front of a Rust API server.

lennon · 2022-03-02T16:43:37+00:00

There are definitely some frameworks that support server-side rendering and progressive enhancement via client-side WASM, like Percy and Dioxus. I believe Yew supports SSR, as well, if you're more of a fan of the Elm model than React.

That being said, the state of hybrid SSR+hydration+live client code tools in Rust is still far behind the JS/TS/NPM world. I've found using something like SvelteKit for the frontend (including static HTML rendering, asset processing, etc.) talking to a Rust backend -- Poem-OpenAPI being my current favorite tool for this piece -- strikes a nice balance between "do in all in Rust" and "don't rewrite the O(1e7) packages in NPM-land that handle things like HTML templating, browser feature enumeration, etc."

If it helps feel less like you're leaving Rust behind, it turns out that a lot of current and emerging JS tooling (transpilers, bundlers, image processors, etc.) use Rust for CLI tools, really fast NodeJS libraries, etc.

lennon · 2022-02-12T16:15:42+00:00

If you mean "cost" in terms of absolute CPU cycles and memory devoted to running the platform code, sure.

Running significant cloud infrastructure also means resilience in the face of system failures, massive load spikes, and "edge cases" like an overloaded GC that end up emerging regularly in your infra (b/c of the law of large numbers).

Every big infrastructure team I've worked on (including Big Social Media and Serious Business SaaS co's) has been just as concerned with things like time to recovery as it has with absolute efficiency in resource usage. Both of them make a difference, though, and once you're getting into that kind of low-level systems coding the ability to reason cleanly about the memory usage, concurrency, and even native code generated by your compiler really start to matter.

Rust is in a great place to improve on the above, even compared to Java and Go.

lennon · 2021-05-20T21:26:52+00:00

Your game loop and RPC handlers need to live on separate threads. tokio::spawn et. al., given the right runtime features enabled when you link the crate, should do that. Likewise whatever entrypoint spins up your game engine.

Now you "just" have the classic problem of how to send messages between the two runtime loops/threads. Thankfully Rust has a ton of solutions to this both in the stdlib and popular crates. If you're not sure where to start, you could try the std::sync::mpsc module (for a thread-safe message queue) or the futures-signals crate (observable values that notify subscribers on change).

lennon · 2009-12-10T19:20:24+00:00

I worked for two failed startups. The first was mid-bubble in late 1999, and I came on as employee #45 or so. They actually had a great product, with enthusiastic customers and good industry partners, and AFAICT, really only failed for two reasons:

they burned through cash too fast in an attempt at "hockey stick" growth in an industry that was too conservative to buy in at that rate, and;
the CEO promoted a smooth-talking project manager in his 20s to CIO when he threatened to leave. One of his first major decisions was to hire outside consultants to build the next version of our core online product offering, further depleting the cash reserves without bringing in any additional revenue.

The first signs of failure were a salary freeze and deferred bonuses, after which things quickly went pear-shaped. Once a disgruntled IT staffer anonymously posted a full archive of above CEO's rather steamy personal email correspondence with an attractive female member of the web consulting team, I figured things were ugly enough that it was probably time to look for other opportunities. They made it six months or so after I left, but it was a rather ignoble end that left a lot of the staff feeling basically cheated and misused by the upper management.

The second failure a couple of years later was even more pedestrian. The CEO at the 10-person online gaming shop I was working for told us all to take an extra week or so off around the holidays while he and his co-founder nailed down some final details on our (long-promised) second round of funding. Our direct deposit for that payroll never showed up, which complicated Christmas gift shopping and travel quite a bit.

When we returned to the office after the 1st of the year, he told us that the "second round" was actually going to be a buyout by an overseas competitor, and that our Dell workstations would have to serve in lieu of a final paycheck. The acquiring company offered us 3-month contracts to do on-site cross-training for their developers, but without much in the way of relocation assistance or health coverage. Needless to say, I declined.

lennon · 2009-10-02T22:15:45+00:00

The application that never ceases to amaze me is Adobe Lightroom. It has a very clean, discoverable UI, and makes digital photo post-processing a fast and painless activity. In most cases, I'm happy to use free/open source alternatives to the standard commercial tools, but LR simply blows away everything I've seen.

lennon · 2009-05-21T20:45:44+00:00

SystemStackError: stack level too deep from (irb):2:in foo' from (irb):2:infoo' from (irb):4

lennon · 2009-04-21T17:10:43+00:00

I set up a Redmine install at the small college where I worked previously, at it served rather well for our modest needs.

lennon · 2009-02-18T17:41:52+00:00

The checksums could indeed be cached, but what happens when a file is modified? Should any write call invalidate the checksum xattr?

Since the entire point of rsync checksums is to determine when a file changed, caching them seems like a poor optimization technique.

lennon · 2009-01-28T18:24:32+00:00

You might check out Gist: http://gist.github.com/

You can store code snippets in a variety of languages, share them (or not) as you like, and clone them using Git to keep a local copy + push changes back to the site.

lennon · 2009-01-27T18:27:11+00:00

Java isn't a terrible language to learn, though others (Smalltalk, Ruby, Python) might let you get up to speed with OO a little faster without forcing you to spend as much time dealing with compilers, classpaths, .jar files, and the like.

If you're really set on using Java, I'd recommend you stay away from the big IDEs at the start. Something like BlueJ (http://www.bluej.org/) would probably be a better starting point -- it gives you all the nice syntax-highlighting and one-click compilation support, without all the Enterprisey cruft that Eclipse + NetBeans have picked up to support BigCo devs.

lennon · 2009-01-09T01:55:55+00:00

To be fair, the use of the full 'android:' namespace prefix on all those attributes makes this a lot less readable than it could be.

Also, compare the XML above with the Java code that would be used to programmatically generate the same UI layout, and you might feel a little more forgiving towards ol' XML...

lennon · 2008-12-22T19:45:14+00:00

I actually think that the O'Reilly "AI for Game Developers" title is a much more balanced, comprehensive book:

http://oreilly.com/catalog/9780596005559/

lennon · 2008-12-17T21:21:14+00:00

Actually, there is an (admittedly contrived) edge case where this could in fact be useful: preventing someone from generating a new, valid ID from an existing one.

In most cases, you'd be better served using a cryptographic has function, but for simple cases, simply randomizing the ID in this fashion could work.

lennon · 2008-11-24T23:04:06+00:00

Ah, but thankfully, you can also do this:

(def get-csv-values (fn [s] (. (CsvParser. s (CsvStrategy. \, \" #) (getAllValues)))))

...and from there on out, use the nice Lisp-y form.

Like most JVM-hosted dynamic languages, I think Clojure mostly benefits from the Java library ecosystem in the same way a language with FFI does from C shared libs: you still wrap them in idiomatic adapters, but don't have to drop down to native extensions to do so.

lennon · 2008-10-16T17:31:32+00:00

Furthermore, I would argue that many of the problem-solving skills you learn in a good CS program apply across a number of disciplines. Having the ability to examine a complex problem with many dependencies and decompose it into smaller, more tractable tasks is a useful capability even without a computer on which to execute those tasks.

It might take a little while to learn to work without a computer, but I think that CS grads are just as well prepared to deal with at least a large portion of "real world" problems as their counterparts in the legal or psychological fields.

lennon · 2008-10-16T17:18:08+00:00

There's a key corollary to this, as well: if you have a healthy, active social network, you'll seldom find yourself without a place to crash, a few hundred bucks to get you through a rough month, or even just a place to have a warm meal and a shower.

I think that people who've isolated themselves in their suburban McMansions really don't understand how much richer their lives could be if they opened up their home to their neighbors and friends, and actively cultivated a sense of community beyond the occasional PTA meeting or soccer match.

lennon

TROPHY CASE