Версия для JavaScript и jQuery

Подождите, разве у нас уже не было этой записи в блоге?

Я уже делал пост о FlatCollab, это правда. Однако первоначальный FlatCollab состоял только из Rails, HTML и CSS — интерфейс представлял собой набор статических страниц.

FlatCollab 2 имеет красивый новый внешний интерфейс, который использует вызовы jQuery и AJAX для отображения всех функций FlatCollab в виде одностраничного приложения. Серверная часть Rails в настоящее время в основном используется как API, отображая ответы JSON, которые интерфейсная часть обрабатывает в объекты модели JavaScript.

Это выглядит почти так же.

Я не сильно изменил дизайн, за исключением добавления нескольких анимированных функций пользовательского интерфейса (например, выпадающего меню на панели навигации, которое раньше было только на CSS).

Однако за кулисами он полностью перестроен. Вместо того, чтобы загружать целую новую страницу HTML при отправке новой формы задачи, есть JavaScript, который работает за кулисами. Наш полезный небольшой скрипт берет значения из формы, отправляет их в серверную часть с помощью вызова AJAX и возвращает ответ JSON с новой сохраненной задачей. Затем он может добавить этот небольшой фрагмент HTML в список задач вместо того, чтобы перезагружать всю страницу и обращаться к базе данных с другим запросом на сбор данных.

Одностраничные приложения отстой.

Теперь ты просто отрицаешь.

Однако это правда. Я действительно не осознавал, насколько они раздражают с точки зрения UX, пока не потратил много времени на тестирование вызовов AJAX на внутренних страницах FlatCollab.

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

Итак, несмотря на то, что это был хороший опыт, и приятно говорить, что я построил SPA, в SPA нет смысла как такового. Следующая итерация FlatCollab будет включать небольшую перестройку, чтобы не нарушать важные функции UX браузера.

Что было самым сложным в реконструкции?

Определенно сроки. Я начал работать над этим проектом 21 января… да, на следующий день после инаугурации. Учитывая то, что происходило в новостях, я не был максимально сосредоточен.

Однажды я сделал перерыв в чтении заголовков в Твиттере и снова погрузился в игру, но это сильно отвлекло. Нет ничего лучше, чем отладка беззвучно завершающегося вызова AJAX, чтобы вы забыли обо всех своих проблемах.

Чему вы научились во время этого проекта?

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

Мне было сложно разобраться с JS на первый. Раньше я много работал с JS, но мне так и не удалось ощутить, насколько гибок этот язык и как много способов его можно применить. Но теперь я чувствую себя намного более комфортно со всеми различными способами перемещения данных с клиента на сервер и обратно.

Какой крутой трюк вы узнали при создании FlatCollab 2?

Я хотел сделать некоторое условное форматирование на стороне клиента — показать кнопку редактирования, только если сообщение принадлежало текущему авторизованному пользователю, например. Но я не мог придумать хорошего способа передать идентификатор текущего пользователя из контроллера в представление.

Как оказалось, ответ был на Stack Overflow. Почему я даже беспокоюсь о поиске в Google, когда я могу просто искать SO?

# /application.html.erb
# at the very bottom of the file
# just above the closing </body> tag
<script>
  window.currentUser = {
    id: <%= current_user.id %>
  }
</script>

Это ловкий трюк. Эрб обрабатывается на стороне сервера, заменяя <%= current_user.id %> фактическим идентификатором. Затем, поскольку это находится в макете приложения, который загружается для каждой страницы, каждая страница имеет currentUser.id, на который можно легко ссылаться в коде на стороне клиента.

Еще одна вещь, которую я не уверен, можно точно назвать «крутой»: готовясь к развертыванию на Heroku, я обнаружил, что JS-минификатор Rails по умолчанию, Uglify, плохо работает с синтаксисом ES6, из-за чего предварительная компиляция ресурсов терпят неудачу в моих классах и методах ES6.

Моими вариантами транспиляции моего кода ES6 во что-то, что хорошо сочетается с конвейером ресурсов Rails, были в основном либо webpack, либо Babel. Тем не менее, Webpack казался излишним для такого легковесного приложения, как это, и, поскольку я использую Rails 5, многие ресурсы в Интернете по использованию Babel с Rails устарели. Благодаря этому превосходному руководству от 9elements я смог настроить Babel для работы с Rails 5 и получить полностью функционирующий конвейер ресурсов для доставки моих файлов CSS и JavaScript.

Вы можете увидеть новую, улучшенную версию FlatCollab с Javascript во всей ее одностраничной красоте на https://flat-collab.herokuapp.com/.