Let's examine the productdetail.go source file found in the handlers directory:

package handlers

import (
  "net/http"

  "github.com/EngineerKamesh/igb/igweb/common"
  "github.com/EngineerKamesh/igb/igweb/shared/templatedata"
  "github.com/gorilla/mux"
  "github.com/isomorphicgo/isokit"
)

func ProductDetailHandler(env *common.Env) http.Handler {
  return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
    vars := mux.Vars(r)
    productTitle := vars["productTitle"]
    product := env.DB.GetProductDetail(productTitle)
    templateData := &templatedata.ProductDetail{PageTitle: product.Name, Product: product}
    env.TemplateSet.Render("product_detail_page", &isokit.RenderParams{Writer: w, Data: templateData})
  })
}

This is the handler function that handles the /product/{productTitle} route. Remember, this is the route with the embedded variable inside of it. Inside the ProductDetailHandler function, we first gather the variables defined in the route, by calling the Vars function of the mux package. We supply r, the pointer to http.Request, as the input parameter to the Vars function. The result of this function is a map of the map[string]string type, where the key is the name of the variable in the route and the value is the value for that particular variable. For example, if we were accessing the /product-detail/swiss-army-knife route, the key would be "productTitle" and the value would be "swiss-army-knife".

We get the value supplied for the productTitle variable in the route, and assign it to the productTitle variable. We then get the product object from the datastore by supplying the GetProductDetail method of the datastore object with the productTitle variable. We then set up our template data object, setting the fields for the page title and the product record. Finally, we call the render method on the template set indicating that we want to render the product_detail_page template. We assign the http response writer object and the template data object to the respective fields of the render params object, which is passed in as the second argument to the template set's Render method.

At this point, we have everything that we need in place to render the product detail page. Let's visit the product detail page for the swiss army knife from http://localhost:8080/products/swiss-army-knife. Here is the rendered product detail page in the web browser:

Now we have made the /products and /product-title/{productTitle} routes available to humans and machines alike, and we have implemented the classic web application architecture. Our machine users (the search engine bots) will be satisfied, since they can easily index the links of all the products available in the products listing page, and they can readily parse the HTML markup on each product detail page.

However, we haven't completely satisfied our human audience yet. You may have noticed that clicking on an individual product from the product listing page results in a full page reload. In a brief instance, the screen may go white in the transition of leaving one page and rendering the next page within the web browser. The same full page reload happens when we click on the Products link in the navigation menu to return to the products listing page from the product detail page. We can enhance the user experience of transitioning through web pages by implementing the single page architecture for subsequent interactions with the website, after the initial page load. In order to do so, we need to define client-side routes along with their associated client-side route handler functions.