Sharing Javascript Between Backend (Node.js) and Frontend (Browser)

I’ve always liked the idea of being able to reuse Javascript code in both Node.js (on the backend) and the browser (on the frontend). I finally ran into a situation this weekend where it was practical to do this and I was surprised by just how easy it was to do. I thought I’d throw my solution into a post. The code below is written in CoffeeScript.

# Define my class
class myClass
  # Define a method within my class
  doSomething: ->
    console.log("Hello world!")

# Add to exports for node, or window for browser
if typeof module isnt 'undefined' and module.exports
  module.exports = new myClass()
else
  this.myClass = new myClass()

First, we create a class named "myClass" and add a method to it. Then, with a simple if statement, we can determine whether we’re running this code in Node.js or in the browser and export the class accordingly. Let’s assume we’re compiling this down into "my-class.js".

In Node.js, we would use the class like this:

myClass = require("my-class")
myClass.doSomething()

In the browser, we would use the class like this:

<script type="text/javascript" src="my-class.js"></script>
<script type="text/javascript">
window.myClass.doSomething()
</script>

Grunt Deployment over SSH with Git

Grunt Logo

Grunt.js is a task runner that comes with various plugins for compiling, building, formatting, etc. within your project. I covered some of the basics of using this tool in my article about using Grunt Watch and LiveReload for real-time compilation.

I recently setup a simple deployment process using Grunt, so I thought I’d share the details. I found a couple deployment-related Grunt plugins out there, but they didn’t really suit my needs. Instead, I opted to simply use the grunt-ssh plugin to connect to my server and run the necessary commands to update, build and restart my application. Let’s take a look at a simplified Gruntfile.coffee.

Continue reading

Node.js Async Tutorial

Node.js

I’ve been doing a lot of backend development in Node.js recently. Node.js runs on a single threaded event loop and leverages asynchronous calls for doing various things, like I/O operations. While other languages will send a database query and wait there for the result to come back, Node.js will not. When you send a database query, Node.js will continue executing the code that comes after it, then jump back when the result is available.

Continue reading

Moving from CodeKit to Grunt Watch + LiveReload for Real-time JavaScript/LESS/SASS Compilation

Grunt Logo

Let me start by saying that I’m a big fan of CodeKit. It’s served me well for years and I continue to use it on many of my projects. With that said, I’ve found myself doing lots of Node.js development lately and have been using Grunt for various building tasks. Grunt is a task runner that has a ton of packages for doing things like compiling LESS/SASS into CSS, concatenating JavaScript, minifying, etc. It also has a package for watching files (the same way CodeKit does) and firing off certain tasks when they’re modified.

Continue reading

Ghost Blog Theme: Ice Breaker

Ghost Blogging Platform

Today was the public launch of the Ghost blogging platform (well, technically yesterday, I guess). If you haven’t heard of Ghost yet, check out this page (and video). In short, Ghost is a new, minimalist blogging platform. The project lead is John O’Nolan who previously worked at WordPress and created a Kickstarter project with the intention of building a more streamlined blogging platform (since WordPress has become rather bloated).

Continue reading