StepByStep Website TUT: node, express, jade, mongodb

Post all your tuts or request for tuts here.
Post Reply
User avatar
Verahta
Posts: 441
Joined: Wed Aug 24, 2011 1:50 am

StepByStep Website TUT: node, express, jade, mongodb

Post by Verahta »

Thought I would share (author assumes you are at least familiar with HTML5/CSS3/JS):
THE DEAD-SIMPLE STEP-BY-STEP GUIDE FOR FRONT-END DEVELOPERS TO GETTING UP AND RUNNING WITH NODE.JS, EXPRESS, JADE, AND MONGODB

SET UP THE FULL STACK AND HAVE A WEBPAGE RUNNING IN 30 MINUTES. MAKE IT TALK TO YOUR DB IN ANOTHER 30.

By Christopher Buecheler

NEW: Updated for ExpressJS v4!
http://cwbuecheler.com/web/tutorials/20 ... ess-mongo/
"In order to understand recursion, one must first understand recursion".
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: StepByStep Website TUT: node, express, jade, mongodb

Post by Jackolantern »

Nice find! One of these days I will get into Jade, but for now I am definitely a bigger EJS fan. Jade is a descendant of HAML, which is basically a markup-shortening "language". Like many things in node, it came to node from Ruby on Rails.
The indelible lord of tl;dr
User avatar
Verahta
Posts: 441
Joined: Wed Aug 24, 2011 1:50 am

Re: StepByStep Website TUT: node, express, jade, mongodb

Post by Verahta »

EJS is Express.JS? It's the same as Jade? I thought they were different in what they do?
"In order to understand recursion, one must first understand recursion".
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: StepByStep Website TUT: node, express, jade, mongodb

Post by Jackolantern »

Verahta wrote:EJS is Express.JS? It's the same as Jade? I thought they were different in what they do?
EJS and Jade exist separately from ExpressJS. EJS and Jade are templating engines that help you to construct views for use with ExpressJS. ExpressJS includes Jade out of the box, but it is a separate project (even though they were created by the same person). EJS is an alternative, and a bit easier to pick-up for people without any HAML experience.

For example, here is a small view made with EJS:

Code: Select all

<h1><%= title %></h1>
<ul>
    <% for(var i=0; i<supplies.length; i++) { %>
        <li>
            <a href='supplies/<%= supplies[i] %>'>
                <%= supplies[i] %>
            </a>
        </li>
    <% } %>
</ul>
EJS stands for "Embedded Javascript", and you can see why it is called that, particularly on the third line with the FOR loop. The <% %> tags denote where Javascript is being added to the page. The ones that are <%= supplies %> are iterating through an array called supplies that was sent into the view from the route.

Here is an example in Jade (not the same page or function; I unfortunately couldn't find a side-by-side comparison very easily):

Code: Select all

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) {
         bar(1 + 5)
      }
  body
    h1 Jade - node template engine
    #container.col
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!
      p.
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.
As you can see, you can just write logic right into the view (like with the IF/ELSE inside the body). Basically, Jade is almost like HTML if you dropped the angle-brackets and closing tags, and instead relied on indentation to define nesting.

This is what the Jade view above would generate (assuming the youAreUsingJade variable was sent from the route and was true):

Code: Select all

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script type="text/javascript">
      if (foo) {
         bar(1 + 5)
      }
    </script>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.
      </p>
    </div>
  </body>
</html>
The indelible lord of tl;dr
User avatar
Verahta
Posts: 441
Joined: Wed Aug 24, 2011 1:50 am

Re: StepByStep Website TUT: node, express, jade, mongodb

Post by Verahta »

I see, thanks. Have you ever used EmberJS?
"In order to understand recursion, one must first understand recursion".
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: StepByStep Website TUT: node, express, jade, mongodb

Post by Jackolantern »

I started to look into it, but that was about the time that AngularJS started completely taking over. From what I saw, I think I would like Ember's style better. I even have a physical book about Ember sitting right behind me that I never looked at because I pre-ordered it from Manning when pre-orders were on sale, and it was supposed to be coming out in only 2 months. It kept getting pushed back, and finally almost 11 months later, I received my book, but it was long after I had moved on from trying to learn it. I may still come back to it sometime lol.
The indelible lord of tl;dr
User avatar
Verahta
Posts: 441
Joined: Wed Aug 24, 2011 1:50 am

Re: StepByStep Website TUT: node, express, jade, mongodb

Post by Verahta »

Finally got some time to do the tutorial. Behold! My first ever Node based "app" 8-) It's just grabbing user names data from mongo and displaying their email addresses as mailto links on the screen:

Image
"In order to understand recursion, one must first understand recursion".
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: StepByStep Website TUT: node, express, jade, mongodb

Post by Jackolantern »

Nice! :)

I do have to say I love node, but probably will not be able to find any work in it in my area. It is all .NET around these parts lol
The indelible lord of tl;dr
User avatar
vitinho444
Posts: 2825
Joined: Mon Mar 21, 2011 4:54 pm

Re: StepByStep Website TUT: node, express, jade, mongodb

Post by vitinho444 »

I'm going to check this out!!! And barely started and already laughed:
There are approximately one hundred million tutorials on the web for getting a "Hello, World!" app running with Node.js. This is great! It's especially great if your goal is to greet the world and then give up on your web career and go spend the rest of your life as, like, a jockey or something.
I don't know what express or jade is, dont know either what mongodb does more than mysql ill just learn it for the sake of learning new stuff :D
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
Post Reply

Return to “Tutorials”