Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Meteor Js за 15 минут 
Иван Рожков 
Moscow Js 
Москва октябрь 2014
Что такое Meteor? 
Это платформа для быстрого построения 
высококачественных веб приложений. 
Построена на Node JS. 
Текущ...
Почему это интересно? 
1. Быстрый старт. 
2. Не писать лишний код. 
3. Удобство и магия... 
3 /44
1.Быстрый старт 
Все из коробки. 
Q:Что нужно для разработки на Meteor? 
A: Meteor! 
Установить - две минуты, далее сразу ...
2. Не писать лишний код 
Meteor 
Логика на 
Клиенте 
Логика на 
Сервере 
Доступ к 
Данным 
JavaScript 
5 /44 
Один язык на...
REST AJAX data loading 
6 /44 
2. Не писать лишний код
3. Удобство и магия 
Все сделано для удобства разработки: 
1. Автозагрузка файлов. 
2. Классная система пакетов. 
3. Автом...
Автозагрузка файлов. 
Html 
Js 
a.html b.html 
c.html 
a.js b.js 
c.js 
Meteor 
a.css b.css 
c.css 
Css 
8 /44
Автозагрузка файлов. 
<script src="/scripts/browser.js"></script> 
<link rel="stylesheet" type="text/css" src="class.css"/...
Автозагрузка файлов. 
<script src="/scripts/browser.js"></script> 
<link rel="stylesheet" type="text/css" src="class.css"/...
Система пакетов 
bootstap 
jquery 
d3 
d3 
Система 
пакетов 
11 /44
Система пакетов 
bootstap 
jquery 
d3 
d3 
Система 
пакетов 
bootstrap 
jquery 
d3 
... 
12 /44
Система пакетов 
● пакеты работают с сервером и с клиентом 
● позволяет создавать собственные пакеты 
● легко расширяемая ...
Автоматическое обновление кода 
Код Meteor 
Сервер 
Клиент 1 
Клиент 2 
перезапуск 
изменение 
... 
14 /44
Автоматическое обновление кода 
Код Meteor 
Сервер 
Клиент 1 
Клиент 2 
новый код 
... 
15 /44
Автоматическое обновление кода 
Код Meteor 
Сервер 
перезапуск 
Клиент 1 
... 
Клиент 2 
Метеор сам следит за актуальность...
Реактивность 
БД (данные) 
Meteor Сервер 
изменение 
Клиент 1 Клиент 2 
Клиент N 
17 /44 
...
Как это работает
Как это работает 
Связь между клиентом и сервером 
осуществляется по DDP * 
протоколу. 
DDP отвечает за: 
● синхронизацию ...
Как работает синхронизация 
DDP 
Клиент Сервер 
minimongo mongo 
20 /44
Пример: создание проекта 
> meteor create meteor_messages 
> ls -la 
.meteor 
meteor_messages.css 
meteor_messages.html 
m...
Пример: создание проекта 
> meteor create meteor_messages 
> ls -la 
Создаем проект 
.meteor 
meteor_messages.css 
meteor_...
Пример: meteor_messages.js 
1. var Messages = new Meteor.Collection("messages"); 
2. if(Meteor.isClient) { 
... //клиентск...
Пример: meteor_messages.js 
1. var Messages = new Meteor.Collection("messages"); 
2. if(Meteor.isClient) { 
... //клиентск...
Пример: meteor_messages.js 
1. var Messages = new Meteor.Collection("messages"); 
2. if(Meteor.isClient) { 
... //клиентск...
Пример: meteor_messages.js 
1. var Messages = new Meteor.Collection("messages"); 
2. if(Meteor.isClient) { 
3. Template.me...
Пример: meteor_messages.js 
3. Template.messages.helpers( 
4. {messagesList: function () { 
5. return Messages.find({}, 
6...
Пример: meteor_messages.js 
3. Template.messages.helpers( 
4. {messagesList: function () { 
5. return Messages.find({}, 
6...
Пример: meteor_messages.js 
3. Template.messages.helpers( 
4. {messagesList: function () { 
5. return Messages.find({}, 
6...
Meteor шаблонный язык 
Шаблонный движок Blaze 
Язык шаблонов Spacebars, основанный на 
Handlebars. 
Возможно подключить др...
Пример: meteor_messages.html 
1. <body> 
2. {{> messages}} 
3. </body> 
4. 
5. <template name="messages"> 
6. {{#each mess...
Пример: meteor_messages.html 
1. <body> 
2. {{> messages}} 
3. </body> 
4. 
5. <template name="messages"> 
6. {{#each mess...
Пример: meteor_messages.html 
1. <body> 
2. {{> messages}} 
3. </body> 
4. 
5. <template name="messages"> 
6. {{#each mess...
Пример: meteor_messages.html 
1. <body> 
2. {{> messages}} 
3. </body> 
4. 
5. <template name="messages"> 
6. {{#each mess...
Пример: результат - быстро! 
35 /44
Пример: результат - быстро! 
Время создания проекта - 2 минуты! 
В результате: 
● Возможность создавать сообщения 
● Мгнов...
Обратная сторона медали 
1. подходит не для всех приложений 
2. управление подписками 
3. управление правами 
4. запуск на...
Подходит не для всех приложений 
1. подходит не для всех приложений 
Подходит для много-пользовательских 
приложений. 
Реа...
Подходит не для всех приложений 
1. подходит не для всех приложений 
2. управление подписками 
Нужно управлять подписками....
Подходит не для всех приложений 
1. подходит не для всех приложений 
2. управление подписками 
3. управление правами 
Нужн...
Подходит не для всех приложений 
1. подходит не для всех приложений 
2. управление подписками 
3. управление правами 
4. з...
Вывод: meteor идеально для 
прототипа 
● Быстро разрабатывать 
● Удобно разрабатывать 
● Легко рефакторить 
42 /44
Попробуйте! 
1. Установите meteor: 
$ curl https://install.meteor.com/ | sh 
2. Экспериментируйте 
3. Посетите https://www...
Спасибо за внимание 
Иван Рожков 
ivan133ru@gmail.com
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

2

Share

Download to read offline

Meteor за 15 минут

Download to read offline

Слайды выступления Ивана Рожкова на MoscowJS 16. Тема доклада "Meteor за 15 минут"

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Meteor за 15 минут

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

    May. 8, 2015
  • makskoutun

    Nov. 3, 2014

Слайды выступления Ивана Рожкова на MoscowJS 16. Тема доклада "Meteor за 15 минут"

Views

Total views

1,248

On Slideshare

0

From embeds

0

Number of embeds

9

Actions

Downloads

7

Shares

0

Comments

0

Likes

2

×