htmx is not a typo

Transcript

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

   View Slide

2. ࣗݾ঺հ
   גࣜձࣾϛϊλέ ୅දऔక໾
   
   
   ʢօ༷ͷ͓͔͛Ͱ10प೥ʣ
   
   
   ޷͖ͳ΋ͷ : Django, htmx
   
   
   ࠷ۙͷڵຯ : Elixir, Go
   ͍͍ͩͨ͜ͷΞΠίϯͰ͢
   

   View Slide

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

   View Slide

4. htmxͱ͸
   https://htmx.org
   
   
   14kbͷJavaScriptϥΠϒϥϦ
   
   
   ґଘͳ͠
   
   
   ࡶͳઆ໌ : AjaxΛָʹ͢Δ΍ͭ
   

   View Slide

5. Thoughtworks Technology RadarʹࡌͬͨΑʂ
   

   View Slide

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

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. Hypermedia System
    

    View Slide

11. 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 Slide

12. View Slide

13. ಋೖͷܦҢ
    

    View Slide

14. ಋೖͷܦҢ
    Django ΞϓϦέʔγϣϯʢMPAʣͷ։ൃΛҾ͖ड
    ͚Δ͜ͱʹͳΔʢશମͷ૊৫ࣗମ΋খ͘͞ɺ։ൃ
    ऀ͸΄΅ࢲ͚ͩʣ
    
    
    Ϣʔβʔͷར༻୺຤΍ωοτϫʔΫඇྗͳ৔߹͕
    ଟ͍ͷͰɺJavaScriptଟ༻͸ආ͚͍ͨ
    
    
    HTMLΛ΍ΓͱΓ͢Δhtmxͷࢥ૝͕ັྗతͩͬͨ
    

    View Slide

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

    View Slide

16. ࣮ઓ౤ೖͯ͠1೥΄Ͳͷײ૝
    ొ৔ਓ෺͕গͳ͍ͷͰγϯϓϧ
    
    
    HTMLΛݟΔ͚ͩͰ΍Γ͍ͨ͜ͱ͕Θ͔Δ
    
    
    ΫϥΠΞϯτͰ׬͍݁ͨ͠΋ͷ͸ Alpine.js Λ࢖͏
    
    
    ඇৗʹୀ۶ʢॏཁʣˠ ࡞ΓํͰͳ͘࡞Δ΋ͷʹूத
    
    
    

    View Slide

17. ୯७Ͱୀ۶ͳhtmx
    
    
    ੋඇτϥΠͯ͠΄͍͠Ͱ͢
    

    View Slide

18. htmx is not a typo
    

    View Slide