Do you prefer JavaScript or TypeScript?
Are you coming from any of the following frameworks?

Thinking Solid

Solid's design carries several opinions on what principles and values help us best build websites and applications. It is easier to learn and use Solid when you are aware of the philosophy behind it.

And in this section we will be discussing about those specific principles. We will be discussing these principles at a high level in order for it to be understood by everyone.

1. Declarative Data

Declarative data or declarative programming is the process of programming in a way that describes what your program does and not how it does it. The opposite of this is imperative programming. Let's look at a quick example of these.

Declarative

js
let numbers = [1, 2, 3, 4, 5];
let double = numbers.map((value, i) => value * 2);
js
let numbers = [1, 2, 3, 4, 5];
let double = numbers.map((value, i) => value * 2);

In the piece of code above double is simply a copy of the values in the numbers array, except those values were doubled before assigning them to double

Imperative

js
let numbers = [1, 2, 3, 4, 5];
let double = [];
for (let i = 0; i < numbers.length; i++) {
double.push(numbers[i] * 2);
}
js
let numbers = [1, 2, 3, 4, 5];
let double = [];
for (let i = 0; i < numbers.length; i++) {
double.push(numbers[i] * 2);
}

The piece of code above does the same thing as the declaritve code, however, as you can see it is more complex and seems more tedious than the declaritive approach.

Solid makes use of the declarative approach to programming in a lot of aspects in order to make it simpler and quicker to adopt and understand.

2. Vanishing Components

It's hard enough to structure your components without taking updates into consideration. Solid updates are completely independent of the components. Component functions are called once and then cease to exist. Components exist to organize your code and not much else. Here's a quick diagram of what that process looks like

A visual representation of the steps Solid takes in updating state

3. Read/Write Segregation

Precise control and predictability make for better systems. We don't need true immutability to enforce unidirectional flow, just the ability to decide which consumer can or can not write or modify data.

Solid does this in the implementation of it's primitives. Examples of these primitives are createStore and createSignal and much more.

Here's a quick example and breakdown of what we mean by Read/Write Segregation

js
const [name, setName] = createSignal("");
const valueOfName = name(); // 👈 getting
function setValueOfName(text) {
setName(text); // 👈 setting
}
js
const [name, setName] = createSignal("");
const valueOfName = name(); // 👈 getting
function setValueOfName(text) {
setName(text); // 👈 setting
}

In the above code snippet we're making use of one of Solids primitives, createSignal. Take note of the way getting the value of name is seperate from setting the value of it through the use of setName. This is just one of the ways Solid segregates things.

4. Simple Is Better Than Easy

Explicit and consistent conventions even if they require more effort are worth it. A lesson that comes hard for fine-grained reactivity. The aim is to provide minimal tools to serve as the basis to build upon. This goes back to why Solid takes a more declarative approach instead of the imperative approach.