This app is faster than any Next.js project (understanding local first)

Summary

This video delves into the evolving landscape of web development, comparing tools like NextJS, SvelteKit, and Linear, highlighting the shift towards 'local-first' applications. The speaker discusses the trade-offs between sending less JavaScript to enhance client-side performance and sending more data to provide real-time experiences. A significant focus is on local-first apps that rely on client-side data storage and synchronization tools like Electric, Zero, and TCK DB. The speaker emphasizes the growing importance of mastering both performance optimization and local-first approaches for developers to stay competitive in an increasingly complex web ecosystem.

Takeaways

• 😀 Front-end development is evolving with a trend toward reducing JavaScript sent to the client for better performance, as seen in tools like NextJS, Svelt Kit, and Astro.
• 😀 However, some applications, such as Linear, send a large amount of JavaScript and data to the client for a more real-time, seamless experience.
• 😀 There's a growing debate on whether we will send less or more JavaScript to the client as internet speeds and computer power increase.
• 😀 Front-end and full-stack developers need to stay updated with both trends (less JavaScript vs. more JavaScript) as they solve different problems in different use cases.
• 😀 Tools like Linear, which send substantial JavaScript to the client, can provide faster, real-time updates by syncing local storage with cloud data.
• 😀 The concept of 'Local First' apps, where data is stored on the client and synced with the cloud, is gaining traction. Sync engines play a crucial role in managing this synchronization.
• 😀 Sync engines help synchronize local databases (e.g., IndexedDB) with server-side databases, allowing apps to operate offline and update instantly once online.
• 😀 Tools like GraphQL have influenced the development of Local First apps, as both focus on minimizing the number of routes and using a unified endpoint for data synchronization.
• 😀 Electric, a tool that allows running PostgreSQL directly in the browser via WebAssembly, is a significant player in building Local First apps and data synchronization.
• 😀 New tools, like Zero and TCK DB, are emerging to help build Local First applications with features like live queries, mutations, and data normalization for seamless synchronization.
• 😀 As Local First apps grow, tools will be developed to manage complex data synchronization scenarios and ensure real-time, conflict-free data updates across multiple devices.

Q & A

What is the main focus of modern frontend development tools like Next.js, SvelteKit, and Solid?

The main focus of modern frontend development tools is to send less JavaScript to the client to reduce bundle size and improve performance. Tools like Next.js and SvelteKit focus on optimizing client-side performance by reducing the amount of JavaScript needed for the application to run.

How does Linear, a performance-oriented tool, differ from tools like Next.js or SvelteKit in terms of data handling?

Unlike Next.js or SvelteKit, which aim to minimize JavaScript on the client side, Linear sends a substantial amount of JavaScript and even replicates data stored on a server to the client. This allows the client to have instant access to data, reducing latency and improving the user experience.

What is the significance of tools like Linear storing data locally on the client side?

By storing data locally on the client's machine (e.g., using IndexDB or local storage), Linear enables instant access to data, eliminating the need to wait for server communication. This improves performance, especially for large applications, as data can be accessed and modified directly on the user's device.

What role do 'sync engines' play in local-first applications?

Sync engines are tools that sync locally stored data on the client side with the backend database in real-time. They handle data conflicts, such as when two users make simultaneous changes to the same piece of data, ensuring that the data remains consistent across devices.

How does the concept of local-first applications differ from traditional REST APIs?

In local-first applications, data is primarily stored and accessed on the client side, with synchronization occurring later with the server. Unlike traditional REST APIs, which use multiple endpoints for different actions (CRUD operations), local-first applications rely on a single sync endpoint for all data interactions.

What are the advantages of using 'graph' technology, like GraphQL, in local-first applications?

Graph technology, like GraphQL, is advantageous in local-first applications because it simplifies data retrieval by using a single endpoint for queries and mutations. This approach reduces complexity and allows for efficient handling of data that needs to be synchronized between the client and server.

What is 'interface optimism' in the context of applications like Linear?

Interface optimism refers to the practice of displaying changes to the user immediately, even if those changes haven't been confirmed on the server yet. In Linear, for example, if a user creates a new issue or comment, it appears instantly on the interface, even if the data is still being synced in the background.

Why is the idea of local-first applications gaining popularity in modern web development?

Local-first applications are becoming more popular due to their ability to deliver faster, offline-capable user experiences. As internet speeds improve and client devices become more powerful, developers can leverage local storage and sync engines to create highly responsive applications that minimize server dependencies.

What are some tools that developers should keep an eye on when building local-first applications?

Developers should explore tools like Electric, Zero, and 10 Stack DB. Electric provides a way to run Postgres on the client side, Zero offers a full stack solution for local-first apps, and 10 Stack DB integrates with React Query to handle real-time data synchronization and conflict resolution.

How does Electric simplify the development of local-first applications?

Electric simplifies local-first application development by allowing developers to run a Postgres database directly in the browser using WebAssembly. This makes it easier to replicate backend data on the client side and synchronize changes between the local and remote databases, maintaining consistency and performance.