02-getting-started.md.erb

---
title: Начало работы
slug: getting-started
date: 0002/01/01
number: 2
contents: Установите Meteor.|Узнаете про 5 типов модулей Meteor.|Создадите файловую структуру вашего Meteor-приложения.
paragraphs: 49
---

Первое впечатление крайне важно, и установка Meteor должна пройти без особых сложностей. В большинстве случаев, весь процесс занимает не более пяти минут.

Для начала мы можем установить Meteor набрав в терминале:

~~~bash
curl https://install.meteor.com | sh
~~~

Это установит глобальную команду meteor, после чего вы сможете начать использовать фреймворк.

<% note do %>

### Либо *не* устанавливаем Meteor вовсе

Если вы не можете (или не хотите) устанавливать Meteor локально, рекомендуем вам [Nitrous.io](http://nitrous.io).

Nitrous.io - это сервис, который позволяет запускать приложения и редактировать их код прямо в браузере. Мы написали [небольшое руководство по этой теме](https://www.discovermeteor.com/2013/10/04/meteor-nitrous/)

Вы можете просто пройти эту инструкцию до пункта «Устанавливаем Meteor» включительно, а затем снова вернуться к этой книге начиная с секции «Создаем простое приложение» текущей главы.

<% end %>

### Создаем простое приложение

Теперь, когда мы установили Meteor, давайте создадим приложение. Чтобы это сделать, мы используем команду `meteor`:

~~~bash
meteor create microscope
~~~

Эта команда загрузит Meteor, развернет и создаст базовый, готовый к работе проект. Когда Meteor закончит этот процесс, вы увидите, что директория `microscope/` содержит следующее:

~~~bash
.meteor
microscope.css
microscope.html
microscope.js
~~~

Приложение, которое Meteor создал за вас - это шаблонное приложение, демонстрирующее несколько простых подходов.

Хотя наше приложение пока мало что делает, мы все же можем запустить его. Чтобы это сделать, вернитесь в окно терминала и введите:

~~~bash
cd microscope
meteor
~~~

Теперь перейдите в браузере по адресу `http://localhost:3000/` (или `http://0.0.0.0:3000/`) и вы должны увидеть что-то вроде этого:

<%= screenshot "2-1", "Meteor's Hello World." %>

<%= commit "2-1", "Created basic microscope project." %>

Поздравляем! Вы только что создали и запустили свое первое Meteor-приложение. Кстати, чтобы прервать его работу откройте вкладку терминала, в котором оно исполняется и наберите `ctrl+c`.

Заметьте, что если вы используете Git, сейчас самое время для инициализации вашего репозитория командой `git init`.

<% note do %>

### Скатертью дорога, Meteorite

В одно время Meteor использовал внешний менеджер пакетов, который назывался Meteorite. Начиная с версии Meteor 0.9.0, Meteorite больше не нуждается, так как его функции были ассимилированы в самом Meteor.

Так что если вы обнаружите какие-либо отсылки к командам Meteorite `mrt` в этой книге, или на просторах Интернета и в материалах про Meteor, вы можете смело заменять их на привычное `meteor`.

<% end %>

### Добавляем пакет

Давайте воспользуемся системой пакетов Meteor для включения [Bootstrap](http://getbootstrap.com/) в наш проект.

Это ничем не отличается от добавления Bootstrap обычным способом, когда мы вручную добавляем CSS и JavaScript файлы в проект. За исключением того, что мы воспользуемся пакетом члена сообщества Meteor [Andrew Mao](https://github.com/mizzao) (где “mizzao” в `mizzao:bootstrap-3` имя пользователя автора этого пакета) чтобы иметь актуальную версию фреймворка.

Мы также добавим пакет [Underscore](http://underscorejs.org/). Underscore это очень полезная вспомогательная библиотека JavaScript, когда дело доходит до управления структурами данных в JavaScript.

На момент написания статьи пакет `underscore` все еще является частью «официальных» пакетов Meteor, вот почему она не имеет автора:

~~~bash
meteor add mizzao:bootstrap-3
meteor add underscore
~~~

Обратите внимание, что мы добавляем Bootstrap **3**. Некоторые скринкасты этой книги были сделаны со старой версией Microscope, которая работала под Bootstrap **2** и поэтому они могут выглядеть несколько иначе.

<%= commit "2-2", "Added bootstrap and underscore packages." %>

Как только вы добавите пакет Bootstrap, вы увидите изменения в нашем минималистичном приложении:

<%= screenshot "2-1b", "With Bootstrap." %>

В отличие от «традиционного» метода добавления внешних ресурсов нам не нужно связывать CSS или JavaScript файлы, потому что Meteor сделает это за нас! Это лишь одно из многих преимуществ пакетов Meteor.

<% note do %>

### О модулях

Когда мы говорим о модулях в контексте Meteor,  необходимо учитывать некоторую специфику. Фреймворк использует несколько базовых типов модулей (packages):

- Ядро самого Meteor состоит из **базовых модулей**. Они автоматически включены в каждое Meteor-приложение, и вы пока можете не думать о них вовсе.
- Стандартные модули известны как «**изомодули**» или изоморфные модули (то есть они могут работать как на клиенте, так и на сервере). **Официальные модули** такие, как `accounts-ui` или `appcache` поддерживаются рабочей группой Meteor и [поставляются вместе с Meteor](http://docs.meteor.com/#packages).
- **Сторонние модули** - это те же изомодули, разработанные другими пользователями и загруженные на сервер пакетов Meteor. Вы можете просматривать их на [Atmosphere](http://atmosphere.meteor.com) или используя команду `meteor search`.
- **Локальные модули**, модули которые вы создаете сами и хранятся в директории `/packages`.
- **NPM-модули** (Node.js Packaged Modules) - это модули Node.js. Из коробки они не работают с Meteor, но могут быть использованы предыдущими типами модулей.

<% end %>

### Файловая структура Meteor-приложения

Прежде чем приступить непосредственно к разработке, мы должны правильно организовать наш проект. Для того чтобы создать нужную файловую структуру, сперва откройте директорию '/microscope' и удалите 'microscope.html', 'microscope.js' и 'microscope.css'.

Далее, создадим четыре основных директорий внутри `/microscope`: `/client`, `/server`, `/public` и `/lib`.

Также создадим пустые файлы `main.html` и `main.js` внутри только что созданной директории `/client`. Не волнуйтесь, что сейчас это поломает приложение, мы вернемся к этим файлам в следующей главе.

Необходимо отметить, что некоторые из этих директорий имеют специальное назначение. Когда дело касается файловой структуры, у Meteor есть ряд правил:

- Код в директории `/server` исполняется только на сервере.
- Код в директории `/client` исполняется только на клиенте.
- Все остальные файлы исполняются и на клиенте, и на сервере.
- Статичные файлы (картинки, шрифты и т.п.) - в директории `/public`.

Также полезно знать, как Meteor решает в каком порядке загрузить ваши файлы:

- Файлы в директории `/lib` загружаются самыми *первыми*
- Все файлы с именем `main.*` загружаются самыми *последними*
- Всё остальное загружается в алфавитном порядке по имени файла.

Заметьте также, что несмотря на эти правила, вы не обязаны использовать предлагаемую структуру, если вы этого не хотите. Предложенная выше структура - всего лишь один из способов организации файлов, а не строгий закон.

Если хотите получить больше информации по этому вопросу, то рекомендуем почитать [официальную документацию](http://docs.meteor.com/#structuringyourapp).

<% note do %>

### Meteor это MVC-фреймворк?

Если вы имели опыт работы с такими фреймворками, как Ruby on Rails, вы можете задаться вопросом, придерживается ли Meteor архитектуры MVC (Model View Controller)?

Короткий ответ - нет! В отличие от Rails, Meteor не заставляет придерживаться какой-либо определенной архитектуры, так что в этой книге мы просто структурируем приложение так, как считаем оптимальным, не особо заботясь о том, какой аббревиатурой это обозвать.

<% end %>

### Нет директории public?

Ладно, мы соврали. Нам не нужна директория `public/`, но только лишь потому, что Microscope не использует статичных файлов. Но, так как большинство других Meteor-приложений включают в себя хотя бы пару картинок, мы посчитали нужным коснуться и этой директории.

Кстати, вы должно быть заметили спрятанную директорию `.meteor`. Там находится код самого Meteor, и что-то там менять - обычно очень плохая идея. На деле вам вряд ли когда-нибудь понадобится туда даже заглядывать. Единственное исключение - это файлы `.meteor/packages` и `.meteor/release`, которые отвечают соответственно за ваши модули и используемую версию Meteor. Когда вы добавляете модули или меняете версию Meteor, то иногда бывает полезно проверить эти файлы.

<% note do %>

### Underscores vs CamelCase

Что мы скажем по поводу извечного холивара `my_variable` или `myVariable` - неважно, каким из этих стилей вы пользуетесь, если вы используете его везде.

В этой книге мы используем CamelCase, так как это стандартно для JavaScript (в конце концов, он именно JavaScript, а не java_script!).

Единственное исключение - это имена файлов (`my_file.js`), и CSS-классы (`.my-class`). Причина в том, что символ подчёркивания больше распространён в файловой системе, а CSS в самом своем синтаксисе использует дефисы (`font-family`, `text-align` и т.д.).

<% end %>

### Добавляем CSS

Эта книга не о CSS. Чтобы не тормозить вас заботой о стилях и не отвлекаться на него в дальнейшем, мы решили добавить весь CSS в самом начале.

Meteor автоматически минифицирует CSS, так что, в отличие от остальных статичных файлов, ему лучше находиться в директории `/client`, а не `/public`. Давайте создадим директорию `/client/stylesheets/` и положим туда вот этот файл `style.css`:

~~~css
.grid-block, .main, .post, .comments li, .comment-form {
  background: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  padding: 10px;
  margin-bottom: 10px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); }

body {
  background: #eee;
  color: #666666; }

.navbar {
  margin-bottom: 10px; }
  /* line 32, ../sass/style.scss */
  .navbar .navbar-inner {
    -webkit-border-radius: 0px 0px 3px 3px;
    -moz-border-radius: 0px 0px 3px 3px;
    -ms-border-radius: 0px 0px 3px 3px;
    -o-border-radius: 0px 0px 3px 3px;
    border-radius: 0px 0px 3px 3px; }

#spinner {
  height: 300px; }

.post {
  /* For modern browsers */
  /* For IE 6/7 (trigger hasLayout) */
  *zoom: 1;
  position: relative;
  opacity: 1; }
  .post:before, .post:after {
    content: "";
    display: table; }
  .post:after {
    clear: both; }
  .post.invisible {
    opacity: 0; }
  .post.instant {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none; }
  .post.animate{
    -webkit-transition: all 300ms 0ms ease-in;
    -moz-transition: all 300ms 0ms ease-in;
    -o-transition: all 300ms 0ms ease-in;
    transition: all 300ms 0ms ease-in; }
  .post .upvote {
    display: block;
    margin: 7px 12px 0 0;
    float: left; }
  .post .post-content {
    float: left; }
    .post .post-content h3 {
      margin: 0;
      line-height: 1.4;
      font-size: 18px; }
      .post .post-content h3 a {
        display: inline-block;
        margin-right: 5px; }
      .post .post-content h3 span {
        font-weight: normal;
        font-size: 14px;
        display: inline-block;
        color: #aaaaaa; }
    .post .post-content p {
      margin: 0; }
  .post .discuss {
    display: block;
    float: right;
    margin-top: 7px; }

.comments {
  list-style-type: none;
  margin: 0; }
  .comments li h4 {
    font-size: 16px;
    margin: 0; }
    .comments li h4 .date {
      font-size: 12px;
      font-weight: normal; }
    .comments li h4 a {
      font-size: 12px; }
  .comments li p:last-child {
    margin-bottom: 0; }

.dropdown-menu span {
  display: block;
  padding: 3px 20px;
  clear: both;
  line-height: 20px;
  color: #bbb;
  white-space: nowrap; }

.load-more {
  display: block;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.05);
  text-align: center;
  height: 60px;
  line-height: 60px;
  margin-bottom: 10px; }
  .load-more:hover {
    text-decoration: none;
    background: rgba(0, 0, 0, 0.1); }

.posts .spinner-container{
  position: relative;
  height: 100px;
}

.jumbotron{
  text-align: center;
}
.jumbotron h2{
  font-size: 60px;
  font-weight: 100;
}

@-webkit-keyframes fadeOut {
  0% {opacity: 0;}
  10% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes fadeOut {
  0% {opacity: 0;}
  10% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}

.errors{
  position: fixed;
  z-index: 10000;
  padding: 10px;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  pointer-events: none;
}
.alert {
          animation: fadeOut 2700ms ease-in 0s 1 forwards;
  -webkit-animation: fadeOut 2700ms ease-in 0s 1 forwards;
     -moz-animation: fadeOut 2700ms ease-in 0s 1 forwards;
  width: 250px;
  float: right;
  clear: both;
  margin-bottom: 5px;
  pointer-events: auto;
}
~~~
<%= caption "client/stylesheets/style.css" %>

<%= commit "2-3","Re-arranged file structure." %>

<% note do %>

### О CoffeeScript

В этой книге мы будем использовать чистый JavaScript, но если вы предпочитаете CoffeeScript, то просто добавьте пакет CoffeeScript и начинайте писать на нем:

`meteor add coffeescript`

<% end %>