JODY - JsOn for DYnamic sites Зыкин Илья media-projects teamlead
Jun 14, 2015
JODY - JsOn for DYnamic sites
Зыкин Ильяmedia-projects teamlead
github.com/the-teacher/JODY
Что такое JODY?
JODY – JsOn for Dynamic sites
Техника использующая JSON и ряд соглашений для упрощения взаимодействия между backend и frontend частями web приложения
1
Какую проблему(ы) решает JODY?
1. Позволяет сократить время на решение многих рутинных задач связанных с обновлением контента страницы без перезагрузки всей страницы
2. Backend разработчикам трудно писать JS(Особенно качественный JS. Особенно vanilla JS)
3. Позволяет сократить (полностью убрать) JS код на стороне сервера
2
Как работает JODY?
1. Сервер формирует JSON по заданным соглашениям
2. Посредник между сервером и клиентом обрабатывает структурированный ответ и выполняет заданные действия
3
Когда применима техника?
1. Когда в проекте используется шаблонизация на стороне сервера (JADE, HAML, SLIM)
2. Когда с минимальными усилиями нужно организовать динамику на странице
4
ЗадачаНа сайте с большим кол-вом "тяжелого" контента планируется реализовать следующее:
1. Вход пользователя в систему должен быть выполнен без перезагрузки страницы
2. В случае успеха или ошибки должно появится уведомление
3. В случае успеха в боковой панели должен появится блок с корзиной пользователя
4. В случае успеха форма входа должна быть заменена на блок с информацией о пользователе
5
“Классический” подход
6
Построим форму для получения JS с сервера и его исполнения
“Классический” подход
7
В контроллере что-то очень простое
“Классический” подход
8
А вот то, чего мы хотим избежать(Смесь ruby и JS)
“Классический” подход
9
Однажды вы получите на поддержку “кашу”
“Классический” подход
1. Мы начали писать код стороны клиента на стороне сервера
2. Скоро (!) JavaScript + JQuery код займет в шаблонах на сервере довольно много места
3. Есть вероятность получить на поддержку “кашу”
10
JODY подход
Получаем с сервера JSON
11
JODY подход
Можно сделать контроллер чуть тоньше
12
JODY подходСтроим JSON (JBuilder)
13
JODY подходСтроим JSON (JBuilder)
14
JODY подходJS посредник
15
JODY подход
Что-то особенное
16
JODY подход
1. количество кода вьюшки увеличилось2. backend разработчик огражден от особенностей реализации forntend части3. Благодаря соглашениям вы сократите кол-во JS кода на клиенте4. Вы очистили свои вьюшки от JS вставок и существенно улучшили поддерживаемость своей системы
17
Но ведь идея не нова?
1. Да, идея возвращения фрагментов вида на сторону клиента с помощью JSON структур не нова и вы можете встретить вопросы на эту тему на stackowerflow
2. Мы лишь предлагаем использовать эту возможность на чуть более продвинутом уровне, что бы с помощью соглашений и небольшого количества кода существенно улучшить поддерживаемые системы и внести в них долю порядка.
18
Могу ли я использовать технику JODY не для Rails?
Да, конечно! Вероятно вам придется приложить чуть больше сил, что бы обеспечить отправку AJAX запросов на сервер, но трудностей у вас возникнуть не должно.
Главные ожидания от систем которые хотят использовать JODY следующие:
1. Шаблонизация производится в основном на серверной стороне2. Сервер возвращает ответы в виде JSON данных со структурой подчиненной вашим корпоративным соглашениям
Все что вам останется - выделить наиболее рутинные операции на клиентской части приложения и автоматизировать их выполнение с помощью JODY посредника
19
Есть ли у JODY более точная спецификация?
Наверняка создание такой спецификации будет увлекательным процессом для всей вашей команды, если вы захотите попробовать что-то подобное
20
Вопросы
Спасибо!
github.com/the-teacher
Зыкин ИльяТимлид группы разработки медиа-проектов в компании CreateDigitalСанкт-Петербург, 2014