Currently, I am in the process of developing a travel website using Ruby on Rails 4 which heavily relies on Javascript (or Coffeescript) for functionalities such as Google Maps and other APIs. The workflow involves making an initial call to the server, constructing a javascript object with the returned data, and promptly displaying some HTML content. Subsequently, there is a need to show different HTML based on the same dataset at a later stage.
A common scenario would be:
- User initiates a search for transportation between two locations
- Coffeescript sends an ajax post request to the rails server
- The rails server responds with a JSON object named
searchResults, containing an array of routes (e.g.,
orsearchResults['routes'][0]['path']
)searchResults['routes'][0]['price'] - The application instantly displays the search results in HTML format 1
- Later, upon user interaction, specific data about one of the routes needs to be displayed using a different HTML structure than in step 4 (format 2)
My current approach in Step 3 involves creating an instance of a SearchResults class in Coffeescript:
#holds all of the information for a single the transporation search call
class TransportationSearch
constructor: (oLat, oLng, dLat, dLng, oName, dName) ->
@origin = oName
@destination = dName
response = @search(oLat, oLng, dLat, dLng).responseJSON
@longestRoute = response.longestRoute #in minutes
@routes = response.routes
I chose to create a Coffeescript class to avoid additional server requests, which could slow down the performance considering API limits. My inquiry revolves around steps 4 and 5, where two different methods have been identified to meet my requirements, and I am curious about their speed/performance implications.
Method 1: Cloning Hidden Div
In this method, functions within TransportationSearch clone a hidden div, configure its attributes, and insert it into the DOM:
renderFormatOne: ->
for route in routes
content = $('.div-one-template').clone().removeClass('hidden')
#...sets content for template. For example:
content.find('.price').html(route['price'])
#Insert template into Dom
$('#results-one').append(content)
renderFormatTwo: ->
...
Method 2: Using AJAX/Rails to Render the HTML
An alternative approach involves storing the HTML templates in a Rails partial file and utilizing AJAX to transmit data to the controller to render the output.
Coffeescript:
showTransportation: (searchResults) =>
$.ajax '/segments/side_menu_transportation',
type: 'post'
data:
searchResults: JSON.stringify(searchResults)
success: (data) ->
$('#add-transport-box').html(data)
return true
error: ->
alert 'passDestinationToTransportation Unsuccessful'
return
@show()
Controller:
def side_menu_transportation
@searchResults = JSON.parse(params[:searchResults])
render partial: 'trips/transport_search'
end
While Method 1 appears somewhat messy due to embedding the HTML structure in Coffeescript, prioritizing speed might influence my decision. Although I lean towards Method 2, I ponder if the AJAX POST request could potentially impact performance even without directly contacting the rails server.
I seek insights regarding the speed/performance consequences of these approaches, or any evident oversights that I may have missed :D.
Your feedback is greatly appreciated!