[Из песочницы] Первые шаги к вселенной MeteorJS

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

Disclaimer: может вызвать зависимость.

Давайте же сделаем первые шаги к освоению meteorjs, добро пожаловать под кат.

Установка

Итак, для начала нам понадобится установить сам метеор. Для linux-подобных ОС и OSX необходимо выполнить в терминале команду

$ curl http://ift.tt/WWMvhu | 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

Этот пример — это простой список игроков и набранных ними очков с возможностью добавлять игрокам баллы.

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

Если вам лень создавать еще один проект, смотрите видео http://ift.tt/1ci03Ke

Теперь можно немного поэкспериментировать.

Для начала давайте удалим три созданных метеором файла, они нам не понадобятся.

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

Целое собрание ссылок на полезные материалы

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

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.