DEV Community: sawincp

Taming the State Beast: Redux vs. Recoil in React

sawincp — Wed, 31 Jan 2024 23:55:20 +0000

React's beauty lies in its component-driven nature, but managing state across those components can become messy. That's where state management libraries like Redux and Recoil come in, wrangling your app's data into a smooth, predictable flow. But which one deserves a place in your toolkit? Let's break down their key differences:

Architecture

Redux: Think of Redux as a central bank for your app's state. Everything goes in and out through a single source of truth, the store. Actions, sent by components, trigger reducers that update the store, and changes automatically ripple through the app.
Recoil: Imagine a network of smaller vaults, called atoms, scattered across your components. They each hold independent pieces of state, connected by selectors that can combine or transform data between them. Updates happen locally, with only affected components notified.

Learning Curve

Redux: Buckle up for a steeper climb. Redux has a well-defined structure and requires more boilerplate code, but its predictability and extensive community support make it a reliable choice for complex projects.
Recoil: Take a gentler slope. Recoil boasts a simpler API and less code, making it easier to jump in. However, its decentralized nature can feel less structured and lacks the same level of community resources as its established counterpart.

How it works: Redux

At its core, Redux allows us to create a single source of truth for our application. Think of this as a vault which holds the entire application's state which is called a store.

To set up a store you have to set up a pure function called a Reducer that takes in the current state and an action that returns the updated state.

function counterReducer(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
}

To store your initial values and you need to import the createStore function from the Redux library.

import { createStore } from 'redux';

const initialState = {
  counter: 0,
};

From here you can create your store (vault) with your reducer and initial state as arguments...

const store = createStore(counterReducer, initialState);

This will create the store object that will hold your app's state and manage its updates.

How to use Store from Redux

In order to use your newly created store you first need to wrap your root component with the Provider component and pass the store as a prop. This allows the store to be accessible to all components in your app.

import React from 'react';
import { Provider } from 'react-redux';
import store from './store'; // Import your created store

function App() {
  return (
    <Provider store={store}>
      {/* Your app components here */}
    </Provider>
  );
}

From here we can connect two hooks to the store in our components.

1) Use the useSelector hook to read data from the store into your component.

2) Use the useDispatch hook to dispatch actions that trigger state updates in your components.

import { useSelector, useDispatch } from 'react-redux';

function CounterComponent() {
  const count = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  const handleIncrement = () => {
    dispatch({ type: 'INCREMENT' });
  };

  return (
    <div>
      Count: {count}
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

In our example our useSelector retrieves the data from our Redux store by accessing the counter value and storing it in the count variable. It allows the component to display the current count and react to changes in the store.

useDispatch will dispatch our action to trigger state updates in the store. The useDispatch hook returns a function called dispatch that's used to send actions to the Redux store. When our handleIncrement function is called, it dispatches an action with the type "INCREMENT" to our Redux store where our Reducer receives that action and performs the necessary logic and stores the new state value in our counter variable.

PHEWWWWW.... that's a lot to take in. Let's take a look at our other example.

How it works: Recoil

One of the biggest differences between Recoil and Redux is how they approach state.

Redux uses a single store to hold the entire app's state where components read and update the store through actions and reducers (Centralized).

Recoil uses atoms scattered across components, each holding a specific piece of state where components can directly access and update these atoms (Decentralized).

To use Recoil we first have to import and define an atom from our Recoil library.

import { atom } from 'recoil';

const counterState = atom({
  key: 'counter',
  default: 0,
});

Similar to Redux, we then have to make Recoil available throughout our app by wrapping our root component with RecoilRoot.

import React from 'react';
import { RecoilRoot } from 'recoil';

function App() {
  return (
    <RecoilRoot>
      {/* Your app components here */}
    </RecoilRoot>
  );
}

From here we can use Recoil hooks just like our useState hooks from our React library. We use useRecoilState in our components to read and update our state in the component.

import { useRecoilState } from 'recoil';

function CounterComponent() {
  const [count, setCount] = useRecoilState(counterState);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      Count: {count}
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

Like our useState hook, when a user clicks on our button and triggers our handleIncrement function, the function process the request by updating the setState variable which directly updates the value of our counterState atom.

Seems a little bit easier eh?

Conclusion

Both of these state management libraries are powerful tools to help tame state in your application. While Redux has a predictable data flow and a centralized store, it also comes with a steeper learning curve and less flexible architecture. Recoil on the other hand provides a simple API with flexible and decentralized state management but is considered less mature with a smaller community than Redux.

Ultimately, the best choice for your project depends on your project needs and preferences:

Choose Redux if you have a large and complex application requiring predictable state management, strong community, and established best practices

Choose Recoil if you prefer a simpler API, have smaller projects, and prioritize potential performance benefits.

Choose the tool that's right for you!

THE MVC

sawincp — Thu, 21 Dec 2023 17:57:30 +0000

The Model-View-Controller (MVC) pattern is a commonly used design pattern in web development, especially in Ruby on Rails applications. This design pattern plays a crucial role in organizing and separating various aspects of an application, making it easier to maintain and scale. In today's discussion, we will delve into each of these components, exploring their roles and responsibilities within the MVC architecture.

Model (M)

The Model component of the MVC represents the data and business logic of the application, with its main purpose being to interact with a database by retrieving and storing data. In Rails, models are created using Ruby classes that inherit from ActiveRecord::Base, with each model corresponding to a database table. By inheriting from ActiveRecord::Base, we can create Active Record Associations to accurately describe the relationships between our models (we'll discuss this in more detail shortly). Additionally, the model component is responsible for performing validations on our models to maintain data integrity for our application.

Foreign Keys

Before we can delve into how to incorporate Active Record Associations into our models, it's important to briefly discuss Foreign Keys and how they relate within our database. Foreign Keys are columns in our database that reference the primary key of another table (or another model). When using Active Record, we name the column in the model we are referencing after the name of that model, followed by "_id." This establishes a relationship between our models.

Active Record Associations

To define a relationship between one or more models we can use Active Record Associations:

One-To-Many
One-To-One
Many-To-Many

One-To-Many Relationship

This is the most common relationship when working with models. To establish this relationship, Active Record provides us with the has_many and belongs_to macros. These macros allow us to create instance methods that enable us to access data across models in a one-to-many relationship.

class Recipe < ApplicationRecord
    belongs_to :user
end

From the code snippet above, each Recipe belongs_to one User. This gives us access to a user method in our Recipe class so that we can now retrieve the User object attached to a Recipe.

Going in the opposite direction, each User may have none, one, or many Recipes. To incorporate this we add the has_many macro to our User model.

class User < ApplicationRecord
    has_many :recipes
end

One-To-One Relationship

A one-to-one relationship is typically the least common type of relationship you will encounter. In this type of relationship, two models are associated with each other in such a way that they have a unique and exclusive connection. For instance, a user may have only one associated profile.

class User < ApplicationRecord
    has_many :recipes

    has_one :profile
end

class Profile < ApplicationRecord
    belongs_to :user
end

If you're not sure which model should be declared with which macro, it's usually a safe bet to put belongs_to on the model that has the foreign key column in its database table.

Many-To-Many Relationships

A many-to-many relationship represents an association between two models where each record in one model can be associated with multiple records in another model, and vice versa. This connection is established through a join table that links the two models. You might wonder how to create this join table. It's straightforward: you create a new model (database table) specifically designed to facilitate the connection between the two associated models.

For example, how are we able to explain that a taxi can have many passengers and a passenger can have many taxis? In order to tie these two models together, we need to create a third model (call it rides).

If we think about it, a Ride belongs_to a taxi but it also belongs_to a passenger.

class Ride < ApplicationRecord
  belongs_to :taxi
  belongs_to :passenger
end

And a taxi has_many passengers through rides

class Taxi < ApplicationRecord
  has_many :rides
  has_many :passengers, through: :rides
end

And vice versa for passengers. A passenger has_many taxis through rides

class Passenger < ApplicationRecord
  has_many :rides
  has_many :taxis, through: :rides
end

The has_many :through syntax tells Active Record to associate a Taxi to a Passengers through the Rides model. By using kind of association we are able to associate multiple taxis to multiple passengers and vice-versa.

Validations

Validations are special method calls placed at the top of model class definitions, and they are used to prevent invalid data from being saved to the database. These validations ensure that the data stored in the database adheres to specific criteria or constraints before it is saved. They play a crucial role in maintaining data integrity and consistency within the application.

To add validations to a model, you typically define them within the model class itself:

class User < ApplicationRecord
    validates :username, presence: true, uniqueness: true
end

In this example, we are validating that a User record must have a username which must be unique.

These validations are triggered automatically when a record is being saved to the database using methods like "save" or "create". If the data doesn't meet these specific criteria, the record won't be saved and errors will be added to the object that we can use to show to our users.

View (V)

In a Rails application, the view layer should contain the least amount of logic of any layer in the MVC. The role of the view is to simply render whatever it is sent from the controller.

Controller (C)

The Controller serves as an intermediary between the Model and View. Its primary function is to receive requests from the browser, process them, interact with the Model to retrieve or update data, and then choose the appropriate View to render the response. To facilitate this connectivity, every route defined in the routes file of our application should correspond to a method in our controller. When a request is received, Rails uses the routes file to determine which controller method to execute.

Rails.application.routes.draw do
  post "/signup", to: "users#create"
  get "/me", to: "users#show"
  post "/login", to: "sessions#create"
  delete "/logout", to: "sessions#destroy"
  get "/recipes", to: "recipes#index"
  post "/recipes", to: "recipes#create"
end

In our Routes file listed above, you notice we have many different routes defined in which our user will directed to based off the corresponding HTTP request. With a matching request, the associated controller and controller action will fire. For instance when a user's request matches our

post "/signup" route, the User controller will fire along with the create action

class UsersController < ApplicationController

  def create
    user = User.create!(user_params)
    session[:user_id]= user.id
    render json: user, status: :created
  end

  private

  def user_params
    params.permit(:username, :password, :password_confirmation, :image_url, :bio)
  end

end

In this create action in our User controller, we create a new user, create a session and add the user ID to the session hash and returns back to the new User object along with a HTTP status code of created.

With all of this in mind here is the high-level flow of how the MVC pattern works in a Rails application:

A user makes a request by navigating to a URL in their browser.
The Rails router maps the URL to a specific controller action.
The controller action processes the request, interacts with the model to fetch or modify data, and sets up any necessary variables for the view.
The controller then renders the appropriate view, passing along the data.
The view generates HTML or other content based on the data and sends it as a response to the user's browser.

Object Oriented Programming- Self

sawincp — Thu, 27 Jul 2023 20:21:15 +0000

When it comes to object-oriented programming, the concept of "self" can be quite intimidating, especially for those who are new to the programming world. For today's discussion, I will try to explain the concept of "self" with respect to the Ruby programming language and how it works.

Introduction to Self

One could think of self as having "self-awareness" when it comes to what code should be executed at any given time. When we create a new instance of a class, that instance is considered to be an object of that class that contains data and behaviors for that object.

For example, if we have a Student class defined as:

class Student

   attr_accessor :name

   def initialize(name)
     @name = name
   end

   def intro
    "Hi my name is #{name}"
   end
end

And then we create our new Student instance:

tim = Student.new("Tim")

We can access Tim's name by:

tim.name
# => "Tim"

Or we can let Tim introduce himself:

tim.intro
# => "Hi my name is Tim"

Using Self in an Instance Method

So... does Tim know that he is a student? This is where the concept of "self-awareness" comes into play. Since we created Tim as an instance of Student, is there anyway that Tim will know that he is a Student? One way we can find out is to ask him!

class Student
   def show_self
     puts self
   end
end

tim = Student.new

tim.show_self
# > Student: 0x00007f81b3924bb8>

What is the keyword self doing here? Self is referring to the instance that the 'show_self' method is being called on, which is the Student class. Better yet, Tim is asking "What am I?" In which the answer is a Student instance.

Expanding our Code

How do we add in Tim's teacher? Let's see how we can incorporate that into our code.

class Student

   attr_accessor :name, :teacher

   def initialize(name)
     @name = name
   end

   def intro
    "Hi my name is #{name}"
   end
end

Since we incorporated the teacher attribute in our attr_accessor (getter and setter method macro) we can set Tim's teacher by:

tim.teacher = "Professor Black"

And then call Tim's teacher:

tim.teacher
# => "Professor Black"

This is great! But what if Tim switches schools or gets a new teacher halfway through the year? How will our Student class be able to handle this?

def new_school(student, new_teacher)
   student.teacher = new_teacher
end

Here we have a method that takes in two arguments, an instance of Student(Tim) and the new teacher's name. From here we can have Tim update his new teacher:

new_school(tim, "Professor McGonagall")

tim.teacher 
# => "Professor McGonagall"

This process will work; however, with the use of self we can make this process a little cleaner.

class Student

   attr_accessor :name, :teacher

   def initialize(name)
     @name = name
   end

   def intro
    "Hi my name is #{name}"
   end

  def new_school(new_teacher)
   self.teacher = new_teacher
  end
end

Here, the use of self refers to whatever Student instance the 'new_school' method is being called on. In our example, self is referring to Tim and the new_teacher is going to be value we assign to this attribute.

Here's how we can use the 'new_school' method:

tim = Student.new("Tim")
tim.new_school("Professor McGonagall")
tim.teacher
 # => "Professor McGonagall"

In conclusion, understanding the concept of self in object-oriented programming is fundamental to becoming proficient in languages like Ruby. Embracing the notion of "self-awareness" empowers us to create dynamic and flexible code, enabling our objects to interact effectively and adapt to changing scenarios.

Happy Coding!

Ruby and Object Oriented Programing

sawincp — Wed, 07 Jun 2023 17:20:44 +0000

For today's topic we will discuss the Ruby programming language and how it's object-oriented approach makes it fun and happy for programmers to use.

Ruby

Ruby is a dynamic object-oriented, general-purpose programming language designed and developed in the mid-1990s by Yukihiro "Matz" Matsumoto in Japan. Matz designed Ruby for programmers in mind so that programming should be happy and fun.

Coming from "Matz"

The goal of Ruby is to make programmers happy. I started out to make a programming language that would make me happy, and as a side effect it’s made many, many programmers happy.

I hope to see Ruby help every programmer in the world to be productive, and to enjoy programming, and to be happy. That is the primary purpose of Ruby language.

— Yukihiro Matsumoto

Objects in Ruby

How does Ruby accomplish this task you may ask. Well one of the core concepts of the Ruby language is that fact it sees everything as an object. This means that every bit of information and code can be given their own properties and actions. Through Ruby's object-oriented approach we call properties by the name instance variables and actions are known as methods.

To create an object in Ruby, you first define a class, which serves as a blueprint or template for creating objects. The class specifies the data (instance variables) and behavior (instance methods) that objects of that class will have. Once the class is defined, you can create objects or instances of that class.

class Person
  def initialize(name, age)
    @name = name
    @age = age
  end

  def greet
    puts "Hello, my name is #{@name} and I'm #{@age} years old."
  end
end

person1 = Person.new("Alice", 25)
person1.greet #=> Hello, my name is Alice and I'm 25 years old.

person2 = Person.new("Bob", 30)
person2.greet #=> Hello, my name is Bob and I'm 30 years old.

In this example, the Person class represents a person and has an initialize method that takes the name and age as parameters. The initialize method is automatically called when a new object is created using the new method.

We create two objects (person1 and person2) using the Person.new syntax and pass the name and age as arguments. Each object has its own separate set of instance variables (@name and @age) initialized with the provided values.

We can then call the greet method on each object using the dot notation. The greet method accesses the instance variables @name and @age to display a greeting specific to each person.

Ruby's Flexibility

In addition to Ruby's object-oriented approach, Ruby is extremely flexible to code in since it allows its users to freely alter its parts. Essential parts of Ruby can be removed or redefined, at will. Existing parts can be added upon. Ruby tries not to restrict the coder. Ruby's block help increase it's flexibility since a programmer can attach a closure to any method to describe how that method should act.

In Ruby, block helper methods are a way to define methods that accept a block of code as an argument. These methods can execute the block of code within their implementation, allowing for more flexible and dynamic behavior.

Block helper methods are commonly used in Ruby for tasks like iterating over collections, performing conditional operations, and executing custom logic. They provide a powerful way to encapsulate and reuse code.

def greet
  puts "Hello!"
  yield if block_given?
  puts "Goodbye!"
end

greet do
  puts "Nice to meet you!"
end

In this example, we define a method called greet that prints "Hello!" and "Goodbye!", with the yield keyword used to execute a block of code if it is given. The yield statement acts as a placeholder for the block.

When we invoke greet and provide a block of code (do ... end), the code within the block is executed between the "Hello!" and "Goodbye!" messages. In this case, it prints "Nice to meet you!".

Block helper methods can also accept parameters and pass them to the block.

def repeat(n)
  n.times do |i|
    yield i
  end
end

repeat(3) do |i|
  puts "Iteration #{i+1}"
end

In this example, the repeat method takes an integer n as a parameter. It then executes the block n times, passing the iteration index (i) to the block. The block prints the current iteration number.

When we invoke repeat(3) and provide a block, the block is executed three times, printing "Iteration 1", "Iteration 2", and "Iteration 3".

Block helper methods are widely used in Ruby, and they provide a flexible way to extend the behavior of methods and create reusable code patterns. They are especially useful for tasks that require iterating, filtering, transforming, or performing custom logic on collections or data structures.

Ruby Inheritance

Finally, unlike many other object-oriented languages Ruby features single inheritance but understands the concept of modules which are a collection of methods. Classes can include different modules that gives them access to all the methods from that module for free.

Inheritance is a fundamental concept in object-oriented programming that allows a class to inherit attributes and behaviors from another class. In Ruby, you can create a subclass that inherits from a superclass using the inheritance mechanism.

To define a subclass that inherits from a superclass, you use the < symbol followed by the name of the superclass. The subclass inherits all the instance variables, instance methods, and class methods of the superclass.

class Animal
  def breathe
    puts "I'm breathing!"
  end
end

class Mammal < Animal
  def feed_offspring
    puts "I'm feeding my offspring."
  end
end

dog = Mammal.new
dog.breathe #=> I'm breathing!
dog.feed_offspring #=> I'm feeding my offspring.

In this example, we have a superclass called Animal that defines an instance method breathe. We then define a subclass called Mammal that inherits from Animal using the < symbol.

The Mammal subclass inherits the breathe method from the Animal superclass. Additionally, we define a new instance method feed_offspring specific to the Mammal class.

We create an instance of Mammal called dog and can call both the inherited method breathe and the specific method feed_offspring on that instance.

Inheritance allows subclasses to reuse and extend the behavior defined in their superclass. Subclasses can add new methods, override existing methods, and access the inherited methods and instance variables.

In Ruby, single inheritance is supported, meaning a class can inherit from only one superclass. However, you can create a hierarchy of classes with multiple levels of inheritance, where subclasses can themselves become superclasses for other subclasses.

class Animal
  def breathe
    puts "I'm breathing!"
  end
end

class Mammal < Animal
  def feed_offspring
    puts "I'm feeding my offspring."
  end
end

class Dog < Mammal
  def bark
    puts "Woof woof!"
  end
end

dog = Dog.new
dog.breathe #=> I'm breathing!
dog.feed_offspring #=> I'm feeding my offspring.
dog.bark #=> Woof woof!

In this updated example, we introduce a new subclass called Dog that inherits from Mammal. The Dog class adds its own instance method bark.

Now, the Dog class inherits the methods breathe and feed_offspring from its superclass Mammal and can also call its own method bark. This demonstrates the hierarchical nature of inheritance, where subclasses inherit from their immediate superclass and all the way up the inheritance chain.

Inheritance is a powerful mechanism that promotes code reuse and allows for creating class hierarchies, where classes can share common behaviors while adding their own specific characteristics.

From what we have discussed, you can see why programmers enjoy working in Ruby.

Introduction to React!

sawincp — Mon, 13 Mar 2023 18:45:11 +0000

How do we, as web developers create dynamic and engaging web applications in a fast and efficient manner? In order to do this, one of the biggest tools in our arsenal is by using existing external libraries in our applications. When it comes to web development, there are many frontend libraries that are available for us, but one has surpassed others in popularity and demand.

What is React?

React is an open-source JavaScript-based UI development library created and maintained by Meta (Facebook). This library first appeared in 2013 and has quickly developed into one of the most commonly used frontend libraries for web development. Some reasons for the increase in React's popularity are:

Ease of creating dynamic applications
Improved performance
Reusable components
Unidirectional data flow

Today we will discuss the last two points. What are React components and how is data passed between them?

React Components

Components are the building blocks of any React application, and a single app usually consists of multiple components. These components have their own logic and controls, and they can be reused throughout the application, which in turn dramatically reduces the application’s development time.

Creating Components

One thing we need to recognize when dealing with React Components is they share a parent-child relationship. This relationship tells React how and what to render to the DOM. When creating a React application the first component that is made is traditionally called App with all of the child components returned inside of the App component.

In our example above we can see that our App component has three child components:

Header
About
ArticleList

As we can see, each of these child components all have different different responsibilities within our application. Our Header component is responsible for displaying the name, About is responsible for displaying the logo and the about text of our application and the ArticleList component is responsible for creating another component (Article) and displaying information for each article.

When it comes to describing React components in JavaScript terms, a React component is just a JavaScript function. In JavaScript, functions are meant to handle a small portion of the overall applications functionality. In React, components work the same way. One difference between a JavaScript function and a React component is their syntax. If you notice in the code snippets above, each of our components start with a capital letter. This tells React that this function is a React component instead of a JavaScript function and are considered Functional Components in React.

There is another kind of component in React called Class Components, however for the purpose of this article I will not be reviewing them and will leave a link at the bottom for further information.

Properties in React

Props in React, short for properties, allows information to be passed to our components. These props help make the components more dynamic. Remember that one of the reasons React is popular is the fact that information is unidirectional and that React components share a parent-child relationship. This means that data can only flow down from a parent component to its child components. The way to do this is through Props.

Creating Props

As stated, props are passed down from parent components their child components in React. The child components takes in those props as arguments that can be used within that component.

To create a prop in react we first need to identify which component will be the parent and which one(s) will be the children. In our example we have App being the parent component of our Header, About and ArticleList components, then ArticleList being the parent of our Article component.

When we look at our example, our Header component needs the name of our blog, the About component needs the image and about text of our blog and our ArticleList component needs the information about our articles. We are able to pass this information down by assign each of these a variable in our App component and setting it equal to the data we want:

From here these variables are taken in by our components via arguments that contain the data we want to use.

Our ArticleList component is also the parent of our Article component which passes down individual article elements to Article via props.

ArticleList passes down the article key, title, date, and preview data into our Article component. Similarly, Article takes in these props as arguments and uses them within its own component.

With all of our components created and information flowing in the correct manner, we have been able to create a fully functioning website!

Links

Frontend Framework Popularity
React Components
React Props

My Rick and Morty Search App: A Retrospective

sawincp — Tue, 24 Jan 2023 02:15:06 +0000

When I look back at the first phase of my software engineering journey, I am proud of myself for learning a new skillset and honing some of my existing skills as a software developer. When reviewing all the topics that were covered during this phase, I felt confident when it was time to showcase what I have learned up to this point through my end of phase project. With that, I have created a search web application that utilizes the Rick and Morty API to search for specific character's of the Adult Swim series.

My goal for this article is to walk through my thought process for this project and also highlight key concepts from the first phase of the program and show how the "three pillars of web programming" come together to create my final project.

The Decision

For me, one of the hardest parts of this project was trying to pick where I should start. There are a lot of free, open-source application program interfaces (API's) out there for the public to use but in the beginning I was struggling to find something that was interesting and matched my skillset as a beginner programmer. In looking through the list of potential APIs to use, I came across the Rick and Morty API. This peaked my interest since I am a fan of the series and I felt that I could make an engaging web application that API data provided.

The Review

According to the website, "this is a RESTful API in which the base url contains information about all available API's resources. All requests are GET requests and go over HTTPS and all responses will be return data in JSON."

Because of this, when I created the fetch request in my application, I didn't need to create an object with a set of configuration parameters to get the type of data in the response from the API call.

const configureObject = {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json",
   },
};

Since the Rick and Morty API has this functionality already built into it, I just needed to choose which resource I wanted to use to complete my fetch request. There are three resources available when we use the Rick and Morty API:

Characters: https://rickandmortyapi.com/api/character
Locations: https://rickandmortyapi.com/api/location
Episodes: https://rickandmortyapi.com/api/episode

I knew I wanted to use the character resource but I also knew I didn't want to just list out all the characters at once; I wanted to be able to search through the characters based off of certain criteria. Luckily, the documentation mentioned there is a way to filter through characters by adding search parameters to the URL:

https://rickandmortyapi.com/api/character/?

The Setup

Now that I had the resource I wanted, it was time for me to start building out my fetch call with the parameters I wanted to use. I felt the best way to do this was by creating a search form where the user could type in the character's name and add additional parameters of either the character's status (alive, dead, unknown) or the character's gender (male, female, genderless, unknown) or both.

To do this, I started by creating a form in my HTML file along with adding the constant options for the different parameters. This rendered my search box and the drop downs for status and gender in my index.html file.

The Functionality

Once I had my form created, I now had to add my JavaScript to incorporate functionality into my application.

By creating a form in my HTML, I was able to use an event listener to submit the information from my search. The first step was to capture the search value and the values from my drop down's and use them in my fetch call to return the appropriate data. After that I needed to display the results of my call to the DOM.

The DOM

To display the results of my fetch call, I wanted to create a table on the DOM to show the character's name, and a button called "Character Information". Once the button was clicked, I wanted the table to populate with the character's avatar, last known location, origin and number of episodes that character has been in since the series started.

The Final Step

The final piece of my application was to add one more event listener to my table. For every piece of information displayed once the user clicks on the "Character Information Button" I wanted that information to highlight orange when the user hovered over it. The highlight is per piece and I set a timeout for this even to last about 5 seconds long.

Future Functionality

Add a load more button to load more characters
Change layout from a table to a grid
Randomize return of characters from search

References

Rick and Morty API Documentation

Working with Common Data Structures In JavaScript

sawincp — Fri, 20 Jan 2023 18:14:29 +0000

When starting your journey into software engineering it may be intimating when it comes to learning about data structures and data manipulation. Even so, it's a must know topic for anyone looking to work in the software development word.

In this article I will try to give a simple explanation of some of the fundamental data structures (Arrays and Objects), what they are, when are they useful, and how we can implement them using JavaScript.

What is a Data Structure?

In programming, a data structure is a way to organize, manage and store data in a program so that we can efficiently access and modify that data in a specific way.

Specifically, a data structure is a collection of data and their values, the relationship between them and any functions or operations that can be applied to that data.

We will discuss the two most common types of data structures in JavaScript, Arrays and Objects.

Arrays

An array is simply a list of data when it comes to JavaScript. It can be a list of any data type such as numbers, strings, or even other arrays. To access a value within an array we simply use the index (position) of the value we want. Remember that the index of an array always starts at zero (0) and goes up from there.

// array is a list of items
const array1 = ['a','b','c']

// array can contain multiple data types
const array2 = ['a', 1, 'hello!', 56]

// access string 'hello!' in array2
console.log (array2[2]) // hello!

Unlike other programming languages, the JavaScript array can be any size with any type of data type contained within it. This allows the array to be dynamic, meaning it can grow and shrink as necessary to meet our needs.

In JavaScript, arrays come with many methods we can use for different purposes, such as adding or deleting items from the array, sorting the array, filtering its values, finding its length, etc. These tools allow us to work with the dynamic nature of the JavaScript array and create dynamic engaging programs.

Arrays are useful when we have to store individual values and add/delete values from the beginning or end of the data structure. The array is one of fundamental data structures used in JavaScript and understanding when and how to incorporate them into your programs is essential to building your programs.

Objects

In JavaScript, an object is a collection of key-value pairs. We use curly braces to declare the object then declare the key followed by a colon and then the corresponding value and each key must be unique within the object. This means you cannot have two keys with the same name.

const object = {
      key1: value1
      key2: value2
      key3: value3
}

To access values in an objects we are able to use two different methods. We can use the dot (.) notation method or the bracket ([]) notation method.

console.log(object.key1) // value1

console.log(object[key1]) // value1

Objects can store different data types (like arrays!), other objects and even functions!

Just like arrays, the JavaScript object has many methods we can use to manipulate the object data.

We use objects when we need a way to group together data that have something in common or are somehow related (think of an address book). A persons address book may contain contain the person's name, their address, phone number and their email.

const addressBook = {
      name: "John Smith"
      address: "123 Main Street"
      phoneNumber: "123-4567-8910"
      email:"john@example.com"
}

This allows us to group certain data together for easy access when creating our programs.

Conclusion

I hope I've helped clarify some of the mystery surrounding JavaScript Array's and Objects. I've tried to put each of these subjects in general terms as to better understand what they are, when they are useful and when you may implement them in your programs. If you're interested in learning more I have put links at the bottom to MDN and w3School reference documents on these topics.

Happy Coding!