Learn RESTful routes and how to manipulate the DOM

Book-reviews app was built with JavaScript frontend and a Rails API backend. To satisfy project requirements, the backend and frontend collaborate to demonstrate Client-Server Communication. Application should have at least 3 AJAX calls, covering at least 2 of Create, Read, Update, and Delete (CRUD) actions. Client-side JavaScript code use fetch with the appropriate HTTP verb, and Rails API use RESTful conventions.

What is REST? REST (i.e. Representation State Transfer) is an architectural style for defining our routes. It provides a way of mapping HTTP verbs ( get, post, put, delete) and CRUD actions (create, read, update, delete) together. When something follows the rest principle it is known as RESTFUL.

What is CRUD? When building APIs, we want to provide the four basic types of functionality. There must be a way to Create, Read, Update, and Delete resources. In a REST environment, CRUD often corresponds to the HTTP methods POST, GET, PUT, and DELETE, respectively.

What are routes? Routes are the code that are responsible for listening and receiving requests and then deciding what to send back. Rails uses resource routing, which automatically creates routes for a controller.

By default, Rails creates routes for the 7 default actions (index, show, new, create, edit, update, and destroy) for every RESTful route in our application. We will use the :only option to fine-tune this behavior. The :only option tells Rails to create only the specified routes. In our backend, app/config/routes.rb we have it set:

Rails.application.routes.draw do
 resources :reviews, only: [:index, :create]
 resources :books, only: [:index, :show, :create, :destroy]
end

When we go to http://localhost:3000/rails/info/routes and check all of our routes and mapping of HTTP verbs and CRUD actions together.

This is how our /books route looks like, http://localhost:3000/books :

Now that we configured a routes for books we will add corresponding controller methods in our Books Controller so we can get all books:

# GET /books

def index
 books = Book.all
 options = {}
 options[:include] = [:reviews]
 render json: BookSerializer.new(books, options)
end

def show
 options = {}
 options[:include] = [:reviews, :'reviews.description',:'reviews.book\_id']             
 book = Book.find\_by(id: params[:id])
 render json: BookSerializer.new(book, options)
end

# POST /books

def create
 new\_book = Book.new(book\_params)
 if new\_book.save
  render json: BookSerializer.new(new\_book)
 else
  render json: new\_book.errors
 end
end

private 
def book\_params
  params.require(:book).permit(:title, :author, :genre, :image\_url)
end

DOM manipulation

The DOM (Document Object Model) is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

DOM Access

Structurally, the Document Object Model consists of nodes, with each node representing content in the web document. It gives developers a way of representing everything on a web page so that the contents of the web page is accessible via a common set of properties and methods.

DOM Methods

The getElementById() and getElementsByTagName() were the two methods from DOM standard and the HTML5 specification adds three new methods for accessing elements, getElementsByClassName(), querySelector(), and querySelectorAll().

getElementById()

Typically we want to access an element within the DOM directly and try to do something with it. Javascript provides a document.getElementById() method, which is the easiest way to access an element from the DOM tree structure. It will return the element that has the ID attribute with the specified value.

In our app if we want for example to addEventListener() on menu, in order to teach nodes (or, “elements”) to “listen” for an event, we use addEventListener(). It allows us to associate "hearing" an event with executing a callback, but we need to select our main div first and we can do that with getElementById(), in our case id=”menu”. This is HTML skeleton for manipulation:

const menu = document.getElementById('menu')
menu.addEventListener('click', handleMenuClick) 

function handleMenuClick(event){
  if (event.target.id !== menu){ 
  main.innerHTML = ``
  callbacks[`${event.target.id}`]()
  }
} 

To learn more check this book-reviews app repository on my Github or connect with me on LinkedIn or Twitter.