Hotwire — это альтернативный подход к созданию современных веб-приложений

21 Сентября (ред)

Hotwire — это альтернативный подход к созданию современных веб-приложений без использования большого количества JavaScript путем отправки HTML вместо JSON по сети.

Hotwire

Сердце Hotwire — Turbo

Набор дополнительных методов для ускорения изменения страниц и отправки форм, разделения сложных страниц на компоненты и потоковой передачи частичных обновлений страниц через WebSocket. Все без написания JavaScript вообще. И с самого начала разработан для идеальной интеграции с родными гибридными приложениями для iOS и Android.

В то время как Turbo обычно обеспечивает не менее 80% интерактивности, для которой традиционно требовался бы JavaScript, все еще бывают случаи, когда требуется тире пользовательского кода. Stimulus делает это легко благодаря HTML-ориентированному подходу к состоянию и связыванию.

Stimulus — это JavaScript-фреймворк со скромными амбициями. Он не стремится захватить весь ваш внешний интерфейс — на самом деле он вообще не связан с рендерингом HTML. Вместо этого он предназначен для того, чтобы дополнить ваш HTML достаточным поведением, чтобы заставить его сиять.

Мне понравилось.

https://hotwired.dev/

Adre Adre + 637

2 Ответа

  1. Yori Yori 21 Сентября (ред.)

    У меня знакомый на нём сидит. Сам ещё не смотрел.

  1. Evg Evg 21 Сентября (ред.)

    Вот, для теста собрал файл, работает:

    <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <script type="module">
        import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
        window.Stimulus = Application.start()
        Stimulus.debug = true
        Stimulus.register("hello", class extends Controller {
          static targets = [ "name", "output" ]
            go() {
              this.outputTarget.textContent =
                `Привет, ${this.nameTarget.value}!`
            }
        })
      </script>
    </head>
    <body>
      <div data-controller="hello">
        <input data-hello-target="name" type="text">
        <button data-action="click->hello#go">Gо</button>
        <span data-hello-target="output"></span>
      </div>
    </body>
    </html>

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

    В проект:

    // Подключим файл шаблона напрямую:
    Route::get('/test/test', view('test'));

    Чтобы на HLEB запустить, локально погонять, а файл бросить вот сюда:

    // Сам шаблон тут:
    resources/views/test.php

    Смотрю..