Изучение JavaScript после того, как вы потратили столько времени на Ruby, — это такая поездка! Мне нравится тратить время на решение JS-задач на Codewars, но мини-задачи на логику чем-то отличаются от реализации JS в веб-приложении. Это мой первый опыт работы с Ruby и JS над проектом, так что я многому научился!

1. Открытие

Первоначально, прочитав требования к оценке портфолио, я решил внести следующие изменения в свое приложение Rails:

  • Рендеринг пользовательских клубов по индексу Memberships с помощью JS
  • Разрешить пользователю просматривать список предстоящих книг и читать список книг, нажав «Далее» на странице Book с помощью AJAX.
  • Визуализируйте список Discussion из Comments с помощью AJAX
  • Отправить Comment в Discussion с помощью AJAX
  • Создайте Discussion как объект модели JS
  • Визуализировать имя пользователя, опубликовавшего Comment, с помощью AJAX.
  • Рендеринг Comment времени создания с помощью AJAX

Как вы понимаете, будет много AJAX! По сути, AJAX — это метод, используемый для создания асинхронных веб-приложений. Асинхронность означает, что пока мы отправляем вызов метода на сервер, наша веб-страница не блокируется/зависает при загрузке результатов. Мы даже можем взаимодействовать с другими элементами на странице, ожидая завершения вызова для получения наших результатов! Но для нашего небольшого приложения виртуального книжного клуба время, необходимое для получения результатов, очень короткое, поэтому нам не нужно этого делать.

2. Стратегия

Стратегия, которую я использовал здесь, заключается в том, чтобы сначала сериализовать все мои модели с помощью Active Model Serializer. AMS — это жемчужина, которая позволяет мне легко преобразовывать мои данные в JSON. Мне не нужно было сериализовать все модели, так как я планировал реализовать AJAX только для следующих моделей: Memberships, Books, Discussions и Comments; но я так и сделал, на всякий случай. После сериализации я отредактировал свои контроллеры, чтобы разрешить мне доступ к представлениям как .json, в дополнение к .html. Это было весело. Я использую расширение JSONView для Chrome, чтобы просматривать данные JSON в аккуратном формате, а также разворачивать или сворачивать любые данные, которые мне нужны). AMS также позволяет мне указывать любые ассоциации между моими моделями, что дает мне аккуратно вложенные структуры JSON, например:

Я использовал те же ассоциации, что и для своей схемы. Я понял, что позже мне нужно было немного изменить это — об этом позже! Убедившись, что данные и ассоциации отображаются идеально, я приступил к кодированию JS. Здесь начинается самое сложное.

3. Дизайн

Здесь я не уделял особого внимания визуальному дизайну, так как этот проект в основном служит для меня проблемой кодирования. Я исправил некоторые странности CSS, но на этом все.

4. Архитектура

Архитектура Rails позволила мне разделить мой JS-файл в соответствии с представлениями и моделями, на которых я сосредоточен. Чтобы реализовать AJAX на странице discussion#index , мне нужно только закодировать JS на странице discussion.js (которую я изменил с версии discussion.coffee — CoffeeScript — это то, что я изучу в будущем, наряду со многими другими вещами).

Что касается структуры просмотров, я отделил просмотры Discussions от просмотров Book. Это означает, что раньше вы могли просматривать обсуждения книги со страницы book#show отдельной книги, но я понял, что это также означает, что вызовы AJAX для discussion#index нужно будет помещать в books.js (поскольку Discussions отображаются через Books контроллер). Затем я решил переместить Discussions представлений в их собственную законную папку, которая выглядит чище и легче в управлении.

5. Развитие

Самая долгая часть процесса. Для этого мне пришлось просмотреть много видео Learn. Я записался на учебные группы по Rails+JS, но они проводились в рабочее время и, к сожалению, я не мог их посещать, поэтому вместо этого прибегнул к записи. Я нахожу запись учебного занятия Брэда очень полезной! Он даже разместил код в своем репозитории на GitHub.

Одна из ошибок, которую я обнаружил на раннем этапе, заключалась в том, что мои вызовы AJAX срабатывали несколько раз. Я узнал, что это произошло потому, что я указал в своем application.js следующее:

//= require jquery
//= require rails-ujs
//= require jquery-ujs
//= require_tree .
//= require popper
//= require bootstrap
//= require typed

Вы видите это? Я вызывал несколько файлов jQuery, в результате чего каждый запрос AJAX запускался дважды. Я удалил строку jquery-ujs, и все прекрасно восстановилось (двоения в глазах больше нет!).

Еще одна ошибка произошла, когда мне пришлось дважды щелкнуть ссылку, прежде чем я увидел, что результаты добавляются к моему представлению. Это произошло из-за того, что я случайно вложил функцию щелчка в другую функцию щелчка, что привело к беспорядку. Это было исправлено.

Один из моих самых больших уроков в этом проекте заключался в том, чтобы научиться использовать $.ajax() и $.getJSON(). Я использовал оба стиля для разных частей проекта, просто чтобы попрактиковаться в обоих стилях. Лично я предпочитаю последнее, так как это сокращение от $.ajax() — в нем уже указан параметр для вывода в формате JSON, и он автоматически преобразует мой вывод JSON в объект. Ням. Я считаю, что $.getJSON() также более настраиваемый, так как я могу легко указывать, настраивать и видеть, с какого URL-адреса я получаю свой запрос.

Я также научился манипулировать сериализованными данными JSON, чтобы получить определенные пары ключ-значение. В файле discussion_serializer.rb, например, я добавил пользовательский метод:

Чтобы отобразить имя пользователя каждого комментария, мне нужно было получить доступ к user_id комментария из моего объекта Discussion JS. Я понял, что мой Discussion объект JS не имел доступа к вложенным комментариям user_id, discussion_id, поскольку AMS углубился только на один уровень:

Однако я смог увидеть user_id, когда перешел прямо к Comments:

Поэтому мне нужно было заставить мой discussion_serializer.rb обслуживать мой JSON так, как мне нравится, что и делает пользовательский метод comments_with_user. Мне удалось создать новую пару ключ-значение для моего объекта Discussions, получить необходимую информацию и получить к ней доступ через discussions.json:

После того, как у меня были данные comments_with_user , мне не нужно было, чтобы AMS давала мне исходный список комментариев (без пользователей), поэтому я прокомментировал строку has_many :comments (строка 9) из discussion_serializer.rb.

6. Развертывание

Я проверил новую ветку git для разработки функций JS и отправил свои собственные запросы на включение и слияние. Для живого развертывания я пока продолжу использовать Heroku, но я с нетерпением жду возможности узнать больше о сервере и хостинге, особенно об AWS EC2, о котором я много слышал!

Спасибо за чтение!