The JavaScript blog.


meteor books plugins databases servers apps mysql sponsored-content jquery

Your First Meteor Application, OData Server, ItemSlide.js

Posted on .

Your First Meteor Application

Your First Meteor Application

David Turnbull's Your First Meteor Application is a highly focused, beginner-friendly introduction to Meteor. David updates the book regularly when Meteor changes, so it's worth checking back every so often to look for new content.

You can read the book online or download the PDF for free. If you prefer video, there are also screencasts for $39.

OData Server

The OData Server (GitHub: gizur/odataserver, License: MIT, npm: odataserver) by Jonas Colmsjö is an OData server that's backed by MySQL. It's easy to drop into an Express project, and it's designed to work as a quick "mobile backend as a service" type of app.

It has a simple HTTP API, and Jonas has included usage examples for curl that show you how to create users, databases, and insert data. It actually does things like MySQL database and schema creation, so it requires a MySQL administrator account to work correctly.

If you're interested in this and want to quickly try it out, the advanced usage guide has instructions for deploying it to Docker.


ItemSlide.js (GitHub: itemslide/itemslide.github.io, License: MIT, npm: itemslide) by Nir Lichtman is a touch-friendly carousel.

With jQuery you can set it up like this:

var carousel = $('ul');  
carousel.itemslide({ swipe_out: true });  

And it has events for responding to user interaction:

carousel.on('pan', function(e) {});  
carousel.on('changeActiveIndex', function(e) {});  
carousel.on('changePos', function(e) {  
  console.log('new pos:', carousel.getCurrentPos());
carousel.on('swipeout', function(event) {  
  console.log('swiped out slide:', event.slide);

You don't have to use it with jQuery, but if you do you'll get things like mousewheel support.


books sponsored-content meteor react WebComponent

SceneVR: Node and WebGL 3D Scenes

Posted on .


For years I've wanted to make a WebGL version of Elite (or maybe Elite II). The technical trick to making it really compelling and native to the web would be if it streamed data with WebSocket to the client... maybe huge persistent galaxies could live on clusters of Node/io.js servers!

I'm never going to have the time to make anything like that, but Ben Nolan's SceneVR project (GitHub: bnolan/scenevr, License: BSD, npm: scenevr) seems like a fun way of experimenting with interconnected virtual reality worlds. The demo allows you to walk around a 3D world with links to various games. There's a Pac-Man game, a chess game, and some other cool stuff as well.

It works by streaming XML data to the browser from a Node server. The server uses Express, and the scenes rendered on the client use HTML-like markup with CSS:

  <box id="mycube" position="1 2 3" scale="1 1 1" style="color: #f07" />

The scenes can then be scripted with JavaScript, so you can add rules to create games:

document.getElementById("mycube").addEventListener("click", function(e){  

It even supports multiplayer games by streaming player events to each client. Editing scenes also pushes data to the client, so you can live edit and quickly preview the results.

Ben has added WebVR browser support, so if you've got an Oculus Rift you can actually view scenes in VR.


books sponsored-content meteor react WebComponent

Your First Meteor Application, CommonJS React Components, WebComponents

Posted on .

Your First Meteor Application

Your First Meteor Application

David Turnbull sent me Your First Meteor Application, a highly focused, beginner-friendly introduction to Meteor. One thing that's cool about this is book is David updates it regularly when Meteor changes.

You can read the book online or download the PDF for free. There are even screencasts!

CommonJS React Components

What do you do if you want to create reusable isomorphic CommonJS React components? You can install React with npm, but what's the ideal pattern for structuring these components? How should the CSS be managed?

Aaron Kaka has been working on an experiment to use CommonJS modules as a way of sharing UI components. The work is inspired by a blog post by Simon Smith, and you can find it on GitHub here: aaronkaka/commonjs-react-components.

This proof-of-concept uses events for all interactions, so knowledge of the internal library and its dependencies is not required. You can use styling through require statements -- component specific styling is scoped to the component.

It uses webpack and live reload, so it should fit in with a modern Node-based toolchain.

Using CommonJS modules and events should appeal to Node programmers who want to make reusable client-side components. If you're a little lost with React in Node, or CommonJS and React, then this repository will give you a head start.


Interest in WebComponents is growing, but unless you're involved with them it can be hard to see the benefits. Leon Revill has been working with them, and has written an article that outlines the basics of how to create WebComponents and why they're exciting. From What are WebComponents and why are they important?:

Once WebComponents are properly supported and established you should be able to write a WebComponent that can be used in all of your projects regardless of the other technologies used. Forget writing plugins for jQuery, directives for AngularJS and addons for Ember.js. Write once use many. This has a huge benefit and in my mind is one of the most significant benefits of WebComponents.

The article includes technical examples and addresses some concerns about the divergence between X-Tag, Polymer and Bosonic.


libraries meteor qt

Qondrite and Asteroid

Posted on .

There's a library for Meteor called Asteroid that allows you to connect any JavaScript front-end to a Meteor server. That means you can use Meteor with existing applications, or your preferred front-end framework.

Attila Csipa has created a new library called Qondrite (GitHub: achipa/Qondrite, License: MIT) that is a QML wrapper for Asteroid. QML, or the Qt Meta Language, is a declarative markup language based on JavaScript for creating mobile applications. It's used by KDE Plasma 5 and Unity.

Qondrite allows you to create Qt projects with Meteor backends. This seems like an ideal way to make an open source version of something like Parse, where you get a simple server-side system that has mobile support. I've never written any QML myself, but I'd be interested to see if Qt for iOS could be used with Qondrite.

Attila has posted a video where you can see the library in action: Meteor and Qt. If you want to install the library, take a look at the installation details in the readme. There's also a demo application with a small QML file:

import QtQuick 2.0

Item {  
  Loader {
    id: mainWindow

  Component.onCompleted: {
    if (Qt.platform.os === "android")

Notice how it forks for Android or desktop. This is also reminiscent of Xamarin.


apps ssh meteor

Share SSH Sessions with Nutty

Posted on .

The Nutty SSH sharing service.

Nutty (GitHub: krishnasrinivas / nuttyapp, License: GPLv3) by Krishna Srinivas is a Meteor application that allows SSH sessions to be shared via a browser. A host connects to a server which can then be shared with other people. Krishna suggests that this could be useful for pair programming or support.

The Nutty server needs some configuration before you can run it yourself -- you can set up Google authentication, and it needs Amazon S3 for uploading recordings to S3. If you want to use WebRTC then you can set up PeerJS as well.

It's an interesting example of Meteor and HTML5 being used to provide a service that would be traditionally run as a system-level daemon.