DEV Community: Max

ActionCable and React for Beginners

Max — Sun, 30 Apr 2023 23:40:18 +0000

Introduction

Everyone is familiar with HTTP, whether they know it or not. As web developers, we understand that it is an internet protocol used to send and receive requests from a client to a server. A typical exchange looks something like this :

But sometimes, we want real-time interaction with others. For example, users on Discord or Slack don't manually refresh their applications to get new messages, they are simply received. To facilitate this need for real-time updates, we can use WebSockets.

Put simply, WebSocket is an alternative internet protocol that allows for dynamic two-way communication between a client and server. Instead of a user requesting new information (like refreshing a page to load new posts), the user will receive data as it is broadcasted.

In this post, I will be walking you through how to set up a basic Chatroom using Rails ActionCable and a React Frontend.

Configuration

First we'll run through the basic application configuration.

Create a new Rails API in a directory.
rails new chat_app --api

Navigate to the newly created directory and create your React Client

#/chat_app
npx create-react-app client

Install @rails/actioncable to your React client

#/chat_app 
npm i @rails/actioncable --prefix client

In the Gemfile, uncomment "rack-cors"

This post won't go into deployment, but if you plan on doing so, uncomment "redis" and add the "pg" PostgreSQL gems and change your database adapters as required. This example won't go into deployment so you can leave the "sqlite3" gem and the default settings.

Uncomment this middleware and change origins to "*" for development purposes. Note you would have to change the origin to your application domain if you were deploying.

Finally, install your gems and client dependencies.

#/chat_app
bundle install
npm install --prefix client

Rails

To setup a WebSocket connection, we need to configure both our front and backend to create a 'handshake' or connection. We'll start with establishing the backend.

In Rails, let's generate a scaffold for a Message model. We'll keep things simple and only have a content attribute for our model.

rails g scaffold Message content
#Don't forget to migrate
rails db:migrate

Moving to /app/config/routes.rb, we can see that Rails has generated resources for our messages already. But we will also need to declare the endpoint for our ActionCable WebSocket server.

We have a model, it's controller and a server endpoint 'localhost:3000/cable'. Next we need something manage our connections and requests: a Channel.

Like the controller in MVC, a channel acts as a unit that takes requests and processes those request with respect to the defined actions it receives.

rails g channel Chat

In app/channels/chat_channel.rb, you will see our ChatChannel with two default actions: subscribed and unsubscribed. When a user attempts to make a WebSocket connection with our server, it will state what kind of request it is and to what channel. We could do different things to process a request such as adding authentication tokens, but we'll focus on the main function of the channel: streaming.

You can declare a stream from either a specific string, a dynamic interpolated string, or even from an instance of a model. In all cases, the user requests a subscription the ChatChannel and the ChatChannel will in return establish a connection and stream from the specified source.

This project will proceed using the stream_from "chat" configuration so we'll comment out the other examples.

Now that we've established a way for users to connect to our WebSocket server, we need to define when our server actually broadcasts information to our users.

In general, we're going to want to broadcast data to our channel when users create new messages.

ActionCable.server.broadcast("chat", @message) tells our server to broadcast our @message to the stream "chat". If you broadcast from a model, you will need to use different syntax, refer to https://guides.rubyonrails.org/action_cable_overview.html.

React

For brevity, I will only cover setting up WebSockets on the frontend.

In /app/client/src create a new file cable.js. This will manage the creation of our client-side 'consumer'.

Note that the protocol of our URL is now 'ws' not 'http'. This will tell our server that the user is attempting to establish a WebSocket.

In App.js, we want the client to make a subscription request to our ChatChannel. Thanks to @rails/actioncable we can also describe what we want to happen when we are connected, and when we receive data (if our connection is established).

From our backend we can see if a request is successful by viewing our terminal.

When we make a post request to our backend, our Messages Controller broadcasts our message to the "chat" stream.

When it broadcasts, our clients are set up to setMessages using that received information.

You can view realtime updates by opening the application an in incognito window. You will notice that both will update whenever the other sends a message.

Conclusion

WebSocket is a great tool to allow for interactive communication for users. It was difficult for me at first to really get a grasp on some of the examples out there, so I hope this provides a very basic illustration of how to set up ActionCable with a React Frontend application. I didn't cover management of connection requests or illustrate the use of multiple streams, but I think this shows the very basics on how to get a chatroom going. Let me know if there's anything I missed or anything you'd want me to cover!

Basics of Active Record Validations

Max — Sat, 08 Apr 2023 18:56:14 +0000

Introduction

Ruby on Rails ('Rails') is a web app development framework that provides a foundation for developers to build on. Rails provides tools that make common development tasks easier. For instance: managing a database. Rails provides Active Record to facilitate the management of data; it acts as the model in MVC¹. Active Record is an ORM (Object Relational Mapper) that simplifies database creation, data associations, and data validations. Data validations protect our application from user error and malicious attempts at manipulation. Before explaining validations themselves, we'll cover the difference between invalid and valid data. If you want to jump straight into validations, click here.

Invalid vs Valid Data

Our applications do not exist in a vacuum. We will ideally have real people using and interacting with our programs constantly. In a perfect world, everyone would know our intentions as developers when asking for user input in things like a username, email, phone number, etc. However, our intentions are not always clear, and our users will inevitably make mistakes like forgetting a digit in their phone number or leaving a username field blank.

Additionally, malicious users may make bad faith attempts to use our program to access otherwise unauthorized data. For example, someone may attempt to gain admin privileges by creating a request to create an account with an 'admin' parameter.
In either case, we could call these examples of 'invalid data' - information that does not match our intentions when asking for user input.

By contrast, valid data meets the developer's intentions and allows our applications to run smoothly. Knowing this, how can we prevent invalid data from entering our database? Through Active Record, we have Validations.

Validations

Validations are rules for a model that declare whether or not data is valid based on specified criteria. Validations are run on the create, save, and update methods and their bang versions (create!, save!, update!).

Active Record provides pre-defined 'validation helpers' that provide common rules for validation. There are many validation helpers, but the names for them are fairly self-explanatory. Generally, the syntax for implementing validations is validates :model_attribute, validation_helper: {helper_options}

Validation Practice Example

Suppose you work at a school and you are working on creating an application to track students and their classes. In this example, we'll create the model for students.

You'd want to prevent users from having the same username, and at minimum we would expect a student's profile to have a username and a name. While passwords are also an intuitive necessity, user authentication will be ignored to keep this example focused on data validation.

class User< ApplicationRecord
validates :username, :name, presence: true
validates :username, uniqueness: true
validates :username, length: {minimum: 4}
validates :age, inclusion: {in: (10..16)}

end

Here in our User model we've added validations so that :username and :name are present (the values are neither nil or a blank string), :username is unique among all other values of :username for the User model, :username is at least four characters long, and that the value of :age is included between the range 10-16.

Now if we try to create a User without providing any parameter we will see that User.create() will be unsuccessful.

User.create()
=>#SQL queries
#<User:0x000055b999d51670 id: nil, username: nil, name: nil, age: nil, created_at: nil, updated_at: nil>

You can see that our program attempted to run the necessary SQL queries for our database, but since our returned object lacks an :id we can tell it was unsuccessful. Now, only valid parameters will allow for the creation of a model instance and save it to the database.

User.create(username:"upDog", name:"John", age:10)
=> #A series of SQL queries
   #<User:0x0000558262db3410 id: 1, username: "upDog", name: "John", age: 10>

Since the parameters pass the validations specified in our model, the object was properly saved and now has an id.

Error Handling

Validations also provide error messages upon failure if you use the bang versions of our method calls. Error handling is useful as we may want to alert our users to why their attempts are unsuccessful.

User.create!()
=>#`raise_validation_error': Validation failed: Username can't be blank, Name can't be blank, Username is too short (minimum is 4 characters), Age is not included in the list (ActiveRecord::RecordInvalid)

By using the bang versions of create, update, and save, a special Exception Object will be raised which will detail why validations failed. We can then return this information to our Controller and render the messages to our prospective new user.

Conclusion

Rails provides many tools that simplify common tasks so that you can focus on the more complex and fun parts of your application. With Active Record, we can ensure only valid data is kept in our database through the use of validations. Validations check if parameters passed to the create , update , and save methods meet criteria specified in our Model. If the parameters don't pass our validations, we can send error messages to our user and inform them of needed corrections.

1 : MVC, Model-View-Controller, is an architectural design pattern often used in web development

What is Object-Relational Mapping (ORM)?

Max — Sun, 26 Feb 2023 20:01:32 +0000

Introduction

As programmers, we are always tasked with representing real life information as code in our programs. To navigate this challenge, we often use different frameworks or design choices to represent more abstract data. For example, a company may want to track information about their employees. We cannot represent everything about each employee but we can define specific, meaningful aspects of interest like an employee's name, address, salary, department, etc.

One method of framing data is Object-Relational Mapping (ORM). Put simply, ORM is a design pattern to follow when using an object-oriented language with a database. Following ORM conventions, you can keep your code better organized and DRY.

Organization

An application may have to access hundreds of thousands of instances within a database. While individual programmers could devise their own ways to communicate with the same database, follwing ORM conventions provides structure to this communication. Following convetions will make code easier for both you and others to understand.

To understand ORM, we should first review object-oriented languages. Object-oriented langauges can use classes to represent a general category of a thing, like cars, cats, or employees.

#code will be written in Ruby

class Employee

def initialize (name, address, salary)
    @name = name
    @address = address
    @salary = salary
    @@all << self
end

end

Each class can have instances, unique indivduals within the class; a Toyota Corolla, a Tabby, or John Smith. Instances can have different vaues among each other, but are ultimately categorized under their shared class.

employee1 = Employee.new("John Smith" , "1684 Ravine Place Los Angeles, CA" , 30000)

puts employee1.class
# => Employee

employee2 = Employee.new("Jane Doe" , "1909 Tower Rd Derry, ME" , 43000)
puts employee2.class
# => Employee

Knowing this, we can now organize our code by 'mapping' it onto a database following ORM conventions. We will create a table for every class in our program with a row to represent each instance of the class. For our Employee class, we will have an employees table and two rows for our two employees. Note that while our class name is singular, the name of our table is plural.

DRY Code

ORM also allows us to keep our code DRY. Going back to our previous example of an employee listing, our program will need to have some sort of connection to the database itself. For this example, SQLite3 will be used.

database_connection = SQLite3::Database.new('db/company.db')

Now we will have to make a table to store our employee information. The table is created by passing SQL as an argument of of the execute method. We will ask our program to create a table named employees, if it does not already exist. We will also name each column, with their data type, for our employees table which will store the different values within our Employee class.

database_connection.execute("CREATE TABLE IF NOT EXISTS employees( id INTEGER PRIMARY KEY, name TEXT, address TEXT, salary INTEGER)")

Our table has been created, so next we will use attributes of our instances to fill the rows and respective columns within our database table. Note that we are not directly saving the object itself into the table, but rather accessing attributes within the instances and placing them in the appropriate columns of our table. Any modifications to the record or instance itself will not automatically change the other.

database_connection.execute("INSERT INTO employees (name, address, salary, VALUES ("John Smith" , "1684 Ravine Place Los Angeles, CA" , 30000)")

database_connection.execute("INSERT INTO employees (name, address, salary, VALUES ("Jane Doe" , "1909 Tower Rd Derry, ME" , 43000)")

However, as you can see, manually inserting each instance is repetitive and will grow exponentially more difficult and tedious to support the more employees we add. So instead, we can create an instance method for our class which we can reuse.

class Employee
~~~~
def save(database_connection)
    database_connection.execute("INSERT INTO employees (name, address, salary) VALUES (?, ?, ?)", self.name, self.address, self.age)
end

Our #save method will take a database_connection as a parameter and insert our instance's values into the appropriate columns of the database we provide. Now we can simply call our save instance method on each employee instance and pass our database connection as its argument.

database_connection = SQLite3::Database.new('db/company.db')

Employee.all.each do |employee|
    employee.save(database_connection)
end

Even as our application grows, we will no longer have to write separate lines of code to save our classes into our database.

Summary

While there are multiple libraries across different programming langauges that help map objects onto databases. These libraries are simply following specific conventions which help simplify your code as long as you abide by their schema. In short, Object-Relational Mapping (ORM) is a design pattern that can be used when working with an object-oriented language and a database. While there may be different approaches, ORM follows the conventions of mapping Classes to Tables and rows to instances.

React Controlled Forms

Max — Mon, 17 Oct 2022 23:31:03 +0000

Intro

Nearly all web applications use forms. Everything from logging into social media, making new posts, and customizing your profile uses forms. React provides a useful tool that allows us to create controlled forms: forms whose component state (what the internal code tracks) matches the user interface state (what the user sees in the application).

Quick Review

In React, state is data that is dynamic. It changes over time as users interact with the application. And it is used in controlled forms to give the values for each input.

To create controlled forms you should first be familiar with React Hooks, specifically the State Hook. React Hooks are special predefined functions within the React library. The State Hook, 'useState', allows developers to access/'hook into' React's internal state of our components.

useState

To use the State Hook, we first need to import it from the React library.

import React, { useState } from "react";

function Component () {
    const [stateVar, setStateVar] = useState(""):

    return <h1>{stateVar}</h1>;
}

Once imported, we can use the State Hook by invoking the useState function. This function returns an array of two elements: a state variable and a setter function. When invoking useState, you can declare the state variable's initial value, in this case an empty string.

To update a state variable, you must invoke the setter function. After a setter function is invoked, the state is set asynchronously and upon completion, the component is rerendered. If we were to call setStateVar("Hello World") our program will begin to asynchronously set the state variable to "Hello World" and upon rerender our h1 will read Hello world.

Although there is more to the State Hook, we can move onto how they are used to create controlled forms.

Controlled Forms

Controlled forms are forms that derive the values for its inputs from state. Let's look at a simple example of a controlled form:

import React, { useState } from "react";

function Form() {
  const [firstName, setFirstName] = useState("John");
  const [lastName, setLastName] = useState("Henry");

  return (
    <form>
      <input type="text" value={firstName} />
      <input type="text" value={lastName} />
      <button type="submit">Submit</button>
    </form>
  );
}

The above example is a controlled form because the values for the input fields are defined by their respective state variables. But our program as it is would not allow a user to change the values of these inputs. So how do we allow for users to actually fill out the form and change the state of our application?

Input fields can listen for many different event types; for this instance we will use onChange. onChange will trigger every time the value of the input changes.

<input type="text" onChange={handleFirstNameChange} value={firstName} />

Now everytime the user alters the input element, it will call the function handleFirstNameChange and pass the event object as an argument of the function.

function handleFirstNameChange(event) {
  setFirstName(event.target.value);
}

From this event argument, we can access the value currently entered in our input element: event.target.value and use our setter function to update our state variable. Adding a similar function for our lastName input and state variable would allow the user to interact with the form while changing state within the component.

Abstractions

In our previous example, we only had two state variables. But in a world where forms often ask for passwords, addresses, emails, phone numbers, etc., creating unique state variables and invoking unique callback functions for each, while doable, can easily become repetitve. It may be preferable to have a single state object variable.

For simplicity we will build off our previous example with only the firstName and lastName state variables. But we will consolidate them into one object variable.

import React, { useState } from "react";

function Form() {
  //const [firstName, setFirstName] = useState("John");
  //const [lastName, setLastName] = useState("Henry");
    const [userObj, setUserObj] = useState({firstName: "John" , 
                                            lastName: "Henry"})

  return (
    <form>
      <input type="text" value={userObj.firstName} />
      <input type="text" value={userObj.lastName} />
      <button type="submit">Submit</button>
    </form>
  );
}

Here you can see we replaced our two state variables with one by creating the nameObj state variable with the default value of an object with keys firstName and lastName.

Making these input fields dynamic requires a bit more complexity than using individual callback handleChange functions, but it is very useful and easy once you get used to it.

<input type="text" id = "firstName" onChange={handleUserChange} value={userObj.firstName} />
<input type="text" id = "lastName" onChange={handleUserChange} value={userObj.lastName} />

Like in our previous build, we have an onChange event listener that takes a callback handler. But this time we have added an id prop which will be used in our event handler to determine which field is being updated.

Unlike our previous build, we cannot simply call the event handler and directly set the state variable to the value of the current state. Since the same event handler is being used on two different inputs, we need a way to differentiate each input to know which value we intend to update. Additionally, we need to be careful not to simply use setUserObj(event.target.value) as this would mean the whole state variable would become a single value, no longer having both a first and last name.

function handleUserChange(event) {
    const key = event.target.id
    const value = event.target.value
  //setFirstName(event.target.value);
    setUserObj({ ...userObj , [key]: value })
}

In the event handler, we can grab the target element's id and set it as our key since they match the keys of our userObj. Likewise we can save our target element's value to a variable as well. Finally, we invoke our setter function setUserObj with argument {...userObj , [key]: value }. We use the spread operator to copy our current state of the userObj and use our key and value pair to update our desired object property. Doing so will update only our intended object while leaving all others in their current state.

Creating one state variable object can help organize your code and make it easier to add and track additional fields to your form.

Why Use Controlled forms?

Now you know how to create controlled forms, but why use them? One common use is for data validation.

Validation

Users often make mistakes while filling out forms. But controlled forms allow us to catch these mistakes and alert the user so as to allow the application to be used as intended. In our previous example, we had inputs where we intended to capture a user's first and last name. But suppose a user inputted a number for their first name. Our code as it was would allow that input and we could end up with a user who's name appears as "34Mmy 5m1th". As l33t as that is, we may not want to allow users to do this.

Controlled forms can validate the data a user enters before actually setting state.

import React, { useState } from "react";

function Form() {
    const [userObj, setUserObj] = useState({firstName: "John" , 
                                            lastName: "Henry"})
function handleUserChange(event) {
    if (event.target.value === "" || isNaN(event.target.value)){
    const key = event.target.id
    const value = event.target.value
    setUserObj({ ...userObj , [key]: value })
} 
    else{
    console.log("Input is not valid")
}
}
  return (
    <form>
   <input type="text" id = "firstName" onChange={handleUserChange} value={userObj.firstName} />
<input type="text" id = "lastName" onChange={handleUserChange} value={userObj.lastName} />
      <button type="submit">Submit</button>
    </form>
  );
}

Within our handleUserChange function, we added an if else statement to validate our target's input. In this case, we allow our userObj to update if the input's value is an empty string or not a number. Otherwise, we print out an error to our console. You could write an alternative else statement to allow for some notification to the user, but for this simple example we will leave it with a simple console.log for the dev.

Array Iteration for Beginners

Max — Wed, 29 Jun 2022 00:54:40 +0000

A Brief Review

Just about anything and everything can be represented by data. Some things are represented fairly easily on their own; for instance, the red color of an apple, my cat's age being 1 year old, or a character's catchphrase. In code, these can be represented by standalone variables:
let appleColor = 'red' let mochiAge = 1 let buzzCatchphrase = 'To Infinity and Beyond'

Some data is best represented in pairs of keys and values. In this case, data is organized in what can be thought of as a dicitonary, where you look up the key or word and find the value or definition. This type of data structure in JavaScript is called an object. For a concrete example, we could store information about an employee in an object as follows:

let employee: {name: "John Smith", age: 32, title: "Office Manager"}

Data can also be represented as a list. Doing so may indicate a sort of relationship between variables or otherwise organize them as a collective. For example, the winning numbers of a lottery or a person's favorite movies. For these examples and many more, we use arrays. Arrays are a type of data structure; a way of associating and organizing information. The previous two examples can be represented as:

let winningNumbers = [02, 27, 42, 44, 51, 25] let favoriteMovies = ['The Dark Knight Rises', 'Spirited Away', 'Stardust']

When using arrays, we often have to look through the array and interact with the items within it in a process called array iteration.

Array Iteration

.filter()

The filter method, as the name implies, will iterate through an array and remove, or filter, elements that do not meet a specified criteria. A simple example would be going through a list of numbers, and only keeping the numbers greater than 3 (filtering out numbers less than 3). Elements that meet the criteria will be returned in the form of an array.

The filter method takes a function as its argument (a callback function) and use it to determine what elements should be returned. This callback function is fed each element of the original array into it, and will return only the elements that meet the intended criteria.

The previous example could look something like this:
let list = [1,2,3,4,5]
function greaterThanThree(num){ return num > 3 }
list.filter(greaterThanThree(num)) // => [4,5]

Now let's look at a more complex example of .filter(). Suppose you had a watchlist app, similar to IMDB, where you have a list of movies and details about them including things like genre, leading actor, budget, etc. This data could be represented in an array of objects as follows:

let movies = [{title: 'The Dark Knight', genre: 'superhero', star: 'Christian Bale'}, {title:'Captain America', genre: 'superhero', star: 'Chris Evans'}, {title: 'Snow Piercer', genre:'action', star: 'Chris Evans'}, {title: 'John Wick', genre: 'action', star: 'Keanu Reeves'}]

If we wanted to create a new array from this one to include only superhero movies, we would first create a function to be used as a callback in the .filter() method to check and return any movie in the superhero genre.

function superHeroes(movie){ return movie['genre'] === 'superhero' }

Next we would invoke .filter() onto the movies array, passing the superHeroes function as an argument.

movies.filter(superHeroes)

Doing so will feed each individual element in the movies array into the superheroes function and then return a true or false based on the movie's genre. If the function returns true, it is added to an array that will be returned by the filter method.

movies.filter(superHeroes) // =>[{title: 'The Dark Knight', genre: 'superhero', star: 'Christian Bale'}, {title:'Captain America', genre: 'superhero', star: 'Chris Evans'}]

.map()

What if we wanted to modify every element in an array? For a simple example, suppose we had a list of numbers and we wanted to have a list of all those numbers doubled. In this case, we would use the .map() method. This method takes a callback function as an argument, and will create a new array that contains the original array elements modified by the callback funciton.

The above example could look something like this:
let numbers = [1,2,3,4]

function doubleNumbers (number){ return number * 2 }

numbers.map(doubleNumbers) // => [2,4,6,8]

As you can see, each number in the numbers array was passed to the doubleNumbers function as an argument, and then was returned as the value of itself times 2. These returned values were stored in a new array, and did not modify the original numbers array.

Just like with the filter method, lets explore a more complex example. Suppose you had an array of objects consisting of iconic characters and a phrase.

let characters = [{name: 'Woody', phrase: "You're my favorite deputy!"}, {name: 'Buzz', phrase: 'To infinity and beyond!'}, {name: 'Courage', phrase: 'The things I do for love.'}]

But instead of their catchphrases, you wanted to have the phrase be an introduction instead. First we need to write a function that will modify a character element and return the modified element.

function introduction(character){ character['phrase'] =Hi, my name is ${character['name']}.return character }

Next we invoke the .map() iterator on the characters array, and pass it our introduction callback function, and it should return an array with the modified phrases.

character.map(introduction) // =>[{name: 'Woody', phrase: 'Hi, my name is Woody.'}, {name: 'Buzz', phrase: 'Hi, my name is Buzz.'},{name: 'Courage', phrase: 'Hi, my name is Courage.'}]

Summary

There are more iterator methods for arrays than the two covered in this post. And each one provides a different way to interact with the elements in the array to achieve a goal. Hopefully with these two examples, you have gained a basic understanding of array iteration, callback functions, and how imporant of tools these concepts are for any coding project.