Local-First Web Development

One of the things that&#x27;s exciting to me about local-first web development is how it bridges the gap between a full-blown native app and full-blown web service.<p>Native apps have high install friction and a lot of nasty cross-platform tradeoffs. Even though there&#x27;s always a cohort here (rightly) commenting on how much of a step backwards the web is for GUI app development, one has to admit that we are past the time where a truly cross-platform, install-less native app SDK can be created and cross the chasm to universal adoption. Web tech is what we have, worse is better, yada yada.<p>Accepting that reality, one of the implications of the web and cloud-storage is that the server component tends to be heavy. While it&#x27;s convenient for users to have their data centralized in the cloud for consistency and access on multiple devices, this does incur some significant overhead in terms of account managment, authentication, and database hosting.<p>The thing that I find really cool about local-first web development is that it reopens the door for hobbyist and micro-ISV apps that can served cheaply as static files, where the customer pays for the compute and stores the data. There are lots of potential micro-apps, which don&#x27;t require network effects or large data storage, that could be built this way and avoid incurring significant ops overhead for the developer. Obviously it runs counter to user expectations today, but I think a lot people might also appreciate useful apps that don&#x27;t have $5&#x2F;month subscription as table stakes just to keep the lights on. Also, it doesn&#x27;t have to be a binary proposition, there could be accounts&#x2F;sync functionality optional. Most of all, as a developer, it&#x27;s exciting to have the ability to try out an idea, with optionality to ramp it up into a full SaaS, or scale it down without an abrupt rug-pull on the early adopters.

I&#x27;ve been really happy with CouchDB + PouchDB at <a href="https:&#x2F;&#x2F;financier.io" rel="nofollow">https:&#x2F;&#x2F;financier.io</a><p>You can do unique things like offer a trial period without syncing (database wholly in browser), which allows for ridiculously quick onboarding. And then when the user signs up for a paid plan, you just hook up CouchDB and the data syncs right on over.<p>The sync mechanism works so damn well. It&#x27;s really cool how easy it is to implement a Google Docs-like sync mechanism with conflict resolution baked in.

Isn&#x27;t the direction we&#x27;re taking with networking and connectivity kind of making this irrelevant? I always feel like local-first is a good idea but I am actually never without internet connection, and building a truly local-first anything is significantly more complicated than the alternative of &quot;always online&quot; for most domains, even if you use various helper libs. A lot of the pages talk about privacy reasons as well, but I don&#x27;t get that either, if you want privacy then you want encryption, not local-first development.<p>Finally, in the end what you want to do with your work is to share it, meaning that &quot;doing&quot; your work is for a large part &quot;sharing&quot; your work, which is fundamentally not local-first.<p>Maybe I am the odd one out here.

There’s way too many options on this site. It’s intimidating! How should I know which DB to use? I just wanna build stuff.<p>For local-first to succeed as a concept, it would gain a lot from having a Rails equivalent that people can get started on. If that exists, promote just that and hide all the other options.

I&#x27;m surprised they list PouchDB but not CouchDB for local first software.<p>PouchDB is fine for trivial local first apps, but not for anything that&#x27;s critical.<p>CouchDB, on the other hand, is a very robust app that can be used by multiple local-first apps and those apps can access and share that data, and back it up on a separate local and&#x2F;or remote CouchDB.<p>PouchDB and CouchDB used together are a pretty sweet and solid platform to build a Cloud and&#x2F;or local first on app on.

Okay two things.<p>1) I gave a talk about doing local-first web development that web developers should watch or read at least: <a href="https:&#x2F;&#x2F;qbix.com&#x2F;blog&#x2F;2020&#x2F;01&#x2F;02&#x2F;the-case-for-building-client-first-web-apps&#x2F;" rel="nofollow">https:&#x2F;&#x2F;qbix.com&#x2F;blog&#x2F;2020&#x2F;01&#x2F;02&#x2F;the-case-for-building-clien...</a><p>2) I recently learned about AbsurdSQL! It&#x27;s absurdly amazing for this! <a href="https:&#x2F;&#x2F;hackaday.com&#x2F;2021&#x2F;08&#x2F;24&#x2F;sqlite-on-the-web-absurd-sql&#x2F;" rel="nofollow">https:&#x2F;&#x2F;hackaday.com&#x2F;2021&#x2F;08&#x2F;24&#x2F;sqlite-on-the-web-absurd-sql...</a>

What is interesting is that local first applications were the Microsoft vision in the 1990s with a Windows computer acting as your home hub and syncing over the internet.<p>The Sun and later Google vision is the network is the computer. For better or worse, the Sun&#x2F;Google vision is ascendent now.

Great list!<p>Has anyone tried ElectricSQL? Looks amazing.<p>The ability to effectively use multi-tenant SQLite but aggregate shared data into a postgres database is amazing. And they help you with migrations etc. This is exactly the ideal setup I&#x27;ve been looking for!

I built a thing called webspaces for 3D html worlds based on these principles.<p><a href="https:&#x2F;&#x2F;gfodor.medium.com&#x2F;rebooting-the-web-in-3d-with-webspaces-9e58847e042c" rel="nofollow">https:&#x2F;&#x2F;gfodor.medium.com&#x2F;rebooting-the-web-in-3d-with-websp...</a>

Yonz here, one of the people helping connect local-first builders on <a href="https:&#x2F;&#x2F;lfw.dev&#x2F;" rel="nofollow">https:&#x2F;&#x2F;lfw.dev&#x2F;</a><p>Lots of comments here, and r&#x2F;programming are missing the point of local-first. Without local-first, there is no reasonable way to fix the fragmented and siloed nature of data in today&#x27;s products. Local-first systems rely on data living in user space (vs. product silo), creating an avenue for reusable, portable, and composable data.<p>Let&#x27;s take movie streaming to break this down.<p>1. Composability: Our viewing history is siloed in Netflix, Disney, Apple TV, and Prime Video. You could access better recommendations if these platforms merged your viewing history.<p>2. Re-usability: Say you signup for Hulu. Since the collaborative filtering model doesn&#x27;t have any information on you, it takes a while for you to get good recommendations. Even worse still, this prevents new startups from being able to compete.<p>3. Portability: Web2 companies have almost perfected lock-in models, and this is primarily because you can&#x27;t move your data. Most people learned the hard way trying to mastodon.<p>&#x2F;&gt; Local-first at a high level tackles these by moving data storage to user space (not offline but local-first). Yielding newfound capabilities for:<p>- ML trained on all your movie-watching history<p>- Single source of truth for your relationships as opposed to your connections on Twitter, LinkedIn, Instagram, etc., and their specific handles. If you want to partition by platform, you can still do it.<p>- User-owned private keys and historical data create exciting opportunities to skip signups and re-use historical data with new applications.<p>- Death to spinners!<p>Quick responses to some of the common themes,<p>- Conflict-free sync is hard, but it is not complexity for the sake of complexity; with in-device&#x2F;p2p conflict resolution, you can finally have a world free of spinners.<p>- This is not native app development where your app state is a warm cache for BE source of truth.<p>- Yes, it creates a world where you can use apps offline, which is always a good thing.<p>- No, its not a service or a stack. It is more of an ideology and can&#x27;t guarantee people won&#x27;t abuse it.

The “examples” section just has a framework, a tutorial and a demo app. What are some actual examples of this in the wild?

One of the authors here. Just catching up on the awesome feedback in this thread - thanks!<p>I just thought this was a fun list of links to put together (like it&#x27;s 1994!) and TBH I was not expecting quite this degree of positive reception.<p>Happy to answer any questions!

It feels like the web becomes exciting again. A bit confusing with all the orthogonal directions but very much alive and promising

Amazing to see this community coming together. We are having the first #LFW meetup @ 4PM ET Feb 28,2023 on our discord stage. Come join us <a href="https:&#x2F;&#x2F;lfw.dev&#x2F;" rel="nofollow">https:&#x2F;&#x2F;lfw.dev&#x2F;</a> (<a href="https:&#x2F;&#x2F;localfirstweb.dev" rel="nofollow">https:&#x2F;&#x2F;localfirstweb.dev</a>)<p>We have an amazing lineup prepared for you, including @pvh you can find the details here: <a href="https:&#x2F;&#x2F;twitter.com&#x2F;founderYonz&#x2F;status&#x2F;1628846898898501632?t=w7E_hN9HCseDYg4pDYhcKg&amp;s=19" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;founderYonz&#x2F;status&#x2F;1628846898898501632?t...</a>

I am learning MobX State tree, and using the references to objects in a tree, with normalisation (ensuring you don&#x27;t have duplicates in the tree, etc). It&#x27;s impossible not to think that state management is getting closer and closer to client databases for more complex apps.<p>I&#x27;m really hoping WebAssembly will finally bridge the backend and the frontend data structures seamlessly, because right now we are getting to the point of keeping 2 separate data schemas, which is a huge waste of effort.

Where does &quot;Web&quot; come in here? All of the links are for local-first principles, CRDTs.<p>One of the reasons I love the local-first movement is that it puts desktop back into the center of things. I want fast, rich creative tools integrated with my OS but I want synchronization and collaboration. This is what local-first aims for, was my understanding.<p>Ideally &quot;Web&quot; (ie browser tech) steps aside for first-class desktop producer&#x2F;creative-focused apps.

Is there any popular commercial apps based on these? Most of projects I have seen using these tech are developers&#x27; side projects.

The key bullets are listed at the top:<p>1. data co-located with its UI<p>2. works offline<p>3. synchronizes between clients<p>4. lets its users own their data<p>So, except for #3, exactly like classic desktop apps that store data in local files. (#3 used to be called &quot;peer-to-peer networking&quot;).<p>The modern equivalent of classic desktop apps (not that they&#x27;ve gone away) are mobile app stores. Mobile apps are installed and run locally on a phone, even though a key part <i>in their business model</i> is that most frequently sync back data to their server-side.<p>What&#x27;s <i>technically</i> different between these and &quot;local-first&quot;? Nothing.<p>In #4, there&#x27;s only an implied contract (not even explicit) that the local-first will be not doing &quot;bad&quot; things (like connecting server-side and then sending data there without user permission.) There&#x27;s no technical limitation that keeps the app from doing that, though.<p>In other words, &quot;local-first&quot; seems to be a somewhat meaningless buzzword or critique about a business model, not a technical design.

I&#x27;m curious why Solid&#x2F;Pods are not mentioned; there was a lot of press and excitement around its launch, backed by Tim Berners-Lee, and it seemed to be exactly the pro-user technology we needed to take computing in service of humanity to the next step. No news on that project since 2021 :(

Fossil Source Code Management (fossil-scm.org&#x2F;) ticks all these boxes. It&#x27;s amazing in every way except the ones most relevant to this thread: it&#x27;s not for web development! (Except as a means of version control for your web-dev project. And managing tickets, and discussion and other project management things.)<p>The reason I bring it up is that in spite of this apparent misfit-to-topic is that it&#x27;s a superb exemplar of what a local-first application can operate like. It does not sacrifice network presence and utility. I wish for more projects to work like Fossil does, only tackling different problem domains. (My personal vote is for blog or CMS.)

This is something which I need, ALMOST!!<p>It will be great if someone here guides me on how I can solve this below problem.<p>I am part of a Enterprise company which installs a bunch of managed security softwares in employees&#x27; laptops. A couple of these security softwares can&#x2F;must be used in BYODs as well, to connect to the company network.<p>I would like to build a application such that, whenever a employee finds that something is not working right on their laptop, they should be able to fire it up on their browser and it will access logs from these security software and does troubleshooting&#x2F;debugging locally on the machine and provides the results and remediation steps to the person. This will tremendously save time instead of contacting IT team and waiting for their help.<p>For this usecase, I have some limitations.<p>1) I want to be able to solve for both managed laptops and BYODs (both Mac and Windows). So I cannot push this as a desktop application using MDM solution.<p>I want this to be a web-app as I can control the version of the application that they are running. So a local-first web app seems perfect in that sense.<p>2) I want to be able to access local file system where the logs of these security software are located. I am not a developer, but rather a infra guy, but based on what I know, a web-app cannot access the file system without user actually doing a file picker. But in this case, it is too much friction for non-technical users, especially since I want to build this solution for multiple security software which is dependent on multiple file location.<p>3) Moreover, I don&#x27;t want to unnnecessarily reveal too much information of location of the log files for the security softwares. But if it is a local-first &quot;web-app&quot; and the user has to be pick the file using a dialog box, I cannot do it without revealing the location.<p>4) For &quot;some&quot; use cases, I want to be able to &quot;securely&quot; send meta data to a centralized server for more complex troubleshooting scenarios or to log a ticket, for example.<p>Sorry for the long question. May I know if anyone have any solutions for this scenario?

This looks to be curation, but one of the things on there in a prominent position isn&#x27;t the best choice IMO. RxDB is what I might call an Empty-Core project, where you can&#x27;t do simple stuff without the paid plugins.

Is this So-Mo-Lo or no, is it Lo-So-Mo?<p>(S.V. reference)

there are many options if you do not care how conflicts are resolved and last win or some unknown but deterministic change wins is ok, but if you care to write bullet proof app specific conflict resolution without any data loss there is no real alternative to pouchdb + couchdb (except reimplementing something similar manually)<p>also worth noting is that offline first is about way more than just working offline, yes full offline scenarios are more and more rare, but offline first apps provide reliable and instant interactivity where any user action is has a latancy of 1 to 10 ms max and no data is lost. and works as well on crappy mobile as on a high speed landline.

Crashing Brave browser on iOS.

@martinkl (Martin Kleppmann, primary author of the Automerge CRDT _and_ Designing Data-Intensive Applications) suspiciously absent from the Folks to Follow section.

So what is this? Shipping SQL lite or something similar with all web projects, with an async process for eventual sync with HQ data and systems?

imo the ecosystem is weak for a local-first apps. I&#x27;m dreaming about e2e encrypted local-first database that would be easy ti plug in and store encrypted on the server. From the tooling perspective, WASM seems a good choice for most likely embracing through Rust.

that’s a surprisingly short list of Apps to Try. i am a fan of the <i>promise</i> of local first, but one doubt in my mind is always that the Notions of the world dont embrace it. if the UX was so desirable then why havent they been replaced by something local first?

FYI This crashes Brave iOS. Odd it doesn’t crash Safari iOS given they’re the same engine.

The web has moved to client rendering. But we still host the data on the server! Why?

how do you make your website load almost instantly? please tell me.

I&#x27;m sure a lot of the technologies on the list (like Yjs!) are well-designed and reliable, but I would <i>not</i> touch GUN with a ten foot pole. The code is absolutely inscrutable (what does any of this do? <a href="https:&#x2F;&#x2F;github.com&#x2F;amark&#x2F;gun&#x2F;blob&#x2F;master&#x2F;lib&#x2F;axe.js">https:&#x2F;&#x2F;github.com&#x2F;amark&#x2F;gun&#x2F;blob&#x2F;master&#x2F;lib&#x2F;axe.js</a>), the creator has failed to sufficiently explain any of the underlying mechanisms without complete hand-waving (what on earth is a &quot;hypothetical amnesia machine&quot; that supposedly underpins all of GUN? The creator has literally never given any kind of coherent explanation of it) -- it&#x27;s just pure snake oil.

Loading this site causes Brave browser on iOS to hard crash. Impressive.

Ironic using discord for such a project. Maybe try matrix?

It amuses me how this is positioned like it&#x27;s something new and radical :-).

Many things where it would take me 10 minutes to look up a library or API thing I don&#x27;t know from memory. From today:<p>* Write me a Python Fabric script to control an SSH session in the following ways: ...<p>* &quot;What does torchaudio.load do if num_frames exceeds the end of the file&quot;?<p>* &quot;What&#x27;s a typical conn_max_age in django for conn_max_age and why?&quot;<p>* &quot;One-liner to create django secret key and use flyctl secrets set&quot;<p>* &quot;Fix this toml:&quot;<p>* etc.<p>It&#x27;s also amazing rubber duck debugging. <a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Rubber_duck_debugging" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Rubber_duck_debugging</a>