Node at Work: A Walkthrough

by Garann Means

20 Reader Comments

Back to the Article
  1. Is Node.js powerful enough to replace PHP?
    Copy & paste the code below to embed this comment.
  2. Another option for controlling AJAX responses is Robohydra written by Opera. It gives you an admin interface where you can easily attach and detach responses, however I would first recommend going through the article just to have an understanding of how the node.js underbelly works in this situation.
    Copy & paste the code below to embed this comment.
  3. @Daniel Grocock - That’s a pretty broad question.. I think the correct answer is: probably. It really depends on what you need to do, though. It likely won’t come down to an issue of power so much as whether using Node offers an advantage for the kind of work your app is doing. @Matt Frysh - Absolutely, good call. Once you’re comfortable with generic tools and modules that fit a wide range of use cases, there’s a ton to explore to abstract away boilerplate code for more specific tasks.
    Copy & paste the code below to embed this comment.
  4. I was able to get the Cool Art Store site to render just fine on a unix box once I unblocked port 3000. You may want to point this out, since any decent firewall closes off all ports by default and those which are needed for some purpose have to be explicitly opened. It looks like you are using a model-view-controller framework here but without a longer introduction most of your excellent article is lost on me. I’m sure I need to study the documentation better—for example, learn about Express and XHR. Thanks for a most helpful getting-started download.
    Copy & paste the code below to embed this comment.
  5. Interesting idea, but in my opinion using Node.js for a simple mockup with a handful of templates is overkill. Node.js is still a very new technology, and it has a significant learning curve for the uninitiated. What’s more, the main feature of Node.js is asynchronous I/O. For the example given in this article, virtually no I/O takes place (minimal file reading, no database, no socket / network stuff). So, what’s the payoff in using Node.js instead of a more established technology? I’ve built basic mockups with templates on several occasions, over the years, using PHP (by itself, without a CMS or framework). Write some clean template files (e.g. for base, header, footer, article, sidebar, etc). Define structured data in some associative arrays. Really quick ‘n’ easy. The example presented in this article isn’t rocket science, and it isn’t anything that’s never been possible before now. The only reasons that I can really think of, for building such a simple tool in Node.js, would be (a) for novelty’s sake; and (b) as a beginner learning exercise in Node.js.
    Copy & paste the code below to embed this comment.
  6. @Jeremy, I’m extremely grateful that Garann published these articles because otherwise I’d never have looked at node.js. My experience is that any tool that offers good mockups with the option to make those mockups a lot more complex is worth looking at and implementing. All programming languages and web-based technologies are difficult to learn. The term “mockup” can mean different things to different people, so I would say that any tool that offers a way to render and inspect the final design and its many interactions at low cost is worth investigating and working with. It is up to the user to squeeze some juice from the tool in light of his or her particular project. Garann presents a technology that is interesting to explore.
    Copy & paste the code below to embed this comment.
  7. @Bob Cochran - That’s a good point about ports. Thanks for adding it - I hadn’t even considered it. If you mean Express when you mention MVC, it definitely has much more power than what’s shown here, but it’s also a great tool for getting started. And, as you mention later, it can be extended into something much more involved, which is why I’m a fan of the framework. @Jeremy P Epstein - The two main reasons I’d choose Node for this over PHP would be 1) being able to share resources between the client and server, and 2) not knowing PHP. The latter is an annoyance I feel personally, as a former .NET and Java developer. The former, to me, is the big payoff. Especially for mocking-up (but also for production where possible) I like the DRYness of not translating logic and templates for two different languages. As single-page apps become more prevalent and more logic exists on the client, this becomes more and more valuable in my non-mockup work, and starting in Node makes it really easy. You’re absolutely correct that this demo doesn’t show off Node’s real strengths in terms of what you can do when everything is async. But it’s only meant to help people unfamiliar with Node get comfortable using it. I’d love to see another more focused article on A List Apart someday talking about some of the awesome possibilities it opens up!
    Copy & paste the code below to embed this comment.
  8. This is the start of my 4th night of working with Node, Express, and doT. It is a big challenge for me. I downloaded the “coolartstore” code from GitHub, got the index.html page from that to render completely as a check on how correctly I had installed Node and also whether whether there were networking issues. Then I set out to create my own page, my own template, and my own app, using coolartstore as a guide. My goal: create a doT template which can be rendered to hold the heading “Hello world from Bob”, and then move that template inside the index.html content. The name of the template is hello.dot. The template renders just fine, that is I can go to http://localhost:3000/hello and see the rendered template. Since it is just an h2 heading inside a div, it of course shows on the browser as black text on a white background. The index.html page renders just fine, too: I can go to http://localhost:3000/ and see a the page rendered very nicely in coolartstore regalia, since I reused the css. I took out all the coolartstore markup and replaced it with a line of my own, an h1 heading. Only the header and footer content shows. I can’t get the template to render inside the index.html page. I closely read this article each day. I have two printed copies of it with copious notes penned in the margins. I believe I have to load the hello.dot template into index.html using javascript that is in the script.js file from coolartstore. That must be what is escaping me. I thought Express was using some magic in app.get to cause the template to be injected into the index.html. Since I’m new to JavaScript, that is a fun challenge, too. I’m aware that the Javascript is actually using jQuery. I’m hoping to use plain old Javascript since jQuery would add more complexity to my learning curve. Tonight I’m hoping to figure out how to get my hello.dot template to work inside the index.html. Slowly I am succeeding.
    Copy & paste the code below to embed this comment.
  9. The index.html page renders just fine, too: I can go to http://localhost:3000/ and see a the page rendered very nicely in coolartstore regalia, since I reused the css. I took out all the coolartstore markup and replaced it with a line of my own, an h1 heading. Only the header and footer content shows. I can’t get the template to render inside the index.html page.
    デジカメ撮影の方法
    Copy & paste the code below to embed this comment.
  10. @Bob Cochran - You’re correct, you’ll need to modify script.js to load and render your new template. Wanting to start with vanilla JavaScript instead of jQuery is a noble goal, but it might be easier to begin by substituting your template for the templates currently being loaded with $.get(), then replacing everything in the init() function with a simple assignment to innerHTML for an element that exists in your new index.html page. Hope you’re able to get it working!
    Copy & paste the code below to embed this comment.
  11. @Garann—Thank you very much for your help. I’m still playing with trying to code JavaScript myself. I’m stubborn and trying to succeed with it without using jQuery. I hope to succeed with an XMLHttpRequest at some point. I can see the results of the http requests because I turned on the logging feature in Express. For instance I see the GET for template tmpl/hello.dot showing up in the console log, but I can’t “find” the actual template content (not yet anyhow.) It took me a while to understand that an HTTP 304 response means no file data will be returned in the response object. It is in the browser cache. I learned how to code a time stamp and append that to the tmpl/hello.dot URL, and now the GET has a 200 status code, but I still need to find the actual data. I will read about the XMLHttpRequest documentation on the W3C site and keep trying. If all else fails, I will use jQuery and hope to go on and learn the techniques I missed later.
    Copy & paste the code below to embed this comment.
  12. I’m still working on doing a direct XMLHttpRequest for my template file “tmpl/hello.dot”. I’m closer to success but not quite experiencing success yet. If you issue an XMLHttpRequest and set the responseType to “document”, as one would seem to need to do for html, and then display all of your response headers that come back from the server in an alert box (a lovely beginner’s debugging method), you will notice that Express will list the mime type of the content as ‘application/msword’. Well, normal.dot has been around quite a long time as a Microsoft Word template, right? So it is understandable if Express thinks a dot template is something from Microsoft Office. This affects what data is going to be returned in the entity body of the response. I used the overrideMimeType method to change the final mime type to ‘text/html’ and now a reference to, e.g. this.response is returning something like: “HTML-object’, so I think I am getting warmer. I will continue working on this puzzle later this evening. I’m learning useful stuff—I think—and hope to succeed with continued patient try, try, try again. There’s always jQuery if I flub it.
    Copy & paste the code below to embed this comment.
  13. I succeeded at last! Reading the whatwg.org documentation for asynchronous XMLHttpRequest helped a lot, and getting a few quick lessons on Firebug and then just examining the Document Object Model output helped even more. My JavaScript is slowly improving. Now I have the beginning of a vegetable gardening website that I can mock up. I focused so much on the XMLHttpRequest stuff that I got sidetracked from learning and using Express, but that is okay, I am happy to be on a success track now. I’m still learning. Now if I can put Young’s mapping tutorial to use in a Node.js context, I might just have a gardening website that will prompt visits to the actual gardens.
    Copy & paste the code below to embed this comment.
  14. Node does make an excellent platform for mockups. However, I highly recommend using Lineman.js (built on grunt/node) that makes it even easier to get up and running with client-side webapps. I forked the Cool Art Store demo project and created a ‘lineman’ branch to show how easy it is to build mockups and other fat-client webapps with Lineman. I also wrote up a blog post on some of the benefits you get with Lineman.
    Copy & paste the code below to embed this comment.
  15. While all this reading was clear, and when I started to do the template on javascript did not work: (, http://www.onlineessay.us/essays/essays-for-sale.html right now I will re-read :)
    Copy & paste the code below to embed this comment.
  16. If you think Francisco`s story is super,, five weeks ago my brothers mother in-lw basically broght in $4217 sitting there an eleven hour week from there apartment and their roomate’s step-mother`s neighbour done this for nine months and recieved a check for over $4217 parttime from a laptop. use the information here… http://m3mi.com/3621CHECK IT OUT
    Copy & paste the code below to embed this comment.
  17. Interesting idea, but in my opinion using Node.js for a simple mockup with a handful of templates is overkill http://eduhelps.com/narrative-essay-topics-for-college-students/
    Copy & paste the code below to embed this comment.
  18. My neighborhood is Richmond Hill. It has been my home for as long as I Can remember and I just love it the way it is http://eduhelps.com/my-neighborhood-essay-sample
    Copy & paste the code below to embed this comment.
  19. Payday UK is your place for quick cash without the hassle and wait of a bank loan application paydayuk.us
    Copy & paste the code below to embed this comment.
  20. hmmm
    Copy & paste the code below to embed this comment.