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

Ilya.killichzykin-ilya@ya.ru