What is a view in Web Application?

I heard the term, Model View Controller a lot prior getting into web application development. I was first introduced to the concept when I was taking the lessons of Ruby on Rails.

Rails is a Model View Controller, MVC framework. I was presented this diagram of how the response request cycle works.

Diagram from Codecademy’s Rails course

No matter how many explainer videos I watched, I didn’t really get what each of these do.

To add more confusion, I was presented with Routes. So it was more like Model, View, Routes, and Controllers.

I quit my Rails learning soon, as I wasn’t getting it.

Lately, when I started learning Node.js, I was once again introduced to the MVC approach.

This time I understood the key concepts behind each of these components. I discussed all of them in this post, but for this article let’s talk about the easiest of them all:

View

A view is simply the web page we see. A page that displays the text, images of a website. If you build websites with HTML, then every page you create is the view like the homepage, about page, and the contact page.

In MVC, we create a template for the view so it can be filled with content from the database.

Let’s say you go to your friend’s profile in Facebook, you will see all the details, photos and info about your friend.

Now you go to your own Facebook profile, you will see a completely different page with different content on it.

Facebook has over Billion profiles like this. Now do you think some developer out there coded a billion pages for all these people?

Absolutely not.

He/she must have built one template which gets populated with the user info.

The page is merely generated on the fly when you request for that user profile.

In web application development, we call it a “View.”

When I was working with WordPress template development, I got a hint about MVC. If you ever look into the theme files in WordPress, you will see there is this one index.php file for the home, one single.php file for the blog posts. So doesn’t matters how many hundreds of posts you have in your blog, they will all be shown using the single.php template file.

WordPress template files in PHP

If you open up your WordPress single.php file you will see familiar HTML code. If you look at the H1 or H2 tag where your blog title goes, you will see inside the tags, there are some PHP code. These are the variables.

<h2 id="post-<?php the_ID(); ?>" class="post-title">
    <?php the_title(); ?>
</h2>

This means the title of the page will depend on the page they are currently requesting from.

In Node.js web application development, we use a similar method. We create a views directory to store the templates.

I use the pug template engine which looks a lot like HTML and supports JavaScript for the dynamic data. I add JavaScript template variables in the place of where a dynamic data will show up.

doctype html
include mixins/_loginForm
html
 head
  title Social Network
  link(rel='stylesheet' href='/style.css')
 body 
  #header 
   #logo
    h1
     a(href='/') Social Network 
    p for real people
    a(href='/about') About 
    a(href='/contact') Contact 
    a(href='/links') Links
   #profile 
    if user
     p Hello #{user.email} 
      a(href=`/profile/${user._id}`) #{user._id}
      a(href='/logout') Logout
    else 
     +loginForm()
  .wrapper
   
   #content 
    block content

Pug template files in Node/Express

I already said that one single template file can display different profile pages for different users. But these templates can also be conditioned.

A different view may be called depending on the user access or when there is nothing to display at all.

If I go back to Facebook, have you noticed when you are not logged into the site, you see this welcome page on www.facebook.com

And when you are logged in, you will see your home feed on the same url: www.facebook.com

To sum it all up, a view is just another special template page that will be generated on the user request. It will display only the things that matter to the user’s request.

These are just some of the quirks that makes web application development so much fun.

Found this post helpful? Please give it a CLAP!

Do you want to learn more about how to build full-stack applications with Node JS? Then read this post. I am also writing more Node related articles on my blog so check them out!