Coding

Node.js + Express – Tutorial – PugJS Templating Engine (formerly JADE)

  • 00:00:00 I am welcome back to you no chance with
  • 00:00:03 you I promise that we would have a look
  • 00:00:05 at the different templating engines and
  • 00:00:07 I'm going to start with shade which is
  • 00:00:10 the default engine that shipped with our
  • 00:00:12 what our boiler plate here basically we
  • 00:00:15 set up I want to introduce you to that
  • 00:00:17 language how it works or how does
  • 00:00:19 templating engine works and how we can
  • 00:00:22 create our HTML files with it and output
  • 00:00:25 type content dynamically there let's
  • 00:00:27 start
  • 00:00:28 I open the lay out Dutch shade file in
  • 00:00:32 our fuse folder and this is the kind of
  • 00:00:35 route layout that our earth use are
  • 00:00:37 extending and here's the first feature
  • 00:00:40 we can well extend layouts and insert
  • 00:00:43 content dynamically so here for example
  • 00:00:46 in the layout the shape while providing
  • 00:00:48 a bicycle basic skeleton for all our
  • 00:00:51 layouts this is a basic HTML document
  • 00:00:55 skeleton and there we can anomaly enter
  • 00:00:58 well the specific content of our other
  • 00:01:02 layouts we'll get back to this a second
  • 00:01:04 because now you might wonder this is our
  • 00:01:06 HTML skeleton it doesn't really look
  • 00:01:08 like HTML right that's one of the most
  • 00:01:11 important things about Jade we don't use
  • 00:01:14 the standard HTML tags there but we use
  • 00:01:18 indentation to structure our document so
  • 00:01:22 the tag names are the same you have our
  • 00:01:25 doctype HTML at the beginning but at a
  • 00:01:27 normal HTML probably would have like
  • 00:01:29 like days right this would be how it is
  • 00:01:32 written a normal HTML type element and
  • 00:01:34 yeah document our HTML element might
  • 00:01:37 look like this and also we would have
  • 00:01:40 closing tags we don't have to some shade
  • 00:01:43 we don't have the smaller and greater
  • 00:01:46 signs to create our tags which has tag
  • 00:01:49 names and we use indentation to make
  • 00:01:52 clear in which well level will currently
  • 00:01:55 add and how we nest elements so we don't
  • 00:01:57 have opening and closing tags we only
  • 00:02:00 have the tag name and then you can think
  • 00:02:02 of
  • 00:02:03 all these tags which are indented one
  • 00:02:05 indentation to the right are inside say
  • 00:02:08 she melted therefore all these two
  • 00:02:12 elements here are inside the head tag
  • 00:02:14 and this lot of thing which I will
  • 00:02:17 explain the second is inside the body
  • 00:02:19 tag so for example if I want to create
  • 00:02:23 an unordered list here I would create
  • 00:02:25 our run or delays it as the default HTML
  • 00:02:28 select your element tag just without
  • 00:02:31 well the greater and smaller side
  • 00:02:35 operators this is my own route list now
  • 00:02:38 I'll hit enter it automatically indents
  • 00:02:40 for me otherwise I would have chest you
  • 00:02:42 well go one indentation to the right if
  • 00:02:45 you read my list item and well now I
  • 00:02:48 want to enter some text I want to
  • 00:02:50 display with with the opening and
  • 00:02:52 closing list item tag I just have its
  • 00:02:55 base to have an empty space here and
  • 00:02:57 then I enter my my text whenever I want
  • 00:03:01 to output just like that normal text now
  • 00:03:03 if I save this and reload this page you
  • 00:03:07 can see we now get this bullet point
  • 00:03:09 here and if I have a look at the source
  • 00:03:11 code we can see it's inside this
  • 00:03:13 unordered list element this is basically
  • 00:03:16 how we structure our code here we were
  • 00:03:19 using this indentation and we're
  • 00:03:21 outputting text between two elements
  • 00:03:23 just by writing it behind the element of
  • 00:03:27 an empty space between now if we have
  • 00:03:30 more text and we don't want to like
  • 00:03:32 enter this all in one line you will say
  • 00:03:35 like this it's very very long it can
  • 00:03:38 also enter a new line but now we would
  • 00:03:41 think of this as a new tag which you
  • 00:03:43 would not recognize therefore I enter a
  • 00:03:45 dot here indent indent is to the right
  • 00:03:49 and now I can have more lines here if I
  • 00:03:52 save this and reload you see you get
  • 00:03:55 this new list item and all this text is
  • 00:03:57 inside this one list item element here
  • 00:04:00 even though with multiple lines here if
  • 00:04:03 I remove the dot you can see now it's
  • 00:04:06 picking this are separate elements can
  • 00:04:08 already see you here my editor and if I
  • 00:04:10 will
  • 00:04:10 well it's kind of broken because we have
  • 00:04:14 this DSM whatever element which are
  • 00:04:16 obviously not recognized so the start
  • 00:04:19 here is important to have a multi-line
  • 00:04:21 string following this tag so I hope this
  • 00:04:25 is clear we use our HTML tags here how
  • 00:04:28 invitation is important for nesting all
  • 00:04:32 these elements and that we don't have to
  • 00:04:34 open enclosing elements now we can out
  • 00:04:36 text there now you might say okay this
  • 00:04:41 is very nice
  • 00:04:41 but I also might have some CSS classes
  • 00:04:45 or some attributes I want to attach
  • 00:04:47 right well you sure have so let's go one
  • 00:04:52 to the left so that we run the same lab
  • 00:04:54 less unordered list and here I want to
  • 00:04:58 create an input element and it should be
  • 00:05:00 of type text how do I do this we use
  • 00:05:05 parentheses for this now in these
  • 00:05:08 parentheses we can specify all
  • 00:05:10 attributes you want to attach this HTML
  • 00:05:13 element Blahnik type equals and then
  • 00:05:18 string text let me save this and reload
  • 00:05:25 no now we get this input element here
  • 00:05:30 and as you can see you got this type
  • 00:05:32 text element attached to it now if you
  • 00:05:34 also went to want to add a class and
  • 00:05:36 let's say an ID we do this a class set
  • 00:05:42 by just adding a dot and then the class
  • 00:05:44 name so class name this will add the CSS
  • 00:05:47 class class name and then if we had a
  • 00:05:50 hash tag we can't add an ID saved us
  • 00:05:54 know again inspect this as you can see
  • 00:05:58 it has the ID Eddie ID and the class
  • 00:06:01 class name if you're using a mat which
  • 00:06:06 is a plug-in for many editors which you
  • 00:06:08 see that the – tool allows you to write
  • 00:06:10 kilobyte or an engine or Mille in their
  • 00:06:13 HTML tags by just writing dot class name
  • 00:06:16 getting tablet
  • 00:06:17 if that's a similar syntax here were
  • 00:06:21 adding CSS class with a dot in front of
  • 00:06:24 the name and IDs with a hashtag in front
  • 00:06:27 of the name so that's one important
  • 00:06:29 thing now here's another important thing
  • 00:06:32 in the title of our layout here you see
  • 00:06:35 that I got title equal and not titled
  • 00:06:38 space if I remove the equal sign I
  • 00:06:41 reload this page watch this tile on the
  • 00:06:44 tab here it's now titled if I add the
  • 00:06:48 equal sign and reload it's expressed
  • 00:06:52 because title if we have an equal sign
  • 00:06:56 right after the tag name refers to a
  • 00:07:00 variable which is injected so to say
  • 00:07:03 into this template which is added and it
  • 00:07:06 is done through well known in this case
  • 00:07:08 you're in our index wrote here what
  • 00:07:11 we're rendering already x-file referring
  • 00:07:14 you to our index layout or index jade
  • 00:07:18 file we're setting this title variable
  • 00:07:20 Express so if it changed this year to
  • 00:07:23 cool huh and save this and reload o
  • 00:07:29 restart my server and then reload you
  • 00:07:34 can see I got cool huh so this is how we
  • 00:07:37 insert variables this chava script
  • 00:07:41 object already set is the last video of
  • 00:07:42 the thing into our template and in the
  • 00:07:45 template we cannot output it with this
  • 00:07:49 but by using just a variable name we set
  • 00:07:52 in this chava script object but this
  • 00:07:53 equal sign is important to tell Jade hey
  • 00:07:55 don't render the following thing as text
  • 00:07:57 use this variable is a variable and use
  • 00:08:01 whatever this variable contains now
  • 00:08:05 report the feature is we might have if
  • 00:08:09 statements here so we might have if
  • 00:08:12 let's say condition is true then we want
  • 00:08:17 to display just let's say paragraph
  • 00:08:20 which says it's true obviously we don't
  • 00:08:24 have condition yet and you could either
  • 00:08:27 just specify in a row
  • 00:08:29 and add another variable you let me do
  • 00:08:32 this condition should be let's say it's
  • 00:08:35 true restart the server and reload this
  • 00:08:38 page now you can see it's true and if I
  • 00:08:41 set it to false here and again restarted
  • 00:08:46 do this it's gone even though it's still
  • 00:08:49 in my shade farm because here we check
  • 00:08:53 on this condition very important now
  • 00:08:58 this is we can if use if conditions by
  • 00:09:02 the way we can also define variables
  • 00:09:05 inside this shade template if we need
  • 00:09:07 you for any reason we can quickly do
  • 00:09:10 this by adding a – a – a den of our
  • 00:09:12 condition equals true now this is always
  • 00:09:17 true if I and I only does the template
  • 00:09:20 that we need to know need to restart my
  • 00:09:22 server if I'm not reload we can again
  • 00:09:24 see this even though we're still passing
  • 00:09:27 it as false here but I'm overwriting it
  • 00:09:29 in my layout by well setting it
  • 00:09:32 basically as a new variable okay so this
  • 00:09:35 is clear we can set variables we can use
  • 00:09:37 these control structures we are
  • 00:09:39 obviously not classic HTML tags or so
  • 00:09:44 tags but added by try and change
  • 00:09:46 templating engines
  • 00:09:47 we may also loop so let me say I have a
  • 00:09:53 number variable oops
  • 00:09:55 thank you variable which I will call
  • 00:09:59 just any array and this should just be
  • 00:10:04 well an array of three numbers now
  • 00:10:07 notice that I never have a semicolon
  • 00:10:09 anything like this at the end because in
  • 00:10:13 Jai templating engine you do everything
  • 00:10:16 with indentation there is no need to
  • 00:10:18 tell what an end a word when a line ends
  • 00:10:21 because what indentation and line breaks
  • 00:10:24 are the way how you structure your
  • 00:10:26 element or your document so this is my
  • 00:10:30 variable and now I want to create a new
  • 00:10:37 loop I can say for each value this
  • 00:10:40 we'll be dynamically created in my any
  • 00:10:43 array here I want to do something let's
  • 00:10:48 say I wanted to long after the new
  • 00:10:50 paragraph with this value now again
  • 00:10:53 using this equal sign make sure I don't
  • 00:10:55 want to output a text of value but I
  • 00:10:57 want to refer this value variable which
  • 00:11:00 I'm creating here so let me save this
  • 00:11:03 and reload and now you can see I got one
  • 00:11:05 two three here just how we use loose now
  • 00:11:08 the last important thing I want to cover
  • 00:11:10 this with you is this block thing maybe
  • 00:11:13 you already wondered that in this
  • 00:11:15 index.js file in our route we're
  • 00:11:18 rendering a route or a few called index
  • 00:11:20 and we do have an index file here in
  • 00:11:23 next shade but I was making all changes
  • 00:11:27 in the layout of change file and yet
  • 00:11:29 well it appeared here the reason is let
  • 00:11:34 me get rid of all of that that as I said
  • 00:11:37 at the beginning this layout serves as
  • 00:11:40 our basic layout as the skeleton which
  • 00:11:42 outer layers reuse and extend and add
  • 00:11:45 their content into it and we can provide
  • 00:11:48 basic hooks in our skeleton where we
  • 00:11:51 want our inheriting layouts or views to
  • 00:11:55 be able to insert content we define such
  • 00:11:58 hooks with block keyword so we're
  • 00:12:02 setting block content here and this
  • 00:12:04 means this is a Content block which can
  • 00:12:07 be used by our views extending this
  • 00:12:10 layout to enjoyed something let's see
  • 00:12:14 how this works in the index touch a file
  • 00:12:16 here you can see we're having a
  • 00:12:20 declaration begin moves as extends
  • 00:12:22 layout which just says this view this
  • 00:12:25 document is based on this layout of a
  • 00:12:29 file it's the same but add something to
  • 00:12:31 it it inherits from this file so we're
  • 00:12:34 extending the slay out this layout name
  • 00:12:37 obviously has to match this layout name
  • 00:12:39 here before the dot shade and then we're
  • 00:12:42 saying and what we add something
  • 00:12:44 document but I can't just write it here
  • 00:12:46 right this doesn't not work because this
  • 00:12:50 layer Chaffin is closed in itself we
  • 00:12:53 only provide these hooks where an
  • 00:12:56 extending layout may enter something so
  • 00:12:59 recording this blog content here and in
  • 00:13:02 here work again having this blog content
  • 00:13:05 and by desperate and if I hey I want to
  • 00:13:08 enter something into this blog content
  • 00:13:11 and this is what I do insert I again
  • 00:13:15 insert a title expressed along that's
  • 00:13:18 why it's appearing YouTube and then
  • 00:13:20 again I have a paragraph with again
  • 00:13:22 using this title oh and here we see
  • 00:13:25 another notation if we have a mixture of
  • 00:13:28 normal text add a variable we enter this
  • 00:13:32 variable by using hashtag and then curly
  • 00:13:35 braces and the variable name between the
  • 00:13:38 curly braces too well basically injure
  • 00:13:41 this variable T content of this variable
  • 00:13:43 inside a normal text this is how we work
  • 00:13:47 with the J templating engine to serve
  • 00:13:49 the very basics and I will start working
  • 00:13:52 with that in our no chairs projects but
  • 00:13:55 I will show our templating language is
  • 00:13:57 food out the next week is two so I hope
  • 00:14:01 this helps you understand this
  • 00:14:04 templating language and of course you
  • 00:14:06 will also learn more when we're actually
  • 00:14:08 using it in the next videos see you
  • 00:14:10 there bye