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

1. Meteor Js за 15 минут
Иван Рожков
Moscow Js
Москва октябрь 2014

2. Что такое Meteor?
Это платформа для быстрого построения
высококачественных веб приложений.
Построена на Node JS.
Текущая версия 0.9.4
2 /44

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

4. 1.Быстрый старт
Все из коробки.
Q:Что нужно для разработки на Meteor?
A: Meteor!
Установить - две минуты, далее сразу разработка!
4 /44

5. 2. Не писать лишний код
Meteor
Логика на
Клиенте
Логика на
Сервере
Доступ к
Данным
JavaScript
5 /44
Один язык на клиенте и сервере

6. REST AJAX data loading
6 /44
2. Не писать лишний код

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

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. Автозагрузка файлов.
<script src="/scripts/browser.js"></script>
<link rel="stylesheet" type="text/css" src="class.css"/>
9 /44

10. Автозагрузка файлов.
<script src="/scripts/browser.js"></script>
<link rel="stylesheet" type="text/css" src="class.css"/>
Не нужно инклюдить!
10 /44

11. Система пакетов
bootstap
jquery
d3
d3
Система
пакетов
11 /44

12. Система пакетов
bootstap
jquery
d3
d3
Система
пакетов
bootstrap
jquery
d3
...
12 /44

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

14. Автоматическое обновление кода
Код Meteor
Сервер
Клиент 1
Клиент 2
перезапуск
изменение
...
14 /44

15. Автоматическое обновление кода
Код Meteor
Сервер
Клиент 1
Клиент 2
новый код
...
15 /44

16. Автоматическое обновление кода
Код Meteor
Сервер
перезапуск
Клиент 1
...
Клиент 2
Метеор сам следит за актуальностью
скриптов на клиенте!
Больше никаких “нажмите Ctrl + R”!
16 /44

17. Реактивность
БД (данные)
Meteor Сервер
изменение
Клиент 1 Клиент 2
Клиент N
17 /44
...

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

19. Как это работает
Связь между клиентом и сервером
осуществляется по DDP *
протоколу.
DDP отвечает за:
● синхронизацию данных между клиентом и
сервером
● RPC (вызов серверных процедур на клиенте)
* - data distributed protocol. 19 /44

20. Как работает синхронизация
DDP
Клиент Сервер
minimongo mongo
20 /44

21. Пример: создание проекта
> meteor create meteor_messages
> ls -la
.meteor
meteor_messages.css
meteor_messages.html
meteor_messages.js
> meteor 21 /44

22. Пример: создание проекта
> meteor create meteor_messages
> ls -la
Создаем проект
.meteor
meteor_messages.css
meteor_messages.html
meteor_messages.js
Запускаем проект
> meteor 22 /44

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

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

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

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. Пример: 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. Пример: 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. Пример: 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. Meteor шаблонный язык
Шаблонный движок Blaze
Язык шаблонов Spacebars, основанный на
Handlebars.
Возможно подключить другие языки: Jade.
30 /44

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. Пример: 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. Пример: 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. Пример: 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 /44

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

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

38. Подходит не для всех приложений
1. подходит не для всех приложений
Подходит для много-пользовательских
приложений.
Реактивность - это не всегда хорошо.
2. управление подписками
3. управление правами
4. запуск на реальном сервере
38 /44

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

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

41. Подходит не для всех приложений
1. подходит не для всех приложений
2. управление подписками
3. управление правами
4. запуск на реальном сервере
Потребуется NodeJs сервер
балансировщик нагрузки
кластер mongoDb
41 /44

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

43. Попробуйте!
1. Установите meteor:
$ curl https://install.meteor.com/ | sh
2. Экспериментируйте
3. Посетите https://www.meteor.com/
43 /44

44. Спасибо за внимание
Иван Рожков
ivan133ru@gmail.com