Okay, node.js + framework. Now what? 1

Looking more into SocketStream. This sounds great.

SocketStream is built on top of node.js, resolves around the popular single-page application (SPA) paradigm and utilizes HTML5 WebSockets, Socket.IO, Redis and other techologies to provide an extremely responsive experience for the web.

It’s effectively a complete-stack for all of your client and server development needs.

That from this great article on SS — though be aware that the article is now 3 years old, and the installation and example instructions are outdated now.

So SocketStream uses websockets rather than AJAX.  And SocketStream takes care of the server-side framework. What stores the data? What stores the media? What serves as the client-side framework?  What about templating?

  • Comprehensive support for client-side templates – use Hogan/Mustache/CoffeeKup/jQuery or write your own wrapper
  • Use optional code formatters (e.g. CoffeeScript, Jade, Stylus, Less, etc) by easily installing wrapper modules
  • Optionally use Redis for fast session retrieval, pub/sub, list of users online, and any other data your app needs instantly

Data Storage

Redis is a data structure server, which I guess is a way of saying database? But Hollow used Redis and MongoDB. Redis is open-source, networked, in-memory, and stores keys with optional durability. Here’s what the SocketStream FAQ says about Redis:

Should I use Redis?

Yes. SocketStream installs the Redis driver by default but does not require Redis to be running when developing your app (for convenience sake). However, as soon as you want to host your app for real, you need to be using Redis.

Redis is used in two areas of SocketStream – session storage and internal pubsub (used by ss.publish commands). You can enable Redis in your app with the following commands in your app.js file:

ss.session.store.use('redis');
ss.publish.transport.use('redis');

Pass any config as the second argument to either of the above commands as so:

{host: 'localhost', port: 6379, pass: 'myOptionalPass', db: 3}

Some of that is above my head, but it looks like I’ll need to figure that out eventually.

Templating

Okay, so templating with Mustache and jQuery which I know about. Hogan and CoffeeKup are new to me.

Stylus, a dreamy dynamic stylesheet language like CSS. Jade I’ll talk about in a moment.

CoffeeScript is new to me.  Looking at that. Oh hell dawg, I’d much rather use that than finicky and particular JavaScript. The developer wrote a free little internet book on CoffeeScript.

Okay, now looking again at templates.

Mustache is a simple web template system described as a “logic-less” system because it lacks any explicit control flow statements. The main principles are:

  • “logic-less”: no explicit control flow statements, all control driven by data.
  • strong “separating logic from presentation”: it is impossible to embed application logic in the Mustache templates.

A typical Mustache template:

Hello {{name}}
You have just won {{value}} dollars!
{{#in_ca}}
Well, {{taxed_value}} dollars, after taxes.
{{/in_ca}}

Given the following hash:

{
  "name": "Chris",
  "value": 10000,
  "taxed_value": 10000 - (10000 * 0.4),
  "in_ca": true
}

Will produce the following:

Hello Chris
You have just won 10000 dollars!
Well, 6000.0 dollars, after taxes.

CoffeeKup allows you to write scripts in 100% CoffeeScript. So an here’s an example:

doctype 5
html ->
  head ->
    meta charset: 'utf-8'
    title "#{@title or 'Untitled'} | My awesome website"
    meta(name: 'description', content: @desc) if @desc?
    link rel: 'stylesheet', href: '/stylesheets/app.css'
    style '''
      body {font-family: sans-serif}
      header, nav, section, footer {display: block}
    '''
    script src: '/javascripts/jquery.js'
    coffeescript ->
      $ ->
        alert 'Alerts are so annoying...'
  body ->
    header ->
      h1 @title or 'Untitled'
      nav ->
        ul ->
          (li -> a href: '/', -> 'Home') unless @path is '/'
          li -> a href: '/chunky', -> 'Bacon!'
          switch @user.role
            when 'owner', 'admin'
              li -> a href: '/admin', -> 'Secret Stuff'
            when 'vip'
              li -> a href: '/vip', -> 'Exclusive Stuff'
            else
              li -> a href: '/commoners', -> 'Just Stuff'
    section ->
      h2 "Let's count to #{@max}:"
      p i for i in [1..@max]
    footer ->
      p shoutify('bye')

Which though cool and practical, would have the temptation to have programming logic in your template. In my case, my templating needs are relatively simple I think.

Hogan.js is a templating solution from Twitter. It claims to be much like mustache, but much faster. Here’s an example:

 
<div class="timeline">
 
 <!-- load more button -->
 <button>{{message}}</button>
 
 <!-- tweet object -->
 {{#tweets}}
 {{> tweet}}
 {{/tweets}}
 
</div>

Jade is an Agent Development Framework, whatever that is. But it also provides some kind of templating. In the example created by SocketStream, we have:

wmodes$ cd ../../..
wmodes$ cd my_app/client/views/
wmodes$ ls
app.jade
wmodes$ cat app.jade
doctype html
html(lang="en")
  head
    meta(charset="utf-8")
    != SocketStream
    title Welcome
  body
    #content
      a(href='https://github.com/socketstream/socketstream')
        img(src='/images/logo.png', alt='SocketStream Logo', width=160, height=160)
      h1 Welcome to your new realtime app!

      // QUICK CHAT DEMO
      form#demo(onsubmit='return false')
        h3 Quick Chat Demo
        h5 Open this page in multiple tabs or browsers and type a message below
        #chatlog
        input(id='myMessage', type='text', autocomplete='off')

…which reminds me a bit of mustache above, but less structured. And being picky about whitespace.

There are lots and lots and lots of JavaScript templating solutions.

Other Stacks

So socketstream is a complete web stack with hooks for all sorts of things. There are other similar stacks out there, probably dozens. A few that have risen to my attention:

Looking at Meteor first:

Meteor, or MeteorJS is an open-source real-time JavaScript web application framework written on top of Node.js. While production-ready and used by a number of high-profile startups, Meteor allows for very rapid prototyping and produces cross-platform (web, Android, iOS) code. It integrates tightly with MongoDB and uses the Distributed Data Protocol and a publish–subscribe pattern to automatically propagate data changes to clients in real-time without requiring the developer to write any synchronization code. On the client, Meteor depends on jQuery and can be used with any JavaScript UI widget library.

It seems to be pretty full-service and has a great tutorial. that guides you all the way through the process of publishing your new app on the meteor site. However, I don’t know what kind of support they have for other modules.

Here is a great comparison of the differences between SocketStream and Meteor from the SS developer.

Now looking at MEAN.io:

MEAN refers to first letters of the four components of a free and open-source solution stack for building dynamic web sites. MEAN is a full-stack JavaScript platform designed for web applications. The components of the MEAN stack are as follows:

  • MongoDB, a NoSQL database;
  • Express.js, a web applications framework;
  • Angular.js, a JavaScript MVC framework for web apps;
  • Node.js, a software platform for scalable server-side and networking applications.

MEAN.js is a fork of MEAN.io:

MEAN.JS is a full-stack JavaScript open-source solution, which provides a solid starting point for MongoDB, Node.js, Express, and AngularJS based applications. The idea is to solve the common issues with connecting those frameworks, build a robust framework to support daily development needs, and help developers use better practices while working with popular JavaScript components.

From my few minutes of browsing, it feels like this is a much more DIY and possibly time-consuming solution for me.  It feels similar to the LAMP stack which is trivial to set up for an experienced sysadmin, but heartbreakingly difficult the first time for an amateur.

I’m open to more suggestions, if you can tell me why one is better than another so I have enough info to make my own decision.

Another fullstack, init.js, looks interesting.

Here’s a guide to all the various nodeJS frameworks, using lots of jargon I don’t know yet.

One comment on “Okay, node.js + framework. Now what?

  1. Reply aphid Jan 17,2015 12:42 am

    yeah, this is all perplexing. the upside is “it’s all javascript, client and server!”; the downside is that you’re pushed into learning frameworks that are … a lot more than javascript. Jade’s templates are … sorta like HTML but WHITESPACE MATTERS? uh, no thanks. I’ve been using Swig (another template engine, seems less offensive) with mongodb’s free online course for nodejs devs. my body, for whatever reason, rejects MVC/MVVM/etc. like a foreign organ.

Leave a Reply