Rails App with a jQuery Front End
Overview:
The Meobox app passes data between the backend Rails code and client side Javascript as JSON objects via AJAX requests, through websockets and render the html pages via data attributes that we choose to display. ActiveModel::Serializers is a component of the Rails API that enables an object-oriented approach to serializing ActiveRecord objects. The module can also be used to provide customized JSON objects depending on the requester. Serializers know about both a model and the environment in which it is being accessed, so if an admin user accesses the API you as the developer can provide one level of access to the underlying data, while providing a less detailed view to a non-admin user. To get this functionality, you can just add the ‘active_model_serializers’ gem to your Gemfile.
How does AJAX works behind the scenes
AJAX (asynchronous JavaScript and XML) is simply a way for the browser to send and receive data to/from your application on your server. Javascript is used to send asynchronous requests to your server. Your server typically responds in JSON or XML format.
This provides several advantages.
- Requests can be made without a page reload. Page reloads can be slow, so grabbing data in the background without reloading the page can be a better user experience.
- Decouples the data from the presentation of the data
Serialization:
is the process turning taking the object and serialize it into JSON object and sent into response and process the JSON. taking an object into a string, and represent it as a string that can be consumed anywhere (remember, the Internet is just strings) and then reconstructed back into usable code in this case a JSON string.
Serializer class This means that we now have a dedicated class that we can use to fully customize the JSON output and usefully this gem includes hooks so that when we try to render out a model in a JSON format it will automatically look for a serializer with the same name and if it finds it, use it to fetch the JSON data. In this class we can specify the attributes that we want to include in the output.
In the serializer, I specify which attributes I want available in the JSON object, which typically will correspond to the methods in the body of the class or the attributes of the model. If I have a custom defined attribute (e.g., an attribute that is not the same as an attribute in my model), I need to write out a method with the same signature so that Rails knows how to interpret my serialized attribute.
Being able to customize attributes through methods makes this serializer easy to use. Another useful feature is its support for associations. To include data from an plans which use has_many association to boxes specifying the serializer.
Namespace:
Organizations of controllers within folders allow for better organization. In routes.rb to specify that it’s under a specific folder use the namespace function. Example: app/controllers.api/v1/user_controller.rb
The reason I used namespace to organize my folders and in case if V1(Version1) breaks I could use another version.
Interaction of rendering between items_controller route via http and item serializer and index.js and new.js
When the browser makes a request to the /items URL, the ItemsController sends the browser an HTML page to show the user. In this HTML page, you are requiring your javascript file with the <script> tag. The browser sees this tag and fetches your javascript. Included in this javascript are is the javascript from the index.js and new.js scripts. This javascript is used to make subsequent ajax requests to your Rails app for creating and showing Items.
It’s worth noting here that inside the application.js file I have //= require_tree .
What this does is requires everything in your assets/javascripts folder. So the rails asset pipeline gathers all your javascript files together into one file called application.js
Ajax request from index.js:
$.ajax({
url: ‘/api/v1/items/’ + item_id,
dataType: ‘json’
}).done(function(data)
This makes a request to your Api::V1::ItemsController and asks for JSON as the response format. Once the request in the background is finished, the done callback is executed and passed the data from the request. The data is then used to fill out elements in the DOM and display the item.
Item prototype in new.js and what does this refers to
This creates an Item constructor which allows you to easily create Item instances with the new keyword. You can pass data to your constructor and assign attributes to your instance. The constructor for the item is setting all the attributes for particular item based on arguments we pass as JSON object. this is referring to the item itself which is the constructor.
A new instance is returned from new Item(data)
Item Prototypes
The following creates functions on the prototype of Item. One advantage to this is the sharing of code across all instances of item. All instances will point to the same function definitions in memory. This both saves memory and allows you to change the function affecting all instances. If these functions were defined in the constructor, new functions would be created every time an item is created.
We are using jquery selector on the particular form with id new_item, than we have a click event submit calling the function. event.preventDefault(); means we want to hijack the default behavior. Meaning that we do not want to follow the href where it is suppose to go. Instead we want to override the submit event handler to customize it.
this refers to all the values coming for the form and we are calling serialize() method that create a text string in standard URL to get all the values from the form and storing it into a variable called item_params.
We are posting data from the server into specific destination: api/v1/items and passing the serialized item_params. than when done is anonymous function being called to pass the data when successfully created the item from the server and the server will send back the item as JSON format.
var item = data[“item”]; meaning that we are grabbing the item JSON from the server, response data is coming from the create action.
How did I render the index.js?
document.ready means that we should wait for the page to load before running our ajax request. event is loading when the page is fully loaded with the html and css. Than we have jQuery selector that every time we click over a link with a class show_details, in this particular case will be the show link. Than we have prevent default to disable the normal link behavior following the link.
When the item is being clicked, we are asking the server for more html via ajax and drop it into html. This has to be outside of the function because this is inside the ajax itself. variables in the outer function will exist in the inner function, accessing the id of the modal using the data id.
This make a request to the API::V1::ItemsController and ask for JSON format for response. once the request is finished successfully done callback is executed and pass the data from the request. The data is when used to fill out the elements in the DOM and display the items.
We are asking our API the details of that particular item. The server sends back JSON structure, and that structure is available on data variable. The variable will be used to extract the attributes details to be replaced on the modal. HTML mainly we replaced the placeholders represented by span tag in order to replace the data as JSON, and replace it with the attributes as in the modal replaces the place-holders inside the modal body.