DEV Community: David Sanchez

AI for Ruby Devs Part I: From the Basics to building a neural network

David Sanchez — Thu, 18 Dec 2025 18:24:12 +0000

When we are programming and we type something in our IDE, for example, User.where( and we see the "editor" suggests method names to complete our code, this is not AI, this is the IDE following some rules, but when we type the same and Claude or Github Copilot suggest a whole implementation of a method using it, or when Gemini creates an entire test suite from our requirements, that's an LLM (Large Language Model)!

In this post, you will learn all the basics behind LLMs, such as Machine Learning, Deep Learning, Neurons, and Neural Networks. First, I will introduce the fundamental concepts underlying large language models. Next, we will explore the structure and processes of machine learning and deep learning, including key components such as neurons and neural networks. Finally, the goal of this first post in the series is to build our first neural network in Ruby, setting the foundation for subsequent posts where we will implement AI features in Rails applications.

Let's start by understanding what makes LLMs possible.

What are LLMs, and what makes them possible?

A Large Language Model (LLM) is a type of AI program trained on large amounts of data or examples, enabling it to understand human language and generate coherent text responses or other complex data, such as images or video. Unlike traditional programs like our IDE, LLMs learn patterns from millions of examples:

Predict the following sentence when you are writing an email.
Understands different languages in the same context.
Suggests an entire code block based on context.
Generates tests for your code based on the logic you wrote.

That’s possible because LLMs are built using Deep Learning, a specialized subset of Machine Learning. More specifically, they use a deep learning architecture known as a transformer model.

Here's the accurate hierarchy:

Machine Learning (learning from data)
- Deep Learning (subset using multi-layered neural networks)
- Neural Networks (Processing data through layers and neurons)

But don’t worry, we are gonna explain all these concepts 👌. We'll start with Machine Learning, continue with Deep Learning, explore neurons, and finally build a simple neural network in Ruby. By the end, you'll understand the base that makes LLMs possible.

Machine Learning

It’s a branch of AI focused on algorithms that can “learn” patterns from training data, enabling machine learning models to make predictions without specific instructions. For example, we have a model that finds only sports cars. It may start by identifying any vehicle, but after being fed with millions of sports car images, it can automatically identify sports cars even in images not used to train it.

A machine learning model is created by using an algorithm to learn from a dataset.

There are a couple of things we have to consider about machine learning:

Even using the same algorithm across two models, they can produce different results when fed different data.
Machine learning relies on access to large data sets. If you only feed the program with five sports car images, it will likely fail.

How does Machine Learning work?

Machine learning works with inputs and outputs. The algorithm takes input data and produces an output. The model learns what outputs to give, and it can do this in three main ways:

Supervised learning:

This is the most basic kind of machine learning; the programmer provides a set of example inputs and their corresponding correct outputs. The machine learning algorithm attempts to generalize from these examples so that, when fed an input, it can produce the desired output.

For example, when you learn to recognize emotions. As a child, an adult teaches you that when someone's eyebrows are down, and lips are tight, that’s angry, or when someone has a broad smile and crinkled eyes, it means happiness. After many labeled examples, you can recognize emotions in strangers’ faces without someone explaining each time.

Unsupervised learning:

This advanced machine learning algorithm can identify patterns on its own, enabling it to find patterns in unlabeled data.

Following the previous example, imagine you watch people in a café and start noticing patterns, such as certain facial expressions, quick movements, or slumped shoulders. You're discovering emotional states by grouping similar behaviors, without labels like "excited" or "angry".

Reinforcement learning:

The machine learning algorithm learns through trial and error, gradually avoiding bad outputs.

Now, imagine you interact with people daily and adjust your behavior based on their reactions. When you tell jokes and people laugh, you tell more jokes. Through that feedback, you learn what emotional expressions get positive responses without anyone teaching you explicit rules.

Now that we understand what Machine Learning is and how it works, let's explore Deep Learning, a powerful subset of ML that mimics how the human brain processes information.

Deep Learning

It’s a type of Machine Learning that recognizes patterns and makes associations in a way similar to how humans do. It uses multiple-layer neural networks to learn. Deep Learning automatically learns features at different abstraction levels; early layers detect simple patterns and deeper layers combine them into complex concepts. Its abilities can range from identifying items in a photo or recognizing a voice to driving a car or creating an illustration.

The "deep" word in Deep Learning refers to the depth, the number of layers in the neural network. Traditional Machine Learning might use 1 or 2 layers, while deep learning models can have even hundreds of layers, each extracting increasingly sophisticated patterns.

Deep Learning is too expensive; it requires enormous amounts of training data and computational power. Where traditional Machine Learning might work with thousands of examples, Deep Learning often needs millions.

LLMs such as ChatGPT and image generators such as Midjourney rely on deep learning to learn language and context and to produce realistic responses.

How does Deep Learning work?

Typically, a program requires precise input data to obtain accurate results. Deep Learning, on the other hand, can take arbitrary data and produce a relevant output. For example, let’s imagine we have an application that receives two dog's pictures and returns whether they are identical, but a deep learning model can recognize similarities between the dogs even if they are pretty different.

A Deep Learning model can be defined as a complex, interconnected set of mathematical functions that maps an input to an output. By adjusting the influence of each function within that network, the model learns to map inputs to the correct outputs.

Those networks used to process the inputs are the famous Neural Networks! 🧠

Neural Networks

In general terms, artificial neural networks are inspired by the functioning of the neural circuits of the human brain, which are based on the complex transmission of chemical and electrical signals through distributed networks of nerve cells (neurons). Artificial neural networks are collections of processing units, called nodes, that simulate neurons and pass data between them, just as the human brain passes electrical impulses. Each of them performs its own mathematical operation called activation function.

How do neural networks work?

As we see in the following image, the neural networks are built with a collection of nodes across three layers:

Input Layer
Hidden Layer (can have more than one)
Output Layer

Reference of the image.

Here is how data flows through the network:

Each neuron processes an input and produces an output.
The output becomes the input for neurons in the next layer.
It repeats layer by layer till the last layer.
The last layer gives the network's answer.

The key part is that each neuron isn't just performing addition or multiplication. Still, a non-linear transformation, a more complex operation that involves non-linear relationships, enables the network to learn complex patterns such as "this combination of features means it's a cat, not a dog".

How neurons process information

Each neuron receives inputs, performs a calculation, and decides whether to pass information forward. This is how it happens:

Receive inputs: Takes numbers from previous neurons (or raw data if it's the first layer).
Apply weights: Each input is multiplied by its corresponding weight (importance).
Calculate the total: Adds all the weighted inputs together.
Apply activation function: Transforms the sum using a special mathematical function.
Pass or block: If the result exceeds a threshold, it sends the output to the next layer; otherwise, it ignores it.

Think of it like the battery saver function in your phone; it monitors the battery percentage and analyzes your usage patterns (inputs), then calculates the urgency (sum), and decides whether to activate power-saving mode or stay in normal mode (activation function + threshold).

Example

Let’s imagine that a neuron decides whether to activate the battery saver mode:

Inputs:

🪫 Battery level below 20%: Yes = 1 or No = 0
📈 High power apps running: Yes = 1 or No = 0
🔌 Away from charger for 4+ hours: Yes = 1 or No = 0

Weights (importance of each factor):

Low battery level: weight = 0.6
High power apps: weight = 0.3
Time away from charger: weight = 0.4

Calculation:

Let’s say that for me, the battery level is 10%, I’m running high-power apps, and I’m away from my charger, so I’d say yes to all of the answers. Then we have to multiply the input value by the weight and sum all of them:

sum = (1 * 0.6) + (1 * 0.3) + (1 * 0.4)
sum = 1.3

Activation Function (simplified):

If sum > 1.0 → Output = 1 (activate battery saver!)
If sum ≤ 1.0 → Output = 0 (stay in normal mode)

Result:

In this example, the sum is 1.3 > 1.0, so the neuron fires (outputs a 1), triggering battery-saving mode to conserve power.

In the previous example, we saw that the activation function determines whether the battery saver should be turned on; in other words, let’s call this function the neuron’s decision maker! 😎

The Activation Function

The activation function is what makes neurons smart. Instead of just passing the sum directly, it transforms it into practical ways.

Common activation functions

Step function (simplest):

If sum > threshold → output 1
If sum ≤ threshold → output 0

Like a light switch; either ON or OFF.

Sigmoid Function (more sophisticated):

Output = 1 / (1 + e^(-sum))

Produces smooth values between 0 and 1, like a dimmer switch. Gives 0.5 when the sum is 0, values near 0 for negative sums, and values near 1 for positive sums.

ReLU (Rectified Linear Unit - most popular today):

If sum > 0 → output = sum
If sum ≤ 0 → output = 0

Passes positive values unchanged, blocks negative values. Simple but powerful 🦾

Visual Diagram

Now that we know how neurons process information, it’s essential to understand that there are different types of neural networks specialized for other tasks. In the next section, we’ll explore those types.

How Neural Networks Learn

So far, we've seen how neural networks process information, but how do they actually learn to make accurate predictions?

Neural networks learn through a process called training. Initially, the network's weights are random, so the outputs are basically guesses. The network compares its output to the correct answer, calculates how wrong it was, the "error", and then adjusts the weights slightly to reduce that error. This happens thousands or millions of times across the entire training dataset.

When you first try throwing a basketball, it's kind of random where it goes. You look at how far off you were, maybe adjust your grip or the force of your throw, then try again. You keep doing that over and over until you start hitting the hoop pretty consistently.

The network works in a similar way. It looks at what it got wrong and tweaks things little by little to improve.

That tweaking part is called backpropagation, which means sending the error back through the layers. And the way it slowly gets better is called gradient descent, like going down toward less error.

In real setups, there are fancier methods like Adam that speed up training, but for now, sticking with basic gradient descent keeps things simpler. The main idea is that networks learn by changing their weights each time based on mistakes. They repeat that process a lot. We won't dive into the math here, but understanding that networks learn by repeatedly adjusting weights based on their mistakes is crucial.

Wrapping up, the neural networks aren't programmed with rules; they discover patterns by learning from examples.

Types of neural networks

There are different neural network architectures focused on various tasks. Understanding these types helps clarify why transformers became the foundation for modern LLMs, so considering their specialization, we have these types:

Feedforward Networks: The simplest architecture where information flows in one direction: input → hidden layers → output. No loops or backward connections.
Convolutional Neural Networks (CNNs): Specialized for processing grid-like data, especially images. CNNs detect patterns, such as edges, and combine them into more complex features, such as shapes and objects. They are focused on computer vision tasks, including face recognition, object identification, and medical image analysis.
Recurrent Neural Networks (RNNs): Created for sequential data where order matters, like time series, speech, or text. Unlike feedforward networks, RNNs have "memory”; they pass information from one step to the next, allowing them to remember previous inputs. However, they struggle with long sequences because their memory fades over time.
Transformer Models: The LLM Revolution; this is where things get interesting for LLMs. Transformers solved RNNs' most significant limitation; they can process entire sequences simultaneously rather than one element at a time.

You can also see in some places that existing types like Perceptron, Multilayer Perceptron, Modular, Radial Basis, etc., but to mention, this classification focuses on how neurons are connected and organized, basically by their architecture.

Transformer model

The innovation in this model is that, unlike RNNs, which process text word by word, transformers can attend to all words at once and understand relationships between distant words, for example, in this sentence, “The dog didn't run anymore because it was too tired.”, a transformer instantly connects "it" back to "dog", even though they're separated by several words.

This parallel processing makes transformers:

Faster to train than RNNs (can process all words simultaneously)
Better at understanding context (attention mechanism captures long-range dependencies)
More scalable (can be trained on massive datasets efficiently)

LLMs like ChatGPT and Claude use transformer architecture because it shines at understanding language patterns, maintaining context across long conversations, and generating coherent, contextually relevant text.

Putting It All Together

Before moving to the last section, let's recap what we've learned:

Machine Learning teaches computers to learn patterns from data instead of following hardcoded rules.
Deep Learning uses multi-layered neural networks to discover features at different levels of abstraction automatically.
Neural networks are built from individual neurons that receive inputs, apply weights, sum everything up, pass the result through an activation function, and output a signal. Different types, such as CNNs, RNNs, and transformers, focus on various tasks, with transformers revolutionizing language understanding and powering modern LLMs.

Now that you understand the theory, let's jump to the funniest part. Building a neural network in Ruby sounds kind of exciting, actually. Like doing it all from scratch without any of those frameworks or anything fancy, just straight Ruby code.

You'll create neurons, connect them into a network, and watch it learn to solve a problem. This hands-on experience will solidify everything you've learned and prepare you for the advanced AI features we'll build in Rails applications throughout this series.

Practical Example: Predicting Student Test Scores

Let's build a neural network that predicts a student's final exam score based on:

Hours studied
Hours slept

We will have 2 inputs (hours studied and hours slept), 2 hidden neurons (using ReLU), and 1 output (exam score). This is a diagram to understand the architecture of our neural network:

To start with the Ruby script, let’s create a file such as predicting_student_test_scores.rb then let’s go to the funniest part:

As we saw before, a neural network starts with the training, and to do that, we need some training data:

# Training data: [hours_studied, hours_slept] → exam_score
training_data = [
  [[5, 8], 85], # 5 hours studied, 8 hours slept → 85 score
  [[2, 6], 60], # 2 hours studied, 6 hours slept → 60 score
  [[8, 7], 95]  # 8 hours studied, 7 hours slept → 95 score
]

Then, we need something called hyperparameters, which are helpful because we have to tell the network:

How big are the steps when updating weights? - Learning rate
How many times do we go through the entire training dataset? - Epochs

# Hyperparameters
learning_rate = 0.0001
epochs = 1000

Remember that:

Learning rate: A small value is equal to slow but stable learning.
Epochs: More epochs are equal to more opportunities to learn.

Later, we will see that when the learning rate is too large (0.01 or 0.1), the loss rate tends to increase instead of decrease, and the training becomes unstable.

Let’s continue. Now it’s time to initialize the weights and biases:

# Initialize random weights and biases
w1 = [[0.4, 0.6], [0.3, -0.2]]   # Weights from inputs to hidden layer (2x2)
w2 = [[0.8], [0.5]]              # Weights from hidden layer to output (2x1)
b1 = [0.5, -0.1]                 # Biases for hidden neurons
b2 = [10.0]                      # Bias for output neuron

These are random starting values. The network will adjust them during training.

Then, let’s create the ReLU Activation Function, which introduces non-linearity, allowing the network to learn complex patterns.

def relu(sum)
  [0, sum].max  # If sum is negative, return 0; otherwise return sum
end

Now that we have defined the variables such as training data, weights, biases, learning rate, and epochs, we are gonna move to the training loop, the Forward Pass. For each training example, the network makes a prediction:

# Training loop
puts 'Starting training...'
puts '-' * 50

epochs.times do |epoch|
  total_loss = 0

  training_data.each do |input, actual|
    # === FORWARD PASS ===
    # Hidden layer calculations

    # First hidden neuron (h1)
    # The weighted sum (z1) is also called linear combination or pre-activation
    z1 = (input[0] * w1[0][0]) + (input[1] * w1[1][0]) + b1[0]
    h1 = relu(z1)

    # Second hidden neuron (h2)
    z2 = (input[0] * w1[0][1]) + (input[1] * w1[1][1]) + b1[1]
    h2 = relu(z2)
    # ...
    # Don't close the epochs and training_data blocks yet

If we take the first training data example [5, 8], the weighted sum results are:

# Calculation results for the first training data example: [5, 8], w1 and b1
# because starts wiht the input → hidden layer
z1 = (5 * 0.4) + (8 * 0.3) + 0.5 = 4.9
h1 = 4.9

z2 = (5 * 0.6) + (8 * -0.2) + (-0.1) = 1.3
h2 = 1.3

Having the hidden neuron values, we can calculate the prediction for the output layer:

# We use w2 and b2 because goes from hidden layer → output
prediction = (h1 * w2[0][0]) + (h2 * w2[1][0]) + b2[0]

We can substitute with values:

prediction = (4.9 * 0.8) + (1.3 * 0.5) + 10 = 14.57

So, comparing our training data for [5, 8] the output of the exam score should be 85 but the newtwork predicted 14.57, which means we have a loss rate. Let’s calculate what that loss is:

# === CALCULATE LOSS ===

# Output layer error
error = prediction - actual

loss = error**2 # we square the error to get a positive number
total_loss += loss

And, the same, we replace with values:

# Actual is the output from our training data
error = 14.57 - 85
error = -70.43

loss = (-70.43)^2
loss = 4960.38

Our loss was about 4960.38 but the cool thing here is that our network learns about it, and we call this process backpropagation.

The next step is to start with backpropagation, where the network learns by calculating how much each weight contributed to the error. We have to calculate the gradients, and you're probably wondering what they are here. A gradient tells us how much the loss would change if we changed a specific weight by a small amount.

Think of gradients as directions and magnitudes:

Direction (sign): Should we increase or decrease this weight?
- Positive gradient: decrease the weight.
- Negative gradient: increase the weight.
Magnitude (size): How much does this weight affect the error?
- Large gradient: this weight has a big impact on the error.
- Small gradient: this weight has minimal impact

Wrapping up how we can see the results:

Negative error means we predicted too low, so we need to increase the output
Positive error means we predicted too high, so we need to decrease the output

# === BACKPROPAGATION ===

# Gradients for w2 (Hidden → Output)
grad_hidden1_to_output = error * h1
grad_hidden2_to_output = error * h2
grad_output_bias = error

# Propagate error back to hidden layer
error_h1 = error * w2[0][0] * (z1.positive? ? 1 : 0) # ReLU derivative
error_h2 = error * w2[1][0] * (z2.positive? ? 1 : 0)

# Gradients for w1 (Input → Hidden)
grad_studied_to_hidden1 = error_h1 * input[0]
grad_slept_to_hidden1 = error_h1 * input[1]
grad_studied_to_hidden2 = error_h2 * input[0]
grad_slept_to_hidden2 = error_h2 * input[1]
grad_hidden1_bias = error_h1
grad_hidden2_bias = error_h2

And the results are:

# Gradients for w2 (Hidden → Output)
grad_hidden1_to_output = (-70.43) * 4.9 = -345.11
grad_hidden2_to_output = (-70.43) * 1.3 = -91.56
grad_output_bias = -70.43

# Propagate error back to hidden layer
error_h1 = (-70.43) * 0.8 * 1 = -56.34
error_h2 = (-70.43) * 0.5 * 1 = -35.22

# Gradients for w1 (Input → Hidden)
grad_studied_to_hidden1 = (-56.34) * 5 = -281.7
grad_slept_to_hidden1 = (-56.34) * 8 = -450.72
grad_studied_to_hidden2 = (-35.22) * 5 = -176.1
grad_slept_to_hidden2 = (-35.22) * 8 = -281.76
grad_hidden1_bias = -56.34
grad_hidden2_bias = -35.22

These calculate how much each input weight contributed to the error.

Once we have calculated the gradients, we need to update the weights using those gradients. We will use an optimization algorithm called SGD (Stochastic Gradient Descent), which is the primary optimization algorithm for training neural networks. It updates weights using a single data sample at a time instead of the entire dataset, making it fast and scalable:

  # === UPDATE WEIGHTS (SGD) ===

  # Update w2 (Hidden → Output)
  w2[0][0] -= learning_rate * grad_hidden1_to_output
  w2[1][0] -= learning_rate * grad_hidden2_to_output
  b2[0] -= learning_rate * grad_output_bias

  # Update w1 (Input → Hidden)
  w1[0][0] -= learning_rate * grad_studied_to_hidden1
  w1[1][0] -= learning_rate * grad_slept_to_hidden1
  w1[0][1] -= learning_rate * grad_studied_to_hidden2
  w1[1][1] -= learning_rate * grad_slept_to_hidden2
  b1[0] -= learning_rate * grad_hidden1_bias
  b1[1] -= learning_rate * grad_hidden2_bias
end # Close the training_data.each block

If we replace with the real values, we can see:

# Calculations for w2
w2[0][0] = 0.8 - (0.0001 * -345.11) = 0.8 + 0.0345 = 0.8345
w2[1][0] = 0.5 - (0.0001 * -91.56) = 0.5 + 0.0092 = 0.5092
b2[0] = 10.0 - (0.0001 * -70.43) = 10.0 + 0.0070 = 10.007

# Calculations for w1
w1[0][0] = 0.4 - (0.0001 * -281.7) = 0.4 + 0.0282 = 0.4282
w1[1][0] = 0.3 - (0.0001 * -450.72) = 0.3 + 0.0451 = 0.3451
w1[0][1] = 0.6 - (0.0001 * -176.1) = 0.6 + 0.0176 = 0.6176
w1[1][1] = -0.2 - (0.0001 * -281.76) = -0.2 + 0.0282 = -0.1718
b1[0] = 0.5 - (0.0001 * -56.34) = 0.5 + 0.0056 = 0.5056
b1[1] = -0.1 - (0.0001 * -35.22) = -0.1 + 0.0035 = -0.0965

We subtract learning_rate * gradient from each weight. This encourages the weights in the direction that reduces error. Notice that all weights increased because the error was negative, which means we predicted too low; if you remember, our prediction was 14.57 out of 85.

Let’s monitor the progress:

end # Close the training_data.each block

  # Calculate average loss
  avg_loss = total_loss / training_data.length

  # Print progress every 100 epochs
  puts "Epoch #{epoch + 1}: Avg Loss = #{avg_loss.round(2)}" if ((epoch + 1) % 100).zero?
end # Close the epochs.times block

Every 100 epochs, print the average loss. You should see this number decrease over time as the network learns.

Finally, to see all the complete training with some test cases, let’s add this:

puts '-' * 50
puts 'Training complete!'
puts

# === FINAL WEIGHTS ===
puts 'Final weights:'
puts 'w1 (Input → Hidden):'
puts "  Hours studied → H1: #{w1[0][0].round(3)}, H2: #{w1[0][1].round(3)}"
puts "  Hours slept → H1: #{w1[1][0].round(3)}, H2: #{w1[1][1].round(3)}"
puts 'w2 (Hidden → Output):'
puts "  H1 → Score: #{w2[0][0].round(3)}"
puts "  H2 → Score: #{w2[1][0].round(3)}"
puts "Biases: b1 = [#{b1[0].round(3)}, #{b1[1].round(3)}], b2 = [#{b2[0].round(3)}]"
puts

# === TEST THE NETWORK ===
puts 'Testing the trained network:'
puts '-' * 50

test_cases = [
  [5, 8],  # Original training example
  [2, 6],  # Original training example
  [8, 7],  # Original training example
  [6, 7],  # New student
  [3, 5],  # Low effort
  [9, 8]   # High effort
]

test_cases.each do |input|
  # Forward pass
  z1 = (input[0] * w1[0][0]) + (input[1] * w1[1][0]) + b1[0]
  h1 = relu(z1)

  z2 = (input[0] * w1[0][1]) + (input[1] * w1[1][1]) + b1[1]
  h2 = relu(z2)

  prediction = (h1 * w2[0][0]) + (h2 * w2[1][0]) + b2[0]

  puts "Input: [studied: #{input[0]}h, slept: #{input[1]}h] → Predicted score: #{prediction.round(1)}"
end

Running the Ruby script, you should see something like this:

> ruby predicting_student_test_scores.rb

Starting training...
--------------------------------------------------
Epoch 100: Avg Loss = 1.59
Epoch 200: Avg Loss = 0.96
Epoch 300: Avg Loss = 0.85
Epoch 400: Avg Loss = 0.83
Epoch 500: Avg Loss = 0.83
Epoch 600: Avg Loss = 0.82
Epoch 700: Avg Loss = 0.82
Epoch 800: Avg Loss = 0.81
Epoch 900: Avg Loss = 0.81
Epoch 1000: Avg Loss = 0.8
--------------------------------------------------
Training complete!

Final weights:
w1 (Input → Hidden):
  Hours studied → H1: 1.336, H2: 1.122
  Hours slept → H1: 2.021, H2: 0.739
w2 (Hidden → Output):
  H1 → Score: 2.581
  H2 → Score: 1.28
Biases: b1 = [0.824, 0.073], b2 = [10.193]

Testing the trained network:
--------------------------------------------------
Input: [studied: 5h, slept: 8h] → Predicted score: 86.1
Input: [studied: 2h, slept: 6h] → Predicted score: 59.2
Input: [studied: 8h, slept: 7h] → Predicted score: 94.6
Input: [studied: 6h, slept: 7h] → Predicted score: 84.9
Input: [studied: 3h, slept: 5h] → Predicted score: 57.9
Input: [studied: 9h, slept: 8h] → Predicted score: 105.7

We can notice that the average loss is decreasing on each iteration. Even if you want to see how the loss is changing, we just need to print every 50 epochs:

> ruby predicting_student_test_scores.rb

Starting training...
--------------------------------------------------
Epoch 50: Avg Loss = 2.68
Epoch 100: Avg Loss = 1.59
Epoch 150: Avg Loss = 1.14
Epoch 200: Avg Loss = 0.96
Epoch 250: Avg Loss = 0.88
Epoch 300: Avg Loss = 0.85
Epoch 350: Avg Loss = 0.84
Epoch 400: Avg Loss = 0.83
Epoch 450: Avg Loss = 0.83
Epoch 500: Avg Loss = 0.83
Epoch 550: Avg Loss = 0.83
Epoch 600: Avg Loss = 0.82
Epoch 650: Avg Loss = 0.82
Epoch 700: Avg Loss = 0.82
Epoch 750: Avg Loss = 0.81
Epoch 800: Avg Loss = 0.81
Epoch 850: Avg Loss = 0.81
Epoch 900: Avg Loss = 0.81
Epoch 950: Avg Loss = 0.8
Epoch 1000: Avg Loss = 0.8
--------------------------------------------------
Training complete!

Finally, let's see how changing the learning rate to a bigger number, increase the average loss, so we have to update the learning_rate to 0.01 and run the script:

> ruby predicting_student_test_scores.rb

Starting training...
--------------------------------------------------
Epoch 50: Avg Loss = 482.11
Epoch 100: Avg Loss = 231.57
Epoch 150: Avg Loss = 219.43
Epoch 200: Avg Loss = 218.87
Epoch 250: Avg Loss = 218.85
Epoch 300: Avg Loss = 218.85
Epoch 350: Avg Loss = 218.85
Epoch 400: Avg Loss = 218.85
Epoch 450: Avg Loss = 218.85
Epoch 500: Avg Loss = 218.85
Epoch 550: Avg Loss = 218.85
Epoch 600: Avg Loss = 218.85
Epoch 650: Avg Loss = 218.85
Epoch 700: Avg Loss = 218.85
Epoch 750: Avg Loss = 218.85
Epoch 800: Avg Loss = 218.85
Epoch 850: Avg Loss = 218.85
Epoch 900: Avg Loss = 218.85
Epoch 950: Avg Loss = 218.85
Epoch 1000: Avg Loss = 218.85
--------------------------------------------------
Training complete!

Final weights:
w1 (Input → Hidden):
  Hours studied → H1: -8.216, H2: -1.446
  Hours slept → H1: -29.491, H2: -8.804
w2 (Hidden → Output):
  H1 → Score: -44.62
  H2 → Score: -26.389
Biases: b1 = [-4.653, -1.651], b2 = [80.034]

Testing the trained network:
--------------------------------------------------
Input: [studied: 5h, slept: 8h] → Predicted score: 80.0
Input: [studied: 2h, slept: 6h] → Predicted score: 80.0
Input: [studied: 8h, slept: 7h] → Predicted score: 80.0
Input: [studied: 6h, slept: 7h] → Predicted score: 80.0
Input: [studied: 3h, slept: 5h] → Predicted score: 80.0
Input: [studied: 9h, slept: 8h] → Predicted score: 80.0

The average loss is bigger and it didn't decrease affecting the predictions, so that's the reason a small learning rate is better.

You can check the whole code in this repository!

Summary of the Learning Process

Forward Pass: Make a prediction
Calculate Error: Compare prediction to actual value
Backpropagation: Calculate how much each weight contributed to the error
Update Weights: Adjust weights to reduce error
Repeat: Do this 1000 times across all training examples

After 1000 epochs, the network should have learned that more studying and more sleep lead to higher test scores!

Key Insights

First prediction was 14.57, target was 85, so huge error of -70.43.
All weights increased because the error was negative (prediction too low).
A small learning rate (0.0001) means weights change slowly but steadily.
After 1000 epochs, these small adjustments accumulate, and the network learns!

The network will repeat this process with all 3 training examples 1000 times, gradually adjusting the weights until the predictions become accurate.

Conclusion

With this example, we've completed the first essential step in understanding the foundations of LLMs. You've learned the core concepts of Machine Learning and Deep Learning, and most importantly, you've built a working neural network from scratch in Ruby. This hands-on experience with neurons, weights, and backpropagation gives you the knowledge needed to understand how modern AI systems work under the hood.

In the next posts, we'll integrate AI capabilities into Rails applications, moving from theory to building real-world features. Stay tuned! 👋

Rails and Inertia.js - The Modern Monolith

David Sanchez — Tue, 13 Jul 2021 18:14:47 +0000

Rails is a powerful framework that gives us out of the box, tools like Hotwire, this helps us to build reactive applications, and also, we have external tools like Stimulus Reflex which like Hotwire, offer interactions that user is looking for (you can see this post about reactive applications with Reflex).

But sometimes, you are looking for something else, maybe things that, tools like React or Vue can give you, can be that feeling of a SPA (Single Page Application). Rails has libraries like Webpacker that help us to use modern JS frameworks in an easy way but after installation, you need to do a lot of other things to get them to work in your applications, for example, you need to create some API's and then call them from JS or in some cases, is necessary to use client-side routing and it feels like you have two applications even when you have a monolith.

Here, is where Inertia.js comes to the action! 🎉

What's Inertia.js?

It's a JS library that allows us to build a SPA (Single Page Applications) using the classic server-side render, I mean, using the views render, routing, and controllers as we would commonly do from the server-side without using API's or client-side routing, it only changes the way we render views, instead of returning HTML, views here are JavaScript Page Components.

At this moment, Inertia just have three official client-side adapters (React, Vue.js, and Svelte) and two server-side adapters (Laravel and Rails).

How does it work?

If you want to create a SPA, it's not enough to have your views with JS, because if you click in a link to navigate to another page, your browser would do a full reload page so this is not a behavior of a SPA 😞

Inertia, actually, is a client-side routing library that intercepts your clicks 😧 using its own anchor link wrapper called <inertia-link>, when you click on this element, Inertia intercepts this event and makes the visit via XHR (XMLHttpRequest) instead.

So, when Inertia makes an XHR visit, the server can detect that it's an Inertia request and instead of returning HTML, it returns a JSON response with the JavaScript page component name and data, finally, Inertia just replace this new component into the page and updates the history state.

How does the server know if it's an Inertia request?

When someone makes the first request to your application, it's a full reload page and it returns HTML, there aren't any special headers at this point.

The previous HTML response serves the root div as a mounting point for the JS side, and this root contains the data-page attribute with a JSON page object.

Inertia uses this page object to share data between client and server, this object contains these properties:

Component: The name of the JavaScript page component.

Props

URL: The page URL

Version: The current asset version (if there's asset changes, Inertia will automatically make a full page visit instead of an XHR visit).

The next requests are made via XHR with the X-Inertia header set to true (using the Inertia element anchor), this means that this request is through Inertia so, this the way that server knows if return just HTML or JS Page Components.

Next section will do an example with Rails and Vue.js! 🤟🏼

Let's code!

Creating the Rails project

When we create a new project, it's necessary skip turbolinks because it's not compatible with Inertia, but if you have a project with it and you want to add Inertia, you can disable Turbolinks for any response sent to Inertia, for example redirect_to root_path, turbolinks: false, for now, this the command to create the project:

rails new inertia_example --skip-turbolinks

Installing Vue and Inertia

We could have installed Vue from the beginning like this:

rails new inertia_example --webpacker=vue --skip-turbolinks

But I want to show you how we can do it after installation in case anyone has a project already started, you can install Vue in this way:

rails webpacker:install:vue

Once Vue is installed, we need to add Inertia with this command:

yarn add @inertiajs/inertia @inertiajs/inertia-vue @inertiajs/progress

With this, we are installing Inertia, the Inertia Vue adapter and a progress bar, Inertia has an optional progress bar, so if you don't want to install it, just remove it from the command.

Next step is to install Inertia to the server-side running this command in the terminal:

bundle add 'inertia_rails'

This will install the latest version of inertia_rails gem, and finally it's necessary add defer: true to the javascript_pack_tag into the app/views/layouts/application.html.erb page:

<%= javascript_pack_tag 'application', defer: true %>

Adding defer we are telling to the application.js that will be executed after the page has been parsed, avoiding render errors with the dataset.

Setting up

After Vue installation, we can delete these files app/javascript/packs/hello_vue.js and app/javascript/app.vue because we don't need them for now and let's initialize Vue inside app/javascript/packs/application.js

// app/javascript/packs/application.js

...
import Vue from 'vue'
import { App, plugin } from '@inertiajs/inertia-vue'
import { InertiaProgress } from '@inertiajs/progress'

Vue.use(plugin)
InertiaProgress.init()

// Instead of using App.vue page, Inertia
// will use Rails application.html.erb layout page
const el = document.getElementById('app')

new Vue({
  render: h => h(App, {
    props: {
      initialPage: JSON.parse(el.dataset.page),
      resolveComponent: name => require(`../pages/${name}`).default,
    },
  }),
}).$mount(el)

You don't need to add the ID app to the root element, the Inertia adapter will do it for you 👍, initialPage gets the page where the response from the controller will be inserted, this page is a data attribute inside the root element and resolveComponent will look at the pages directory for the views, this is a common convention if you ever used Vue or Nuxt.

Adding Tailwindcss

I'm going to use the tailwindcss-rails gem, the only thing you need to do is to run these two commands in the console:

bundle add tailwindcss-rails
rails tailwindcss:install

After that, you already have Tailwindcss running in your project, you can also remove or comment the stylesheet_link_tag from your app/views/layouts/application.html.erb.

Creating the Home page with Inertia

Let's create the HomeController here app/controllers/home_controller.rb with this 👇🏼

class HomeController < ApplicationController
  def index
    render inertia: 'Home', props: {}
  end
end

We are just telling it that we're going to render a view called Home placed into app/javascript/pages without any props, just the view, remember the folder pages was defined in our application.js in Setting up section.

Next step is to add the root in the config/routes.rb file:

Rails.application.routes.draw do
  root 'home#index'
end

Finally, we create the folder pages within app/javascript dir and we're going to add the Home.vue file

<!-- app/javascript/pages/Home.vue -->

<template>
  <div>
    <h1 class="text-2xl text-center">Home</h1>
    <h2 class="text-xl text-center">This is a Vue page rendered with Inertiajs</h2>
  </div>
</template>

If you prefer, you can add these classes to the body element in application.html.erb:

<!-- app/views/layouts/application.html.erb -->

...
<body class="p-5 bg-gray-100 mx-auto">
  <%= yield %>
</body>

Run your Rails server with rails s and to see the changes without reloading the page manually, just run ./bin/webpack-dev-server in other console tab to watch the frontend changes, if you go to the browser, you'll see something like this:

You got it! 🎉 Your first Vue page rendered with Rails and Inertiajs!

Passing data to views

Now, we want to pass some data to Vue, for this, let's create a model called Book 👇🏼

rails g model Book title author edition editorial
...

rails db:migrate

We have our model with some attributes and it's time to create the Books Controller:

# app/controllers/books_controller.rb

class BooksController < ApplicationController
  def index
    books = Book.all

    render inertia: 'Books/Index', props: {
      books: books.as_json(only: [:id, :title, :author, :edition, :editorial])
    }
  end
end

Books/Index means that we have a folder Books within app/javascript/pages and an Index.vue inside of and we are passing it a books array with the attributes we defined previously, so let's create the Books/Index.vue file:

<!-- app/javascript/pages/Books/Index.vue -->

<template>
  <div>
    <h1 class="text-2xl text-center">Books</h1>
    <table class="min-w-max w-full table-auto">
      <thead>
        <tr class="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
          <th class="py-3 px-6 text-left">Title</th>
          <th class="py-3 px-6 text-left">Author</th>
          <th class="py-3 px-6 text-center">Edition</th>
          <th class="py-3 px-6 text-center">Editorial</th>
          <th class="py-3 px-6 text-center">Actions</th>
        </tr>
      </thead>
      <tbody class="text-gray-600 text-sm font-light">
        <tr v-for="book in books" :key="book.id" class="border-b border-gray-200 hover:bg-gray-100">
          <td class="py-3 px-6 text-left"><span class="font-medium">{% raw %}{{ book.title }}{% endraw %}</span></td>
          <td class="py-3 px-6 text-left"><span class="font-medium">{% raw %}{{ book.author }}{% endraw %}</span></td>
          <td class="py-3 px-6 text-left"><span class="font-medium">{% raw %}{{ book.edition }}{% endraw %}</span></td>
          <td class="py-3 px-6 text-left"><span class="font-medium">{% raw %}{{ book.editorial }}{% endraw %}</span></td>
          <td class="py-3 px-6 text-left">
            <inertia-link :href="$routes.book(book.id)">See</inertia-link>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    props: {
      books: {
        type: Array,
        required: true,
      }
    }  
  }
</script>

And don't miss to add the routes for our Books resource:

# config/routes.rb

Rails.application.routes.draw do
  root 'home#index'
  resources :books, only: %i[index show]
end

Before of going to the browser, I want to add some example data with the purpose of see something when we render the books page, you can add this code to db/seeds.rb and run rails db:seed to save those data into database

10.times do |i|
  Book.create(
    title: "Metaprogramming Ruby Version-#{i}",
    author: "Paolo Perrotta",
    edition: "Edition #{i}",
    editorial: "The Pragmatic Programmers",
  )
end

So, go to http://localhost:3000/books and you should see something like this:

Great! 🤟🏼 We are passing data from Rails to Vue using Inertia!

Inertia Links

Before using the <inertia-link> element, go to books_controller.rb and create the show method to get a book:

def show
  book = Book.find(params[:id])

  render inertia: 'Books/Show', props: {
    book: book.as_json(only: [:id, :title, :author, :edition, :editorial])
  }
end

Now, we're going to install a gem called js-routes, this gem defines all Rails named routes as Javascript helpers, and just need to run this command in the console:

bundle add "js-routes"

After installation create this file config/initializers/jsroutes.rb with this 👇🏼

# config/initializers/jsroutes.rb

JsRoutes.setup do |config|
  config.exclude = [/rails_/] # excludes rails generated routes
  config.compact = true       # removes the _path from the route name
  path = "app/javascript/packs" # destination folder
  JsRoutes.generate!("#{path}/routes.js")
end

This help us to generate automatically a file routes.js and you can use your Rails routes in Javascript, to use them in all places add the following within application.js:

// app/javascript/packs/application.js

...
import Routes from "./routes.js"
Vue.prototype.$routes = Routes

We can modify our Books/Index.vue file to add the <inertia-link> for each book:

...
<td class="py-3 px-6 text-left">
  <inertia-link :href="$routes.book(book.id)">See</inertia-link>
</td>

That is similar to use book_path(book.id) in Rails, we are passing the Booki ID to the book URL and finally, we can add the Books/Show.vue file:

<template>
  <div class="text-center">
    <h1 class="text-4xl font-bold mb-5">{{ book.title }}</h1>
    <h2 class="text-xl mb-3">{{ book.author }}</h2>
    <p class="font-light italic mb-5">{{ book.edition }} - {{ book.editorial }}</p>
    <inertia-link :href="$routes.books()" class="text-blue-500">Back</inertia-link>
  </div>
</template>

<script>
  export default {
    props: {
      book: {
        type: Object,
        required: true
      }
    },
  }
</script>

To be able to see the changes, go to the browser to /books path and click in some Book on the See link, and should see the Book view, something like this 👇🏼

If you open the devtools and navigate to the Network tab, choose All and then the request with the Book ID (in my case ID 2), yo can see on Request Headers section the X-Inertia: true and the X-Requested-With: XMLHttpRequest:

But remember, if you want to see this on the devtools, you need to come from the <inertia-link> element, because if you reload the page, you're doing a full reload page.

So with this, you've implemented the Vue framework on Rails without needing an API or client-side routing, it's just a common Rails application rendering Vue pages 🤟🏼.

See you next! 👋🏼

Reference

https://inertiajs.com/

Read the original post on codeando.dev

Components on Rails?

David Sanchez — Wed, 24 Mar 2021 04:37:03 +0000

As we know, Rails has its own approach to re-use some parts of the view, you can extract this HTML in modules called partials and you can use them as many times as you need and it's ok, actually, partials are an excellent option because you are using this feature out of the box without the need of install extra gems and the goal is accomplished, but, Github provides us another solution called ViewComponents.

What are ViewComponents?

Github page says:

ViewComponent is a framework for building reusable, testable & encapsulated view components in Ruby on Rails.

and they define their components here like:

Ruby objects that output HTML. Think of them as an evolution of the presenter pattern, inspired by React.

but what benefits can they give us?

Features

ViewComponents have some interesting features and that can be the param to decide between them or Partials, for example, these are my favorites features:

Testing

ViewComponents can be unit-tested 💪 and yes, this is crazy! because Rails traditional views are usually tested with Integration Tests but now you'll have some covered views parts with this fast kind of tests.

Isolation

This is awesome! You can have all about your components organized into their own folder, in other words, isolated components, for example, suppose you have a Comment component, so your app/components/comment folder will look like this:

├── component.html.erb
├── component.js
├── component.rb
└── component.scss

At the end, you have an isolated and portable component, with its own structure, styles, and behavior 🤟🏼 ready to use in many parts of your application.

Readability

I love how you can organize your components as you saw in the above point, but this is not everything, a component is a Ruby Class, so you can see what each component needs to be rendered, into the initialize method mainly, you'll see all needed data to build your view.

Components in action!

For this code example I'll use the project created in the past post, so if you want to follow this implementation, just clone it from here 👌.

Installing ViewComponents

The first thing we need to do is install the gem, we just open the Gemfile and we add this line:

gem 'view_component', require: 'view_component/engine'

finally, run this command on console:

> bundle install

Let's add more information to Tasks

Before creating our component, I want to add more details to our Tasks to do it more interesting. Open the app/views/projects/show.html.erb file and update the tasks list 👇🏼:

<% @project.tasks.each do |task| %>
  <li class="border-2 bg-gray-200 hover:bg-gray-300 rounded-lg p-2 mb-2">
    <h3 class="text-lg font-bold">
      <%= task.content %>
    </h3>
    <div class="flex justify-between">
      <span class="text-sm font-light">
        <%= time_ago_in_words(task.created_at) %> ago
      </span>
      <a href="#" class="text-red-500">Delete</a>
    </div>
  </li>
<% end %>

You'll see something like this:

Our first component!

To create our Task component is necessary run the next command:

> rails generate component Task task

Running via Spring preloader in process 40952
  create  app/components/task_component.rb
  invoke  test_unit
  create    test/components/task_component_test.rb
  invoke  erb
  create    app/components/task_component.html.erb

Running that command, we are just telling rails that we want to create a component with the name Task and it will receive a task as param, so the next step is to copy the HTML within the li element from app/views/projects/show.html.erb, I mean, the code that renders each task item and pastes it into app/components/task_component.html.erb replacing task variable with @task that it's the instance variable from our TaskComponent class, like this:

<section class="border-2 bg-gray-200 hover:bg-gray-300 rounded-lg p-2 mb-2">
  <h3 class="text-lg font-bold">
    <%= @task.content %>
  </h3>
  <div class="flex justify-between">
    <span class="text-sm font-light">
      <%= time_ago_in_words(@task.created_at) %> ago
    </span>
    <a href="#" class="text-red-500">Delete</a>
  </div>
</section>

and let's render the TaskComponent into the tasks lists

<% if @project.tasks.any? %>
  <ul>
    <% @project.tasks.each do |task| %>
      <li><%= render(TaskComponent.new(task: task)) %></li>
    <% end %>
  </ul>
<% else %>
  <h3 class="text-md">Add your first task ☝️</h3>
<% end %>

and voila! Your first component is working 🤟🏼, you should see the same view as before

Refactor and test

The first thing I want to do is order our /components dir, so let's do these changes 👇🏼

Create a folder called /task within /components dir.
Rename task_component.rb to component.rb and move it to /task folder.
Rename task_component.html.erb to component.html.erb and move it to /task folder.
Rename the class TaskComponent to Task::Component, this because we have a task module now.
Rename TaskComponent.new(task: task) to Task::Component.new(task: task)

at the end, you should see this structure of folders 👇🏼 and the HTML view should be the same as the above screenshot

> tree app/components

app/components
└── task
    ├── component.html.erb
    └── component.rb

with this, we are ready to test our component 💪 but before continuing, let's change our file test/components/task_component_test.rb to test/components/task/component_test.rb and add these small changes 👇🏼

Add this CSS class task__content to the h3 element where we have the Task content in app/components/task/component.html.erb, just for the purpose of this example and you can see how we can identify our HTML elements in the test:

<section class="border-2 bg-gray-200 hover:bg-gray-300 rounded-lg p-2 mb-2">
  <h3 class="task__content text-lg font-bold">
    <%= @task.content %>
  </h3>
  ...

Go to test/fixtures/tasks.yml and create a dummy Task for our test:

first_task:
  project: one
  content: This is my first task

and finally you are ready to write the test into this file test/components/task/component_test.rb 🎉🎉🎉

require 'test_helper'

class Task::ComponentTest < ViewComponent::TestCase
  def test_render_component
    task = tasks(:one)
    render_inline(Task::Component.new(task: task))

    assert_selector('h3.task__content', text: 'This is my first task')
  end
end

Let´s review each line together:

In this line task = tasks(:one) we are creating the dummy Task we added in the tasks fixture
With render_inline we are asserting against the rendered output.
and the last line assert_selector we are just comparing that h3 with the CSS class task__content has the expected content we added into the tasks fixture: This is my first task.

You can run your test in this way

> rails test test/components/task/component_test.rb

Running via Spring preloader in process 54617
Run options: --seed 60900

# Running:

.

Finished in 0.444012s, 2.2522 runs/s, 2.2522 assertions/s.
1 runs, 1 assertions, 0 failures, 0 errors, 0 skips

Your test is passed! 😃

Now you know how to create your own ViewComponents and test them, I hope this post is helpful, see you next! 👋🏼

Read the original post on codeando.dev

Reactivity Rails with Stimulus Reflex

David Sanchez — Wed, 24 Mar 2021 04:26:15 +0000

Before talking about Stimulus Reflex I want to explain to you in my own words, what´s Reactivity in web development.

What does `Reactivity` mean?

Reactivity is a fast and async reaction to user events just like tools as React or Angular do, for example, when you are typing in a text input and you can see the validation in real-time or when you add a product to a list and it appears immediately without reloading the page, that's reactivity.

So, What does it mean for Rails to be `Reactive`?

It means that Rails can make interactions in real-time with HTML rendered from the server through WebSockets and the most important, with the least amount of Javascript code.

Let's talk about Stimulus Reflex!

A library that extends the capabilities of both Rails and Stimulus by intercepting user interactions and passing them to Rails over real-time WebSockets. These interactions are processed by Reflex actions that change the application state. The current page is quickly re-rendered and the changes are sent to the client using CableReady.

Definition from https://docs.stimulusreflex.com/

Time to code!

This is the repository of Tasky, the example application of this post.

Creating the project

We're going to create a simple Tasks Manager for this example 👇🏼

# Create a new Rails project with Stimulus
rails new tasky --webpack=stimulus

# Create a new Rails project with Stimulus and a Tailwindcss template
rails new tasky -d postgresql --webpack=stimulus -m https://raw.githubusercontent.com/Sanchezdav/herewego/master/template.rb

# or if you have an existing project without Stimulus
rails webpacker:install:stimulus

For this example I'll be using my template https://github.com/Sanchezdav/herewego,
with this, we have Users already configured as well.

Models

The next step is to create our main models, Project and Task, so we can create a Project and you can add many Tasks for each Project, in this way you can manage and order better your Tasks.

> rails g scaffold Project user:references name description:text
...
> rails g model Task project:references content
...

Notice that Project is a scaffold because we want all actions to this resource.

Run the migrations to update the database

> rails db:migrate

Once our models are created, we need to add the relationships between them, like this 👇🏼

# tasky/app/models/user.rb
class User < ApplicationRecord
  ...
  has_many :projects, dependent: :destroy
end

# tasky/app/models/project.rb
class Project < ApplicationRecord
  belongs_to :user
  has_many :tasks, dependent: :destroy
end

# tasky/app/models/task.rb
class Task < ApplicationRecord
  belongs_to :project
end

Views

At this point, we should be able to create, edit and destroy Projects, but if we go to /projects/1 we just see the Project data, so is necessary to add a Task form there to create our Tasks list.

So we're going to change the Project view like this file in Github and you'll have something like the next image

Add Stimulus Reflex

To install Stimulus Reflex we need to add the gem and install it

> bundle add stimulus_reflex
...
> rails stimulus_reflex:install
...

Be sure that you have <%= action_cable_meta_tag %> in your views/layouts/application.html.erb

Then let's adapt the view to work with Reflex, first modification is the form and Tasks title

<h2 class="text-lg mb-3">Tasks (<%= @project.tasks.count %>)</h2>
<%= form_with(
      model: [@project, @task],
      html: { data: { reflex: "submit->Task#create" }}) do |form| %>

We added a @project.tasks.count with the purpose to see how the count is changing in real-time while we add a new task, and the form has an html: { data: { reflex: "submit->Task#create" }} with this, we are telling it that when we submit the form, it will execute the TaskReflex and the create action but before add the Reflex class we need to add the Tasks list after the form.

<div class="mt-5">
  <% if @project.tasks.any? %>
    <ul>
      <% @project.tasks.each do |task| %>
        <li class="border-2 bg-gray-200 hover:bg-gray-300 rounded-lg p-2 mb-2">
          <%= task.content %>
        </li>
      <% end %>
    </ul>
  <% else %>
    <h3 class="text-md">Add your first task ☝️</h3>
  <% end %>
</div>

and finally the TaskReflex

class TaskReflex < ApplicationReflex
  delegate :current_user, to: :connection

  def create
    @project = current_user.projects.find(params[:id])
    @project.tasks.create(task_params)
  end

  private

  def task_params
    params.require(:task).permit(:content)
  end
end

Notice that we have a delegate :current_user, to: :connection, this provide us a global user context, so for devise is necessary add this into app/channels/application_cable/connection.rb

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = find_verified_user
    end

    protected

    def find_verified_user
      if (current_user = env["warden"].user)
        current_user
      else
        reject_unauthorized_connection
      end
    end
  end
end

and that's it 🤟🏼

You can see how the Tasks number is increasing while the task item is adding, and this, without reloading the page.

Bonus

If you are an observer, you noticed that the input is not cleaned after the task is created, we can do it with Stimulus, yes, the Reflexes can be executed by Stimulus Controllers as well.

First step is modify the form, adding data-controller, data-target and data-action

<%= form_with(
      model: [@project, @task],
      html: { data: { controller: 'task' }}) do |form| %>
  <div class="flex mb-3">
    <%= form.text_field :content, data: { target: 'task.input' }, class: 'w-full rounded-lg mr-2', placeholder: 'Add a task' %>
    <%= form.button 'Create', data: { action: 'click->task#create' }, class: 'btn btn-primary' %>
  </div>
<% end %>

and finally let´s create a Stimulus controller called task_controller.js into app/javascript/controllers/ with this

import ApplicationController from './application_controller'

export default class extends ApplicationController {
  static targets = ['input']

  create(e) {
    e.preventDefault()

    this.stimulate('TaskReflex#create').then(() => {
      this.element.reset()
      this.inputTarget.focus()
    })
  }
}

The data-controller is the name of my file controller in this case task, data-target is the input and it's necessary to do the focus after the task is created end finally data-action tells us that we want to execute the create method when we click the button, so this method calls the Reflex action, the task is created, the input is cleaned and focused.

Now you can do Reactive applications with Ruby on Rails and Stimulus Reflex 💪

You can read the original post on codeando.dev