meteor за 15 минут

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