jody - json for dynamic sites on rails
DESCRIPTION
Jody - JsOn for Dynamic sitesTRANSCRIPT
![Page 1: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/1.jpg)
JODY - JsOn for DYnamic sites
Зыкин Ильяmedia-projects teamlead
![Page 2: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/2.jpg)
github.com/the-teacher/JODY
![Page 3: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/3.jpg)
Что такое JODY?
JODY – JsOn for Dynamic sites
Техника использующая JSON и ряд соглашений для упрощения взаимодействия между backend и frontend частями web приложения
1
![Page 4: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/4.jpg)
Какую проблему(ы) решает JODY?
1. Позволяет сократить время на решение многих рутинных задач связанных с обновлением контента страницы без перезагрузки всей страницы
2. Backend разработчикам трудно писать JS(Особенно качественный JS. Особенно vanilla JS)
3. Позволяет сократить (полностью убрать) JS код на стороне сервера
2
![Page 5: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/5.jpg)
Как работает JODY?
1. Сервер формирует JSON по заданным соглашениям
2. Посредник между сервером и клиентом обрабатывает структурированный ответ и выполняет заданные действия
3
![Page 6: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/6.jpg)
Когда применима техника?
1. Когда в проекте используется шаблонизация на стороне сервера (JADE, HAML, SLIM)
2. Когда с минимальными усилиями нужно организовать динамику на странице
4
![Page 7: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/7.jpg)
ЗадачаНа сайте с большим кол-вом "тяжелого" контента планируется реализовать следующее:
1. Вход пользователя в систему должен быть выполнен без перезагрузки страницы
2. В случае успеха или ошибки должно появится уведомление
3. В случае успеха в боковой панели должен появится блок с корзиной пользователя
4. В случае успеха форма входа должна быть заменена на блок с информацией о пользователе
5
![Page 8: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/8.jpg)
“Классический” подход
6
Построим форму для получения JS с сервера и его исполнения
![Page 9: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/9.jpg)
“Классический” подход
7
В контроллере что-то очень простое
![Page 10: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/10.jpg)
“Классический” подход
8
А вот то, чего мы хотим избежать(Смесь ruby и JS)
![Page 11: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/11.jpg)
“Классический” подход
9
Однажды вы получите на поддержку “кашу”
![Page 12: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/12.jpg)
“Классический” подход
1. Мы начали писать код стороны клиента на стороне сервера
2. Скоро (!) JavaScript + JQuery код займет в шаблонах на сервере довольно много места
3. Есть вероятность получить на поддержку “кашу”
10
![Page 13: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/13.jpg)
JODY подход
Получаем с сервера JSON
11
![Page 14: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/14.jpg)
JODY подход
Можно сделать контроллер чуть тоньше
12
![Page 15: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/15.jpg)
JODY подходСтроим JSON (JBuilder)
13
![Page 16: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/16.jpg)
JODY подходСтроим JSON (JBuilder)
14
![Page 17: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/17.jpg)
JODY подходJS посредник
15
![Page 18: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/18.jpg)
JODY подход
Что-то особенное
16
![Page 19: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/19.jpg)
JODY подход
1. количество кода вьюшки увеличилось2. backend разработчик огражден от особенностей реализации forntend части3. Благодаря соглашениям вы сократите кол-во JS кода на клиенте4. Вы очистили свои вьюшки от JS вставок и существенно улучшили поддерживаемость своей системы
17
![Page 20: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/20.jpg)
Но ведь идея не нова?
1. Да, идея возвращения фрагментов вида на сторону клиента с помощью JSON структур не нова и вы можете встретить вопросы на эту тему на stackowerflow
2. Мы лишь предлагаем использовать эту возможность на чуть более продвинутом уровне, что бы с помощью соглашений и небольшого количества кода существенно улучшить поддерживаемые системы и внести в них долю порядка.
18
![Page 21: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/21.jpg)
Могу ли я использовать технику JODY не для Rails?
Да, конечно! Вероятно вам придется приложить чуть больше сил, что бы обеспечить отправку AJAX запросов на сервер, но трудностей у вас возникнуть не должно.
Главные ожидания от систем которые хотят использовать JODY следующие:
1. Шаблонизация производится в основном на серверной стороне2. Сервер возвращает ответы в виде JSON данных со структурой подчиненной вашим корпоративным соглашениям
Все что вам останется - выделить наиболее рутинные операции на клиентской части приложения и автоматизировать их выполнение с помощью JODY посредника
19
![Page 22: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/22.jpg)
Есть ли у JODY более точная спецификация?
Наверняка создание такой спецификации будет увлекательным процессом для всей вашей команды, если вы захотите попробовать что-то подобное
20
![Page 23: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/23.jpg)
Вопросы
![Page 24: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/24.jpg)
Спасибо!
![Page 25: Jody - JsOn for Dynamic sites on Rails](https://reader036.vdocuments.site/reader036/viewer/2022062706/557cb23cd8b42ab37c8b46fd/html5/thumbnails/25.jpg)
github.com/the-teacher
Зыкин ИльяТимлид группы разработки медиа-проектов в компании CreateDigitalСанкт-Петербург, 2014