Начало работы

2

На данный момент переведено

В этой главе вы:

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

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

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

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

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

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

    Nitrous.io - это сервис, который позволяет запускать приложения и редактировать их код прямо в браузере. Мы написали небольшое руководство по этой теме

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

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

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

    meteor create microscope
    

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

    .meteor
    microscope.css
    microscope.html
    microscope.js
    

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

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

    cd microscope
    meteor
    

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

    Meteor's Hello World.
    Meteor’s Hello World.

    Коммит 2-1

    Created basic microscope project.

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

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

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

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

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

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

    Давайте воспользуемся системой пакетов Meteor для включения Bootstrap в наш проект.

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

    Мы также добавим пакет Underscore. Underscore это очень полезная вспомогательная библиотека JavaScript, когда дело доходит до управления структурами данных в JavaScript.

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

    meteor add mizzao:bootstrap-3
    meteor add underscore
    

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

    Коммит 2-2

    Added bootstrap and underscore packages.

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

    With Bootstrap.
    With Bootstrap.

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

    О модулях

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

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

    Файловая структура 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.* загружаются самыми последними
    • Всё остальное загружается в алфавитном порядке по имени файла.

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

    Если хотите получить больше информации по этому вопросу, то рекомендуем почитать официальную документацию.

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

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

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

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

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

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

    Underscores vs CamelCase

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

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

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

    Добавляем CSS

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

    Meteor автоматически минифицирует CSS, так что, в отличие от остальных статичных файлов, ему лучше находиться в директории /client, а не /public. Давайте создадим директорию /client/stylesheets/ и положим туда вот этот файл style.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;
    }
    
    client/stylesheets/style.css

    Коммит 2-3

    Re-arranged file structure.

    О CoffeeScript

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

    meteor add coffeescript