Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:12Length:1.7 hours
  • Overview
  • Transcript

2.1 Using a View Engine

Web applications typically rely on view engines (aka templating engines) to generate HTML dynamically. In this lesson, we’ll start using the EJS templating engine so that we can serve more than static content.

Related Links

2.1 Using a View Engine

In the previous lesson I mentioned that Express is an application framework. It's something that we use to work with and display data dynamically. And static assets have their place, there are some pages that would be primarily static just because their content doesn't change. But for the vast majority of things that, in a web application is going to do, it's going to work within display dynamic data. And in order to do that we can't use static assets except for whenever we need static assets. Instead we have to have a way of dynamically generating HTML, and to do that we use what's called a view engine. Now, you may be familiar, or you may have heard of the MVC programming pattern, it's called model view controller. It is very popular for web applications. In fact, I would probably say that in today's day and age, the vast majority of applications that are written for the web are MVC applications. Just because web applications naturally fall into the MVC pattern and Express is no exception here. We have a controller, which as its name implies, it controls. It does the processing, and it sends the data, or the model, to the view in order to view it in the browser. Now, wwe're not going to get into the whole MVC pattern and anything like that. Really what a view engine is is a templating engine. It is a way that we can dynamically generate HTML without having to do it directly within JavaScript, and things like that. So when it comes to templating engines, there are many that we can choose from. Let's just do a search for Express view engines and the first hit is going to be what we want. This is from the Express documentation, and right there, template engines. Now this is not an exhaustive list, but you can see that there are many available that we can use. One of them is React, we can use React to generate our HTML that is then sent to the browser. Now, this can be a little confusing because you have to wrap your mind around the fact that you're using React on the server which is not interactive. But it's being used to generate HTML and it's actually quite cool and you can also do the same thing with Vue.js as well. But then there's things like Pug, wwhich used to be called Jade and Pug is probably the most used view engine. But I personally don't like it, primarily because it is very dependent upon whitespace and indentation. And so this is what the templates look like for Pug and this would be the HTML that it generates. So many people like it. In fact, that's why it is probably the most used templating engine for Express. But in our case, we're going to use something that's a little bit more familiar. We're going to use EJS, or embedded JavaScript template engine. The reason why this is familiar is first of all, it allows us to use just plain ordinary HTML. And then whenever we need to do something with JavaScript, like an if statement. Or if we need to loop over a collection of things, then we have delimiters that allow us to kind of switch into JavaScript mode. So if you are familiar with PHP or many other platforms, it's the same type of thing. You have a special tag that you use to switch into your JavaScript mode, write your code and then switch out of it to get back into HTML mode. So, this is very similar to what other platforms currently use. And I'm not wild about the syntax, in fact, I pretty much despise it, but at the same time [LAUGH] it is also very familiar. So that's what we're going to do. So, the first thing that we need to do is install EJS to our project. So we're going to do that with npm install ejs and, of course, we want to save it. And while that is installing we'll go to our appjs folder, and we first of all want to tell our application that we have a view engine that we want you to use. So, the way that we set this up is we use a method called set. We're going to set that the view engine is ejs. And so that's going to tell our application, that we have EJS that we want to use, and that's it. Now this is going to make some assumptions, about our setup. The first, is that we have a folder called views, and that all of our views are going to be inside of this folder. So let's create a new file, and let's just call this index. But instead of HTML, we're going to give it an extension of EJS. But, we can have just normal HTML. This is the index, and then all we have to do then is use this view. So let's use this as the index then. So instead of just returning some data, what we are going to do is render our view. We're not sending data, we are rendering a view. We specify the name of our view, which is index. Notice that I'm not typing EJS, it's automatically going to add that. So we are going to use the index view. And for right now, that's all we're going to do. And you might think that, okay, what have we gotten from this? There's really no difference between this and a static page. Well, yes there is. Hello, that's contact. Let's go back to our root and something went wrong, so let's look and, it helps if we say nodemon and there we go. Okay so we he have an error. We are missing a parenthesis after the argument list. That's a common mistake for me, so right there. We'll go back, and we can see the app crashed, but just by making that change, it restarted due to changes, so here we go. Let's check out, make sure our contact works, it does. Let's also go back to the root of our application. And instead of seeing that HTML that we saw before, we see that this is the index. So if we view the source, we're going to see exactly what we have inside of our view. Now, let's do this, let's make this a little bit more dynamic. So we're going to make this an actual function here, instead of just a one liner. And we are going to pass some data to this view, because that is what we do. Our function is going to do whatever processing it needs to do. So if it needs to interact with the database, no performer query or something like that, then it's going to do that. It's going to get whatever data it needs, and then it's going to pass it to the view as the second argument. So let's say that inside of our view we are going to use what is essentially a variable called message. And let's just have hello, EJS! As our message, and we want to display this inside of our view. So we have this, this is the index and let's leave that there but let's also have a p element. And let's say that this is the message and then we are going to output that value. So we are going to use an angle bracket percent sign equals, the equal sign is important because this means that we are outputting something, we are outputting data. So in this case we are outputting the message variable. Let's save this, let's go back to the browser. And whenever we refresh, we are going to see once again, this is the index, and then this is the message, Hello, EJS! So we see the data that did not exist inside of our view, instead we passed it from our, I'm gonna call it, a controller. We passed it from our controller to our view. And so that is how we are going to work with dynamic data. So in the next lesson what we're going to do is create a actual contact page. Instead of having a static page, we are going to return a contact view. We will be able to submit that form and then actually work with the data that was submitted.

Back to the top