Phew! You don’t want to know how many examples, frameworks, and packages I’ve been downloading, trying out, and browsing lately… all to find a good starting point for further software development here at JeeLabs.
Driving this is my desire to pick modern tools, actively being worked on, with an ecosystem which allows me to get up to speed, leverage all the amazing stuff people keep coming up with, and yet stay firmly on the simple side of things. Because good stuff is what you end up with when you weed out the bad, and the result is purity and elegance … as I’ve seen confirmed over and over again.
A new insight I didn’t start out from, is that server-side web page generation is no longer needed. In fact, with clients being more performant than servers (i.e. laptops, tablets, and mobile phones served from a small Linux system), it makes more and more sense to serve only static files (HTML, CSS, JS) and generic data (JSON, usually). The server becomes a file system + a database + a relatively low-end rule engine for stuff that needs to run at all times… even when no client is connected.
Think about the change in mindset: no server-side templating… n o n e !
Anyway – here are all the pieces I intend to use:
Node.js – JavaScript on the server, based on the V8 engine which is available for Intel and ARM architectures. A high-performance standards-compliant JavaScript engine.
The npm package manager comes with Node.js and is a phenomenal workhorse when it comes to getting lots of different packages to work together. Used from the command line, I found npm help
to be great starting point for figuring out its potential.
SocketStream is a framework for building real-time apps. It wraps things like socket.io (now being replaced by the simpler engine.io) for bi-directional use of WebSockets between the clients and the server. Comes with lots of very convenient features for development.
AngularJS is a great tool to create very dynamic and responsive client-side applications. This graphic from a post on bennadel.com says it all. The angularjs.org site has good docs and tutorials, this matters because there’s quite a bit of – fantastic! – stuff to learn.
Connect is what makes the HTTP webserver built into Node.js incredibly flexible and powerful. The coin dropped once I read an excellent introduction on project70.com. If you’ve ever tried to write your own HTTP webpage server, then you’ll appreciate the elegance of this timeout module example on senchalabs.org.
Redis is a memory-based key-value store, which also saves its data on file, so that restarts can resume where it left off. An excellent way to cache file contents and “live” data which represents the state of a running system. Keeping data in a separate process is great for development, especially with automatic server restarts when any source file changes. IOW, the basic idea is to keep Redis running at all times, so that everything else can be restarted and reloaded at will during development.
Foundation is a set of CSS/HTML choices to support uniform good-looking web pages.
CoffeeScript is a “JavaScript dialect” which gets transformed into pure JavaScript on the fly. I’m growing quite used to it already, and enjoy its clean syntax and conciseness.
Jade is a shorthand notation which greatly reduces the amount of text (code?) needed to define HTML page structures (i.e. elements, tags, attributes). Like CoffeeScript, it’s just a dialect – the output is standard HTML.
Stylus is again just a dialect, for CSS this time. Not such a big deal, but I like the way all these notations let me see the underlying structure and nesting at a glance.
That’s ten choices, for Ten Terrific Technologies. Here are the links again:
- Node.js – https://github.com/joyent/node – S
- npm – https://github.com/isaacs/npm – S
- SocketStream – https://github.com/socketstream/socketstream – S+C
- AngularJS – https://github.com/angular/angular.js – C
- Connect – https://github.com/senchalabs/connect – S
- Redis – https://github.com/antirez/redis – S
- Foundation – https://github.com/zurb/foundation – C
- CoffeeScript – https://github.com/jashkenas/coffee-script – S+C (T)
- Jade – https://github.com/visionmedia/jade – C (T)
- Stylus – https://github.com/LearnBoost/stylus – C (T)
(S = server-side, C = client-side, S+C = both, T = translated on the server)
All as non-restrictive open source, and with all development taking place on GitHub.
It’s been an intense two weeks, trying to understand enough of all this to be able to make practical decisions. And now I can hardly wait to find out where this will take me!
Update – Bootstrap has been replaced by Foundation – mostly as a matter of taste.
Be sure to test WebSockets on Chrome, when I tested socket.io on Chrome, it would wait 1 second before opening the socket after the DOM was ready. In the end, I implemented my own communication layer on top of server sent events, and a fallback for non-compliant browser based on long-polling XHR.
Thanks for the warning, I’ll keep an eye on that.
Thanks for the great summary. May I suggest a table or some scheme that indicates which tools/packages are for client, server, or both?
Great idea, added – thanks.
Out of curiosity, have you made any decisions on what to use to store historical sensor data? Redis doesn’t seem like it’s designed to do that, or maybe I’ve misunderstood.
Very sharp observation! – No, no decision yet. I’ll definitely continue logging incoming data as text files, so that it can be replayed from scratch once I do figure out what to use. Redis should be fine for say the last 48 hours of raw data, so that’s probably what I’ll use initially – just to keep going.