Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SpringBootとhtmx
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
k_sasaki
August 31, 2023
Programming
720
1
Share
SpringBootとhtmx
SpringBootとhtmxについて書きました
k_sasaki
August 31, 2023
More Decks by k_sasaki
See All by k_sasaki
レガシーで硬直したテーブル設計から 変更容易で柔軟なテーブル設計にする
koheisasaki
0
13
SpringBoot x MyBatis x TestContainersでSQLテストを行う
koheisasaki
1
1.6k
Other Decks in Programming
See All in Programming
生成 AI 時代のスナップショットテストってやつを見せてあげますよ(α版)
ojun9
0
340
テレメトリーシグナルが導くパフォーマンス最適化 / Performance Optimization Driven by Telemetry Signals
seike460
PRO
2
210
安いハードウェアでVulkan
fadis
1
870
それはエンジニアリングの糧である:AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
nrslib
1
820
今からFlash開発できるわけないじゃん、ムリムリ! (※ムリじゃなかった!?)
arkw
0
180
Cyrius ーLinux非依存にコンテナをネイティブ実行する専用OSー
n4mlz
0
270
AI時代のシステム設計:ドメインモデルで変更しやすさを守る設計戦略
masuda220
PRO
6
1.2k
脱 雰囲気実装!AgentCoreを良い感じにWEBアプリケーションに組み込むために
takuyay0ne
3
430
Codex CLI でつくる、Issue から merge までの開発フロー
amata1219
0
280
Rethinking API Platform Filters
vinceamstoutz
0
5.5k
PHPで TLSのプロトコルを実装してみるをもう一度しゃべりたい
higaki_program
0
150
ネイティブアプリとWebフロントエンドのAPI通信ラッパーにおける共通化の勘所
suguruooki
0
230
Featured
See All Featured
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
110
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
1.9k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
440
How GitHub (no longer) Works
holman
316
150k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
430
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
95
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
WENDY [Excerpt]
tessaabrams
9
37k
AI Search: Where Are We & What Can We Do About It?
aleyda
0
7.2k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
92
Transcript
SpringBootとhtmx JJUGナイトセミナー 2023/08/31 @品川
自己紹介 氏名: 佐々木興平(@earu) 所属: エキサイト株式会社メディア事業部 主要開発技術: SpringBoot, Java, MySQL, PostgreSQL,
Redis, AWS, PHPなど... 仕事: 主にメディア開発
Web開発ってバックエンドも大事ですけど、フロント エンド大事ですよね?
バックエンドエンジニアがReact.jsとかVue.jsを追い かけるのは大変じゃないですか? 大変なこと... アップデートのスピードが速いフロントエンド界隈 割と発生する破壊的変更 Node.jsとの格闘 その他諸々
とはいえ、メリットもたくさん モダンなフロントエンド開発 - ホットリロード - ブラウザでのデバッグ - 単体テスト - コンポーネント指向
- ReactiveでリッチなUI/UX - その他たくさんあります
モダンなフロントエンド開発 - ホットリロード - ブラウザでのデバッグ - 単体テスト - コンポーネント指向 ReactiveでリッチなUI/UX
とはいえ、メリットもたくさん なるべく諦めたくない
そこで htmx です URL: https://htmx.org/essays/a-real-world-react-to-htmx-port/
htmxとは - 元はRailsのHotwireって技術っぽい。(LaravelだとLivewireという名称) - Javascript/TypeScriptをほとんど書かずにSPAを実現するJavaScriptライブ ラリ - Node.jsも不要 - サーバサイドはJSONの代わりにHTMLを返却する(JSONも可)
- WebSocket/ServerSentEventにも対応
デモ 動かなかった時用 下記にコードとかを載せています htmxをSpringBoot Thymeleafで試してみる(1)
React.jsやVue.jsや入れなくてもJQueryで頑張らなくてもSPAはでき るので、管理面くらいのクライアントライトな案件であれば、使って みてください。 まとめ
ご清聴ありがとうございました