Download - Meteor за 15 минут
![Page 1: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/1.jpg)
Meteor Js за 15 минут
Иван Рожков Moscow Js
Москва октябрь 2014
![Page 2: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/2.jpg)
Что такое Meteor?Это платформа для быстрого построения высококачественных веб приложений.
Построена на Node JS.
Текущая версия 0.9.4
2 /44
![Page 3: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/3.jpg)
Почему это интересно?1. Быстрый старт.2. Не писать лишний код.3. Удобство и магия...
3 /44
![Page 4: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/4.jpg)
1.Быстрый старт
Все из коробки.Q:Что нужно для разработки на Meteor?
A: Meteor!Установить - две минуты, далее сразу разработка!
4 /44
![Page 5: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/5.jpg)
2. Не писать лишний код
Meteor
Логика на Клиенте
Логика на Сервере
Доступ к Данным
JavaScript
5 /44
Один язык на клиенте и сервере
![Page 6: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/6.jpg)
REST AJAX data loading
6 /44
2. Не писать лишний код
![Page 7: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/7.jpg)
3. Удобство и магияВсе сделано для удобства разработки:1. Автозагрузка файлов.2. Классная система пакетов.3. Автоматическое обновление кода.4. Реактивность....
7 /44
![Page 8: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/8.jpg)
Автозагрузка файлов.
Html
Js
a.html b.htmlc.html
a.js b.jsc.js
Meteora.css b.css
c.cssCss
8 /44
![Page 9: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/9.jpg)
Автозагрузка файлов.
<script src="/scripts/browser.js"></script>
<link rel="stylesheet" type="text/css" src="class.css"/>
9 /44
![Page 10: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/10.jpg)
Автозагрузка файлов.
<script src="/scripts/browser.js"></script>
<link rel="stylesheet" type="text/css" src="class.css"/>
Не нужно инклюдить!
10 /44
![Page 11: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/11.jpg)
d3
Система пакетов
bootstapjquery
d3Система пакетов
11 /44
![Page 12: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/12.jpg)
d3
Система пакетов
bootstapjquery
d3Система пакетов
bootstrapjqueryd3
...
12 /44
![Page 13: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/13.jpg)
Система пакетов
● пакеты работают с сервером и с клиентом● позволяет создавать собственные пакеты● легко расширяемая● следит за версиями пакетов
13 /44
![Page 14: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/14.jpg)
Автоматическое обновление кода
Код Meteor Сервер
Клиент 1
Клиент 2перезапуск
изменение
...
14 /44
![Page 15: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/15.jpg)
Автоматическое обновление кода
Код Meteor Сервер
Клиент 1
Клиент 2
новый код
...
15 /44
![Page 16: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/16.jpg)
Автоматическое обновление кода
Код Meteor Сервер
Клиент 1
Клиент 2
...
Метеор сам следит за актуальностью скриптов на клиенте!Больше никаких “нажмите Ctrl + R”!
16 /44
перезапуск
![Page 17: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/17.jpg)
РеактивностьБД (данные)
Meteor Сервер
Клиент 1 Клиент 2
изменение
Клиент N17 /44
...
![Page 18: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/18.jpg)
Как это работает
![Page 19: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/19.jpg)
Как это работаетСвязь между клиентом и сервером осуществляется по DDP протоколу.
DDP отвечает за:● синхронизацию данных между клиентом и
сервером● RPC (вызов серверных процедур на клиенте)
*
* - data distributed protocol. 19 /44
![Page 20: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/20.jpg)
Как работает синхронизация
Клиент СерверDDP
minimongo mongo
20 /44
![Page 21: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/21.jpg)
Пример: создание проекта> meteor create meteor_messages
> ls -la
.meteormeteor_messages.cssmeteor_messages.htmlmeteor_messages.js
> meteor 21 /44
![Page 22: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/22.jpg)
Пример: создание проекта> meteor create meteor_messages
> ls -la
.meteormeteor_messages.cssmeteor_messages.htmlmeteor_messages.js
> meteor 22 /44
Создаем проект
Запускаем проект
![Page 23: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/23.jpg)
Пример: meteor_messages.js 1. var Messages = new Meteor.Collection("messages"); 2. if(Meteor.isClient) {... //клиентская логика13. }
23 /44
![Page 24: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/24.jpg)
Пример: meteor_messages.js 1. var Messages = new Meteor.Collection("messages"); 2. if(Meteor.isClient) {... //клиентская логика13. }
24 /44
![Page 25: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/25.jpg)
Пример: meteor_messages.js 1. var Messages = new Meteor.Collection("messages"); 2. if(Meteor.isClient) {... //клиентская логика13. }
25 /44
![Page 26: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/26.jpg)
Пример: 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
![Page 27: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/27.jpg)
Пример: 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
![Page 28: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/28.jpg)
Пример: 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
![Page 29: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/29.jpg)
Пример: 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
![Page 30: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/30.jpg)
Meteor шаблонный языкШаблонный движок BlazeЯзык шаблонов Spacebars, основанный на Handlebars.
Возможно подключить другие языки: Jade.
30 /44
![Page 31: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/31.jpg)
Пример: 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
![Page 32: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/32.jpg)
Пример: 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
![Page 33: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/33.jpg)
Пример: 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
![Page 34: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/34.jpg)
Пример: 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
![Page 35: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/35.jpg)
Пример: результат - быстро!
35 /44
![Page 36: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/36.jpg)
Пример: результат - быстро!
Время создания проекта - 2 минуты!В результате:● Возможность создавать сообщения● Мгновенная синхронизация между клиентами
36 /44
![Page 37: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/37.jpg)
Обратная сторона медали1. подходит не для всех приложений2. управление подписками3. управление правами4. запуск на реальном сервере
37 /44
![Page 38: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/38.jpg)
Подходит не для всех приложений1. подходит не для всех приложений
Подходит для много-пользовательских приложений. Реактивность - это не всегда хорошо.
2. управление подписками3. управление правами4. запуск на реальном сервере
38 /44
![Page 39: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/39.jpg)
Подходит не для всех приложений1. подходит не для всех приложений2. управление подписками
Нужно управлять подписками.
3. управление правами4. запуск на реальном сервере
39 /44
![Page 40: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/40.jpg)
Подходит не для всех приложений1. подходит не для всех приложений2. управление подписками3. управление правами
Нужно управлять правами
4. запуск на реальном сервере
40 /44
![Page 41: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/41.jpg)
Подходит не для всех приложений1. подходит не для всех приложений2. управление подписками3. управление правами4. запуск на реальном сервере
Потребуется NodeJs сервербалансировщик нагрузкикластер mongoDb
41 /44
![Page 42: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/42.jpg)
Вывод: meteor идеально для прототипа● Быстро разрабатывать● Удобно разрабатывать● Легко рефакторить
42 /44
![Page 43: Meteor за 15 минут](https://reader036.vdocuments.mx/reader036/viewer/2022062319/557cf6e6d8b42a57118b4a3a/html5/thumbnails/43.jpg)
Попробуйте!
1. Установите meteor:
$ curl https://install.meteor.com/ | sh
2. Экспериментируйте
3. Посетите https://www.meteor.com/
43 /44