DEV Community: Jamelse

A Simple Guide to Active Model Serializers in Ruby on Rails

Jamelse — Thu, 20 Jul 2023 03:57:58 +0000

Serialization is an important consideration for developing robust and efficient Ruby on Rails APIs. The process of serializing involves transforming complicated data structures, Ex: Ruby objects, into a form that can be quickly communicated and reassembled on the client-side. Active Model Serializers is a strong Rails gem that streamlines serialization. We'll look at what Active Model Serializers are, how to set them up, and how to use their features to develop clean and consistent APIs in this article.

What is Active Model Serializers?

Before we get into how to use AMS, we must first understand what the gem does. AMS offers a straightforward and adaptable means of managing JSON serialization in Rails applications. It works by putting a layer of abstraction between your Rails models and the JSON representation to the API. AMS allows you to simply specify the structure and relationships of your API answers without clogging up your controllers with serialization logic.

Set up / Installation

Installation:

Include the gem 'active_model_serializers' in your gemfile:

Set Up:

Now we need to generate an ActiveModel::Serializer for our whatever out model is. In this example, I will generate it for my Expense model. Thankfully, the gem provides a generator through naming convention. In your terminal, run:

This should generate a new folder in /app called serializers. In that newly generated folder, will be a newly generated ruby file calledexpense_serializer.rb. In my example, my Expense model has :name, :amount, and :date attributes. The file will look something like this-
In /app/serializers/expense_serializer.rb :

If we wanted to customize our JSON response, we simply change which attributes we include. For example if I wanted my JSON response to NOT include the :date attribute, I would simply remove it from the list:

Now that all of that is set up. When we call /expenses or /expenses/:id we should get our preferred JSON response!

Custom Methods

AMS also allows us customize information by creating instance methods on our ExpenseSerializer class. We can then add this attribute to our list and get that method rendered in our JSON response! For example, if we wanted to create a method that shows us a readable amount of our expense name and cost we could do something like:

This should add a readable_expense attribute to the end of our JSON response with something like, "Phone Bill: $120".

Associations:
If we have multiple associated models, AMS can handle this by using the Active Record macros has_many and belongs_to. We can use these macros to include them in our JSON response! For example, lets say we have a User Class along with our Expense Class. In this instance, the User will have many expenses, and an expense will belong to a user. Firstly, we must make sure both of our models contain this association.
In /app/models/user.rb

In /app/models/expense.rb

To add this to our serializers, it's as simple as including these macros in our UserSerializer and ExpenseSerializer classes.

In this case, this is a one-to-many association. The same can be done the same way for a many-to-many association. However, rather than including has many :users, through: :expenses like in our model. We only define this in our model and simply call the has_many macro in our serializer class file.

Conclusion

Active Model Serializers is a fantastic gem that simplifies the serialization process in Ruby on Rails applications. By following this guide, you can get started with AMS and create simple, clean and effective APIs. Consider using customization options where necessary, and look into using alternative adapters if you wish to utilize a different format than JSON. If you made it this far, thank you for reading, I hope this guide could have helped simplify some of the concepts and uses of AMS. Last but not least, best of luck and happy coding :) .

Beginner's Guide To React Router (v6)

Jamelse — Mon, 28 Nov 2022 22:00:09 +0000

React router is a very useful tool for creating a React app. React Router is probably the most popular library developers use to do all of their client-side routing. The reason we use client-side routing is because Create React App is designed to create single-page applications. Meaning, the application only contains one HTML document and the server only has to load the original GET of this document, CSS, and JS files; rather than multiple pages. The big benefit and reason to this is for the speed of the application. What does React Router do? There are many things React Router can do, but the main two features to remember:
1. Rendering components based on on the URL. Ex: When the url is /ShoppingList, your ShoppingList component will display.
2. Page navigation using JavaScript. Ex: On a navigation bar, when you click the Shopping List tab, the page content updates to the ShoppingList component.

Installation

You can install React Router from the public NPM directory in two ways. In the terminal from the root directory of your application run either:
npm install react-router-dom

yarn add react-router-dom

If you are on Version 5 and need to upgrade to version 6, add the @latest tag to the end of either. Ex: npm install react-router-dom@latest.

Basic Example

In index.js:
We must first import BrowserRouter from react-router-dom and wrap our entire application in the BrowserRouter component.

In App.js:
Firstly, we must import { Routes, Route } from react-router-dom. Next, we want to import all the components we want to render. Lastly, we want to put the Routes component in the App function's return statement and nest all of our individual Route components in the Routes component.

Each Route takes two props. First is the path of the route. Ex: path="/contact" will route to yourWebsite.com/contact. Second is the element of the path, or what you want to display for that path. In this example it will be the Contact component. The reason we use the exact prop for the home route of "/" is that if we enter a value into the URL that doesn't exist like /something, it will still render our home component. This happens because "/" without exact would still be a partial match to /something. Also, we set a path to "*" is this acts as a catch in case we get a URL that doesn't meet any of the criteria. This is good for any kind of error messages or 404 not found statements.

In NavBar.js:
Import either {NavLink} or {Link} from react-router-dom to start. Both Link and NavLink render as an <a> tag in the DOM and have the same base functionality. They are used to set URL's and keep track of the browsing history. They will both link to an internal path, EX: to="/projects". This to prop acts as the href= of an <a> tag. When these <a> tags are clicked, they change the URL to that path. In doing this it tells React Router to display the Route that matches the new URL. The difference between NavLink and Link is NavLink gets styled attributes when it matches the current URL. As in the name, NavLink is typically better for a navigation bar because of this styling.

Side note: As discussed in the previous section with the exact prop you may have to use exact for a basic path like "/". This is because the other paths that contain "/" would still be partial matches.

Conclusion

Client-side routing is a must for single-page applications and React Router is the best / most used tool to handle this. I hope you were able to learn something about the core functionality of React Router in order to do some client-side routing. If you made it this far, thanks for reading and happy coding :)!

Additional Links:
https://www.w3schools.com/react/react_router.asp
https://reactrouter.com/en/main/start/overview
https://www.npmjs.com/package/react-router

Quick Guide to Synchronous vs Asynchronous JavaScript and Callback Functions + Fetch

Jamelse — Wed, 21 Sep 2022 10:03:35 +0000

People and programmers alike will encounter many things/expressions when learning to code and/or coding. A few of these expressions are the different ways people will describe certain functions. A couple of these are synchronous, asynchronous, and callback functions.

Callback Functions
Let's start with callback functions. The simple way to define callback functions is that they are functions that are passed as arguments into other functions. This function is then invoked and completes some type of action. You will use callback functions quite a lot and quite more often as you code. They are very useful tools! A good example of their uses are that they are the specific 'arguments' that have to be passed in: Array iterator methods, eventListeners, etc.
Example:

Synchronous Functions/Code
Before we define synchronous and asynchronous functions we must first understand how JavaScript runs. JavaScript is a single threaded language. This means that JavaScript will only perform one action or piece of logic at a time when running code. With this being understood, we can now define synchronous functions/code. The definition of the word synchronous is, 'existing or occurring at the same time'. This is a good way to think of synchronous code. JavaScript runs the code sequentially from top to bottom, waiting only for the previous line of code. This type of code is one we're most used to.
Examples of synchronous code are:

Asynchronous Functions/Code
Now that we understand how JavaScript runs its code and synchronous code, we can now define asynchronous code.

This type of code runs asynchronously. Meaning that when JavaScript runs its code, it will read that line of code and put it on the "back-burner" while JavaScript does other work- until that code or function finishes its work. This method returns a promise to JavaScript. A promise is essentially in the name- a promise. You promise JavaScript the eventual completion or failure of an asynchronous operation. A promise can be in one of three states:

Pending- Initial state of the program before the promise passes or fails.
Resolved- A successful promise.
Rejected- A failed promise.

Two examples of asynchronous code/functions are the setTimeout() and fetch(<--more on this later) methods. Lets look at a couple examples of sync vs async code:
Returns:

The above example are both examples of basic synchronous code. Lets see what happens when we add an asynchronous method to one of them:
Returns:
🤔
The above example here is a bit of synchronized code on the 2nd line and an asynchronized piece of code on the first line! This gives you an idea on how JavaScript will "back-burner" that code and run other code until the "back-burner" code finishes.

Fetch()
One method, touching again on the promise concept, and another example of asynchronous functions are fetch requests. Fetch() is a global method that is used to retrieve data. The path link to the data that is in the parentheses is this function's argument.This argument is a promise object.
Example:

In the above example as you can see the fetch request is followed by two .then's. Tying together what we touched on in the beginning, they both take a callback function as an argument. The first .then extracts the JSON content from the promise object by using JavaScript's built in .json() method (resp => resp.json()), making the data useable for us! The second .then uses it's callback function to do whatever we want with this data (.then((data) => console.log(data));)! Fetch essentially touches on everything we covered earlier from callback functions to asynchronous functions! Fetch has several requests that you can make with several different ways to use it. Here are some good resources to cover the different requests:

Conclusion
Here we learned what callback functions are, the difference between synchronous vs asynchronous code/functions, and how fetch() can tie all of these things together. These concepts can be kind of hard to grasp for the unfamiliar, but as always the best thing you can do is practice. If you would like to read a bit more on asynchronous JavaScript, you can here. If you made it this far, thank you for your time reading through. I hope you could have learned something new or maybe refreshed yourself on existing knowledge. Be well, never stop moving forward, and happy coding :)

Understanding Array Iterator Methods in JavaScript

Jamelse — Wed, 14 Sep 2022 00:43:26 +0000

Arrays in JavaScript are useful data structures that are used to store collections of information. Looping through arrays is a powerful tool to iterate through arrays and do things with its data when programming. While loops work well, there are simpler methods to iterate through information in Java. These methods are actually built into JavaScript! They're called Array iterator methods.

I, like many others, struggled with the concept of array iteration, and its specific built-in methods. Although the methods are very very handy, they can be somewhat difficult to get an understanding of.

Here, I will dive into JavaScript's different built-in array iteration methods, and hopefully you will leave here with a better understanding on how they work!

METHODS

.find() Method
The Array.find() method is used to iterate through the given array it's attached to and will return the first element that "satisfies" the passed argument/condition. This argument/condition in the parentheses is a function! This allows the .find() method to execute more complex searches. If nothing meets the given condition in the callback function it will return undefined. Example:

.filter() Method
The Array.filter() method is used to iterate through a given array and will return ALL elements that satisfy the passed argument/condition. These passed elements will be copied into a newly created array that is created by the method itself. This method also takes a callback function as the argument/condition so it can execute more complex searches. One note is since this method creates an entirely new array, results that don't satisfy the condition at all won't return undefined. Rather, these results will return an empty array. Easiest way to think of it is in the name itself: a filter! You take away everything you don't want and leave behind the things you do!
Example:

.map() Method
The Array.map() method is used to iterate through a given array and modifies all of the elements of the array. This method also creates a new array. It will be the same length of the original array, and will be populated by all the modified results. This method also takes a callback function, which will be used to defined how we want to modify the given array. Side note: depending on the types of data in the array you could get interesting results. For example, an array containing strings and numbers may transform differently.
Example:

.reduce() Method
The Array.reduce() method is used to iterate through a given array to reduce all the given elements of the array to a single value. The method takes a callback function which is the "reducer" in this case. The function passes on each element of the array in order. The return result of this is a single value. The callback function should also take an initial value. Easiest way to think of this is this number is where the callback function will begin to execute. Else, if left empty, the first element of the array at index 0 is used as the initial value- which would then start the iteration at index 1 (the second value of the array) and you could get some surprising results from this. In some cases it won't matter, in some it might. With that being said, it's usually better to put a number. If you want to start at the first element of the array, put 0, and so on.
Example:

Note: In Example 1 it doesn't matter if this contains an initial value. Here it is without:

However, in Example 2 it does matter if it contains an initial value. Here it is without:

In example 2 without the initial value the callback function never executes for the first element of the array.

.forEach() Method
The array.forEach() method is used to iterate through a given array and executes the provided argument(function) for each element. The provided argument/condition takes a callback function. Unlike previous methods, .forEach() differs in the way that it doesn't have a built-in return value. forEach() is the least expressive iterator method. Most of its purposes are better served by the uses of .map() or .reduce(). So when should you use .forEach() then? Well, there aren't a lot of real uses for forEach(). One good one is to log each value of an array - which is great to use when debugging!. It's better in this case than .map() because there is no use for creating a new array if you just want to log the values of an array.
Example of forEach:

Closing Comments

Array iterator methods are very very powerful tools for programmers. While hard to understand and grasp the concepts of each one and some maybe more than others; The best thing you can do at the end of the day is code. Practice practice practice makes perfect. Just writing code and practicing using these methods will make them much easier to understand. Once you can fully grasp/understand the concepts and uses for each of these methods, you will have these powerful tools at your coding arsenal. I hope this could help people appreciate and learn more about array iteration methods and how they work.

Keep coding and never stop moving forward <3

My GitHub :)