Meteor - Node.js for the humanities

Introduction

At Habré several times mentioned about the project Meteor , founded in 2011 by seven web-technology enthusiasts from San Francisco. In fact, Meteor is just an add-on over node.js, which itself has not even reached the release version yet. Nevertheless, the project has collected more than seven thousand subscribers on github and received $ 11 million investment.
Why so popular? The point is in the authors' statement that they want to radically rethink the way of writing modern web-based applications in the direction of its simplification. It’s no secret that writing code on a pure node.js turns the brain pretty hard and forces you to use different crutches. in the form of control flow of funds. At Meteor, the authors say, even a humanist can write cool apps.
Well, check it out. There is: 1 humanities sociologist who closed the session and wanted to switch to something easier after Parsons and Simmel, a computer with Ubuntu 12.10 and an installed node.js (do not ask how it turned out to be a sociologist).

We will be inspired by the promises of developers, a beautiful girl member of the team, and let us begin.

Installation

Installation is elementary - we write in the terminal

$ curl https://install.meteor.com | sh 

Create and run the first application

In order to create the first application, we write in the terminal

 $ meteor create <_> 

To start, you must write the word meteor in the application directory

 $ cd <_> $ meteor 

Go to http: // localhost: 3000 / and see our Hello world
Yes, guys do not lie, nothing complicated, even hello world wrote for us.

Simple blog

But we need something poizaboristey. Let's write, for example, a simple blog.
Disclaimer: - meteor ( node.js) .

Structure

Meteor professes the ideology of "One code on the server and the client." This is expressed in the fact that the code from all .js-files in the project (.coffee is also valid when installing the corresponding smart package) except for those in the server , client and public subdirectories are executed as on the server side in node.js (via fiber), so in the user's browser.
The code from the server directory can only be executed on the server, from the client - on the client, and in public , where static files are stored, it should not be at all. We also have the logical variables Meteor.isClient and Meteor.isServer , which take on different values ​​depending on where the code is executed.
The same applies to .css and .html files - they can be scattered throughout the project. Meteor will find and assemble them together.
There is another special directory test, from which nothing is loaded by default.
It is also necessary to understand that meteor is such a hodgepodge of many technologies, so pure javascript may be quite a bit. jQuery and Underscore rule the ball here. No need to install anything, just write as you used to. Handlebars , an advanced version of Mustache, is used as a template engine. Communication with the MongoDB database (promises support and other options) is done with the help of Minimongo ( minimongo.com seems to promise a pleasant work with this wrapper).
In this example, the Foundation will be used as the css framework, which I like more than the similar Twitter Bootstrap, but this is a matter of taste.

Output records

Let's start with accessing the database. On the server in the .js file we will create a new collection in which all our records will be stored.

 Posts = new Meteor.Collection("posts"); 

In the same place, we set the initial values:

  Meteor.startup(function () { //       if (Posts.find().count() === 0) { var posts = [ { title: "Title one", text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et iure porro sunt repudiandae amet saepe asperiores commodi repellendus hic accusamus obcaecati ipsum modi magnam nulla magni vitae ea voluptates dignissimos!", published: (new Date()).toLocaleTimeString() }, { title: "Title two", text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa natus mollitia similique accusamus minus harum magnam eum pariatur rerum fugit ducimus sapiente asperiores quidem molestias repudiandae consequuntur repellendus dolorum placeat.", published: (new Date()).toLocaleTimeString() } ]; for (var i = 0; i < posts.length; i++) { Posts.insert({ title: posts[i].title, text: posts[i].text, published: posts[i].published, }); } } }); 

Then create a Handlebars record display template and name it stream:

 <head> <title>Blog</title> </head> <body> <div class="row"> <div class="twelve columns"> {{> stream}} </div> </div> </body> <template name="stream"> {{#each posts}} {{> post}} {{/each}} </template> <template name="post"> <div class="panel"> <h2>{{title}}</h2> <p>{{{text}}}</p> <!--    ,  HTML     --> {{published}} </div> </template> 

... and derive through it the initial values.

  Template.stream.posts = function () { return Posts.find({}, {sort: {published: -1}}); }; 

So we brought all the entries to the main page.

Adding and deleting records

In order to add your posts, first create a new editor template with the appropriate add form:

 <template name="editor"> <h1> </h1> <label> <br> <input type="text" id="title-area" placeholder=""> </label> <label> <br> <textarea type="text" id="editor-area" placeholder=""></textarea> </label> <button id="submit-post" class="button radius"></button> </template> 

The next step is to create an event handler that, when you click on a button, will add the contents of the fields to the database. The added information will be immediately displayed on all clients.

  Template.editor.events({ "click #submit-post": function() { var published_date = new Date(); Posts.insert({ title: document.getElementById("title-area").value, text: document.getElementById("editor-area").value, published: published_date.toLocaleTimeString() }) } }); 

To remove unwanted entries from the database, create a new event handler:

  Template.post.events({ "click .remove": function () { Posts.remove(this._id); } }); 

... which will be tied to the corresponding box in the entry template.

 <template name="post"> <div class="panel"> <h2>{{title}}</h2> <p>{{{text}}}</p> <span class="remove alert radius small button"></span> {{published}} </div> </template> 

Thus, we got the simplest application in a few lines, with the functionality of displaying, adding and deleting records.
It is worth noting that due to the "reactivity" of the meteor, all operations with the database will instantly be displayed to all users. To prevent this behavior, you need to remove the package responsible for this case:

 meteor remove autopublish 

The example is simple, if not primitive. But even he shows that thanks to the user-friendly interface provided by this framework, a person far enough from web development can use technologies that only a few years ago were available only to highly qualified developers (sockets, dynamic updates, js on the server, document-oriented databases). data).
However, in skepticism in comments to other posts about Meteor, we can say that not everyone likes such a radical simplification. Representatives of the "old guard" grumble: " Another framework! Not canonical. Only assembler, only hardcore! ". As a sociologist, it seems to me that this position is to some extent a consequence of the reluctance to lose its exclusive status of professionals working with node.js.
However, I am sure that movement towards clarity and simplification is an undoubted benefit. Professionals, if they really are, will be able to stand out in an expanded market. And many IT enthusiasts working in other areas, and therefore not having time to translate their ideas in this area, will receive a wonderful tool for creativity and may create many web applications that solve their highly specialized problems that a professional developer may not know.
PS: if this topic is interesting to the community, you can write another one or two articles describing the introduction of additional blog functionality: editing posts, adding tags and categories, creating user accounts, delineating access rights.