Upgrade to Pro — share decks privately, control downloads, hide ads and more …

htmx is not a typo

kimihito
October 07, 2023

htmx is not a typo

kimihito

October 07, 2023
Tweet

More Decks by kimihito

Other Decks in Programming

Transcript

  1. htmx is not a typo
    https://github.com/kimihito
    ϋοΧʔζνϟϯϓϧʔ2023 LT

    View full-size slide

  2. ࣗݾ঺հ
    גࣜձࣾϛϊλέ ୅දऔక໾


    ʢօ༷ͷ͓͔͛Ͱ10प೥ʣ


    ޷͖ͳ΋ͷ : Django, htmx


    ࠷ۙͷڵຯ : Elixir, Go
    ͍͍ͩͨ͜ͷΞΠίϯͰ͢

    View full-size slide

  3. ຊτʔΫͷ໨ඪ
    htmxݕࡧͯ͠Ͷʂ

    View full-size slide

  4. htmxͱ͸
    https://htmx.org


    14kbͷJavaScriptϥΠϒϥϦ


    ґଘͳ͠


    ࡶͳઆ໌ : AjaxΛָʹ͢Δ΍ͭ

    View full-size slide

  5. Thoughtworks Technology RadarʹࡌͬͨΑʂ

    View full-size slide

  6. σϞ
    https://github.com/kimihito/hcmpl23-htmx-demo

    View full-size slide

  7. Hypermedia System

    View full-size slide

  8. Hypermedia system
    αʔόʔͰHTMLΛੜ੒ͯ͠ϒϥ΢βͰϨϯμϦϯά͢ΔچདྷͷΞϓϦέʔγϣ
    ϯʢWeb 1.0ΞϓϦέʔγϣϯʣͷ΍ΓํͰ΋͍͍Μ͡Όͳ͍


    Web 1.0ΞϓϦέʔγϣϯͰ͸ɺϢʔβ͕HTMLΛૢ࡞ʢHypermedia controlʣͰ
    ͖Δͷ͸ ͱ ͚ͩ


    htmx͸ ΍Ҏ֎Ͱ΋ϢʔβͷHypermedia controlΛ࣮ݱ͢Δ


    htmxͷػೳʢhx-boost΍hx-push-urlʣͰSPAͬΆ͍ͦΕͳΓͷUX͕ఏڙͰ͖Δ


    ࠷ۙͷJavaScriptϑϨʔϜϫʔΫ΁ͷΞϯνςʔθ


    View full-size slide

  9. ಋೖͷܦҢ

    View full-size slide

  10. ಋೖͷܦҢ
    Django ΞϓϦέʔγϣϯʢMPAʣͷ։ൃΛҾ͖ड
    ͚Δ͜ͱʹͳΔʢશମͷ૊৫ࣗମ΋খ͘͞ɺ։ൃ
    ऀ͸΄΅ࢲ͚ͩʣ


    Ϣʔβʔͷར༻୺຤΍ωοτϫʔΫඇྗͳ৔߹͕
    ଟ͍ͷͰɺJavaScriptଟ༻͸ආ͚͍ͨ


    HTMLΛ΍ΓͱΓ͢Δhtmxͷࢥ૝͕ັྗతͩͬͨ

    View full-size slide

  11. ࣮ઓ౤ೖͯ͠1೥΄Ͳͷײ૝

    View full-size slide

  12. ࣮ઓ౤ೖͯ͠1೥΄Ͳͷײ૝
    ొ৔ਓ෺͕গͳ͍ͷͰγϯϓϧ


    HTMLΛݟΔ͚ͩͰ΍Γ͍ͨ͜ͱ͕Θ͔Δ


    ΫϥΠΞϯτͰ׬͍݁ͨ͠΋ͷ͸ Alpine.js Λ࢖͏


    ඇৗʹୀ۶ʢॏཁʣˠ ࡞ΓํͰͳ͘࡞Δ΋ͷʹूத


    View full-size slide

  13. ୯७Ͱୀ۶ͳhtmx


    ੋඇτϥΠͯ͠΄͍͠Ͱ͢

    View full-size slide

  14. htmx is not a typo

    View full-size slide