Рубрики
Без рубрики

Создание каналов в стиле GitHub с стимулом и HTML-Over-проводом

Где-то по пути к нашему нынешнему Hellscape JavaScript, программисты решили, что HTML был ОВ … Теги с Ruby, Rails, JavaScript, WebDev.

Где-то по пути к нашему нынешнему Hellscape JavaScript, программисты решили, что HTML закончился. Мы закончили с этим.

Появление инструментов, таких как Реагировать Смещенные программисты вдали от записи HTML, вместо этого пишут JSX Язык разметки на основе Fancier, который хорошо работал в вашем JavaScript.

Резюнды были затем отправлены в тупые конечные точки JSON API. Или если бы вы были фантазии и преследовать вверх, вы бы использовали Graphql Действительно

Но HTML? Дым!

Краткая история HTML-Over-провода

Один из ключевых столбов рельсов – это «Value Integrated Systems» Отказ В то время как отрасль движется к микросервисам, высокому отделенным фронтальным концам и командам, а также саренская песня программирования через Bego Bricks, Rails наклоняется в одну систему, которая делает все это – называется Величественный монолит Отказ

Вместо того, чтобы восстановить большую часть того, что уже работает в рельсах в javaScript MVC MVC клиента, приложения, такие как BaseCamp, GitHub и Shopify, способны добиться загрузки Snappy Page, используя концепцию «HTML-Over-Wire».

В его Семальный Railsconf 2016 Talk , Сэм Стефенсон Прогулки по кускам этого стека.

Используя Турболинки (или подобные библиотеки, такие как pjax или Инерция ) и быстрые отклики HTML (помогают кэшированию и избегая чрезмерных запросов баз данных, чтобы получить Время отклика в базе данных ), вы можете построить высокопроизводительные страницы, в то же время, когда все еще висит заниженные преимущества отзывы о бездействиях и сервере логика.

Как указывает Сэм, это было действительно «золотым веком веб-разработки».

Так что, хотя большая часть отрасли пошла вниз по JavaScript кролика, создавая новые инновации для Реактивное рендеринг , Функциональный Контейнеры государственного управления и примерно Семьдесят разные Клиентская сторона Маршрутизация библиотеки – Тихое восстание в рельсовых землях затопила эти методы и подключив к строительным приложениям из бурильного сервера HTML.

Мы видим эпоху Возрождения этих инструментов в 2020 году и волнение (по крайней мере, в небольшом углу Twitter!) Достигают температура лихорадки, поскольку BaseCamp запускает эй: полнофункциональный почтовый клиент с небольшим количеством следа JavaScript, который нажал границы подхода HTML-перегрузки.

Turbolinks/стимул 20xx: Будущее

Стек в 2014-2016 гг. Был:

Вы даже можете проследить происхождение этих методов еще дальше. Я был недавно Отправил ссылку До почти 15 лет отдыха “Микроформат” называется «Ахах: асинхронный HTML и HTTP» , что ранняя версия тех же идей, которые мы так взволнованы сегодня. (Вы не должны удивляться, увидев Дэвид Ханссон перечислены как вкладчик!)

Теперь версия «Современная версия» 2020 года также включает в себя:

  • Стимулус (см. также Alpinejs ) для облегченного управления событиями, связыванием данных и «брызгает» поведения
  • Частичные обновления с Turbolinks через новый <Шаблон> Командный подход (замена js.erb и поддерживать CSP Несомненно
  • Обновления Turbolinks в реальном времени через Accuitable (см. также Стимулфрефлекс / CableReady Несомненно
  • Первая сторонняя поддержка для WebPack, ES6 и новых подходов CSS, как Хвост и Purgecss

Этот стек чрезвычайно мощный, а опыт развития позволяет вам действительно летать. Вы можете строить быстрые и интерактивные приложения с небольшой командой, все еще испытывая радость кодовой базы ванильных рельсов 2014 года.

Но годы JavaScript SPA-тяжелая монокультура У него сложно узнать об этом стеке. Сообщество наполнено практикующими, используя инструменты для создания программного обеспечения и бизнеса. Там просто не был одинаковым уровнем создаваемого контента, и поэтому многие из этих инструментов неизвестны и могут быть недоступны.

Одним из способов, которыми я могу внести свой вклад, является освещение способа для тех, кто хочет узнать больше, показывая некоторые реальные примеры (не список TODO или Счетчик ). После того, как вы увидите, как вы можете использовать такие инструменты, как стимул и ответы HTML, чтобы создать функции, в которых вы можете вместо этого добраться до инструмента, как реагировать, все начнут нажать.

Давайте построим что-то реальное: Hovercards.

Hovercards показывают дополнительную контекстную информацию в всплывающем пузыре, когда вы паритете что-то в своем приложении. Вы можете увидеть примеры этого шаблона пользовательского интерфейса на GitHub, Twitter и даже Википедии.

Эта функция очень проста в построении с Rails, используя HTML-перегрузочный подход.

Вот план:

  • Создайте действие контроллера, чтобы рендер HoverCard как HTML
  • Напишите крошечный контроллер стимула, чтобы получить HoverCard HTML, когда вы наводите

…вот и все.

Нам не нужно делать конечные точки API и выяснить, как структурировать все необходимые данные. Нам не нужно добраться до реагирования или VUE, чтобы сделать этот компонент на стороне клиента.

Красота этого подхода для скучных рельсов состоит в том, что особенность мертва – простая, и она одинаково простая, чтобы построить. Легко рассуждать по поводу кода и супер расширяемой.

Для этого примера давайте построим подачу событий для приложения для рынка кроссовки.

Когда вы наведите курсор на обувь, вы видите картинку, название, цену и т. Д. То же самое для пользователя, вы можете увидеть мини-профиль для каждого пользователя.

Frontend (Стимул + Fetch)

Разметка для ссылки выглядит как:





  <%= link_to shoe.name, shoe, class: "branded-link" %>

Примечание: мы используем API из Стимул 2.0 Предварительный просмотр выпуска!

Одной из великих особенностей стимула является то, что вы можете прочитать разметку и понять, что происходит без погружения в JavaScript.

Не зная ничего другого о реализации, вы можете догадаться, как он собирается работать: эта ссылка завернута в Hovercard контроллер, когда вы зависаете (через mouseender и MouseLeave События) Карта отображается или скрыта.

Как рекомендуется в Писать лучшие контроллеры стимула , вы должны пройти в URL для конечной точки карты Hover в качестве свойства данных, чтобы мы могли повторно использовать hovercard_controller Для нескольких типов карт. Это также удерживает нас от необходимости дублировать маршруты приложений в JavaScript.

// app/javascript/controllers/hovercard_controller.js

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["card"];
  static values = { url: String };

  show() {
    if (this.hasCardTarget) {
      this.cardTarget.classList.remove("hidden");
    } else {
      fetch(this.urlValue)
        .then((r) => r.text())
        .then((html) => {
          const fragment = document
            .createRange()
            .createContextualFragment(html);

          this.element.appendChild(fragment);
        });
    }
  }

  hide() {
    if (this.hasCardTarget) {
      this.cardTarget.classList.add("hidden");
    }
  }

  disconnect() {
    if (this.hasCardTarget) {
      this.cardTarget.remove();
    }
  }
}

Это все JavaScript, мы собираемся писать для этой функции: это всего ~ 30 строк, и мы можем использовать это для любых других потенциалов Hovercards в приложении. На самом деле нет ничего приложения, специфичного для этого контроллера, вы можете вытащить его в отдельный модуль и повторно использовать его через проекты. Это абсолютно общий.

Контроллер использует извлекать API Чтобы вызвать предоставленные железнодорожные конечные точки, получает HTML назад, а затем вставляет его в DOM. Как небольшое улучшение, мы используем стимул цель API для привязки данных для сохранения ссылки на карту, чтобы последующие палаты по этой ссылке могут просто показать/скрыть разметку, не делая другой запрос сети.

Мы также выбираем удалить карту при выходе из страницы (через отключить Метод жизненного цикла), но вы также можете выбрать карту вместо этого в зависимости от того, как вы хотите, чтобы кэшировать на работу.

Backend (Rails + Server представлен HTML)

На передней части нет ничего магии, и это та же история на бэкере.

# config/routes.rb
Rails.application.routes.draw do
  resources :shoes do
    member do
      get :hovercard
    end
  end
end

Настройка маршрута для /Обувь/: ID/HoverCard

# app/controllers/shoes_controller.rb
class ShoesController < ApplicationController
  ...

  def hovercard
    @shoe = Shoe.find(params[:id])

    render layout: false
  end
end

Напишите базовый контроллер действий, единственное значение, которое мы устанавливаем Макет: ложь Так что мы не используем глобальный макет приложений для этой конечной точки.

Вы даже можете даже посетить этот путь непосредственно в вашем браузере, чтобы быстро итереть на содержании и дизайне. Рабочий процесс становится еще лучше при использовании подхода на основе утилиты, подобного хвостовике, так как вам даже не нужно ждать ваших связке активов, чтобы восстановить!





  

    

      <%= image_tag @shoe.image_url, class: "flex-shrink-0 h-24 w-24 object-cover border border-gray-200 bg-gray-100 rounded", alt: @shoe.name %>

      

        
          <%= @shoe.brand %>
        

        
          <%= @shoe.name %>
        

        
          <%= @shoe.colorway %>
          
            ·
          
          <%= number_to_currency(@shoe.price.to_f / 100) %>

HoverCard построен с нанесенным на серверный шаблон ERB, такой же, как и любая другая страница в приложении Rails. Мы устанавливаем Data-hovercard-target Как удобство связываться с этим элементом назад в контроллере стимула.

Последние штрихи

Data-Tooltip-arrow Позволяет нам добавлять немного треугольника в пузырь с небольшим количеством CSS. Вы можете добавить библиотеку, как Поппер Если у вас есть более продвинутые потребности, но это правило одного CSS отлично работает и не требует никаких внешних зависимостей.

/* app/javascript/stylesheets/application.css */

[data-tooltip-arrow]::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 1rem;
  border-width: 2rem;
  border-color: white transparent transparent transparent;
}

И VOILA! Мы построили ховеркиды!

Если мы хотим добавить HOVERCARD в другой тип модели в нашем приложении (например, профили пользователей), он почти чувствует себя как обманывая. Мы можем использовать тот же контроллер стимула. Все, что нам нужно сделать, это добавить конкретный шаблон пользователя.





  

    

      <%= image_tag @user.gravatar_url, class: "flex-shrink-0 h-16 w-16 object-cover bg-gray-100 rounded inset shadow-inner", alt: @user.name %>

      

        <%= @user.name %>
        

          ...
          <%= @user.bio %>
        

        
          Kickin' it since <%= @user.created_at.year %>

Принимая его на следующий уровень

Если вы хотите расширить эту функцию еще дальше, есть несколько идей, которые вы можете рассмотреть:

  • Удаление некоторого дублирования в шаблонах HoverCard люми: Извлечение рельсов частичный , используя драгоценный камень, как github/view_component или используя хвостовую ветку @Apply Директива к Создание компонентов В ваших стилях
  • Анимирование HoverCard, используя CSS переходы исчезать и выйти
  • Добавление задержки или модных «направленных направлений» (например, Amazon Mega Dispdown ), чтобы вы могли продвигаться легче мыши более легко перемещать вашу мышь к HoverCard
  • Отменить ожидающий запрос AJAX Если вы уходите, используя Abortcontroller для извлекать API.
  • Исследуйте кэширование потенциалов (при условии, что данные не специфичны для пользователя или сеанса) в Rails с Фрагмент кэширования

Заверните

Этот стек – это любовное письмо в Интернете. Используйте ссылки и формы. Рендер HTML. Держите свое состояние на сервере и в базе данных. Пусть браузер ручка навигация. Добавьте брызгает интерактивность, чтобы улучшить опыт. Для многих кажется, что шаг назад, но на мой взгляд, он возвращается к тому, как должно быть.

Естественно быть скептически скептически, особенно в нынешнем климате “js все вещи”. Но вы действительно должны дать эти инструменты попытаться, прежде чем вы действительно получите его. После того, как вы увидите, что классические способы построения программного обеспечения все еще могут получить работу, трудно вернуться к отладке Node_Modules Конфликты или восстановление HTML-форм в пределах этой годы Framework Du Jour.

В этом Годовой Railsconf Remote Keynote DHH говорил о Циклический маятник диалектики Гегеля Это происходит в программном обеспечении. Новые идеи перерабатываются и заново открыты каждые несколько лет, и теперь прекрасно подпрыгивается на прогулку.

Оригинал: “https://dev.to/swanson/building-github-style-hovercards-with-stimulusjs-and-html-over-the-wire-2c10”

Читайте ещё по теме: