Первые шаги к вселенной MeteorJS



Если вы интересуетесь клиентским программированием, то как и я, вероятно, могли слышать о Meteor, уже не новом веб-фреймворке, который относится к набирающим популярность, так называемым «фулл-стек» фреймворкам. О нем уже писали на Хабре, чтобы не дублировать информацию, можно почитать здесь или тут. Я довольно давно слышал о метеоре, но все никак не решался его пощупать. И вот, пришли очередные выходные, и я снова наткнулся на него. В этот раз я решил честно попробовать, что это такое. Может быть, этот пост даст кому-то небольшой толчок к началу изучения или хотя бы знакомства с этим инструментом. Тогда это было бы не зря.
Disclaimer: может вызвать зависимость.
Давайте же сделаем первые шаги к освоению meteorjs, добро пожаловать под кат.


Установка


Итак, для начала нам понадобится установить сам метеор. Для linux-подобных ОС и OSX необходимо выполнить в терминале команду
$ curl https://install.meteor.com/ | sh

Если же вам не повезло, и у вас Windows, скачайте и установите бинарник с win.meteor.com, все должно работать.

Создаем проект


Создание проекта проще простого, в состав фреймворка входит утилита meteor, с помощью которой мы и создадим проект. Достаточно в терминале выполнить
$ meteor create projectName
и метеор создаст папку для проекта и поместит туда минимальный набор файлов для нашего нового приложения.
Необходимо сказать несколько слов о структуре проекта. Изначально метеор создает для нас три файла для html, css и js и еще два для хранения информации об установленных пакетах.
projectName.css
projectName.html
projectName.js
smart.json
smart.lock

Все приложение можно написать в этих трех файлах. Конечно, мы не будем так делать.

Метеор предоставляет вам самим решать, как организовать файлы в своем проекте. Он не навязывает правил, как, например Ruby on Rails, вы можете называть файлы и папки, как вам удобнее.
Теперь можно запустить сервер. Тут все тоже проще простого. В директории проекта выполняем команду $ meteor. Теперь наше приложение доступно на 3000 порту. Пока что оно не содержит ничего сверхъестественного, но это уже работоспособное meteor-приложение с магической встроенной реактивностью данных. Если вы пока не знаете что это, не беспокойтесь, об этом вы узнаете чуть позже.
А тут спрятана маленькая демонстрация

Чтобы быстро увидеть магию метеора, вы можете создать приложение с готовым тестовым шаблоном leaderboard.
$ meteor create --example leaderboard

Этот пример — это простой список игроков и набранных ними очков с возможностью добавлять игрокам баллы.
Достаточно открыть приложение в двух браузерах расположенных рядом, и заняться добавлением баллов игрокам. Все изменения мгновенно будут синхронизироваться в обоих браузерах. И это без единой строчки кода для этого! За нас все делает метеор внутри с использованием сокетов.
Если вам лень создавать еще один проект, смотрите видео www.meteor.com/examples/leaderboard

Теперь можно немного поэкспериментировать.
Для начала давайте удалим три созданных метеором файла, они нам не понадобятся.
Далее необходимо создать две папки — client и server. Это одна из немногих конвенций по размещению файлов. Все, что находится внутри папки server — будет выполняться только на сервере и, соответственно, что в папке client — только на клиенте. Все остальные файлы, где бы они не были, будут выполнены в обоих окружениях. Сразу же еще пара деталей — файлы из директории lib будут подключены ранее других, а файлы main.* после всего прочего.

Немного о подключении файлов


Метеор заботится об удобстве разработки, из коробки работает Live Reload, который при изменении любых файлов в директориях проекта перезапустит сервер и обновит страницу в браузере. К тому же, не нужно подключать никакие скрипты и стили, метеор сам их найдет и подключит, а если вдруг вы приверженец coffeescript или less/scss/stylus, то с установленными плагинами (о них пойдет речь буквально на пару строк ниже) сам же их и скомпилирует.

Meteorite and Atmosphere


Собственно о плагинах. Как вы, может быть, уже знаете, метеор использует свою систему пакетов. Есть несколько видов пакетов.

Core packages

Самые базовые пакеты, которые уже включены при создании проекта. К ним относятся, например jQuery и underscore. Вы можете использовать эти библиотеки сразу же из коробки.

Meteor smart packages

Группа из примерно 40 плагинов, которые устанавливаются используя утилиту meteor. Их список можно посмотреть выполнив в терминале команду
$ meteor list
Установить плагин можно командой
$ meteor add packageName
причем даже не выключая сервер.
Но ведь даже 40 плагинов — это же ничтожно мало можете сказать вы, и будете абсолютно правы.

Atmosphere smart packages

Вот тут то на помощь и приходит Атмосфера — некое хранилище third-party плагинов. На момент написания статьи их насчитывалось целых 859, можно что-то выбрать себе по вкусу. Для установки плагинов из атмосферы необходимо установить npm пакет meteorite. Он и будет заниматься установкой плагинов.
$ sudo npm install -g meteorite

После установки вы можете заменить использование команды meteor на mrt, которая или полностью дублирует функционал стандартной (например, просто запускает сервер при вызове $ mrt), или добавляет специфичный функционал, скажем, при вызове
$ mrt add foundation-5
добавляет в данном случае плагин foundation-5 из списка atmosphere.
Получается довольно симпатичная система установки плагинов.

Npm — пакеты

Ну, и, конечно же npm пакеты. Ведь meteor это все еще nodejs. Вы можете спокойно устанавливать привычные npm пакеты и использовать их.

За дело


Давайте уже сделаем что-то с нашим маленьким приложением. Для примера сделаем простой вывод to-do задач. Чтобы все выглядело более красиво, добавим к проекту bootstrap.
$ mrt add bootstrap

Начнем с темплейта. Meteor использует для темлейтов движок Handlebars. Создадим в папке client главный темплейт — main.html
<head>
    <title>Simple To-Do list</title>
</head>
<body>
    <div class="container">
        <header class="navbar">
            <div class="navbar-inner">
                <a class="brand" href="/">To-Do</a>
            </div>
        </header>
        <div id="main" class="row-fluid">
            {{> todosList}}
        </div>
    </div>
</body>

todosList это вложенный темплейт — partial. Помните, я говорил, что мы можем размещать файлы как нам вздумается? Это все еще правда, но давайте будем организованными, и создадим в каталоге client вложенный каталог views, в который поместим темплейты и js файлы, которые будут чем-то вроде контроллеров. Обычно каждому темплейту будет соответствовать js файл.
Создадим темлейты для списка to-do и для отдельного элемента.
/client/views/todosList.html:
<template name="todosList">
    <div class="todos">
        {{#each todos}}
            {{> todo}}
        {{/each}}
    </div>
</template>

/client/views/todo.html:
<template name="todo">
    <div class="todo">
        <h3>{{task}}</h3> 
    </div>
</template>

Итак, темплейты готовы. Здесь все просто — в todosList выводится список всех todos — коллекции задач. Давайте определим эту коллекцию. Она должна быть как на сервере, так и на клиенте, значит ни server, ни client не подходят для размещения файла коллекции. Я предлагаю создать в корне проекта каталог collections как раз для таких случаев. И добавить в него собственно файл
/collections/todos.js:
Todos = new Meteor.Collection('todos');

Для начала этого кода будет вполне достаточно, он создаст саму коллекцию.
Последний штрих, который нужно сделать, это показать темплейту, какие данные использовать для отображения. Создадим еще один файл.
/client/views/todosList.js:
Template.todosList.helpers({
    todos: Todos.find()
});

Помните, в темплейте списка мы использовали выражение {{#each todos}}?.. Сейчас мы как раз задали источник для этой «переменной».
Теперь можно открыть консоль браузера и добавить в коллекцию задачу.
Todos.insert({task: 'Поэкспериментировать с meteorJS'});

Результат не заставит себя долго ждать — сразу же нарисуется первая to-do задача. Кстати, если эта же страница будет открыта в другом браузере, то там тоже появится добавленная задача.
Кажется, для начала более чем достаточно. Мы посмотрели, как сделать самые простые элементы, используя meteor. Конечно, этого совсем мало, стоит рассказать еще о роутинге, безопасности (вы же заметили, что мы имеем полный доступ к базе данных с консоли браузера?) и многих других вещах, но всего не уместить в одну статью. Чуть позже, я в процессе исследования meteor, я опишу переход от простого добавления данных в консоли к реализации этой возможности в интерфейсе проекта, также работу с роутингом и умное разграничение доступа, и может, еще какие-нибудь интересные вещи.

Напоследок оставлю несколько полезных ссылок:


Собственно сайт meteor — здесь смотрим пару вводных видео о фреймворке, и читаем документацию.
Целое собрание ссылок на полезные материалы

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

Похожие публикации

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 32

  • НЛО прилетело и опубликовало эту надпись здесь
      0
      Сейчас нет возможности просмотреть вывод списка родных плагинов
      $ meteor list
      

      Попробовал поискать 'jade' на atmosphere — находятся какие-то плагины. Не знаю, насколько они готовы к использованию, но, наверное, все-таки возможно подменить.
      Также наткнулся на вот такой репозиторий на гитхабе.
        0
        К релизу, который намечен на начало 2014 года обещают сделать возможность легкой замены. Сейчас они переписывают полностью эту часть фреймворка. Вот здесь разработчик рассказывает про грядущие изменения — Meteor Devshop 09
      0
      Интересная вещь, а как его подружить с MySQL
        0
        The current release of Meteor supports MongoDB, the popular document database, and the examples in this section use the MongoDB API. Future releases will include support for other databases.
        :(
          0
          Кстати, вот что нашлось — github.com/drorm/meteor-sql
            0
            Да, пока поддерживается только MongoDB.
            Может стоит взглянуть на не-реляционную монгу? Кстати, сами разработчики (10gen) проводят бесплатные онлайн курсы. К сожалению, курсы только начались, буквально вчера. Так что следующий старт будет только через пару месяцев
              0
              Вот, что было во вчерашнем письме:
              M101JS: MongoDB for Node.js Developers Starts Today

              If you know others who want to signup, it's not too late — registration closes February 3rd.
                0
                Хабражители, подскажите несложный js framework, чтобы сделать что-то вроде dashboard с обновляемыми по ajax таблицами
                0
                Пропустил мимо внимания письмо. Отлично, так желающие познакомиться с монгой еще имеют эту возможность.
            0
            DEL: увидел коммент выше.
            0
            Ждем ответа от гуру Derby! :)

            Метеор предоставляет вам самим решать, как организовать файлы в своем проекте. Он не навязывает правил, как, например Ruby on Rails, вы можете называть файлы и папки, как вам удобнее.

            По вашему это достоинство?

            Конечно, этого совсем мало, стоит рассказать еще о роутинге, безопасности

            Лучше бы о безопасности и рассказали…
              0
              По поводу папок. С одной стороны тот же RoR, который навязывает жесткую структуру и четкие правила для размещения файлов заранее предостерегают от многих ошибок, бесспорно это плюс.
              С другой метеор, который дает свободу. Не то, чтобы это было именно «плюсом», но можно построить свою структуру каталогов, и придерживаться этих правил для себя. Не обязательно же создавать папку templates, а класть туда, например, контроллеры, если фреймворк это позволяет :)

              В ближайшем времени хочу организовать все в маленький гитхаб репозиторий, и написать продолжение, в которое войдут и вопросы безопасности. Хотелось написать первую статью именно о самом первом знакомстве с meteor.
                +1
                Без обид, но первое знакомство… У этой библиотеки (фреймворка?) порог ниже плинтуса и о первом знакомстве писать нет смысла, я думаю. В любом случае начинание благое и будем ждать статьи о безопасности:)
                  +1
                  Строгость рельсов в том числе сильно решает проблему legacy. Ок, помогает с решением. Ломать ноги в чужом коде дело не из приятных.
                0
                А есть где описание для каких проектов метеор подходит, а для каких нет?
                  0
                  Метеор идеален для прототипирования, позволяет очень быстро набросать готовое, рабочее приложение, написание которого на других фреймворках займет побольше времени. В связи с этим хорошо использовать в хакатонах.

                  А если для реальных приложений… Хорошо себя покажет, где нужна реал-таймовость. Собственно в ней и весь метеор. Не знаю, как для больших проектов, все таки фреймворк еще не достиг версии 1.0, но для небольших, я думаю, вполне реально использовать, да и говорят, что вроде бы уже сейчас нет заметных косяков.
                    0
                    А для браузерной игрушки пойдет?
                      0
                      Кажется, что вполне должен подойти, но есть мнения, что могут быть проблемы.
                      habrahabr.ru/post/195636/#comment_6787828 — немного обсуждений на этот счет
                    0
                    Посоветуйте, что почитать про meteor. Первую страницу выдачи гугла можно не повторять, но может в вашей коллекции ссылок есть какие-то жемчужины, которыми вы могли бы поделиться.
                    +1
                    Крутая штука этот метеор. Пугает только одно — чрезвычайно низкий порог вхождения, много свободы и простоты. Как бы не превратилось в очередную приманку для «недалёких» программистов. А потом этот код разгребай…
                      0
                      Пишем сейчас проект на Meteor для продакшена (закачик решил рискнуть).
                      На самом деле очень приятная технология, конечно приходится постоянно сталкиваться с разными трудностями но вцелом продукт рабочий. По крайней мере для не очень сложных и больших проектов. С удовольствием слежу за развитием и жду 1.0.

                      Самое главное это пораньше выработать четкий стандарт каталогизации, наименования хелперов, шаблонов, коллекций и методов. Иначе очень скоро начинается бардак.

                      Кстати рекомендую обратить внимание на новую ветку разработки которая скоро станет главной, codename shark – там существенные изменения в движке рендеринга.
                      Некоторые пакеты уже адаптированы, поэтому если что-то не работает то проверьте github проекта, возможно там есть бранч «shark» или «new ui».
                      Например в случае с iron-router подключать его надо вот так:

                      "packages": {
                          "iron-router": {
                            "git": "https://github.com/EventedMind/iron-router",
                            "branch": "shark"
                          }
                      }
                      
                        +2
                        Коллеги, объясните пожалуйста, а зачем нужен Meteor? Да, исходя из описания и документации, данный фреймворк позволяет писать на одном и том же языке и на клиенте, и на сервере и переиспользовать этот код в обе стороны.
                        Но ведь контексты по обе стороны от HTTP — разные. Со стороны браузера всё крутится внутри пользовательской сессии и оперирует понятиями, удобными для пользователя и предметная область трансформирована для удобства отображения. На сервере же всё зачастую по-другому — и управление доступом\правами, сессиями, знание о том что пользователей\сессий — больше одного, куча инфраструктурных вещей и высокая вероятность того, что предметная область сильно отличается от клиентской, т.к. основная задача сервера — модификация, а не отображение (грубо).
                          0
                          Meteor нужен для разработки реактивных веб приложений.

                          Клиентская и серверная часть там существенно разделены. Возможности реюза серверного и клиентского кода сводятся к реюзу простой логики.

                          Работа с базой, шаблонами и пр. — отличаются по сути. Хотя внешне сделано так, что очень похоже.
                          0
                          Наконец добрались руки поковырять сабж.
                          А расскажите в 2-х словах, как правильно деплоить приложения? Я так понимаю, нужны 1. сервер nodejs, 2. сервер mongodb, 3. связывание их между собой.
                            +1
                            Meteor умеет создавать сборку проекта в виде node.js application. Монго при этом надо поднимать самому. Связываются через переменную окружения.

                            Мануал, см. раздел Running on your own infrastructure.

                            Еще есть готовое решение для деплоймента на хероку heroku-buildpack-meteorite. Удобно и относительно просто, если надо бесплатный тестовый деплоймент для сцены. Правда оно иногда ломается при обновлении версий ноды или метеора.

                            Родной тестовый деплоймент у метеора еще проще, но он иногда тупит.
                              0
                              Ясно, спасибо.

                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                          Самое читаемое