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

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

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

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

Hotwire

Сердце Hotwire — Turbo

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

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

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

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

https://hotwired.dev/

JavaScript
5
289
+ Читать

2 Ответа

  1. Yori Yori 21 Сентября 2022

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

    2
    Ответить
  1. Evg Evg 21 Сентября 2022

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

    <!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

    Смотрю..

    3
    Ответить