#solidjs

Subscribe
Solid.js is a declarative JavaScript library for creating efficient, fine-grained reactive user interfaces. It uses a JSX syntax, similar to React, but unlike React, it does not use a virtual DOM and instead updates the DOM directly. Solid's fine-grained reactivity system re-renders only the minimal amount of DOM necessary when the state changes. It offers signal primitives to handle state and side effects. Moreover, Solid optimizes at compile-time, converting declarative JSX into highly efficient imperative code, and it's impressively small in size.
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.
SolidStart 1.0: Peeking Under the Hood
React Summit 2024React Summit 2024
30 min
SolidStart 1.0: Peeking Under the Hood
SolidStart is an efficient, unopinionated, and ergonomic full-stack framework that provides great defaults and flexibility. It includes features such as a bundler, a serializer, a server, and a router. The serializer, Seroval, enables streaming and real-time state synchronization between server and client. SolidStart offers powerful file routes, RPCs, and single-flight mutations. It is recommended for building UIs in full applications, Spark, single-page apps, and native apps.
Facing Frontend's Existential Crisis
React Summit 2024React Summit 2024
37 min
Facing Frontend's Existential Crisis
I'm honored to be here today. The past decade has been dominated by single-page apps. Loading JavaScript is about 35 times slower than images on low-end devices. Server rendering involves sending more JavaScript and HTML, increasing payload and effort. React was developed for complex apps, but business needs have pushed towards simpler websites. Metrics for testing frameworks include code execution costs, bundle size, and payload size. Islands, popularized by frameworks like Astro and Fresh, break up apps into sections for server rendering. React's solution is to use islands and communicate in a diffing format. Quik reduces code execution and size, eliminating double-serializing. Frameworks like Solid Start provide tools for server rendering in a lightweight package. WASM frameworks have improved in performance. Next.js partial pre-rendering and HTMX offer solutions for sites with less interactivity.
SOLIDify Your React Code
React Day Berlin 2023React Day Berlin 2023
11 min
SOLIDify Your React Code
Watch video: SOLIDify Your React Code
Clean code is easily understood, readable, changeable, extensible, and maintainable. SOLID principles enforce good practices for scalable and maintainable software. The Single Responsibility Principle (SRP) ensures that components have a single reason to change. The Open-Close Principle (OCP) allows components to be easily extended without modifying the underlying source code. The Liskov Substitution Principle (LSP) enables swapping child elements within a subtype component. The Interface Segregation Principle (ISP) states that components should only depend on the props they actually use.