Meteor.js

Meteor можна назвати підналаштуванням Node.js. Розробники зробили ставку на простоту коду. Однією із основних цяцьок в метеорі є його «реактивність», тобто зміни в базі даних, відразу відображаються користувачам, без оновлення сторінки.

Зараз проект ще навіть не встиг дійти до релізної версії, але в проект вже вклали 11 млн баксів. Непоганий, капітал для старту.

Практика

Напишемо простенький блог на метеорі.

Під капотом:

  • Ubuntu 12.10
  • Встановлений Node.js
  • Sublime Text 2
  • Foundation

Встановлюємо Метеора:

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

При встановленні метеора, все що йому необхідно він ставить сам. Наприклад база даних(mongoDB)

Створюємо новий проект:

meteor create blog

Запускаємо:

cd blog
meteor

Для того щоб перевірити що у нас вийшло, йдемо сюди localhost:3000

Дійсно, немає нічого складного.

В корені проекту у нас з’явилось 3 файли

  • Blog.css
  • Blog.html
  • Blog.js

Відкриємо файл Blog.html і зробимо нашого блогу. Шаблон кожного блоку формуються тегом

<template name="назва блоку">

Я використав фреймворк Foundation , ви можете взяти любий інший.

<head>
  <title>Блог</title>
</head>

<body>
  <div class="row">

    <div class="three columns">
    {{> editor}} <!-- Виводить на екран редактор-->

        {{> title}} <!-- Виводить на екран заголовки-->
  </div>

  <div class="nine columns">
        {{> stream}} <!-- Виводить на екран потік записів-->
  </div>
</body>

І побудуємо шаблони:

<template name="stream"> <!-- Шаблон потоку-->
  {{#each posts}}
    {{> post}}
  {{/each}}
</template>

<template name="post"> <!-- Вигляду запису-->
  <div class="panel">
    <h2>{{title}}</h2> <!-- Виведення змінної-->
    <h4>{{author}}</h4>
    <p>{{{text}}}</p> 
    <span class="remove alert radius small button">Видалити</span>

    <p>{{published}}</p>
  </div>
</template>

<template name="editor"> <!-- Шаблон редактора-->
  <h1>Новий запис</h1>
  <label>Заголовок

    <input type="text" id="title-area" placeholder="" class="input-block-level">
  </label>
  <label>Автор

    <input type="text" id="author-area" placeholder="" class="input-block-level"/>
  </label>
  <label>Текст

    <textarea type="text" id="editor-area" placeholder="" class="input-block-level"></textarea>
  </label>
  <button id="submit-post" class="button radius">Пішьов!</button>
</template>

<template name="title"> <!-- Шаблон заголовків-->

   <h4 align="center">Записи</h4>
   {{#each posts}}
<div class="slide-bar">
  <ul class="no-bullet">
    <li>{{title}}</li>
  </ul>
</div>
  {{/each}}
</template>

Виведення змінної в шаблон виконується за допомогою фігурних дужок:

{{title}}

Як що ви вкажете три фігурні дужки замість двох, HTML код не буде виводитись:

{{{text}}}

Тепер, перейдемо до файлу Blog.js. Я старався максимально пояснити код в коментарях.

Posts = new Meteor.Collection("posts"); // Створення нової колекції

if (Meteor.isClient) { // Код, що виконується на клієнтській частині

  Template.stream.posts = function () { // Вказуємо, що працюємо з шаблоном "stream"
    return Posts.find({}, {sort: {published: -1}}); // Виводимо записи в шаблон "stream"
  };

  Template.title.posts = function () { // Вказуємо, що працюємо з шаблоном "title"
    return Posts.find({}, {sort: {published: -1}}); // Виводимо заголовки в шаблон "title"
  } 

  Template.editor.events({ // Вказуємо, на подію, яка стається в шаблоні "editor"
    "click #submit-post": function() { // При натисканні на кнопку "Пішьов!"
      var published_date = new Date(); // оголошення змінної
      Posts.insert({ // Запис в колекцію
        author: document.getElementById("author-area").value, // Автора
        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); // Видалення запису
    }
  });
}

if (Meteor.isServer) { // Код, що виконується на серверній частині

  if (Posts.find().count() === 0) { // Якщо записів не знайдено, виводимо початкові записи
    var posts = [
    {
      title: "First",
      author: "Verkalets",
      text: "Text",
      published: (new Date()).toLocaleTimeString()
    },

    {
      title: "Second",
      author: "Verkalets",
      text: "Text Second",
      published: (new Date()).toLocaleTimeString()
    }
    ];

     for (var i = 0; i< posts.length; i++) { // цикл виведення
      Posts.insert({
          title: posts[i].title,
          author: posts[i].author,
          text: posts[i].text,
          published: posts[i].published,
        });
    } 

  }

}

Тепер, заходимо на localhost:3000 і бачимо таке

Деплой

В метеора також реалізований деплой проектів. Це виконується простою командою:

meteor deploy parker.meteor.com

де parker.meteor.com — назва домену, на якому ми хочемо розмістити наше творіння.

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

А ось вам документація

П.С. Статтю можна назвати скороченим перекладом, з трішки доступнішим поясненням. Оригінал статті на хабрі.

© 2009 - 2019, Розробка - соціальна ІТ спільнота.
Контакти: info@rozrobka.com
Правила користування