Table of Contents
Introduction
Overview
Reactivity Overview
Ryan describes reactivity as the ability to declaratively express the relationship between values that change over time. It consists of an observable state which notifies any derived values. When these values change a side effect like a render is triggered.
Signals & Side Effects
Ryan explains the relationship between signals and side effects. Signals are the state exposed to the application through getters and setters. When a signal is used inside a side effect, the effect will re-execute.
Derivations
Ryan demonstrate how derivations, or memoized values are only re-calculated when dependent values are changed. They act as a cache for expensive operations.
Dynamic Tracking & Advanced Reactivity
Ryan demonstrates how side effects can dynamically track changes to signals. Conditional logic can be added, and as the condition uses reactive properties, the effect will only run when dependent signals are changed.
Build a Reactive System
Creating a Signal from Scratch
Ryan creates a reactive signal from scratch. A global context array is used to store a list of observers that are subscribed to the signal. When the signal is updated, each observer's execute function is called.
Dynamic Reactivity from Scratch
Ryan implements the dynamic reactivity that conditionally re-runs the effect. A list of dependencies are added to the effect and subscriptions are bound to observers. A cleanup method is added to remove dependencies and ensure an infinite dependency loop is not created.
Implementing createMemo & untrack
Ryan implements the the createMemo method which creates a signal and an effect for that signal. The untrack function's implementation is also demonstrated in this lesson.
Reactivity with Vanilla JavaScript
Ryan demonstrates how reactivity can be used to update DOM elements. A count signal is create and an h1 element's text content is updated inside an effect when a button is clicked.
Reactivity with JSX
Ryan refactors the vanilla JavaScript example to use JSX. The counter is encapsulated inside a component-like function. The SolidJS render method is imported and used to render the Counter component.
Fine-Grained Reactivity Demo
Ryan demonstrates the flexibility of the reactive code in the application. Local state can easily be moved to a global state and shared across components.
List Reactivity
Ryan discussed reactivity with HTML list elements. Rather than re-rendering the entire list when data changes, SolidJS provides components for iterating through the data and paginating. These components then decide what elements require updating.
Control Flow
Show
Ryan introduces SolidJS control components. While SolidJS supports ternary operators for conditionally rendering components, the Show component provides a more declarative approach. The "when" attribute contains the condition and fallback content is provided for when the condition is false.
Switch, Dynamic, & ErrorBoundary
Ryan uses the Switch component to avoid nested Show components. The Switch component contains multiple matches for determining what should be rendered. The Dynamic component behaves like a slot. It is passed a component to render.
For, Index, & Portal
Ryan demonstrates the differences between For and Index. For provides a reactive loop with keyed items. The index or position of each item is a signal, but the value is not. An Index behaves the opposite way. The index or position of each item is static but the value is provided as a signal.
Component Authoring
Managing Props & Lifecycle Methods
Ryan explains that SolidJS provides helper methods to maintain reactivity while executing more complex operations on component props like merging or spreading. Lifecycle methods like onMount and onCleanup are also explained in this lesson.
Props & Children
Ryan demonstrates how to set default props with mergeProps and how to use splitProps to create a group of props to pass through to child components. The children helper method is also demonstrated in this lesson.
Lifecycles
Ryan demonstrates use cases for the the onMount and onCleanup lifecycle methods. The onMount method is useful for executing API requests or screen measurements before the component renders. The onCleanup method could be used to remove listeners or clear intervals after an effect has run.
DOM Binding
Events & Refs
Ryan explores ways SolidJS binds with DOM events and element references. DOM events are passed an event handler similar to Vanilla JavaScript. CSS Styles can be managed through a style attribute or directly with the classList property. The ref attribute allows developers to keep elements in a single JSX file while creating a reference which is available at creation time before elements are attached to the DOM.
Spreads & Directives
Ryan demonstrates how to use the spread operator to populate a component's props object. Directives, which define reusable custom attributes, are also covered in this lesson.
Building an App
Setup SolidJS with Vite
Ryan uses Stackblitz to generate a new SolidJS project. The project is configured with Vite and an initial application is created.
Building a Todo App
Ryan adds the initial form elements for displaying todo items. State properties are added for storing the list of todo items and an initial item is hard coded to test the markup.
Creating New Todos
Ryan adds an onKeyPress event to the input field for adding a new todo. The event will detect when the enter key is pressed. If the input is valid, the new todo item will be added to the todos signal.
Modifying Todos
Ryan adds the ability to toggle the completed state and remove a todo. A checkbox for toggling all the todo items is also added to the application.
View Filters & Clearing Completed
Ryan implements the filters for the todo items. A footer is added to the application with toggles for all, active, and completed. A filter function is created to update the showMode signal. The final code can be found at the Stackblitz link below.
Stores & Context
Stores
Ryan demonstrates how nested stores provide fine-grained reactivity because nested updates are handled independently without the need for DOM diffing. SolidJS also provides an Immer-inspired produce method which allows mutations to occur with a writable proxy version of the store.
Context
Ryan explains the Context API and demonstrates how to create a global state. Immutable stores that interface with libraries like Redux, Apollo, or XState can also be created.
Routing & Async
Client Side Router
Ryan introduces the SolidJS client-side router and demonstrates how transitions are included in its implementation. A Suspense component wraps any UI component where content might be loaded. The Transition API provides pending and start helper methods for handling transitions between views.
Server-Side Rendering with Solid Start
Ryan demonstrates Solid Start, a collection of plugins that enable both client-side and server-side rendering in SolidJS applications. Progressively enhanced elements like "Form" and "A" which work without JavaScript are also discussed.
Server Functions
Ryan demonstrates the server$ method which enables server-side fetching. Any code wrapped in this method will be executed on the server.
Server Action API
Ryan demonstrates the progressive enhancement features of the Server Action API. Additional Form elements are used to submit form data to the server when JavaScript isn't enabled. The server-side rendering feature of Solid Start will still display the data correctly.
