Jody - JsOn for Dynamic sites

1. JODY - JsOn for DYnamic sites
Зыкин Илья
media-projects teamlead

2. github.com/the-teacher/JODY

3. Что такое JODY?
JODY – JsOn for Dynamic sites
Техника использующая JSON и ряд соглашений
для упрощения взаимодействия между
backend и frontend частями web приложения
1

4. Какую проблему(ы) решает JODY?
1. Позволяет сократить время на решение многих рутинных
задач связанных с обновлением контента страницы без
перезагрузки всей страницы
2. Backend разработчикам трудно писать JS
(Особенно качественный JS. Особенно vanilla JS)
3. Позволяет сократить (полностью убрать) JS код на стороне
сервера
2

5. Как работает JODY?
1. Сервер формирует JSON по заданным
соглашениям
2. Посредник между сервером и клиентом
обрабатывает структурированный ответ и
выполняет заданные действия
3

6. Когда применима техника?
1. Когда в проекте используется шаблонизация
на стороне сервера (JADE, HAML, SLIM)
2. Когда с минимальными усилиями нужно
организовать динамику на странице
4

7. Задача
На сайте с большим кол-вом "тяжелого" контента планируется реализовать
следующее:
1. Вход пользователя в систему должен быть выполнен без перезагрузки
страницы
2. В случае успеха или ошибки должно появится уведомление
3. В случае успеха в боковой панели должен появится блок с корзиной
пользователя
4. В случае успеха форма входа должна быть заменена на блок с
информацией о пользователе
5

8. “Классический” подход
6
Построим форму для получения JS с сервера и его исполнения

9. “Классический” подход
7
В контроллере что-то очень простое

10. “Классический” подход
8
А вот то, чего мы хотим избежать
(Смесь ruby и JS)

11. “Классический” подход
9
Однажды вы получите на поддержку “кашу”

12. “Классический” подход
1. Мы начали писать код стороны клиента на
стороне сервера
2. Скоро (!) JavaScript + JQuery код займет в
шаблонах на сервере довольно много места
3. Есть вероятность получить на поддержку
“кашу”
10

13. JODY подход
Получаем с сервера JSON
11

14. JODY подход
Можно сделать контроллер чуть тоньше
12

15. JODY подход
Строим JSON (JBuilder)
13

16. JODY подход
Строим JSON (JBuilder)
14

17. JODY подход
JS посредник
15

18. JODY подход
Что-то особенное
16

19. JODY подход
1. количество кода вьюшки увеличилось
2. backend разработчик огражден от
особенностей реализации forntend части
3. Благодаря соглашениям вы сократите кол-во
JS кода на клиенте
4. Вы очистили свои вьюшки от JS вставок и
существенно улучшили поддерживаемость
своей системы
17

20. Но ведь идея не нова?
1. Да, идея возвращения фрагментов вида на сторону клиента
с помощью JSON структур не нова и вы можете встретить
вопросы на эту тему на stackowerflow
2. Мы лишь предлагаем использовать эту возможность на чуть
более продвинутом уровне, что бы с помощью соглашений и
небольшого количества кода существенно улучшить
поддерживаемые системы и внести в них долю порядка.
18

21. Могу ли я использовать технику JODY не для Rails?
Да, конечно! Вероятно вам придется приложить чуть больше сил, что бы
обеспечить отправку AJAX запросов на сервер, но трудностей у вас
возникнуть не должно.
Главные ожидания от систем которые хотят использовать JODY следующие:
1. Шаблонизация производится в основном на серверной стороне
2. Сервер возвращает ответы в виде JSON данных со структурой
подчиненной вашим корпоративным соглашениям
Все что вам останется - выделить наиболее рутинные операции на
клиентской части приложения и автоматизировать их выполнение с
помощью JODY посредника
19

22. Есть ли у JODY более точная
спецификация?
Наверняка создание такой спецификации
будет увлекательным процессом для всей
вашей команды, если вы захотите попробовать
что-то подобное
20

23. Вопросы

24. Спасибо!

25. github.com/the-teacher
Зыкин Илья
Тимлид группы разработки медиа-проектов в компании CreateDigital
Санкт-Петербург, 2014
Ilya.killich
zykin-ilya@ya.ru