Meteor Js за 15 минут

Иван Рожков Moscow Js

Москва октябрь 2014

Что такое Meteor?Это платформа для быстрого построения высококачественных веб приложений.

Построена на Node JS.

Текущая версия 0.9.4

2 /44

Почему это интересно?1. Быстрый старт.2. Не писать лишний код.3. Удобство и магия...

3 /44

1.Быстрый старт

Все из коробки.Q:Что нужно для разработки на Meteor?

A: Meteor!Установить - две минуты, далее сразу разработка!

4 /44

2. Не писать лишний код

Meteor

Логика на Клиенте

Логика на Сервере

Доступ к Данным

JavaScript

5 /44

Один язык на клиенте и сервере

REST AJAX data loading

6 /44

2. Не писать лишний код

3. Удобство и магияВсе сделано для удобства разработки:1. Автозагрузка файлов.2. Классная система пакетов.3. Автоматическое обновление кода.4. Реактивность....

7 /44

Автозагрузка файлов.

Html

Js

a.html b.htmlc.html

a.js b.jsc.js

Meteora.css b.css

c.cssCss

8 /44

Автозагрузка файлов.

<script src="/scripts/browser.js"></script>

<link rel="stylesheet" type="text/css" src="class.css"/>

9 /44

Автозагрузка файлов.

<script src="/scripts/browser.js"></script>

<link rel="stylesheet" type="text/css" src="class.css"/>

Не нужно инклюдить!

10 /44

d3

Система пакетов

bootstapjquery

d3Система пакетов

11 /44

d3

Система пакетов

bootstapjquery

d3Система пакетов

bootstrapjqueryd3

...

12 /44

Система пакетов

● пакеты работают с сервером и с клиентом● позволяет создавать собственные пакеты● легко расширяемая● следит за версиями пакетов

13 /44

Автоматическое обновление кода

Код Meteor Сервер

Клиент 1

Клиент 2перезапуск

изменение

...

14 /44

Автоматическое обновление кода

Код Meteor Сервер

Клиент 1

Клиент 2

новый код

...

15 /44

Автоматическое обновление кода

Код Meteor Сервер

Клиент 1

Клиент 2

...

Метеор сам следит за актуальностью скриптов на клиенте!Больше никаких “нажмите Ctrl + R”!

16 /44

перезапуск

РеактивностьБД (данные)

Meteor Сервер

Клиент 1 Клиент 2

изменение

Клиент N17 /44

...

Как это работает

Как это работаетСвязь между клиентом и сервером осуществляется по DDP протоколу.

DDP отвечает за:● синхронизацию данных между клиентом и

сервером● RPC (вызов серверных процедур на клиенте)

*

* - data distributed protocol. 19 /44

Как работает синхронизация

Клиент СерверDDP

minimongo mongo

20 /44

Пример: создание проекта> meteor create meteor_messages

> ls -la

.meteormeteor_messages.cssmeteor_messages.htmlmeteor_messages.js

> meteor 21 /44

Пример: создание проекта> meteor create meteor_messages

> ls -la

.meteormeteor_messages.cssmeteor_messages.htmlmeteor_messages.js

> meteor 22 /44

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

Запускаем проект

Пример: meteor_messages.js 1. var Messages = new Meteor.Collection("messages"); 2. if(Meteor.isClient) {... //клиентская логика13. }

23 /44

Пример: meteor_messages.js 1. var Messages = new Meteor.Collection("messages"); 2. if(Meteor.isClient) {... //клиентская логика13. }

24 /44

Пример: meteor_messages.js 1. var Messages = new Meteor.Collection("messages"); 2. if(Meteor.isClient) {... //клиентская логика13. }

25 /44

Пример: meteor_messages.js 1. var Messages = new Meteor.Collection("messages"); 2. if(Meteor.isClient) { 3. Template.messages.helpers( 4. {messagesList: function () { 5. return Messages.find({}, 6. { sort: { time: -1 }}); 6. }}); 7. Template.messages.events = { 8. "click #add-message" : function(e){ 9. var mes = prompt("Please enter message", "");10. Messages.insert({11. message: mes, time: Date.now()12. });13. }}} 26 /44

Пример: meteor_messages.js 3. Template.messages.helpers( 4. {messagesList: function () { 5. return Messages.find({}, 6. { sort: { time: -1 }}); 7. }}); 8. Template.messages.events = { 9. "click #add-message" : function(e){10. var mes = prompt("Please enter message", "");11. Messages.insert({12. message: mes, time: Date.now()13. }); 27 /44

Пример: meteor_messages.js 3. Template.messages.helpers( 4. {messagesList: function () { 5. return Messages.find({}, 6. { sort: { time: -1 }}); 7. }}); 8. Template.messages.events = { 9. "click #add-message" : function(e){10. var mes = prompt("Please enter message", "");11. Messages.insert({12. message: mes, time: Date.now()13. }); 28 /44

Пример: meteor_messages.js 3. Template.messages.helpers( 4. {messagesList: function () { 5. return Messages.find({}, 6. { sort: { time: -1 }}); 7. }}); 8. Template.messages.events = { 9. "click #add-message" : function(e){10. var mes = prompt("Please enter message", "");11. Messages.insert({12. message: mes, time: Date.now()13. }); 29 /44

Meteor шаблонный языкШаблонный движок BlazeЯзык шаблонов Spacebars, основанный на Handlebars.

Возможно подключить другие языки: Jade.

30 /44

Пример: meteor_messages.html 1. <body> 2. {{> messages}} 3. </body> 4. 5. <template name="messages"> 6. {{#each messagesList}} 7. {{message}}<br> 8. {{/each}} 9.10. <input type="button" value="Add message" 11. id="add-message"/>12. </template> 31 /44

Пример: meteor_messages.html 1. <body> 2. {{> messages}} 3. </body> 4. 5. <template name="messages"> 6. {{#each messagesList}} 7. {{message}}<br> 8. {{/each}} 9.10. <input type="button" value="Add message" 11. id="add-message"/>12. </template> 32 /44

Пример: meteor_messages.html 1. <body> 2. {{> messages}} 3. </body> 4. 5. <template name="messages"> 6. {{#each messagesList}} 7. {{message}}<br> 8. {{/each}} 9.10. <input type="button" value="Add message" 11. id="add-message"/>12. </template> 33 /44

Пример: meteor_messages.html 1. <body> 2. {{> messages}} 3. </body> 4. 5. <template name="messages"> 6. {{#each messagesList}} 7. {{message}}<br> 8. {{/each}} 9.10. <input type="button" value="Add message" 11. id="add-message"/>12. </template> 34 /44

Пример: результат - быстро!

35 /44

Пример: результат - быстро!

Время создания проекта - 2 минуты!В результате:● Возможность создавать сообщения● Мгновенная синхронизация между клиентами

36 /44

Обратная сторона медали1. подходит не для всех приложений2. управление подписками3. управление правами4. запуск на реальном сервере

37 /44

Подходит не для всех приложений1. подходит не для всех приложений

Подходит для много-пользовательских приложений. Реактивность - это не всегда хорошо.

2. управление подписками3. управление правами4. запуск на реальном сервере

38 /44

Подходит не для всех приложений1. подходит не для всех приложений2. управление подписками

Нужно управлять подписками.

3. управление правами4. запуск на реальном сервере

39 /44

Подходит не для всех приложений1. подходит не для всех приложений2. управление подписками3. управление правами

Нужно управлять правами

4. запуск на реальном сервере

40 /44

Подходит не для всех приложений1. подходит не для всех приложений2. управление подписками3. управление правами4. запуск на реальном сервере

Потребуется NodeJs сервербалансировщик нагрузкикластер mongoDb

41 /44

Вывод: meteor идеально для прототипа● Быстро разрабатывать● Удобно разрабатывать● Легко рефакторить

42 /44

Попробуйте!

1. Установите meteor:

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

2. Экспериментируйте

3. Посетите https://www.meteor.com/

43 /44

Спасибо за внимание

Иван Рожков

ivan133ru@gmail.com