First Steps to the MeteorJS Universe

If you are interested in client-side programming, then as I probably could hear about Meteor, which is no longer a new web framework that refers to the so-called full-stack frameworks that are gaining popularity. About him already wrote on Habré, so as not to duplicate information, you can read here or here . I had heard about the meteor for quite some time, but still did not dare to touch it. And so, the next weekend came, and again I came across him. This time I decided to honestly try what it is. Maybe this post will give someone a small impetus to start learning, or at least familiarize yourself with this tool. Then it would not be in vain.
Disclaimer: May cause addiction.
Let's take the first steps to mastering meteorjs, welcome to cat.

Installation

So, for starters, we need to install the meteor itself. For linux-like OS and OSX, you must run the command in the terminal

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

If you are not lucky and you have Windows, download and install the binary from win.meteor.com , everything should work.

Create a project

Creating a project is simpler than simple, the framework includes the meteor utility, with which we will create a project. It is enough to execute in the terminal

$ meteor create projectName

and the meteor will create a folder for the project and put there a minimal set of files for our new application.
It is necessary to say a few words about the structure of the project. Initially, the meteor creates for us three files for html, css and js and two more to store information about installed packages.

projectName.css
projectName.html
projectName.js
smart.json
smart.lock

The entire application can be written in these three files. Of course, we will not do that.

The meteor allows you to decide how to organize the files in your project. It does not impose rules, such as Ruby on Rails, you can name files and folders as you prefer.
Now you can start the server. Everything here is also simple. In the project directory, we execute the command $ meteor. Now our application is available on port 3000. So far, it does not contain anything supernatural, but it is already a workable meteor application with magical built-in data reactivity. If you don’t know what it is yet, don’t worry, you will learn more about this later.
Now you can experiment a bit.
First, let's delete the three files created by the meteor, we will not need them.
Next, you need to create two folders - client and server. This is one of the few file hosting conventions. Everything that is inside the server folder will only be executed on the server and, accordingly, in the client folder only on the client. All other files, wherever they are, will be executed in both environments. Immediately a couple more details - the files from the directory libwill be connected earlier than the others, and the files main.*after everything else.

A little bit about connecting files

The meteor takes care of the development convenience, Live Reload works out of the box, which, when changing any files in the project directories, will restart the server and refresh the page in the browser. In addition, you do not need to connect any scripts and styles, the meteor will find and connect them, and if you are an adherent of coffeescript or less / scss / stylus, then with the installed plugins (they will be discussed just a couple of lines below) he himself and compiles.

Meteorite and Atmosphere

Actually about the plugins. As you may already know, the meteor uses its packet system. There are several types of packages.

Core packages

The most basic packages that are already included when creating a project. These include, for example, jQuery and underscore. You can use these libraries right out of the box.

Meteor smart packages

A group of approximately 40 plugins that are installed using the meteor utility. You can see their list by executing the command in the terminal

$ meteor list

You can install the plugin with the command

$ meteor add packageName

without even shutting down the server.
But after all, even 40 plugins - this is negligible you can say, and you will be absolutely right.

Atmosphere smart packages

This is where the Atmosphere comes to the rescue - a kind of repository of third-party plugins. At the time of writing, there were as many as 859, you can choose something to your liking. To install plugins from the atmosphere, you must install the npm meteorite package. He will be engaged in the installation of plugins.

$ sudo npm install -g meteorite

After installation, you can replace the use of the meteor command with mrt, which either completely duplicates the standard functionality (for example, just starts the server when called $ mrt), or adds specific functionality, say, when called

$ mrt add foundation-5

in this case adds the foundation-5 plugin from the atmosphere list.
It turns out a pretty nice plug-in installation system.

Npm - packages

Well, and of course npm packages. After all, meteor is still nodejs. You can safely install familiar npm packages and use them.

For business

Let's already do something with our little application. For an example we will draw a simple conclusion to-do tasks. To make everything look more beautiful, add bootstrap to the project.

$ mrt add bootstrap

Let's start with the template. Meteor uses the Handlebars engine for temlating . Create the main template in the client folder -main.html

To-Do

            {{> todosList}}
        

todosList is a nested template - partial. Remember, I said that we can place files as we please? This is still true, but let's be organized and create a directory clientsub-directory viewsin which the templates and place the js files that will be something of a controller. Usually, a js file will correspond to each template.
Create templates for the to-do list and for an individual element.

/client/views/todosList.html:

/client/views/todo.html:

So, the templates are ready. Everything is simple here - todosList displays a list of all todos - a collection of tasks. Let's define this collection. It should be both on the server and on the client, which means serverthat clientthey are neither suitable for hosting the collection file. I suggest creating a directory at the root of the project collectionsjust for such cases. And add the file to it

/collections/todos.js:
Todos = new Meteor.Collection('todos');

To start this code will be enough, it will create the collection itself.
The final touch to be done is to show the template which data to use for display. Create another file.

/client/views/todosList.js:
Template.todosList.helpers({
    todos: Todos.find()
});

Remember, in the list template we used the expression {{#each todos}}? .. Now we just set the source for this "variable".
Now you can open the browser console and add the task to the collection.

Todos.insert({task: 'Поэкспериментировать с meteorJS'});

The result will not be long in coming - the first to-do task will immediately draw. By the way, if the same page is opened in another browser, an added task will also appear there.
It seems to be more than enough for a start. We looked at how to make the simplest elements using meteor. Of course, this is not enough, it’s worthwhile to talk more about routing, security (did you notice that we have full access to the database from the browser console?) And many other things, but just can’t fit into one article. A little later, in the process of researching meteor, I will describe the transition from simply adding data in the console to implementing this feature in the project interface, also working with routing and clever access control, and maybe some other interesting things.

Finally, I’ll leave some useful links:

Actually the site meteor - here we watch a couple of introductory videos about the framework, and read the documentation.
A whole collection of links to useful materials

Thank you for reading, I hope you are at least a little interested in this, of course, interesting framework.