Первые шаги к вселенной 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-приложение с магической встроенной реактивностью данных. Если вы пока не знаете что это, не беспокойтесь, об этом вы узнаете чуть позже.

$ meteor create --example 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 — здесь смотрим пару вводных видео о фреймворке, и читаем документацию.
Целое собрание ссылок на полезные материалы

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

Автор: cryptograf

Источник