Local First App Development

The Complexity of Modern App Development

Building an app these days isn't as simple as it used to be. The conventional model of having a straightforward client-server architecture has evolved into a complex web of interconnected systems. Developers now face the challenge of integrating advanced features like real-time multiplayer, cross-device synchronization, and offline functionality. Users expect these features as standard, making the development process more intricate.

Adding these features affects every part of the application stack, from the front end to the backend and even the database. Traditional technologies weren't designed to handle these complexities, leading to challenges in determining where to implement these features. Something as seemingly simple as user file uploads can touch various parts of the app, complicating the process further.

Rethinking the App Stack

The traditional stack involves making numerous technical choices, from UI state representation to backend communication and database queries. These decisions add layers of complexity to the development process. The existing solutions, while offering packaged combinations, still retain this complexity internally.

The essence of any app stack is to implement shared state between users and devices. Surprisingly, developers often need to build this from scratch for each new app. This repetitive process indicates a need for a shift in how we approach app development.

Embracing Local First Development

Local First development offers a simplified infrastructure where the front end interacts primarily with local state. This approach mimics the experience of building traditional offline apps. The local state then synchronizes across devices, users, and backend workers through a generalized sync and storage infrastructure.

This architecture reduces the number of technical choices developers need to make. It allows for the possibility of building apps with minimal backend deployment, focusing primarily on the front end and lightweight backend workers if needed.

The Role of CRDTs in Simplifying Development

Conflict-free Replicated Data Types (CRDTs) play a crucial role in facilitating Local First development. They function like a distributed version of Git for data, enabling real-time collaboration and synchronization across devices. CRDTs make complex features like real-time multiplayer and offline support straightforward by automatically handling data conflicts during synchronization.

With CRDTs, developers can focus on building app-specific features without worrying about the intricacies of data synchronization. This technology also simplifies user file uploads by allowing the storage of both tiny and large data, which can then be seamlessly shared and synced among users.

Enhancing Security with Public Key Cryptography

Security is a significant concern in app development, especially when dealing with shared data. Local First development leverages public key cryptography to ensure secure data sharing and permissions management. This method allows for encrypting and signing data changes, facilitating verifiable authorship and controlled access.

By integrating public key cryptography with CRDTs, developers can implement complex permissions locally without relying on a centralized backend. This approach enables end-to-end encryption, ensuring that even untrusted sync and storage infrastructure can't access users' plaintext data.

Building Apps with Local First Frameworks

Local First frameworks like Jazz simplify the app-building process by providing tools to manage shared state and permissions locally. Developers define the app's data model and use collaborative data types to build interactive features. The shared state is automatically synchronized across devices, reducing the need for explicit API calls.

Backend workers in Local First development act as clients to the sync infrastructure. They can subscribe to and edit the shared state, allowing for seamless integration with external APIs without complex backend logic.

Real-World Applications of Local First Development

Several real-world applications demonstrate the versatility of Local First development. For instance, Invoice Rater uses this architecture to securely manage user credentials and data, offering an offline-first experience with cloud storage benefits.

Learn Anything, a learning platform, leverages Local First principles to manage large volumes of user-generated content efficiently. This approach proves that Local First is not just for niche apps but can scale to meet the demands of a social network.

Other examples include social media scheduling tools and real-time dashboards, showcasing Local First's ability to simplify complex infrastructure challenges and focus on user experience.

Conclusion

Local First development presents a compelling solution to the complexities of modern app building. By focusing on shared state and leveraging technologies like CRDTs and public key cryptography, developers can create secure, scalable, and user-friendly apps. This approach reduces the technical overhead and allows developers to concentrate on delivering innovative features and experiences to users.

Watch full talk with demos and examples:

Watch video on a separate page
Rate this content
Bookmark

This talk has been presented at JSNation US 2024, check out the latest edition of this JavaScript Conference.

FAQ

LocalThirst uses CRDTs (conflict-free replicated data types) to handle real-time multiplayer and offline support, allowing for fast, Git-like data syncing and reasonable auto-merging of changes.

LocalThirst is a new approach to building apps that simplifies the process by focusing on shared state between users and devices, removing the complexity of traditional app stacks.

The main goal of LocalThirst is to simplify app development by focusing on shared state and providing tools and frameworks like Jazz to handle syncing and storage, reducing the complexity of app-specific code.

Data security in LocalThirst is managed through public key cryptography, allowing for encrypted and signed data changes, which ensure read access and verifiable authorship without needing centralized API-based permissions.

Examples include Invoice Rater for managing cloud service invoices, Learn Anything for educational content sharing, and Succulent for social media scheduling, all of which leverage the local-first approach for enhanced user experience.

LocalThirst improves scalability and user experience by allowing apps to operate offline, sync data efficiently, and implement features like real-time collaboration easily, making it suitable even for scalable applications like social networks.

CRDTs play a crucial role in LocalThirst by enabling fast, conflict-free data replication across devices, simplifying the implementation of real-time multiplayer and offline functionalities.

Jazz emphasizes local-first identity and permissions using cryptography, allowing for end-to-end encryption and local data management, contrasting with other frameworks that may rely on centralized infrastructure for permissions.

Jazz is a framework for building local-first apps, and JazzCloud is its sync and storage infrastructure as a service, designed to simplify app development by focusing on local state and generalized syncing.

App development has become more complicated due to modern user expectations for advanced features like real-time multiplayer, cross-device sync, offline support, and complex permissions, which affect the frontend, backend, and database.

Anselm Eickhoff
Anselm Eickhoff
25 min
21 Nov, 2024

Comments

Sign in or register to post your comment.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
RedwoodJS: The Full-Stack React App Framework of Your Dreams
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.

Workshops on related topic

Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Let AI Be Your Docs
JSNation 2024JSNation 2024
69 min
Let AI Be Your Docs
Workshop
Jesse Hall
Jesse Hall
Join our dynamic workshop to craft an AI-powered documentation portal. Learn to integrate OpenAI's ChatGPT with Next.js 14, Tailwind CSS, and cutting-edge tech to deliver instant code solutions and summaries. This hands-on session will equip you with the knowledge to revolutionize how users interact with documentation, turning tedious searches into efficient, intelligent discovery.
Key Takeaways:
- Practical experience in creating an AI-driven documentation site.- Understanding the integration of AI into user experiences.- Hands-on skills with the latest web development technologies.- Strategies for deploying and maintaining intelligent documentation resources.
Table of contents:- Introduction to AI in Documentation- Setting Up the Environment- Building the Documentation Structure- Integrating ChatGPT for Interactive Docs
Learn Fastify One Plugin at a Time
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Matteo Collina
Matteo Collina
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop
Build a Universal Reactive Data Library with Starbeam
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships
Build a Product Page with Shopify’s Hydrogen Framework
React Advanced 2022React Advanced 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
David Witt
David Witt
Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.