Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Express Basics Using Templates with Express Breaking Your Project’s Templates into Partials

Ceil-Ian Maralit
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Ceil-Ian Maralit
Front End Web Development Techdegree Graduate 19,434 Points
Posted by Ceil-Ian Maralit
.a{fill-rule:evenodd;}techdegree seal-36
Ceil-Ian Maralit
Front End Web Development Techdegree Graduate 19,434 Points

Purpose of pug

Hi! I was just wondering what is the main purpose of templates? I mean, we can link different parts of our website using just HTML, right? So, what's really coming into my mind right now is using this as a response on a form. Like when they hit the submit button etc..

Also, now that we've made an HTML using pug, how can we target those elements for JavaScript purposes. I tried it but it did not work, it can't select the class I assigned to the HTML element I made using pug.

Thanks in advance!

1 Answer

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

Hiya there! The main purpose of using pug template or any other templating engine is to control your server-side rendering content. For example, if you wanna render a file or JSON, when the end-user navigates to a certain URL, you can let server to decide what needs to be rendered, right? But the question is how to get the hold on a DOM element? Well, it can be easily done within your script tags or just link a script file to the rendered HTML. You can't perform DOM related operation in your server unless you do it on the front end where you could actually hold on to the window Object.

I hope it helped!

~ Ari

Ceil-Ian Maralit
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Ceil-Ian Maralit
Front End Web Development Techdegree Graduate 19,434 Points
Ceil-Ian Maralit
.a{fill-rule:evenodd;}techdegree seal-36
Ceil-Ian Maralit
Front End Web Development Techdegree Graduate 19,434 Points

Hello! Thank you for taking time to respond. I've gone through a lot since I posted this question and I've seen the great function of using templates(I'm using pug by the way).

I'm also new to the back end environment now, what I just saw on the front end was linking using html etc.. so please correct me if I'm wrong.. I'm thinking that this is how it really works, building your site out of scratch using templates?

You said I can just link my JS file on my template file (e.g. index.pug) to select it.. do you mean like just doing this: extends app.js

?

Thank you so much! It helped a lot.

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

Ceil-Ian Maralit No worries! (: Well that's exactly how you make a website from scratch. A server to serve you data or files or even binary data and the front end to basically interact with the server or the UI. Mostly servers serve you data or handle REST APIs or Authentications or any DB(database) related operations. For example, this page has a UI to post questions and anyone can answer it, right? If you could the URL of this page, it says "/community/purpose-of-pug", the same URL decides which page to navigate to,. I'm pretty sure, they're using the same Fragments of UI everywhere in the community pages, but its the data that differs, right? So what's happening here is the UI makes a request to the server and the server goes out the DB and asks for the data. When the Data has been found on the DB, the server responds with the data to the UI and the UI gets rendered. Now, UI gets rendered based on the response from the server, right? Hence, it is called server side rendering. (:

Ceil-Ian Maralit
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Ceil-Ian Maralit
Front End Web Development Techdegree Graduate 19,434 Points
Ceil-Ian Maralit
.a{fill-rule:evenodd;}techdegree seal-36
Ceil-Ian Maralit
Front End Web Development Techdegree Graduate 19,434 Points

Wow! You explained that as clear as crystal. I honestly did not know that knowing back end after front end could be this exciting. Now I can't wait to take other courses to strengthen my knowledge. Thank you so much! You really helped me deal with this! :D

-Ceil