Пользователь
0,0
рейтинг
24 января 2013 в 12:02

Разработка → Meteor — Node.js для гуманитариев из песочницы tutorial

Введение


На хабре уже несколько раз упоминали о проекте Meteor, основанном в 2011 году семерыми энтузиастами web-технологий из Сан-Франциско. По сути Meteor является просто надстройкой над node.js, который сам ещё даже не дошёл до релизной версии. Тем не менее проект собрал более семи тысяч подписчиков на github и получил 11 миллионов долларов инвестиций.
С чего такая популярность? Дело в заявлении авторов о том, что они хотят кардинально переосмыслить способ написания современных web-приложений в сторону его упрощения. Не секрет, что написание кода на чистом node.js довольно сильно выворачивает мозг и вынуждает использовать различные костыли image в виде control flow средств. На Meteor, говорят авторы, писать крутые приложения сможет даже гуманитарий.
Ну что же, проверим. Имеется: 1 гуманитарий-социолог, закрывший сессию и желающий после Парсонса и Зиммеля перейти на что-нибудь полегче, компьютер с Ubuntu 12.10 и установленный node.js (не спрашивайте, как он оказался у социолога).

Вдохновимся обещаниями разработчиков, прекрасной девушкой-членом команды и начнём.

Установка


Установка элементарна – пишем в терминале
$ curl https://install.meteor.com | sh

Создание и запуск первого приложения


Для того, чтобы создать первое приложение, напишем в терминале
$ meteor create <имя_приложения>

Для запуска необходимо прописать слово meteor в директории приложения
$ cd <имя_приложения>
$ meteor

Заходим на http://localhost:3000/ и видим наш Hello world
Да, не врут ребята, ничего сложного, даже hello world за нас написали.

Простой блог


Но нам же надо что-нибудь позабористей. Напишем, например, простенький блог.
Disclaimer: вообще-то meteor (как и node.js) предназначен в первую очередь для создания сложных одностраничных приложений и в обычном блоге многие его возможности останутся неиспользованными.

Структура


Meteor исповедует идеологию «Один код на сервере и клиенте». Это выражается в том, что код из всех .js-файлов в проекте (.coffee также допустим при установке соответствующего smart package) за исключением такового в поддиректориях server, client и public исполняются как на серверной стороне в node.js (через fiber), так и в браузере у пользователя.
Код из директории server может исполняться только на сервере, из client — на клиентской, а в public, где хранятся статичные файлы, его вообще не должно быть. Также в нашем распоряжении имеются логические переменные Meteor.isClient и Meteor.isServer, которые принимают различные значения в зависимости от того, где исполняется код.
То же самое относится к .css и .html файлам — они могут быть разбросаны по всему проекту. Meteor сам найдёт и соберёт их вместе.
Есть ещё одна особая директория test, из которой ничто никуда по умолчанию не загружается.
Так же необходимо понять, что meteor – это такая сборная солянка из многих технологий, так что чистого javascript'а может быть совсем немного. jQuery и Underscore здесь правят балом. Не надо ничего устанавливать, просто пишите как вы привыкли. В качестве шаблонизатора используется Handlebars – продвинутая версия Mustache. Общение с базой данных MongoDB (обещается поддержка и других вариантов) осуществляется с помощью Minimongo (minimongo.com судя по всему обещает приятную работу с этой обёрткой).
В качестве css фреймворка в данном примере будет использован Foundation, который мне нравится больше аналогичного Twitter Bootstrap, но это дело вкуса.

Вывод записей


Начнём с обращения к базе данных. На сервере в .js файле создадим новую коллекцию, в которой будут храниться все наши записи.
Posts = new Meteor.Collection("posts");

Там же зададим начальные значения:
  Meteor.startup(function () { // этот код исполняется сразу после запуска
    if (Posts.find().count() === 0) {
      var posts = [
      {
        title: "Title one",
        text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et iure porro sunt repudiandae amet saepe asperiores commodi repellendus hic accusamus obcaecati ipsum modi magnam nulla magni vitae ea voluptates dignissimos!",
        published: (new Date()).toLocaleTimeString()
      },
      {
        title: "Title two",
        text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa natus mollitia similique accusamus minus harum magnam eum pariatur rerum fugit ducimus sapiente asperiores quidem molestias repudiandae consequuntur repellendus dolorum placeat.",
        published: (new Date()).toLocaleTimeString()
      }
      ];
      for (var i = 0; i < posts.length; i++) {
        Posts.insert({
          title: posts[i].title,
          text: posts[i].text,
          published: posts[i].published,
        });
      }
    }
  });

Затем создадим Handlebars шаблон отображения записей и назовём его stream:
<head>
  <title>Blog</title>
</head>

<body>
  <div class="row">
    <div class="twelve columns">
      {{> stream}}
    </div>
  </div>
</body>

<template name="stream">
  {{#each posts}}
    {{> post}}
  {{/each}}
</template>

<template name="post">
  <div class="panel">
    <h2>{{title}}</h2>
    <p>{{{text}}}</p> <!-- Три фигурные скобки означают, что HTML разметка не будет экранироваться -->
    {{published}}
  </div>
</template>

… и выведем через него начальные значения.
  Template.stream.posts = function () {
    return Posts.find({}, {sort: {published: -1}});
  };

Таким образом мы вывели все записи на главную страницу.

Добавление и удаление записей


Для того, чтобы добавить свои записи сначала создадим новый шаблон editor с соответствующей формой добавления:
<template name="editor">
  <h1>Новая запись</h1>
  <label>Заголовок
    <br>
    <input type="text" id="title-area" placeholder="">
  </label>
  <label>Текст
    <br>
    <textarea type="text" id="editor-area" placeholder=""></textarea>
  </label>
  <button id="submit-post" class="button radius">Опубликовать</button>
</template>

Следующий шаг — создание обработчика события, который при клике на кнопку будет добавлять содержимое полей в базу данных. Добавленная информация будет сразу же выводиться на все клиенты.
  Template.editor.events({
    "click #submit-post": function() {
      var published_date = new Date();
      Posts.insert({
        title: document.getElementById("title-area").value,
        text: document.getElementById("editor-area").value,
        published: published_date.toLocaleTimeString()
      })      
    }    
  });

Чтобы удалить ненужные записи из базы так же создадим новый обработчик события:
  Template.post.events({
    "click .remove": function () {
      Posts.remove(this._id);
    }
  });

… который будет привязан к соответствующей конпке в шаблоне записи.
<template name="post">
  <div class="panel">
    <h2>{{title}}</h2>
    <p>{{{text}}}</p>
    <span class="remove alert radius small button">Удалить</span>
    {{published}}
  </div>
</template>


Таким образом мы получили простейшее приложение в несколько строчек, с функционалом отображения, добавления и удаления записей.
Стоит заметить, что благодаря «реактивности» метеора, все операции с базой данных будут моментально отображаться у всех пользователей. Чтобы предотвратить такое поведение нужно удалить отвечающий за это дело пакет:
meteor remove autopublish

Пример простой, если не сказать примитивный. Но даже он показывает, что благодаря удобному интерфейсу, предоставляемому этим фреймворком, человек, достаточно далёкий от веб-разработки может использовать технологии, которые ещё несколько лет назад были доступны только высококвалифицированным разработчикам (сокеты, динамическое обновление, js на сервере, документо-ориентированные базы данных).
Однако по скепсису в комментариях к другим постам о Meteor можно говорить о том, что не всем по душе такое радикальное упрощение. Представители «старой гвардии» ворчат: «Ещё один фреймворк! Не канонiчно. Только ассемблер, только хардкор!». Как социологу, мне кажется, что такая позиция в некоторой степени является следствием нежелания терять свой исключительный статус профессионалов, работающих с node.js.
Однако я уверен, что движение в сторону понятности и упрощения — несомненное благо. Профессионалы, если они действительно являются таковыми, смогут выделиться на разросшемся рынке. А многие любители IT, занятые в других областях, и потому не имеющие времени для воплощения своих идей в этой сфере, получат замечательный инструмент для творчества и возможно создадут множество веб-приложений решающих их узкоспециальные проблемы, о которых профессиональный разработчик может и не знать.
P.S.: если сообществу интересна эта тема, можно написать ещё одну-две статьи с описанием внедрения дополнительного функционала блога: редактирование записей, добавление тэгов и категорий, создание учетных записей пользователей, разграничение прав доступа.
Олег @iHun
карма
12,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (81)

  • +30
    Извините, а на фото к статье гуманитарий-социолог или девушка из команды разработчиков?
    • 0
      Вдохновимся обещаниями разработчиков, прекрасной девушкой-членом команды и начнём.
      • +43
        Девушкой-членом?!
        Более прекрасной иллюстрации чем отличается дефис от тире трудно придумать. Надо будет себе в бложик утащить.
        • +5
          По-моему, дефис употреблен правильно.
          • +1
            Не совсем. Его не стоит ставить между словосочетаниями, так что в данном случае лучше переформулировать предложение. А тире тут вообще не к месту было упомянуто, да.
            • +1
              Если автор имел в виду пояснение, а не словосочетание, то всё-таки тире, а не дефис.
              § 174.
              Посредством тире выделяются:

              Предложения и слова, вставляемые в середину предложения с целью пояснения или дополнения его, в тех случаях, когда выделение скобками (см. § 188) может ослабить связь между вставкой и основным предложением
              «Вдохновимся обещаниями разработчиков, прекрасной девушкой – членом команды – и начнём».
              • +2
                Я руководствовался правилом написания дефиса в тех случаях, когда приложение и определяемое слово – нарицательные существительные.
                Пример: ученый-биолог, девочки-подростки. Ну и девушка-член, если отбросить условности относится к тому же ряду.

                В любом случае эта конструкция позволила в ироничном ключе указать на природу этой девушки-члена :) (Хотя и первоначально такой задумки не было)
                • 0
                  Тогда Riateche прав, дефис вместе со словосочетанием привёл к путанице (а Вы её усугубили: девушка-член команды, а не просто). Но главное, что Вы ничего плохого сказать не хотели. :)
    • +3
      • 0
        Да это же, трап!
      • 0
        Не верил, что девушка, пока не дочитал в подписи к фото до «she..»
    • +10
      Понравилась? :)
      это Наоми. Преподавал(а) в MIT, совсемтно с ЛГБТ-центом Сан-Франциско основал(а) компьютерный класс Transcode для транссексуалов и и гендерквиров. И да, член команды разработчиков. Meteor сертефецирован для геев и лесбиянок. image
      • +9
        Для транссексуалов? Тогда это многое объясняет.
      • +3
        Если «She», то основала. При переводе не принято вносить лишнюю желтизну.
      • +4
      • –1
        Мне показалось, что это длинноволосый мужик.
      • 0
        >Meteor сертефецирован для геев и лесбиянок.

        OMG
    • +2
      Мне одному показалось что Наоми это Аршавин в парике?
  • +16
    >Вдохновимся обещаниями разработчиков, прекрасной девушкой-членом
    >прекрасной девушкой-членом

    0_o
    • +1
      Как нетолерантно…
      • –2
        Куда уж толерантнее? А по теме поста не гуманитариев это дело — разработку вести.
  • 0
    Заголовок какой-то жёлтый, или мне показалось?
  • +6
    а вы на minimongo.com/ заходили?
    я аж в ступор впал о.О
    • 0
      Внезапно! Видимо, автор от балды ссылку написал.
      • +3
        (minimongo.com судя по всему обещает приятную работу с этой обёрткой)
        Или это не юмор?
        • +1
          Именно так )
          • +1
            «теперь с вазелином!»
  • 0
    Напишите про загрузку файлов на сервер при помощи Meteor и без использования сторонних сервисов.
  • 0
    Может быть он просто поступил не туда?
    • +2
      В социологии, кстати, очень немало православного матана и анализа данных. Например, я не знаю, где ещё в вузах нашего города преподаётся системный анализ
  • +2
    Однако по скепсису в комментариях к другим постам о Meteor можно говорить о том, что не всем по душе такое радикальное упрощение. Представители «старой гвардии» ворчат: «Ещё один фреймворк! Не канонiчно. Только ассемблер, только хардкор!». Как социологу, мне кажется, что такая позиция в некоторой степени является следствием нежелания терять свой исключительный статус профессионалов, работающих с node.js

    Тогда давайте социологи не будут рассказывать «профессионалам, работающими с node.js» о том как лучше делать.

    Упрощение хорошо, но в меру, как только вы столкнетесь с какой нибудь не тривиальной задачей которая нетипична для вашего фреймворка, вы начинаете городить костыли и повторять: «будь проклят тот день когда я сел за баранку этого пылесоса». В последние годы появляется много «магических коробок» которые только и обещают что сделают разработку и поддержку проще простого, на практике же сталкиваешься с суровой реальностью, где старые и сотни раз избитые методы/технологии оказываются выгодней «магических коробок» где «все само, надо только пару строк кода написать».

    ИМХО
    • +4
      Конечно я не собирался учить профессионалов, просто другой взгляд со своей колокольни. Где-то в другом мире людям не так важна высокая производительность и бескончная масштабируемость. Они хотят просто решить свою небольшую задачу.

      Это как с Инстаграммом: благодаря его появлению каждый смог почувствовать себя талантливым фотографом. Конечно, большинство постят фоточки с едой или свои «луки» в зеркале ванной. Но во-первых, и они получают удовлетворение даже от такого творчества, а во-вторых, всё-таки в массе шкала можно найти очень достойные работы. При этом нельзя говорить, что Инстаграмм обрушил спрос на профессиональных фотографов, все заняли свою нишу
    • 0
      Ну так не читайте, кто вас заставляет то?
      Топик в целом неплохой, все описано просто и понятно.
      • 0
        Весьма странное заявление. Как можно оценить статью не прочитав ее?
        • 0
          Вы ошибочно трактуете данный топик как руководство к действию. Автор в топике никого не принуждает к работе с meteor, а только делится своим опытом работы с этим фреймворком. Я в целом с мнением автора согласен, и особенно поэтому считаю ваш комментарий неуместным, особенно учитывая что судя по комментарию вы даже не ознакомились с демо-материалами о meteor.
    • +1
      Вам, наверное, просто не попадались решения, где упрощения как раз таки ровно «в меру», плюс возможность легко и ненавязчиво включить столько хардкора, сколько вы посчитаете нужным.
      • 0
        Если не секрет, какие именно решения вы имеете в виду?
        • 0
          Вы хотите, чтобы меня сейчас живьем съели? :)
          • +4
            Неужели это битрикс? :)
            • +1
              Смешно. :)
  • +3
    Что-то мне кажется гуманитарий-социолог не сможет написать даже код, приведённый в посте.
    • +3
      не знаю как социолог, но политолог сможет точно. Отвечаю дипломом :)
  • 0
    Блин, оказывается это девушка…
    • +6
      так написано же: девушка-член. Мне кажется, здесь дальше не будут обсуждать node.js…
      • +2
        да, вы правы, — это именно девушка-член…
  • +30
    Иллюстрирование джаваскриптовых примеров транссексуальной фотографией? Мсье знает толк в извращениях.
    • +3
      Среди трансгендеров очень много программистов.
      • +7
        Среди программистов в сф много геев, мицгол подтвердит
        • +7
          Это злой троллинг, я никогда не работал на Совет Федерации.
          • +4
            (И это не говоря ужé обо всём остальном, что этот троллинг подразумевает, и чего также не было.)
          • 0
            Совете Федерации?
  • 0
    Весьма познавательно, спасибо, надеюсь на продолжение.
  • –1
    то есть одной командой он сразу ставит на сервер все, что нужно (nodejs, mongodb, handlebars)? выглядит интересно.
    • 0
      Не совсем. Прежде всего надо самому поставить node.js. А так да, все необходимые пакеты скачиваются при установке meteor
  • –2
    Давно присматривался к node.js, очень хочется попробовать какую-то новую область, а то я все больше на java сервер сайд. Попробую с этой библиотекой. Будет здорово почитать еще, конкретно мне интересен вопрос использования Meteor в каком нибудь облаке. Вот я думал Heroku поюзать, уж больно симпатичный дизайн, но там у них какой-то свой стек, как я помню. Где вы бы использовали Meteor?
    • +1
      В meteor встроен механизм деплоя приложений на их собственный сервер одной строкой, что для тестовых целей вполне неплохо.
      meteor deploy <имя_приложения>.meteor.com

      В дальшешем обещают поддержку других хостингов, но уже сейчас можно найти инструкции по деплою приложений на Amazon и Heroku.
    • 0
      Кстати, здесь можно найти задеплоенные таким образом приложения. Многие с исходным кодом (половина на CoffeScript правда -_-). Наверное лучшее место для изучения.
    • 0
      Вам стоит учитывать, что разработчики meteor придерживаются синхронной модели кода, поэтому в этом фреймворке вы не сможете использовать все возможности node.js в полной мере, но тем не менее для начала в целом неплохой вариант.
      • 0
        Понял вас, но думаю, мне пока хватит
      • 0
        Сервер не простаивает — для этого используется fiber
    • 0
      AppFog.com еще в копилку положите. Бесплатный план у них гораздо приятнее чем у Heroku, для поиграться посмотреть как и что себя ведет — самое оно. Node.js поддерживают, а вот развернется ли там метеор не знаю, надо пробовать.
  • –6
    НА ФОТО КАКОЙ-ТО МУЖЫК.
    • +5
      Мужик, это не мужик.
  • 0
    Ну а где реалтайм ) Записать данные в бд, потом вытащить их оттуда, для этого и фреймворк не нужен. Чем отличается этот фреймворк от других? вот и подчеркнули бы достоинства. Кстати даже в простом приложении можно было бы реалтайм применить, например добавление постов двумя юзерами одновременно и в данном случае эти статьи появились бы на сайте без перезагрузки. Далее система пакетов, которые можно установить в 1 клик и аплоад вашего приложения в 1 клик на сервер метеор. Может на этом нужно было акцентировать внимание.
    • +1
      Да, вы правы. Добавил несколько строк в конце. Про пакеты думал написать, но опасался чрезмерного распухания статьи. Вообще попользовавшись метеором так привыкаешь к реалтаймовым обновлениям, что воспринимаешь это как самой собой разумеющееся.
    • +2
      Одна из отличительных особенностей заключается в том, что данный фреймворк писать позволяет писать запрос к БД прямо на клиенте так как будто ваш код исполняется на сервере. То есть по-просту говоря вы можете писать запросы прямо из консоли браузера.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          В ранних версиях так и было, сейчас пофиксили, то есть возможность удалять и редактировать записи можно закрыть для анонимусов и вообще для всех.
          • НЛО прилетело и опубликовало эту надпись здесь
            • –1
              Я бы на вашем месте посмотрел демки, и уже после этого делал выводы. Вещица на самом деле занятная, на досуге можно поиграть.
    • +2
      По части реалтайма — особенность заключается в том, что шаблоны можно подписать на изменение данных в БД, что позволяет автоматически обновлять шаблоны, при обновлении данных на сервере. Посмотрите пару примеров с сайта метеора.
  • +6
    Жаль что 11 миллионов получил meteor а не derby.js. У метеора есть ряд явных просчетов:
    1. Отсутствие поддержки NPM (т.е. обособили себя от nodejs комьюнити)
    2. Отсутствие рендеринга шаблонов на сервере (а следовательно для поисковиков делать придется все отдельно)
    3. Отсутствие легкой возможности создавать JSON API.

    Все вышеперечисленное есть в дерби + таже самая реалтаймовость что и в метеор.
    • +1
      1. Да, но это необходимое следствие той самой идеологии одинакового кода на клиенте и сервере. Здесь неплохо разобран этот вопрос.
      2. Всё будет делаться автоматически. Сейчас для этого есть пакет spiderable, в будущем планируется нативная реализация.
    • 0
      Осталось дождаться когда дерби выйдет с альфы, а пока можно пожить на angular.
      • 0
        Именно этим и занимаюсь последнее время. Сейчас использую ангулар и экспресс для проектов.
    • 0
      В 0.6 появилась поддержка NPM
  • –1
    Пишите, Шура, пишите…
  • –1
    Спасибо! Пишите еще, пожалуйста!
  • 0
    На сайте проекта для гуманитариев скринкаст в емаксе…
  • +4
    Девка страшна, как моя жизнь.

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