Barber

Did somebody say ‘No need to use template literal in javascript’?

It is always exciting to explore easier ways in ‘learning coding’ challenge and it is not unusual to have a stuck point where cannot be found in google directly or the documentation may not be enough to make you move forward as well as the times when debugging does not reflect any error. The packages come in handy in those cases again as a life saver.

Well, let’s say there are two separate directories you are working on, one is for client side and another one is for server side. This gives more burden to the work which needs to be done on client side to create templates in .js files which are connected to client side html pages. What if you do not have to have client side directories at all and instead, do everything in server side? Sounds great!

Let’s download Node.js to built our server side on https://nodejs.org/en/ . Then, create your directory only for server side. In the directory, make sure to create an index.js file which is the main js file where you will make connections with your ‘template engine’ files. To be able to use template engine which will be a package of express.js, we need to also download express.js from Node.js. In your terminal, type :

Now, we are ready to use our template engine ‘Mustache.js’ which will help us to create .mustache files and use them as regular html pages in server side. To be able to use all these packages, we will definitely need the codes in our main index.js file as below (I like to put them together at the top of my file);

First seven and 12. and 13. lines is to set up what we downloaded in terminal. To be able to create and reach our .mustache files, we need another directory inside the same server directory, in this case, I name it as ‘views’, you can name it whatever you want as long as you specify it in line 8 as ./yourchoice. Now you can put your all html pages under ‘views’ directory with .mustache extension. To make connections between index.js and your html pages, add stored data when you render any of those pages.Then, use this data using {{yourdata}} syntax in your html pages anywhere you want. If your data is in the format of an array and if you need to loop through it;

let array = {user : [{name: ’John Doe’, age:34}]}

{{#user}}

My name {{name}} and I am {{age}} years old.

{{/user}}

You may ask ‘can I use css file to style this html file’? The answer is yes. In line 10 and 11,by adding static file set-up, you can use any css file under ‘css’ directory and .js file under ‘js’ directory.

Show More

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share this post with your friends!