meteor за 15 минут
DESCRIPTION
Слайды выступления Ивана Рожкова на MoscowJS 16. Тема доклада "Meteor за 15 минут"TRANSCRIPT
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