[Hotwire] HTML로만 아는 터보.🚜

4889 단어 HTMLHotwireTurboturbolinks
개시하다
레일스7 발표로 핫와이어가 주목받고 있다.호텔와이어는 레일스 파트너와 쉽게 대화를 나누지만, 중요한 것은'HTML만 있으면 움직인다'는 것이다.(즉, Laavel, Express 등 모든 웹 프레임워크와 공존할 수 있습니다!)
그렇다면 이번에는 HTML만으로 Hotwire의 세계관을 경험할 수 있다는 내용으로 요약해 보면 어떨까.
건드린 일
  • Hotwire의 구성 모듈 중 하나인 "Turbo"의 "Turbo-Frame"
  • 아주 기본적인 것만
    • 이런 느낌은 HTML 기술만 할 수 있어요.

    닿을 수 없는 일
  • Stimulus
  • Strada
  • 기타 모든 발전 내용
    • HTML 파일 준비
    다음 두 페이지를 준비하세요.
    - index.html
    - foo.html
    먼저 HTML 파일을 준비합니다.index.html포인트가 두 개밖에 없어요.
  • CDN에서 터보를 head로 읽습니다.
  • <turbo-frame id="bar">라는 사용자 정의 태그가 있습니다.
    • index.html
    <!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- Hotwire のインストール -->
    <script type="module">
      import hotwiredTurbo from "https://cdn.skypack.dev/@hotwired/turbo";
    </script>
  </head>

  <body>
    <main class="container">
      <h2>Turbo-Frame</h2>

      <turbo-frame id="bar">
        <h3>フレーム内は置換される</h3>
        <a href="./foo.html">リクエスト: foo.html</a>
      </turbo-frame>
    </main>
  </body>
</html>
    foo.html다음 설명에서는 index.html의 일부를 대체하는 데 사용되는 파일입니다.
  • 도 다음과 같은 예처럼 필요한 라벨만 있는 상태일 수 있다.
  • 물론 완전한 HTML도 가능합니다.
    • foo.html
    <body>
  <h1>あってもなくてもいいH1</h1>

  <turbo-frame id="bar">
    <form action="./index.html">
      <input placeholder="送信すると戻る" />
      <input type="submit" />
    </form>
  </turbo-frame>
</body>
    요청foo.html
  • <a> 탭을 클릭하면 서버가 foo.html<body>의 불완전한 HTML만 반환됩니다.
  • id 일치<turbo-frame>가 발견되면 터보가 교체합니다.

    • 그나저나 <turbo-frame> 안에 포함되지 않음<h1>あってもなくてもいいH1</h1>은 무시되었다.완전한 HTML이든 불완전한 HTML이든 모두 이 원인일 수 있다.어쨌든 이런 상황에서<turbo-frame>만 식별될 수 있다.
    또 브라우저의 개발자 도구를 보니 스파 동작이 있었다.주소 표시줄도 변하지 않습니다.(물론 변경할 수도 있는 설정)

    총결산
    HTTP 요청에 따라 HTML을 반환하기만 하면 대응하는 id 프레임워크만 바꾸는 동작을 할 수 있습니다.
  • src 속성을 사용하면 초기 디스플레이에서 요청할 수 있습니다.<turbo-frame src="./foo">
  • HTML만 설치되어 있고 JavaScript는 없습니다.
    • 무엇이 그리 좋은가
  • 모든 프레임에서 SPA
    • 가능
  • HTML로만 구성 가능
  • 설계자의 HTML은 직접 사용 가능
  • React 및 Vue 구문에 구애받지 않는 순수 HTML
  • 간편한 로드 지연
    • [Front-End] CSR vs SSR 🎈
    1. HTML&CSS의 기초 (4) CSS 이해하기_3

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage