7.1 Mustache

For the next two videos, we will explore templates. And, in this video, we will start with the Mustache, which is a logic-less template. Now, Mustache implementation can be found in various languages such as Ruby, Python, PHP, some of the very common languages. And also, we will do JavaScript in this video, so that you can apply it in any browser environment for a web application. So do check out the GitHub page for the JavaScript implementation of Mustache and literally any other language that you wish to implement in. And, I would also like to point out this page called the Mustache Manual, which is basically a language agnostic way of telling us what are the features of mustache. Of course, the very common features are things like variables or sections, even how to display non-empty list. We will definitely explore many of these features. Now, as you notice, Mustache is known as logic-less. In fact, this is Mustache's big strength. Now, you might be wondering, what is the advantage of a logic-less template such as Mustache, anyway? Well, the thing is this, if you want to write a clean code in the sense that our logic resides in the server-side code or in any other file and our template resides in another file. In this case, Mustache is basically helping us to code it cleanly in a very segregated manner, so that we, kind of, separate our logic from the view. Here, I basically gave some sort of very basic structure to the html. And now, let me start with a div. And this div will be basically called languages. And this is where we will input our data. So inside our script tags, why don't we define our data? That's as simple as that, very simple data. Now, how do we put this value of data such as JavaScript and 1995, the year, in our div ID languages? Now, typically, as we know, we will use this library called jQuery. So, there we go, we have jQuery library, usually what we do is we will query the DOM, which is currently an ID of languages and .html. So, why don't we go ahead and just say data.name. And I've split the screen, so you will immediately see the changes here. And there you go. You see JavaScript. Now, this is really neat. But if you want something a little bit complicated, let's say in some paragraph tag, you wanna say, JavaScript was created in the year 1995, and then, you close out the paragraph tag. So, what you need to do, in this case, is basically, edit this part which is inside the function html. So, here, I have done exactly the same thing as I've described. So, here you have the paragraph tag, and basically, you're doing some string concatenation to put your data here. Now, very soon you will realize that this can get really, really messy. Because, you are firstly, kind of, mixing up, inserting data into the templating system. Can we do better? Firstly, I will start by including the Mustache library form CDNJS. And next, what I'll do is come back right here, and I will create a variable called Template. So var template equals 2. And here, I will include exactly the same thing, so inside paragraph tags. And all I need to do is delete away this entire thing and create a variable. Let's say called html. And this is where I will start using Mustache. So, all I need to say is Mustache.tu_html, which will basically take in the template, as well as the data. And finally, what I'll do is query the DOM, and say hey, in the ID called languages, which is a right here above. All I need to say is .html, and let's include the html variable that we created right before. Now obviously, here, you're saying that hey, hey, hey, this is not a variable like JavaScript and 1995 are static. Well, this where Mustache makes it very, very easy to include a very simple variable. Now, notice here, what I'll do is include just two simple curly brackets and call the variable. In this case, it is the key which is the name. I'll do exactly the same thing for 1995, included inside two curly braces, and call it the year. And that's it, it's as simple as including the name and the year inside curly braces, and there you go, we will see our data being displayed. Why don't we do a little inspect element so that we can see exactly where the data is being inserted, and there you go, as we expected, it is inside the div id languages. JavaScript was created in the year 1995. Great, but, I think we can do better. Here, we are still having the template inside our logic, or rather, our code where we are manipulating the data. Can we extract it out? Yes, we can do that. So, to do that, we will have to expand out the div languages. And inside here, we will add a script tag. And, let's give the script tag an ID of languages, and tpl for templet. And also, we need to give it a special type. Now, this is not a normal script. This is basically a template. And, this exactly we will include the DOM elements. So I'm gonna basically delete the entire paragraph here, cut it, and paste it here. Isn't it very neat? We, basically, now have all DOM elements here as well as the variable data which is nicely extracted. And, instead of having the template as an empty string, what we need to do is include the ID of the script to tag, like so, languagesTpl. And then, we need to call the html. Oops, I am obviously missing the hash sign here. And, there you go. JavaScript was created in the year 1995. Now, let's make it even more cleaner by creating a new file called script.js. And all I'll do is basically put in this entire part right from the data instead having an inline script, we'll basically put it into a separate file. Of course, here, we will include source equal to script.js. And, there you go, it's looking much neater now so, in our index.html, now we have div ID and inside here, we have inserted the template. And at the bottom, we are calling the Mustache library, the jQuery library, and finally, our project-specific file which is script.js. That has the data and insertion of the template and the html. Great, so now that we have explored a very simple property of how to include a very simple variable in terms of template with Mustache. Let's go ahead and explore this thing called escaped, or rather the unescaped HTML. Now, let's say you have an HTML tag here. So, the language will be embedded inside the HTML tag, strong, so do you see here, it will basically be included as strong but, obviously, this is not the effect you want. If you want to include unescaped HTML, all you need to do is instead of two curly braces, include three curly braces like this. And, there you go, your data with embedded HTML tags will be interpreted as HTML, and here you go, you will see a bold effect. Now, let's say you have a false value or a nonexistent value. Let's say, in our case, the value is called standardized and if the variable, standardized, exists, we will basically say, and standardized in 1997. Now, obviously for our case, the variable here does not exist. But how can we do that little check so that this sentence, or rather the part of the sentence, does not appear? For this case, we will come here and we will create a section, and this section will start with the variable called standardize. And it will end with the variable called standardized but it will include /standardized. And there you go, because the standardized variable does not exist, this part will not be executed at all. So, inside hash standardized and ending with slash standardized. Because it is false, it will not be rendered at all. But, let's say the variable, standardized, is true and it exists. So in this case, if we say true, yep, it will be displayed. That's because, once again, we are including it inside the section, standardized. And this part will be displayed. Now, let's create a list of objects, and let's see how to kind of iterate through it. So, I'm gonna simplify it a lot. And, inside data, let's start with an array called languages. And, inside the array, it will basically have objects. And, each of the objects will have a key value pair called name. And, another key value pair starting with year. Great, why don't we include a few more? So basically, we have an area of little objects, name and year, name and year. So, how we can, sort of, iterate through this. So now that our data is done, we will come back to index.html. I'll, basically, delete away the standardized section. And inside here, all we need to do is create a section called languages. As we have explored before, in order to create a section, we'll start with hash and then languages. And simply, we'll end with slash and then the section name, which in our case, is languages. And inside here, we will basically say name and then the year. But, of course, for this case, we do not need to include triple curly braces, and why don't we do away with the paragraph? And, instead of a paragraph, let's start with an unordered list. And, inside each section, we will basically embed the sentence inside a list item. And there you go. It will basically iterate through each of the objects, and you will have the data presented to you. Now, let's say your languages is completely empty, all right? So, I'm gonna delete it, so it's basically gonna be an empty array. And if you come back here, it will obviously be empty. But, what if you, kind of, want to do a check that if it is empty, let's display something? So, instead of just having a normal section here, which will display the data if there is a data, we will start with another section. But, this section will, basically, start with a carrot symbol, and then we will also call it languages. And, we will also end it with a /languages, and inside here, maybe we can say that hey, include some programming languages, and there you go. It basically says that hey, not only there are no programming languages, it sort of gives you some hint on what to do. So, as long as there are no empty list and you want some messages to be displayed, do include the carrot symbol to start an inverted section. Now, what if you want to include some comments instead the plain variable? So you can also start with the double curly braces but include an exclamation mark and then you can include your comments here. So, notice here, it will not be seen here. Great, so now, let's explore some nesting. So, let me insert some data inside to the array languages. And this time, the data will have nested values. For example, instead of just name and the year, some of these objects will also contain developer. And the developer inside will also have firstName and lastName. Now, notice here, some of the objects will only contain firstName. Some of the objects will not contain the developer at all. So, let me come back to index.html and remove away the inverted section. And, maybe here, we can say and the team included. Over here, we will use a dot notation. So, here, we can say developer.firstName. And then, space, developer.lastName. I had a slight mistake, it should be firstName and then .lastName, and there you go, and the team included first name, last name. And the team included just the first name. But, notice here, in Python, it did not have any developer, but I still included, and the team included, that part, which is, obviously, not the case. So, in this case, why don't we make a little check. If the developer object is defined, like for example, in terms of Python, it is not at all defined, then we should not have that. And, only if the section developer exists, in that case, include the part of the sentence, and the team included the developer firstName and lastName. Right, so, once again, you are doing a little check here, so, let's come back and there you go. The Python will neatly not include it and the team included that little section. But here's a little bit of dereferencing we can do. Now, because you have already done a little section on developer, we can do dereferencing, and basically, not to refer to any doc notation. So, we do not need to refer to the variable as developer., but just firstName and the lastName. This is neat, but obviously it will look exactly the same. Lastly, let's explore something called the partial. So, here, instead of saying firstName and lastName, I will include a partial and just call it, say, developer. And, how do we denote a partial? We just include a little bit of lesser than sign in front of the partial name. Now, let's go, go ahead to script.js and define the partial. So, after template, I'll go ahead and create a new variable and call it partials, and this variable will basically be an object called developer. And let's say inside the em's tag, we will go ahead and include the very familiar firstName and then lastName. Now inside the variable html which is passing in the template and the data, it can also pass in a third argument and in this case, will pass in partials. And there you go, the em tags have been embedded and it is neatly abstracted away in terms of a partial. So that's it, a little bit about logic-less templates, do go ahead and check this tutorial by Andrew Burguss on the Best Practices When Working With JavaScript Templates. And also, another blog post by Christophe, where he kinds of explains the various features of HTML Templates with Mustache.js. So, next time you need a clean templating system where you do not have to go through the string concatenation. And you can neatly abstract it away from our logic, as well as data, do consider using Mustache, a logic-less template.